Bild ausgeben in Contao 4.4: DCA Modulerweiterung (Nachrichten-Titelbild)

Zusätzlich zum Teaser-Bild möchte ich bei Nachrichten in Contao 4.4 auch individuelle Titelbilder zuweisen können.

Dazu bin ich zunächst der alten Anleitung von Contao 3.2 gefolgt und habe eine Modulerweiterung vorbereitet:

1) Unter /system/modules/news-image-extention/dca/tl_news.php

PHP-Code:

---

<?php
if( !empty($GLOBALS['TL_DCA']['tl_news']) ) {
  // Anpassen der Palette
  $GLOBALS['TL_DCA']['tl_news']['palettes']['default'] = str_replace(
    'addImage',
    'coverSRC,addImage',
    $GLOBALS['TL_DCA']['tl_news']['palettes']['default']
  );
  // Feld-Konfiguration
  $GLOBALS['TL_DCA']['tl_news']['fields']['coverSRC'] = array(
    'label'       => &$GLOBALS['TL_LANG']['tl_news']['coverSRC'],
    'exclude'     => true,
    'inputType'   => 'fileTree',
    'eval'        => array('fieldType'=>'radio', 'filesOnly'=>true, 'extensions'=>Config::get('validImageTypes'), 'mandatory'=>false),
    'sql'         => "binary(16) NULL"
  );
}
?>

---

2) Unter /system/modules/news-image-extension/languages/de/tl_news.php

PHP-Code:

---

<?php
$GLOBALS['TL_LANG']['tl_news']['coverSRC'] = array(
  'Titelbild',
  'Ein Titelbild für die Nachrichten-Detailseite auswählen'
);
?>

---

3) Danach habe ich den "Prod"-Cache gelöscht, das Install-Tool unter /contao/install aufgerufen und die Datenbank aktualisiert. Die Auswahl eines Titelbildes im Backend funktioniert damit bereits.

Nun soll das Titelbild auch auf der Nachrichten-Detailseite ausgeben werden, was mit folgendem Code prinzipiell schon funktioniert:

PHP-Code:

---

<?php
  // Pfad fuer das Titelbild ermitteln
  if ( trim($this->coverSRC) ) {
    $fileModel = \FilesModel::findByUuid($this->coverSRC);
    if ($fileModel !== null && is_file(TL_ROOT . '/' . $fileModel->path)) {
      $this->coverSRC = $fileModel->path;
    }
  }

  // Titelbild-Ausgabe vorbereiten (Picture-Element)
  // ID der gewünschten Bildgröße = 11 (die Bildgrößen sind im Theme definiert)
  $arrPicture = \Picture::create($this->coverSRC, 11)->getTemplateData(); 
  $objTemplate = new \FrontendTemplate('picture_default'); 
  $objTemplate->setData($arrPicture);
?>

<figure class="image_container">
  <?php echo $objTemplate->parse(); ?>
</figure>

---

Das Bild wird als Picture-Element mit den unterschiedlichen Bildgrößen (wie im Theme definiert) für ein responsives Design ausgegeben.

Leider fehlen in der HTML-Ausgabe des Bildes aber die im Dateimanager beim Bild angegebenen ALT- und TITLE-Attribute (Bildbeschreibung). Wie bekomme ich die hier noch rein?

----------------------

Und zweite Frage: Gibt es vielleicht einen weniger umständlichen Weg, das Bild aus dem ergänzten DCA-Feld im Template auszugeben?

Vielleicht so ähnlich wie mit den Rocksolid Custom Elements?

PHP-Code:

---

if ($image = $this->getImageObject($this->coverSRC, array('', '', 11))) {
  echo $this->insert('picture_default', $image->picture);
} 


---

Bei GitHub entdeckt: Die Funktion Picture::create() ist bei Contao 4 „deprecated“, sollte also nicht mehr verwendet werden.

Mit folgender Template-Änderung wird das Bild in Contao 4 auch ausgegeben, aber leider ebenfalls ohne ALT und TITLE-Tags:

PHP-Code:

---

<?php 
  if ( $this->coverSRC ) {
    $file = \FilesModel::findByUuid($this->coverSRC);
    // Pfad fuer das Bild ermitteln
    $path = $file->path;
  }

  if (isset($path) && file_exists(TL_ROOT . '/' . $files->path)) {
    // ID der gewünschten Bildgröße = 11 (die Bildgrößen sind im Theme definiert)
    $imageSize = 11;

    $container = System::getContainer();
    $rootDir = $container->getParameter('kernel.project_dir');

    $picture = $container
      ->get('contao.image.picture_factory')
      ->create($rootDir.'/'.$path, $imageSize)
    ;

    $pictureData = [
      'img' => $picture->getImg($rootDir),
      'sources' => $picture->getSources($rootDir),
    ];

    $objTemplate = new \FrontendTemplate('picture_default'); 
    $objTemplate->setData($pictureData);

    echo '<figure class="image_container">'."\n";
    echo $objTemplate->parse();
    echo '</figure>'."\n";
  }
?>

---

Wenn ich mir den Inhalt der Variable $file ausgeben lasse, gibt es dort einen String, der die ganzen Metadaten enthält. Die Frage ist, wie ich da rankomme und definieren kann, dass diese im Template mit ausgegeben werden?

Ich vermute inzwischen, dass es der falsche Ansatz ist, die Bilddaten im Template zu ermitteln. Müsste ich in der Modulerweiterung noch einen Ordner classes anlegen und dort etwas eintragen (was?), damit im Template die Meta-Daten den neuen Bildes verfügbar sind?

Es sollte doch irgendwie möglich sein, in Contao 4 eigene Felder für zusätzliche Bilder zu ergänzen und diese dann auch auszugeben?! Ich komme da leider nicht weiter und wäre für eine Anleitung oder Tipps sehr dankbar.

Moderation: Thema in das Entwickler-Fragen Forum verschoben.

Du solltest deinen Code vielleicht lieber in ein eigenes Template geben und dann die Funktion \Controller::addImageToTemplate verwenden - dann brauchst du dich nicht selbst darum kümmern.

Hallo Spooky, danke für die Antwort. Leider hilft mir diese Info nicht weiter :/

Zitat:

---

Code vielleicht lieber in ein eigenes Template geben

---

Mit Template meinst du in diesem Fall aber nicht eine html5-Datei? Weil genau darin habe ich den oben genannten Code für die Ausgabe des Bildes ja eingegeben (im konkreten Fall unter /templates/news_coverimage.html5, welches dem Nachrichtenleser-Modul zugewiesen wurde)

Oder meintest du, ich soll in meiner Modulerweiterung unter /system/modules/news-image-extension/templates/ eine zusätzliche html5-Template-Datei anlegen? Falls ja, wie müsste die heißen, oder wäre das egal? Und was würde das bringen, kann man in einem solchen Template überhaupt die Funktion \Controller::addImageToTemplate verwenden, ist das nicht widersprüchlich (im Template sagen, dass etwas im Template bereit gestellt werden soll)? Und dann wäre nach wie vor die Frage, wie ich in diesem separaten Template an die MetaDaten des Bildes rankomme, bzw. diese mit \Controller::addImageToTemplate an das "eigentliche" Template übergeben kann... Ich werde daraus leider nicht schlau.

Ich habe mal nach der von dir genannten Funktion \Controller::addImageToTemplate gesucht und sie z.B. hier gefunden:
/vendor/contao/core-bundle/src/Resources/contao/elements/ContentImage.php

Diese Datei habe ich mit kleinen Änderungen hier hin kopiert:
/system/modules/news-image-extension/elements/NewsCoverImage.php:

PHP-Code:

---

<?php

namespace NewsCoverImage;

class NewsCoverImage extends \ContentElement {

    protected $objFilesModel;


    public function generate() {
        if ($this->coverSRC == '') {
            return '';
        }

        $objFile = \FilesModel::findByUuid($this->coverSRC);

        if ($objFile === null || !is_file(TL_ROOT . '/' . $objFile->path))
        {
            return '';
        }

        $this->singleSRC = $objFile->path;
        $this->objFilesModel = $objFile;

        return parent::generate();
    }

    protected function compile() {
        $this->addImageToTemplate($this->Template, $this->arrData, null, null, $this->objFilesModel);
    }
}

---

Müsste ich diese Datei noch irgendwie Contao "bekannt" machen, damit da was passiert und die Details zu dem Bild im Frontend-Template als Variablen in $this->showTemplateVars(); angezeigt werden?

Die Frage, wie man bei Contao 4 ein Bild von einem zusätzlichen Feld im Frontend ausgibt, wurde ja schon öfter hier im Forum gestellt (z.B. hier oder hier), aber leider nicht mit einem konkreten Beispiel beantwortet, wie man das genau macht...

Nein, also ich würde das folgendermaßen machen:

In einem default news_full Template machst du einfach folgendes an der Stelle, wo du das Bild haben möchtest:

PHP-Code:

---

<?php
  if (null !== ($objCoverFile = \FilesModel::findByUuid($this->coverSRC)))
  {
    $objImageTemplate = new stdClass();
    \Controller::addImageToTemplate($objImageTemplate, [
      'singleSRC' => $objCoverFile->path,
      'size' => [null, null, '11'],
    ], \Config::get('maxImageWidth'), null, $objCoverFile);
    $this->insert('image', (array) $objImageTemplate);
  }
?>

---

(ungetestet)

Da fehlt ein Komma nach path – unabhängig davon wird leider kein Bild ausgegeben, dafür kommt mehrfach folgende Warnungen/Fehlermeldung:

Code:

---

Warning: Attempt to assign property of non-object in
[Installationspfad]/vendor/contao/core-bundle/src/Resources/contao/library/Contao/Controller.php on line 1482

---

(selber Fehler mit vielen weiteren Zeilen dieser Controller.php-Datei, 1548 1549 1622 1675 usw.)

Ohne, dass dein Code bei mir funktioniert, vermute ich dass das Ausgangsproblem damit weiter bestehen wird: Müssten im $arrImage nicht auch der Alt- und Titel-Tag explizit zugewiesen werden, damit diese ausgegeben werden?

Ich habe inzwischen auch diese Infoseite in der Doku gefunden, dort wird im Beispiel der Alt-Tag manuell im Array angegeben – es sollen aber einfach die im Dateimanager zum Bild angegebenen Metadaten genutzt werden...

Zitat:

---

Zitat von contaotester

Ohne, dass dein Code bei mir funktioniert, vermute ich dass das Ausgangsproblem damit weiter bestehen wird: Müssten im $arrImage nicht auch der Alt- und Titel-Tag explizit zugewiesen werden, damit diese ausgegeben werden?

---

Nein, siehe https://github.com/contao/core-bundl...hp#L1552-L1606

Zitat:

---

Zitat von contaotester

Da fehlt ein Komma nach path – unabhängig davon wird leider kein Bild ausgegeben, dafür kommt mehrfach folgende Warnungen/Fehlermeldung:

Code:

---

Warning: Attempt to assign property of non-object in
[Installationspfad]/vendor/contao/core-bundle/src/Resources/contao/library/Contao/Controller.php on line 1482

---

(selber Fehler mit vielen weiteren Zeilen dieser Controller.php-Datei, 1548 1549 1622 1675 usw.)

---

Habe den Code aktualisiert.

Tatsächlich, es funktioniert und auch die Meta-Angaben des Bildes werden korrekt mit ausgegeben – DANKE VIELMALS für die Unterstützung!

Bitte schön ;). Vielleicht ist dir das ja etwas aus meiner Wunschliste wert :D

Guten Abend

Darf ich hier nachhaken?

Eine Veranstaltungslösung. Eigentlich ziemlich einfach:

http://gesundheitundmedizin.hoch3.ch/home.html

Bei Klick auf die Veranstaltung für die Detailansicht soll aber das Bild links auf ein Quadrat zugeschnitten werden. Geht das? Wenn ja, wie am einfachsten.

Schön wäre, wenn man das Bild, das im Head der Veranstaltung erfasst wird, hier zugeschnitten wird (auf den wichtigsten Teil oder notfalls Mitte Mitte).

Natürlich muss das Bild dann auch noch responsive sein (bisher mit Prozenten).

Zitat:

---

Zitat von Hoch-3

Bei Klick auf die Veranstaltung für die Detailansicht soll aber das Bild links auf ein Quadrat zugeschnitten werden. Geht das? Wenn ja, wie am einfachsten.
Schön wäre, wenn man das Bild, das im Head der Veranstaltung erfasst wird, hier zugeschnitten wird (auf den wichtigsten Teil oder notfalls Mitte Mitte).
Natürlich muss das Bild dann auch noch responsive sein (bisher mit Prozenten).

---

Du kannst die Bildeinstellungen im Nachrichtenleser und in der Nachrichtenliste unterschiedlich definieren.
Einstellungen machst Du direkt in den Modulen, nicht bei den Nachrichten.

Zitat:

---

Zitat von tintifax

Du kannst die Bildeinstellungen im Nachrichtenleser und in der Nachrichtenliste unterschiedlich definieren.
Einstellungen machst Du direkt in den Modulen, nicht bei den Nachrichten.

---

GRANDIOS! Herzlichen Dank. Nach bald 10 Jahren Contao wieder was gelernt. :-)

Jetzt muss ich nochmal nachhaken :)


So hatte ich unter Contao 3.5 ein Bild mit der Größe 200 x 200 px (ohne eine eigens im Backend definierte Bildgröße) eingebunden:

Code:

---

<?= \Image::getHtml(\Image::get($this->picturePath, '200', '200', 'crop')); ?>

---

Soweit ich verstanden habe ist das hier nun unter Contao 4 der korrekte Weg:

Code:

---

<?php
  if (null !== ($objCoverFile = \FilesModel::findByUuid($this->singleSRC)))
  {
    $objImageTemplate = new stdClass();
    \Controller::addImageToTemplate($objImageTemplate, [
      'singleSRC' => $objCoverFile->path,
      'size' => [200, 200],
    ], \Config::get('maxImageWidth'), null, $objCoverFile);
    $this->insert('image', (array) $objImageTemplate);
  }
?>

---

Wie bringe ich da das "crop" Attribut unter?
Im size-Array?

Danke!

'size' => [200, 200, 'crop']

Das ist übrigens auch noch ein "alter Weg" ;)

Alles klar, danke Spooky.

Wie sieht der richtige Weg aus?

Hallo,

vielen Dank für den Code zur Bildeinbindung im Template, das war sehr hilfreich! Ich habe aber noch eine Frage

Was muss ich denn bei 'size' eintragen, damit die Eingaben aus dem Backend übernommen werden? Also sinngemäß:

Code:

---

'size' => [x, y, scale],

---

Danke und Gruß
Mathias

An der dritten Stelle die ID der Bildgröße.

All right, jetzt hab ich's.

• Bildgrößen im Theme festlegen
• entsprechende ID bei size ins Template

Code:

---

'size' => ['', '', ID],

---

Vielen Dank!