Bilder verkleinern in Twig Template

[rolandschuetz]

Hallo,

in meinem mce_text.html.twig Template bekomme ich ein Bild, dieses würde ich gerne auf eine Maximal-Breite meiner Layoutspalte reduzieren. In normalen Contao-Templates würde ich Image::get verwenden, gibt es ähnliches für twig?

Danke im Voraus,
Roland

[rolandschuetz]

Wie kann ich eigene Twig Filter erstellen?

Ich konnte keine Möglichkeit finden diese in Avisota zu registrieren und ich konnte keine Möglichkeit finden Zugriff auf das Twig_Environment zu kriegen um es manuell zu registrieren.
Habt ihr eine Idee?

Danke,
Roland

[rolandschuetz]

Ich habe die Lösung gefunden:

Man kann weitere Twig filter registrieren und diese können dann die Contao Image-Klasse verwenden, z.B. so:

// Register additional filters for Avisota twig templates
$GLOBALS['TL_HOOKS']['initializeTwig'][] = array('ExtendedTwig', 'hookInitializeTwig');
if(!class_exists('ExtendedTwig')) {
    class ExtendedTwig {
        public function hookInitializeTwig(ContaoTwig $contaoTwig) {
            /** @var Twig_Environment $twig */
            $twig = $contaoTwig->getEnvironment();

            // add a new image resize filter
            $twig->addFilter(new \Twig_SimpleFilter('resize', function($imagePath, $width, $height, $mode='proportional') {
                return \Image::get($imagePath, $width, $height, $mode);
            }));

            // methods to retrieve the image width and height
            $twig->addFilter(new \Twig_SimpleFilter('width', function($imagePath) {
                if(substr($imagePath, 0, strlen(TL_ROOT)) != TL_ROOT) {
                    // the TL_ROOT in fron is missing, add it
                    $imagePath = TL_ROOT . (substr($imagePath, 0, 1)=='/' ? '' : '/') . $imagePath;
                }
                list($width, $height, $type, $attr) = getimagesize($imagePath);
                return $width;
            }));
            $twig->addFilter(new \Twig_SimpleFilter('height', function($imagePath) {
                if(substr($imagePath, 0, strlen(TL_ROOT)) != TL_ROOT) {
                    // the TL_ROOT in fron is missing, add it
                    $imagePath = TL_ROOT . (substr($imagePath, 0, 1)=='/' ? '' : '/') . $imagePath;
                }
                list($width, $height, $type, $attr) = getimagesize($imagePath);
                return $height;
            }));
        }
    }
} 

Beispiel-Nutzung im Template:

><img src="{{myImage|resize(288,500)}}" width="{{myImage|resize(288,500)|width}}" height="{{myImage|resize(288,500)|height}}" alt="Lala" />

Liebe Grüße,
Roland

[tril]

Hallo Roland,

leider hast du in der E-Mail nur gefragt wie man eine Twig Extension registriert, ich war zu deiner Frage hier im Forum einfach noch nicht gekommen
Du hättest dir die Arbeit sparen können, denn die Twig Integration liefert dir bereits die Möglichkeit, auf die Contao Image Funktionen zuzugreifen:
http://de.contaowiki.org/Twig#image_Funktion.2FFilter

Anstatt:

<img src="{{myImage|resize(288,500)}}" width="{{myImage|resize(288,500)|width}}" height="{{myImage|resize(288,500)|height}}" alt="Lala" /> 

Machtes einfach:

{{ image(myImage, { width: 288, height: 500, alt: "Lala" }) }} 

MfG Tristan