Template Bild mit Image::get und einer Bildgrössen Id ausgeben

[dirksche]

Hallo liebe Community,

in einem Template habe ich ein Bild über folgenden Code eingebunden:

<img src="<?php echo Image::get($this->produktbilder[0][0]->src, 300, 0, 'proportional'); ?>" loading="lazy" itemprop="image">

Nun würde ich gerne das Bescheiden des Bildes über die Contao Bildgrössen Funktion lösen und vielleicht auch ins WEBP Format konvertieren lassen.
Kann mir jemand einen Tipp geben?

LG
Dirk

[Spooky]

Dazu eignet sich Image::get nicht wirklich. Weil wenn du nach WebP konvertierst, willst du ja automatisch das komplette Markup mit <figure> und <picture> haben. Du solltest daher zumindest Controller::addImageToTemplate oder das Image Studio verwenden: https://docs.contao.org/dev/framework/image-processing/

[dirksche]

Hi Spooky,

ich nutze noch Contao 4.9, also kann ich das Image Studio noch nicht nutzen.
Folgendes habe ich nun versucht um die Bildgrössen der ID 5 einzubinden:

        $picture = \Picture::create($this->produktbilder[0][0]->src, 5)->getTemplateData();
        $this->insert('picture_default', $picture); 

Das <picture> Element mit den alternativen Bildgrössen wird auch richtig ausgegeben. Allerdings ohne webp.
Über das Bild Inhaltselement funktioniert die webp Ausgabe richtig. Nur in meinem angepassten Template nicht. Hast Du eine Idee?

LG
Dirk

[Spooky]

Ich würde Controller::addImageToTemplate benutzen: https://docs.contao.org/dev/framewor...essing/legacy/

[dirksche]

Ok, ich komme der Sache schon etwas näher.

    if (null !== ($objFile = \FilesModel::findByPath($this->produktbilder[0][0]->src)))
        {
            $objImageTemplate = new stdClass();
            \Controller::addImageToTemplate($objImageTemplate, [
              'singleSRC' => $objFile->path,
              'size' => [null, null, '5'],
              'floatClass' => $productclass,
            ], \Config::get('maxImageWidth'), null, $objFile);
            $this->insert('image', (array) $objImageTemplate);
        } 

2 Probleme habe ich noch:
Wenn mehr als 1 Produktbild definiert wurde, wird kein Bild ausgegeben. Normalerweise sollte er sich doch mit $this->produktbilder[0][0]->src immer das erste Bild ziehen?
Mit 'floatClass' => $productclass würde ich den <figure> gerne eine Klasse mitgeben, doch das scheint nicht zu funktionieren :-/

[dirksche]

Das Problem mit dem Bild habe ich lösen können: $this->produktbilder[0][0]->singleSRC
Fehlt nur noch das Setzen einer eigenen CSS Klasse mit 'floatClass'. Das kriege ich nicht hin :-(

[Spooky]

Versuche es mal so:

            $objImageTemplate = new stdClass();
            \Controller::addImageToTemplate($objImageTemplate, [
              'singleSRC' => $objFile->path,
              'size' => [null, null, '5'],
            ], \Config::get('maxImageWidth'), null, $objFile);

            $objImageTemplate->floatClass = ' productClass';

            $this->insert('image', (array) $objImageTemplate); 

[dirksche]

Yeah!!!
Danke Spooky. Du hast den Tag gerettet :-)

[Spooky]

@quenn das ist mittlerweile überholt . Besser:

<?= $this->figure($objFile, 5, ['options' => ['floatClass' => ' productClass']]) ?>

[quenn]

glaube das war der falsche thread @spooky

[Spooky]

glaube das war der falsche thread @spooky

In wie fern?

[quenn]

checke jetzt erst, dass du auf meinen like reagiert hast – alles klar, danke

[aitana]

Hallo zusammen

Gibt es vielleicht eine Möglichkeit, die Bildgrösse via ID auch einem Hintergrundbild mitzugeben?
Vielleicht via data-image-url?
Es geht um das template event_full.
Im Moment wird es so ausgegeben:

<div class="centered-wrapper-background" style="background-image: url('<?php echo $this->src ?>')"></div>

Ich weiss, das ist etwas off topic aber ich finde keinen passenderen Eintrag..