Requirements

Contao 4

Contao 4 requires a web server such as Apache or NGINX with PHP and MySQL support. Our theme requires Contao 4.9 or higher and PHP 7.1.

Contao Manager

The theme can easily be installed via the Contao Manager. You find an installation guide here.

Installation

Steps

1 / Adjust composer.json

Install the ODD Isotope Bundle by editing the file composer.json in the Contao root directory. Add the following lines at the end of the file (as in the example composer.json below). Replace the domain and the password.

,
"repositories": [
  {
    "type": "composer",
    "url": "https://[DOMAIN]:[PASSWORT]@packages.contao.store"
  }
]

Add the following line at the end of require. Don’t forget the comma in the second-to-last line.

"contao-themes-net/odd-isotope-bundle": "^1.0"

Example of what composer.json should look like for Contao 4.13:

{
    "type": "project",
    "require": {
        "contao/calendar-bundle": "^4.13",
        "contao/comments-bundle": "^4.13",
        "contao/conflicts": "*@dev",
        "contao/faq-bundle": "^4.13",
        "contao/listing-bundle": "^4.13",
        "contao/manager-bundle": "4.13.*",
        "contao/news-bundle": "^4.13",
        "contao/newsletter-bundle": "^4.13",
        "contao-themes-net/odd-isotope-bundle": "^2.0"
    },
    "extra": {
        "contao-component-dir": "assets"
    },
    "scripts": {
        "post-install-cmd": [
            "@php vendor/bin/contao-setup"
        ],
        "post-update-cmd": [
            "@php vendor/bin/contao-setup"
        ]
    },
    "repositories": [
        {
            "type": "composer",
            "url": "https://BENUTZERNAME:PASSWORT@packages.contao.store"
        }
    ]
}

2 / Run Composer update

Now open the Contao Manager, click Update for all existing packages (i.e. only Contao) and run the update by clicking the button Apply changes at the bottom.

3 / Update the database

Then open the install tool and update the database. In the install tool you also have to create an admin user account.

You reach the install tool in the Contao Manager via the menu item Tools or via the URL: www.your-domain.com/contao/install.

4 / Synchronize the theme files

Log in to the back end with the user account you created and select the menu item ODD Theme Setup under CONTAO-THEMES-NET in the left navigation. Then click the button Synchronize theme files. This creates all files in the file manager under the folder ODD and copies the SQL files for the database import into the templates folder.

5 / Synchronize the Isotope files

Select the menu item ODD Isotope Setup under CONTAO-THEMES-NET in the left navigation and click the button Synchronize files to create all product images and move the SQL files into the templates folder so that they can be imported.

6 / Empty the table tl_files

Then empty the database table ’tl_files’ by clicking the button Empty table ’tl_files’ in the ODD Theme Setup.

7 / Import the attributes

In the install tool, import the template named odd_isotope_attributes.sql. Make sure to tick Do not truncate tables.

Then clear the cache.

When you open the install tool now, some new fields should be created. Update the database.

8 / Import the theme and Isotope demo data

In the install tool, import the template named odd_isotope_demo_contao_4.x.x.sql (depending on your Contao version). Make sure to tick Do not truncate tables.

For the import to work, Contao must be installed with the bundles for news, calendar, FAQ, newsletter, listing and comments.

If you don’t want to use these Contao bundles, you can uninstall them afterwards.

9 / Recreate the symlinks

Then switch back to the Contao back end, select the menu item System maintenance and recreate the symlinks by ticking Recreate the symlinks and then clicking the button Purge data.

10 / Settings

Under Advanced CSS settings, select the class set bootstrap4.json.

In addition, Use folder URLs must be active. You find it in the settings under Front end settings (up to Contao 4.10) or in the site structure in the settings of the website root under URL settings (Contao 4.11 and later).

11 / Import the CSS

Add the following line to custom.scss (file manager, under odd/scss) so that the styling is loaded:

@import '../../../public/bundles/contaothemesnetoddisotope/scss/isotope';

Notes

Error: This page isn’t working / The page redirected you too many times

Edit the website root and set the protocol under URL settings to http:// or https://, depending on how your site should be accessed.

Error: imagick not installed

If the error imagick not installed occurs with PHP 8.0, you can solve it with an adjustment in config.yml and clearing the cache afterwards. More information in the PDIR blog post (German)

Customization

You find the Isotope manual here: User manual (German)

Order confirmation

Product list

Content elements

Images

request.CRITICAL: Uncaught PHP Exception RuntimeException: "Image format "webp" is not supported in Imagine\Imagick\Imagine on this environment. Consider removing this format from contao.image.valid_extensions or switch the contao.image.imagine_service to an implementation that supports it. 

contao:
    image:
        image_service: 'contao.image.imagine.gd'

contao:
    image:
        image_service: 'contao.image.imagine.gmagick'

contao:
    image:
        valid_extensions:  
            - jpg
            - jpeg
            - gif
            - png
            - tif
            - tiff
            - bmp
            - svg
            - svgz

<IfModule mod_mime.c>
   AddType image/webp .webp
</IfModule>

Other

Update

You can update the theme easily via the Contao Manager. Then open the install tool and update the database.

If a problem occurs after the update, also have a look at our possible solutions.

Issues

If you ran into problems during installation or setup, or you found a display error of the theme in a particular browser, please create a new ticket at:

Ticket overview Create a new ticket