Arbeiten mit Bildern in Templates

Für die Ausgabe von einem oder mehreren Bildern in MetaModels steht das Attribut Datei zur Verfügung. Zur Auswahl einer Datei oder mehrere Dateien gibt es in der Eingabemaske einen Button der ein Popup zur Ansicht der Dateiverwaltung öffnet.

In den Grundeinstellungen des Attributes kann man verschiedene Optionen setzen wie Basispfad, ein oder mehrere Auswahlen, Dateitypen usw.

Bilddateien möchte man in den meisten Fällen auch als Bild ausgeben. Die Einstellungen hierfür finden sich für das Attribut in den Rendersettings. Hier ist die Checkbox „Als Bildfeld mit Vorschaubild benutzen“ zu setzen sowie eine Bildgröße zu wählen (das gilt auch für Anzeige im BE in der Listendarstellung). Optional ist die Auswahl eines Platzhalterbilds möglich als auch eine Ansicht in einer Lightbox.

Die Einstellung gilt für die Anzeige sowohl für das FE als auch im BE (sofern dort die Bilder ausgegeben werden).

In einem individuellen Template im FE ist für die Darstellung als Bild die Ausgabe des html5-Knotens notwendig -
z. B. <?= $arrItem['html5']['my_image'] ?>.

Über die Auswahl bzw. Anpassung des Templates für das Attribut, können weitere Anforderungen für die Ausgabe gesetzt werden wie z. B. Auflistung als ul oder div, Markup für Galerien oder Slider usw.

Diese Ausgaben und Anpassungsmöglichkeiten reichen für eine Vielzahl an Ausgabewünschen aus. Wenn aber Bilder ausgegeben werden sollten, die z. B. über eine Relation eingebunden sind - über den raw-Knoten -, dann stehen diese nur als Originalbild über den Pfad bzw. UUID zur Verfügung.

Um auch diese Bilder im eigenen Template zu manipulieren, sollen die folgenden Snippets eine Hilfestellung geben.

Mehr zu den Methoden ist im Contao-Handbuch bei Image processing zu finden.

Zum Thema responsive Images gibt es einen (noch immer aktuellen) Vortrag von Peter Müller von der CK2016.

Ausgabe eines Bildes, das per Einzelauswahl eingebunden ist

Insert-Tags

siehe Insert-Tags

1<?php if (!empty($arrItem['raw']['speaker']['biography_image']): ?>
2    {{image::<?= $arrItem['raw']['speaker']['biography_image'] ?>?width=180&height=180&mode=crop&class=img--circle}}
3    <!-- ODER -->
4    {{picture::<?= $arrItem['raw']['speaker']['biography_image'] ?>?size=_image_circle}}
5    <!-- ODER -->
6    {{figure::<?= $arrItem['raw']['speaker']['biography_image'] ?>?size=_image_circle&metadata[title]=<?= $arrItem['raw']['speaker']['full_name'] ?>}}
7<?php endif; ?>

Beispiel für $size (siehe):

 1# config/config.yml
 2contao:
 3    image:
 4        sizes:
 5            _defaults:
 6                formats:
 7                    jpg: [webp, jpg]
 8                    webp: [webp, jpg]
 9                    png: [webp, png]
10                densities: 0.5x, 2x, 3x
11                lazy_loading: true
12                resize_mode: proportional
13            image_circle:
14                width: 180
15                height: 180
16                resize_mode: crop
17                zoom: 100
18                css_class: img--circle

Image-Studio FigureRenderer

  • $from: Pfad zur Datei

  • $size: s. o.

  • $configuration: Konfigurationsangaben z. B. Metadaten

  • $template: Ausgabetemplate

1<?php
2if (!empty($arrItem['raw']['speaker']['biography_image'])) {
3   $from          = $arrItem['raw']['speaker']['biography_image'];
4   $size          = '_image_circle';
5   $configuration = [];
6   $template      = 'image';
7   echo $container->get('contao.image.studio.figure_renderer')->render($from, $size, $configuration, $template);
8}
9?>

Image-Studio FigureBuilder

siehe FigureBuilder

  • fromPath: Pfad zur Datei

  • setSize: s. o.

  • $configuration: Konfigurationsangaben z. B. Metadaten

  • $template: Ausgabetemplate

 1<?php
 2if (!empty($arrItem['raw']['speaker']['biography_image'])) {
 3    $figure = $container
 4      ->get('contao.image.studio')
 5      ->createFigureBuilder()
 6      ->fromPath($arrItem['raw']['speaker']['biography_image'])
 7      ->setSize('_image_circle')
 8      ->build();
 9
10    $template = new FrontendTemplate('image');
11
12    $figure->applyLegacyTemplateData($template);
13    //$template->setData($figure->getLegacyTemplateData()); // Alternative
14    echo $template->parse();
15}
16?>

Image-Studio PictureFactory

siehe PictureFactory

  • setSize: s. o.

  • $data: Bilddaten + Metadaten

  • $pictureTemplate: Ausgabetemplate

 1<?php
 2// würde man in Helper auslagern
 3use Contao\FrontendTemplate;
 4use Contao\StringUtil;
 5use Contao\System;
 6
 7$container      = System::getContainer();
 8$rootDir        = $container->getParameter('kernel.project_dir');
 9$pictureFactory = $container->get('contao.image.picture_factory');
10
11// ...
12if (!empty($arrItem['raw']['speaker']['biography_image'])) {
13   $staticUrl = $container->get('contao.assets.files_context')->getStaticUrl();
14   $picture   = $pictureFactory->create($rootDir . '/' . $arrItem['raw']['speaker']['biography_image'], '_image_circle');
15
16   $data = [
17      'img'     => $picture->getImg($rootDir, $staticUrl),
18      'sources' => $picture->getSources($rootDir, $staticUrl),
19      'alt'     => StringUtil::specialcharsAttribute(''),
20      'class'   => StringUtil::specialcharsAttribute(''),
21   ];
22
23   $pictureTemplate = new FrontendTemplate('picture_default');
24   $pictureTemplate->setData($data);
25
26   echo $pictureTemplate->parse();
27}
28?>

Bemerkung

Die Seite kann gern um weitere Snippets ergänzt werden - sobald MM auch mit Twig-Templates arbeitet, wird die Seite angepasst