0.1 Isotope for Contao

Quick start

The theme documentation covers these topics:

Requirements

Note

The theme can only be installed into an empty Contao installation and is compatible with Contao 4.4 or higher.

Contao 4

Contao 4 requires a web server such as Apache or NGINX with PHP and MySQL support. Our theme requires Contao 4.4 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

Note

The 0.1 Isotope Bundle can only be installed into an empty Contao installation and is compatible with Contao 4.4 or higher.

Tip

The following steps are only necessary for the first installation, not for an update of the theme. To update the theme, simply use the Contao Manager. Then open the install tool and update the database. A database backup never hurts!

Steps

1 / Adjust composer.json

Install the 0.1 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/zero-one-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/zero-one-isotope-bundle": "^1.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 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 0.1 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 zeroOne and copies the SQL files for the database import into the templates folder.

5 / Synchronize the Isotope files

Select the menu item 0.1 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'

Under the menu item 0.1 Theme Setup, empty the database table ’tl_files’ by clicking the button Empty table ’tl_files’. This step must be carried out before importing the database.

Note

Emptying the tl_files table deletes the image references. This is only necessary for the first installation of the theme.

7 / Import the attributes

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

Then clear the cache.

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

8 / Import the theme and Isotope demo data

Now import the template named 0.1_isotope_demo_contao_4.x.x.sql (depending on your Contao version) in the install tool. 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 spectre.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 zeroOne/scss) so that the styling is loaded:

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

Note

If your installation has a /web directory instead of /public, replace it in the path.

Also add the following line to activate the dark mode:

@import '../../../public/bundles/contaothemesnetzerooneisotope/scss/dark_mode';

Note

As of Contao 4.12 the publicly accessible subfolder was renamed from /web to /public. If your installation has a /web directory, use web instead of public in the import statement.

12 / Further extensions

If users should not only be able to order as guests but also register, install the extension terminal42/contao-autoregistration. In the settings of the website root under Member registration, activate the three checkboxes so that users are logged in and activated right after registering.

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.

Customization

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

Order confirmation

Why are no order confirmation emails sent?

For the order confirmation emails to be sent, the SMTP data still has to be entered. You find the settings in the Contao back end under the menu item Gateways (under Notification Center). Edit the entry Email Gateway and override the SMTP settings there.

Product list

How can I change the number of products per row?

Go to Themes, edit the front end modules of the theme (gear icon) and select the product list module. Under Template settings you can change the number in the field Columns. Under Gallery, also select the matching image size.

Content elements

How can I display a full-width slider in the header area?

This feature is only available as of 0.1 Isotope version 1.3.0.

The slider is based on the Spectre carousel and works completely without JavaScript, so no JavaScript template or jQuery has to be activated in the layout.

Create an article and add the classes carousel-home fullwidth in the article settings.

In the article, create the elements Content-Slider (Umschlag Anfang) (wrapper start) and Content-Slider (Umschlag Ende) (wrapper stop) and select the template ce_sliderStart_carousel or ce_sliderStop_carousel respectively.

Between the wrapper elements, create elements of type Teaserbox. Under Template settings, select ce_cthemes_teaserbox_carousel and for the image the image size Carousel Startseite (1920x970).

In the end it should look like this:

You find an example in the 0.1 Isotope demo

How can I adjust the height of the slider on the home page?

You can adjust the height of the slider with your own CSS in custom.scss.

e.g.

.carousel-home .carousel {
    height: 800px;
}

Images

Why are some images not displayed? (WEBP support)

If newer browsers try to load a WEBP image and it is not supported, an error may occur.

The error message may look something like this:

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.

Possible solutions:

#1 Update Imagine or have your host do it (use the latest version)

#2 Use an alternative image processing service

You can specify a different image processing service in config.yml; afterwards the cache has to be cleared. This often solves the problem already. If WEBP is supported, you should also be able to select it in the image sizes.

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

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

#3 Remove WEBP from the allowed file extensions

Add the following to config.yml and then clear the cache.

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

#4 Adjust the .htaccess

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

Other

How do I get nicer invoices?

Install the extension isotope/isotope_documents.

The extension ships various templates that you can select in the back end for the respective document.

How do I add a registration/login form to the shop?

So that users are activated right after registering and do not have to click a confirmation link in the email first, install the extension terminal42/contao-autoregistration.

Once the extension is installed, tick the following options in the website root under Member registration: activate automatically, log in automatically, log in automatically after activation.

Create a page “Anmeldung” (login) where the modules for the login and registration form are placed.

Under the menu item Member groups (Account manager), create a member group for the customers.

Now the modules have to be created or adjusted. For the login form, create a module of type Login form. Set the checkout page as redirect page and select the template mod_login_zeroone.

Also create a module of type Registration, select the fields to display and the member group. Select the checkout page as redirect page and assign the template member_grouped_zeroone to the module. Don’t forget to tick Allow login.

In the cart module, select the login page you just created as the redirect page for the checkout.

In the checkout module, select “Both allowed” as checkout method.

Finally, place the modules for login and registration in the article of the login page. If guest orders should also be possible, simply place a link that leads to the checkout.

When you are in the cart and want to continue to the checkout, you should now be redirected to the login page, where you can choose between continuing as a guest, logging in or registering.

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.

Tip

A database backup beforehand never hurts!

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

Note

Please check beforehand whether your issue is already known.

0.1 Isotope for Contao

Subsections of 0.1 Isotope

Requirements

Contao 4

Contao Manager

Installation

Steps

1 / Adjust composer.json

2 / Run Composer update

3 / Update the database

4 / Synchronize the theme files

5 / Synchronize the Isotope files

6 / Empty the table ’tl_files'

7 / Import the attributes

8 / Import the theme and Isotope demo data

9 / Recreate the symlinks

10 / Settings

11 / Import the CSS

12 / Further extensions

Notes

Customization

Order confirmation

Product list

Content elements

Images

Possible solutions:

Other

Update

Issues