Bilder-Generierung in eigenem Helper

[rezico]

Hallo zusammen,
ich habe mir damals in Contao 4 einen eigenen Helper geschrieben um die Bildergenerierung für meine Templates zu vereinheitlichen...
diesen habe ich bereits etwas angepasst und nun geht es nur noch um die Bildergenerierung mit Hilfe eines $size Arrays das auch bereits existiert:

<?php

namespace VSM_HelperFunctions;

use Contao\FilesModel;
use Contao\System;
use Contao\StringUtil;
use Contao\Image\ResizeConfiguration;
use Contao\Image\PictureConfiguration;
use Contao\Image\PictureConfigurationItem;
use Contao\Image\ImageFactory;

class ImageHelper
{
    public static function generateImageHTML($imageSource, $altText = '', $headline = '', $size = null, $class = '', $inSlider = false, $lazy = true)
    {
        $imageObject = FilesModel::findByUuid($imageSource);

        $imageFactory = System::getContainer()->get('contao.image.factory');
        $globalLanguage = System::getContainer()->getParameter('kernel.default_locale');

        $currentLanguage = $GLOBALS['TL_LANGUAGE'] ?? $globalLanguage;

        if ($imageObject) {
            $imageMeta = StringUtil::deserialize($imageObject->meta, true);
            $meta = $imageMeta[$currentLanguage] ?? reset($imageMeta) ?? [];
        }


        // Bildgrößenkonfiguration definieren
        $config = new ResizeConfiguration();
        if ($size && is_array($size) && count($size) === 3) {
            [$width, $height, $mode] = $size;
            $config->setWidth($width)
                ->setHeight($height)
                ->setMode($mode);
        }

        $imageSrc = $imageObject->path;
        

        // Alt und Titel von Metadaten oder alternativ Text verwenden; Headline als Fallback für den Titel
        $alt = $meta['alt'] ?: ($meta['title'] ?: ($headline ?: ''));
        $title = $meta['title'] ?: ($headline ?: $altText);
        $link = $meta['link'] ?: '';
        $caption = $meta['caption'] ?: '';

        // Verwendet die Standardgröße [null, null, null], wenn $size null ist
        $sizeParams = $size ?: [null, null, null];

        // Erstellung des HTML-Links, falls vorhanden
        $linkStart = $link ? '<a href="' . htmlspecialchars($link) . '" title="' . htmlspecialchars($title) . '">' : '';
        $linkEnd = $link ? '</a>' : '';

        // Hinzufügen der Klasse, falls vorhanden
        // Erstellung des Bild-HTML-Codes
        if ($lazy) {
            if ($inSlider) {
                $classAttribute = $class ? ' class=" ' . htmlspecialchars($class) . '"' : ' class=""';
                $imageHTML = $linkStart . '<div class="swiper-lazy-preloader"></div><img' . $classAttribute . ' loading="lazy" src="' . $imageSrc . '" alt="' . htmlspecialchars($alt) . '" title="' . htmlspecialchars($title) . '">' . $linkEnd;
            } else {
                $classAttribute = $class ? ' class="lazy ' . htmlspecialchars($class) . '"' : ' class="lazy"';
                $imageHTML = $linkStart . '<img' . $classAttribute . ' loading="lazy" data-src="' . $imageSrc . '" alt="' . htmlspecialchars($alt) . '" title="' . htmlspecialchars($title) . '">' . $linkEnd;
            }
        } else {
            if ($inSlider) {
                $classAttribute = $class ? ' class=" ' . htmlspecialchars($class) . '"' : ' class=""';
                $imageHTML = $linkStart . '<img' . $classAttribute . '  src="' . $imageSrc . '" alt="' . htmlspecialchars($alt) . '" title="' . htmlspecialchars($title) . '">' . $linkEnd;
            } else {
                $classAttribute = $class ? ' class=" ' . htmlspecialchars($class) . '"' : ' ';
                $imageHTML = $linkStart . '<img' . $classAttribute . ' src="' . $imageSrc . '" alt="' . htmlspecialchars($alt) . '" title="' . htmlspecialchars($title) . '">' . $linkEnd;
            }

        }


        // Hinzufügen der Bildunterschrift, falls vorhanden
        if ($caption) {
            $imageHTML .= '<figcaption class="mt-1 text-muted fs-6">' . htmlspecialchars($caption) . '</figcaption>';
        }

        return $imageHTML;
    }
}

Ich probiere jetzt schon seit einigen Stunden aber ich komme einfach nicht weiter...

Ich möchte innerhalb von $imageSrc den Bildpfad eines generierten Bildes nutzen.

Wie geht das in Contao 5.3 ?
Ich möchte nicht den FigureBuilder o. ä. nutzen, ich möchte einfach nur den Bildpfad eines Bildes.

DANKE und schönes Wochenende!

Liebe Grüße,

Christian

PS: Das ist übrigens der Bildaufruf im Template (Rocksolid Custom Elements-Element)

 <?= VSM_HelperFunctions\ImageHelper::generateImageHTML($data, null, $this->headline, $this->size, null, true); ?>

$data ist in diesem Fall die UUID des Bildes.

[do_while]

Die Bilder werden erst erstellt, wenn sie zur Anzeige abgerufen werden.
Wenn Du das Bild vorher benötigst, kannst Du es vorab mit

(new File( $src ))->createIfDeferred(); 

erstellen lassen.

[rezico]

Lieben Dank dir erst einmal für die Rückmeldung
Ich bin aber ganz ehrlich, keine Ahnung was ich jetzt an meinem Code oben anpassen soll :-)

Evtl. kannst du ja etwas konkretisieren was zu tun ist.

DANKE!

[rezico]

Ich hab es hinbekommen... was für ein Act.

<?php

namespace VSM_HelperFunctions;

use Contao\FilesModel;
use Contao\System;
use Contao\StringUtil;
use Contao\Image\ResizeConfiguration;


class ImageHelper
{
    public static function generateImageHTML($imageSource, $altText = '', $headline = '', $size = null, $class = '', $inSlider = false, $colorBox = false, $lazy = true)
    {
        $imageObject = FilesModel::findByUuid($imageSource);
        $originalSrc = $imageObject->path;
        $rootDir = System::getContainer()->getParameter('kernel.project_dir');
        $globalLanguage = System::getContainer()->getParameter('kernel.default_locale');
        $imageFactory = System::getContainer()->get('contao.image.factory');

        $currentLanguage = $GLOBALS['TL_LANGUAGE'] ?? $globalLanguage;

        if ($imageObject) {
            $imageMeta = StringUtil::deserialize($imageObject->meta, true);
            $meta = $imageMeta[$currentLanguage] ?? reset($imageMeta) ?? [];
        }


        // Bildgrößenkonfiguration definieren
        $config = new ResizeConfiguration();
        if ($size && is_array($size) && count($size) === 3) {
            [$width, $height, $mode] = $size;
            $config->setWidth($width)
                ->setHeight($height)
                ->setMode($mode);
        }

        $relativeImagePath = $imageObject->path;

        $absoluteImagePath = $rootDir . '/' . $relativeImagePath;


        try {
            $processedImage = $imageFactory->create($absoluteImagePath, $config);
            $imageSrc = $processedImage->getPath();
        } catch (\Exception $e) {
            echo "Fehler beim Bearbeiten des Bildes: " . $e->getMessage();
        }


        $imageSrc = str_replace($rootDir, "", $imageSrc);

        // Alt und Titel von Metadaten oder alternativ Text verwenden; Headline als Fallback für den Titel
        $alt = $meta['alt'] ?? $meta['title'] ?? $altText ?? $headline ?? '';
        $title = $headline ?? $meta['title'] ?? $meta['alt'] ?? $altText ?? '';
        $link = $meta['link'] ?: '';
        $caption = $meta['caption'] ?: '';

        // Verwendet die Standardgröße [null, null, null], wenn $size null ist
        $sizeParams = $size ?: [null, null, null];

        // Erstellung des HTML-Links, falls vorhanden
        $linkStart = $link ? '<a href="' . htmlspecialchars($link) . '" title="' . htmlspecialchars($title) . '">' : '';
        $linkEnd = $link ? '</a>' : '';

        // Hinzufügen der Klasse, falls vorhanden
        // Erstellung des Bild-HTML-Codes

        if (!empty($colorBox)) {
            $linkStart = '<a href="' . htmlspecialchars($originalSrc) . '" class="group_' . htmlspecialchars($colorBox) . ' bts-cboxElement cboxElement">';
            $linkEnd = '</a>';
        } else {
            $linkStart = '';
            $linkEnd = '';
        }

        if ($lazy) {
            if ($inSlider) {
                $classAttribute = $class ? ' class="' . htmlspecialchars($class) . '"' : ' class=""';
                $imageHTML = $linkStart . '<div class="swiper-lazy-preloader"></div><img' . $classAttribute . ' loading="lazy" src="' . htmlspecialchars($imageSrc) . '" alt="' . htmlspecialchars($alt) . '" title="' . htmlspecialchars($title) . '">' . $linkEnd;
            } else {
                $classAttribute = $class ? ' class="lazy ' . htmlspecialchars($class) . '"' : ' class="lazy"';
                $imageHTML = $linkStart . '<img' . $classAttribute . ' loading="lazy" data-src="' . htmlspecialchars($imageSrc) . '" alt="' . htmlspecialchars($alt) . '" title="' . htmlspecialchars($title) . '">' . $linkEnd;
            }
        } else {
            if ($inSlider) {
                $classAttribute = $class ? ' class="' . htmlspecialchars($class) . '"' : ' class=""';
                $imageHTML = $linkStart . '<img' . $classAttribute . ' src="' . htmlspecialchars($imageSrc) . '" alt="' . htmlspecialchars($alt) . '" title="' . htmlspecialchars($title) . '">' . $linkEnd;
            } else {
                $classAttribute = $class ? ' class="' . htmlspecialchars($class) . '"' : ' ';
                $imageHTML = $linkStart . '<img' . $classAttribute . ' src="' . htmlspecialchars($imageSrc) . '" alt="' . htmlspecialchars($alt) . '" title="' . htmlspecialchars($title) . '">' . $linkEnd;
            }
        }


        // Hinzufügen der Bildunterschrift, falls vorhanden
        if ($caption) {
            $imageHTML .= '<figcaption class="">' . htmlspecialchars($caption) . '</figcaption>';
        }

        return $imageHTML;
    }
}

[Spooky]

Wozu genau brauchst du das alles überhaupt?

[rezico]

Ich habe mittler weile über 25 eigene Custom-Elements in denen ich ein paar Dinge wie die Ausgabe von Buttons, Headlines und eben auch Bilder standardisiert habe. Dafür habe ich mir die 3 Helper gebaut.
Selbst der FigureBuilder hilft mir nur bedingt und ist im Template dann zu komplex wenn ich diese ganzen Parameter und Optionen haben möchte. Beispielsweise auch die Übergabe des Alt-Texts / Titles bzw. dann die Nutzung der Metadaten der Datei, Verwendung des Links in den Meta-Daten der Datei bzw. der Metadaten generell, Lazyloading, Nutzung innerhalb eines Sliders usw.

Daher hatte ich mir das damals zusammengebaut und konnte so die jeweiligen Elemente mit nur einer Zeile Code in die Templates integrieren, außerdem habe ich so natürlich die Möglichkeit die Helper um weitere Funktionen zu erweitern falls ich möchte.

Das hat bei der Migration nach Contao 5 auch alles soweit funktioniert nur bei der Generierung von Bildern bin ich einfach nicht dahinter gestiegen.

[Spooky]

Beispielsweise auch die Übergabe des Alt-Texts / Titles bzw. dann die Nutzung der Metadaten der Datei, Verwendung des Links in den Meta-Daten der Datei bzw. der Metadaten generell, Lazyloading, Nutzung innerhalb eines Sliders usw.

Das macht Contao ja alles schon von Haus aus, daher die Frage warum genau du die eigene Lösung brauchst.

[rezico]

Also ich lasse mich gerne vom Gegenteil überzeugen, aber mir ist keine Möglichkeit bekannt das mit Contao-Hausmitteln zu bewerkstelligen:

<?php

namespace VSM_HelperFunctions;

use Contao\FilesModel;
use Contao\System;
use Contao\StringUtil;
use Contao\Image\ResizeConfiguration;


class ImageHelper
{
    public static function generateImageHTML($imageSource, $altText = '', $headline = '', $size = null, $class = '', $inSlider = false, $colorBox = false, $lazy = true)
    {
        $imageObject = FilesModel::findByUuid($imageSource);
        $originalSrc = $imageObject->path;
        $rootDir = System::getContainer()->getParameter('kernel.project_dir');
        $globalLanguage = System::getContainer()->getParameter('kernel.default_locale');
        $imageFactory = System::getContainer()->get('contao.image.factory');

        $currentLanguage = $GLOBALS['TL_LANGUAGE'] ?? $globalLanguage;

        if ($imageObject) {
            $imageMeta = StringUtil::deserialize($imageObject->meta, true);
            $meta = $imageMeta[$currentLanguage] ?? reset($imageMeta) ?? [];
        }


        // Bildgrößenkonfiguration definieren
        $config = new ResizeConfiguration();
        if ($size && is_array($size) && count($size) === 3) {
            [$width, $height, $mode] = $size;
            $config->setWidth($width)
                ->setHeight($height)
                ->setMode($mode);
        }

        $relativeImagePath = $imageObject->path;
        $absoluteImagePath = $rootDir . '/' . $relativeImagePath;


        try {
            $processedImage = $imageFactory->create($absoluteImagePath, $config);
            $imageSrc = $processedImage->getPath();
        } catch (\Exception $e) {
            echo "Fehler beim Bearbeiten des Bildes: " . $e->getMessage();
        }

        $imageSrc = str_replace($rootDir, "", $imageSrc);
        $alt = $meta['alt'] ?? $meta['title'] ?? $altText ?? $headline ?? '';
        $title = $headline ?: $meta['title'] ?: $meta['alt'] ?: $altText ?: '';
        $link = $meta['link'] ?: '';
        $caption = $meta['caption'] ?: '';

        // Verwendet die Standardgröße [null, null, null], wenn $size null ist
        $sizeParams = $size ?: [null, null, null];

        // Hinzufügen der Klasse, falls vorhanden
        // Erstellung des Bild-HTML-Codes
        if (!empty($colorBox)) {
            $linkStart = '<a title="' . $title . '" data-gall="group_' . htmlspecialchars($colorBox) . '" href="' . htmlspecialchars($originalSrc) . '" class="lightbox_' . htmlspecialchars($colorBox) . '">';
            $linkEnd = '</a>';
        } else {
            if (!empty($link)) {
                // Erstellung des HTML-Links, falls vorhanden
                $linkStart = $link ? '<a href="' . htmlspecialchars($link) . '" title="' . htmlspecialchars($title) . '">' : '';
                $linkEnd = $link ? '</a>' : '';
            } else {
                $linkStart = '';
                $linkEnd = '';
            }
        }

        if ($lazy) {
            if ($inSlider) {
                $classAttribute = $class ? ' class="' . htmlspecialchars($class) . '"' : ' class=""';
                $imageHTML = $linkStart . '<div class="swiper-lazy-preloader"></div><img' . $classAttribute . ' loading="lazy" src="' . htmlspecialchars($imageSrc) . '" alt="' . htmlspecialchars($alt) . '" title="' . htmlspecialchars($title) . '">' . $linkEnd;
            } else {
                $classAttribute = $class ? ' class="lazy ' . htmlspecialchars($class) . '"' : ' class="lazy"';
                $imageHTML = $linkStart . '<img' . $classAttribute . ' loading="lazy" data-src="' . htmlspecialchars($imageSrc) . '" alt="' . htmlspecialchars($alt) . '" title="' . htmlspecialchars($title) . '">' . $linkEnd;
            }
        } else {
            if ($inSlider) {
                $classAttribute = $class ? ' class="' . htmlspecialchars($class) . '"' : ' class=""';
                $imageHTML = $linkStart . '<img' . $classAttribute . ' src="' . htmlspecialchars($imageSrc) . '" alt="' . htmlspecialchars($alt) . '" title="' . htmlspecialchars($title) . '">' . $linkEnd;
            } else {
                $classAttribute = $class ? ' class="' . htmlspecialchars($class) . '"' : ' ';
                $imageHTML = $linkStart . '<img' . $classAttribute . ' src="' . htmlspecialchars($imageSrc) . '" alt="' . htmlspecialchars($alt) . '" title="' . htmlspecialchars($title) . '">' . $linkEnd;
            }
        }

        // Hinzufügen der Bildunterschrift, falls vorhanden
        if ($caption) {
            $imageHTML .= '<figcaption class="">' . htmlspecialchars($caption) . '</figcaption>';
        }

        return $imageHTML;
    }
}

Und im Template

 <?= VSM_HelperFunctions\ImageHelper::generateImageHTML($data, $this->headline, strip_tags($data->slide_text), $this->size, null, true, $rand); ?>

Falls das selbe mit Contao und Hausmitteln in dieser kurzen Form (innerhalb des Templates) möglich ist, schieß los :-) Je weniger Ballast desto besser.

Danke und nice weekend!

[Spooky]

Das ist zu viel Code um herauszulesen, was genau du benötigst. Es ist denke ich einfacher zu beschreiben, was dir bei den bestehenden Lösungen fehlt.