FAQ

The folder in the file manager may not be set to public. You can check this by editing the folder. Public must be ticked, otherwise the image is not displayed in the front end.

The theme has to load jQuery and the jQuery template j_colorbox. You can edit the layout in the back end under Themes via the third-to-last icon Edit the page layouts of theme ID 1.

For animated GIFs, do not set an image size in the image settings, otherwise the animation is lost.

Simply add an image element after the teaser box in the Intro article. The image is then displayed below the text.

Image on top

To display the image above the text, place the image element before the teaser box.

Image on the left

To place the image to the left of the text, add the class left-image in the settings of the parent article (wrench icon) under Expert settings.

Image on the right

To place the image to the right of the text, add the class right-image in the settings of the parent article (wrench icon) under Expert settings.

Image below, overlapping

To place the image below the text with a slight overlap, add the class image-overflow in the settings of the parent article (wrench icon) under Expert settings.

Add the following CSS to custom.scss and then reload the page with Ctrl + F5.

.intro .ce_ct_teaserBox .image>div {
    filter: none;
}

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:
        imagine_service: 'contao.image.imagine.gd'

or

contao:
    image:
        imagine_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>

Visitors who have already visited the website are usually served a cached file. If you want to prevent this, you can adjust the fe_page template.

Adjust the following template: fe_page_convert.html5.

To prevent the CSS file from being cached, you can append a timestamp to the file name, for example. In the line echo $combiner->getCombinedFile(); ?>">, insert the following before the quotation marks: ?date=<?= time() ?>

It should look like this:

<link rel="stylesheet" type="text/css" media="all" href="<?php
        // add stylesheets
        $combiner = new Combiner();
        $combiner->add($file->path);
        echo $combiner->getCombinedFile(); ?>?date=<?= time() ?>">