Contao-Camp 2024
Ergebnis 1 bis 20 von 20

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

  1. #1
    Contao-Nutzer
    Registriert seit
    16.06.2017.
    Beiträge
    22

    Frage 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->coverSRC11)->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);

    Geändert von contaotester (24.03.2018 um 15:22 Uhr)

  2. #2
    Contao-Nutzer
    Registriert seit
    16.06.2017.
    Beiträge
    22

    Standard

    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.

  3. #3
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.877
    Partner-ID
    10107

    Standard

    Moderation: Thema in das Entwickler-Fragen Forum verschoben.

  4. #4
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.877
    Partner-ID
    10107

    Standard

    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.

  5. #5
    Contao-Nutzer
    Registriert seit
    16.06.2017.
    Beiträge
    22

    Standard

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

    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->arrDatanullnull$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...
    Geändert von contaotester (29.03.2018 um 15:21 Uhr)

  6. #6
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.877
    Partner-ID
    10107

    Standard

    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' => [nullnull'11'],
        ], \
    Config::get('maxImageWidth'), null$objCoverFile);
        
    $this->insert('image', (array) $objImageTemplate);
      }
    ?>
    (ungetestet)
    Geändert von Spooky (29.03.2018 um 15:42 Uhr)

  7. #7
    Contao-Nutzer
    Registriert seit
    16.06.2017.
    Beiträge
    22

    Standard

    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...

  8. #8
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.877
    Partner-ID
    10107

    Standard

    Zitat Zitat von contaotester Beitrag anzeigen
    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

  9. #9
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.877
    Partner-ID
    10107

    Standard

    Zitat Zitat von contaotester Beitrag anzeigen
    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.

  10. #10
    Contao-Nutzer
    Registriert seit
    16.06.2017.
    Beiträge
    22

    Standard

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

  11. #11
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.877
    Partner-ID
    10107

    Standard

    Bitte schön . Vielleicht ist dir das ja etwas aus meiner Wunschliste wert

  12. #12
    Contao-Fan Avatar von Hoch-3
    Registriert seit
    16.11.2010.
    Ort
    Zürich
    Beiträge
    372
    Partner-ID
    7136

    Standard Bild in Detailausgabe beschneiden

    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).

  13. #13
    Contao-Fan
    Registriert seit
    09.02.2011.
    Beiträge
    600

    Standard

    Zitat Zitat von Hoch-3 Beitrag anzeigen
    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.

  14. #14
    Contao-Fan Avatar von Hoch-3
    Registriert seit
    16.11.2010.
    Ort
    Zürich
    Beiträge
    372
    Partner-ID
    7136

    Standard

    Zitat Zitat von tintifax Beitrag anzeigen
    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. :-)

  15. #15
    Contao-Fan
    Registriert seit
    29.06.2016.
    Beiträge
    500

    Standard

    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!

  16. #16
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.877
    Partner-ID
    10107

    Standard

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

    Das ist übrigens auch noch ein "alter Weg"

  17. #17
    Contao-Fan
    Registriert seit
    29.06.2016.
    Beiträge
    500

    Standard

    Alles klar, danke Spooky.

    Wie sieht der richtige Weg aus?

  18. #18
    Contao-Fan Avatar von mdoll
    Registriert seit
    25.06.2009.
    Ort
    Wietze
    Beiträge
    334

    Standard

    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
    “Ah," said Mr Pin. "Right. I remember. You are concerned citizens." He knew about concerned citizens. Wherever they were, they all spoke the same private language, where 'traditional values' meant 'hang someone'.”
    ― Terry Pratchett, The Truth

  19. #19
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.877
    Partner-ID
    10107

    Standard

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

  20. #20
    Contao-Fan Avatar von mdoll
    Registriert seit
    25.06.2009.
    Ort
    Wietze
    Beiträge
    334

    Standard

    All right, jetzt hab ich's.

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


    Code:
    'size' => ['', '', ID],
    Vielen Dank!
    “Ah," said Mr Pin. "Right. I remember. You are concerned citizens." He knew about concerned citizens. Wherever they were, they all spoke the same private language, where 'traditional values' meant 'hang someone'.”
    ― Terry Pratchett, The Truth

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •