Legacy

Info

This section only applies to Contao versions prior to 4.10. For later versions use the Image Studio features and templates instead.

Using images in Contao templates

If you have a DCA with an image and an image size field, you can use the Contao\Controller::addImageToTemplate() method to get all the data that is needed to use the image in the image.html5 template. This method can be used like this:

use Contao\FrontendTemplate;
use Contao\FilesModel;
use Contao\Controller;

$template = new FrontendTemplate('mod_mymodule');
$image = FilesModel::findByUuid($uuid);

Controller::addImageToTemplate($template, [
    'singleSRC' => $image->path,
    'size' => $size,
], null, null, $image);

The second argument is an array supporting the following optional parameters:

Key	Description
`singleSRC`	Path of the source image.
`size`	Size array for the desired image size.
`imagemargin`	Serialized array containing image margin values.
`fullsize`	Boolean value defining whether to open the link target of the image in a new window or a lightbox.
`overwriteMeta`	Boolean value defining whether to overwrite any meta data that is extracted from the `FilesModel` (last parameter).
`imageUrl`	Link target of the image.
`imageTitle`	Title of the image.
`linkTitle`/`title`	Link title of the image.
`alt`	The `alt` attribute for the image.
`caption`	Caption for the image.
`floating`	Floating setting of the image (`above`, `below`, `left` or `right`). Will be used as a CSS class prepended with `float_`.
`floatClass`	Custom CSS class for the `<figure>`. Needs to prepended with a space. Note: will be overridden, if `floating` is defined.
`lightboxSize`	Size array for the lightbox image, if applicable.

In the template itself the image can then be inserted with <?php $this->insert('image', $this->arrData); ?>. This creates a <figure class="image_container"> containing the image, an image link and a caption if one was specified.

To use the image without the boilerplate code around it <?php $this->insert('picture_default', $this->picture); ?> can be used instead.