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.