Figure mit Bildgrößen und Lightbox in news_full.html Template ausgeben

Hallo zusammen,

über die Suche habe ich bisher nicht das passende gefunden.

Ich habe folgendes Problem:
Ich habe dem Nachrichten-Modul über die DCA in der tl_news ein inputType fileTree Element hinzugefügt, um eine Galerie-Auswahl direkt beim Anlegen der News zur Verfügung zu stellen.
Die Ausgabe der Bilder ist auch kein Problem. Jetzt würde ich allerdings gerne eine vordefinierte Bildgröße zuweisen (gerne fix über die ID, damit die Redakteure die nicht extra auswählen müssen) inkl. Lightbox a-Tag. Und hier hänge ich fest.
Ich habe versucht, es über den figureBuilder (wie in der Dokumentation) zu lösen. Da ich dies jedoch direkt im Template news_full.html5 mache, bekomme ich die Ausgabe der Bilder (figure Elemente) nicht erstellt.
Kann mir jemand sagen, wie ich die Ausgabe nach dem "$figure = $figureBuilder->build()" hinbekomme?

Habe auch einen Post von spooky im Forum gefunden:

PHP-Code:

---

<?php if ($image = $this->getImageObject($this->image, [null, null, 2])): ?>
  <?php $this->insert('image', (array) $image); ?>
<?php endif; ?>

---

Hier kennt Contao laut Log-Datei die Funktion "getImageObject" nicht (Log:... getImageObject is not set or not a callable...).


Also, hier mein bisheriger Quelltext im Template "news_full.html5":

PHP-Code:

---

$arrMultiSRC = \StringUtil::deserialize($this->gallery);
$arrImages = \FilesModel::findMultipleByUuids($arrMultiSRC);

foreach($arrImages as $image){
    $figureBuilder
    ->fromPath($image->path)
    ->setSize(2) // Bildgröße ID 2
    ->enableLightbox()
    ->setLightboxGroupIdentifier('gallerygroup1');

    $figure = $figureBuilder->build();
} 


---

Ich habe auch die Inline-Variante versucht, jedoch greift dabei die "lightboxGroupIdentifier" Angabe nicht.

PHP-Code:

---

$this->figure(
    $image->path, 
    2, // Bildgröße ID 2
    [
        'enableLightbox' => true, 'lightboxGroupIdentifier' =>'gallerygroup1'
    ]
) 


---

Kann mir jemand einen Tip geben, wie ich die Ausgabe der figure-Liste mit Lightbox und GroupIdentifier lösen kann?

PHP-Code:

---

$arrMultiSRC = \StringUtil::deserialize($this->gallery);
$arrImages = \FilesModel::findMultipleByUuids($arrMultiSRC);

foreach($arrImages as $image){
    $figureBuilder
        ->fromPath($image->path)
        ->setSize(2)
        ->enableLightbox()
        ->setLightboxGroupIdentifier('gallerygroup1')
    ;

    if ($figure = $figureBuilder->buildIfResourceExists()) {
        $this->render('image', $figure->getLegacyTemplateData());
    }
} 


---

Zitat:

---

Zitat von pottkind

Ich habe auch die Inline-Variante versucht, jedoch greift dabei die "lightboxGroupIdentifier" Angabe nicht.

---

Das kann ich nicht nachvollziehen, funktioniert.

Zitat:

---

Zitat von pottkind

Habe auch einen Post von spooky im Forum gefunden:

PHP-Code:

---

<?php if ($image = $this->getImageObject($this->image, [null, null, 2])): ?>
  <?php $this->insert('image', (array) $image); ?>
<?php endif; ?>

---

Hier kennt Contao laut Log-Datei die Funktion "getImageObject" nicht (Log:... getImageObject is not set or not a callable...).

---

Das ist eine Funktion der RockSolidCustomElements und steht auch nur in den RSCE Templates zur Verfügung.

Zitat:

---

Zitat von Spooky

PHP-Code:

---

$arrMultiSRC = \StringUtil::deserialize($this->gallery);
$arrImages = \FilesModel::findMultipleByUuids($arrMultiSRC);

foreach($arrImages as $image){
    $figureBuilder
        ->fromPath($image->path)
        ->setSize(2)
        ->enableLightbox()
        ->setLightboxGroupIdentifier('gallerygroup1')
    ;

    if ($figure = $figureBuilder->buildIfResourceExists()) {
        $this->render('image', $figure->getLegacyTemplateData());
    }
} 


---

---

Hallo spooky, danke für die schnelle Antwort. Diese Lösung liefert bei mir jedoch laut Log-Datei ein Exception Error "Call to a member function fromPath() on null".

Zitat:

---

Zitat von Spooky

Das ist eine Funktion der RockSolidCustomElements und steht auch nur in den RSCE Templates zur Verfügung.

---

Hallo Spooky, das erklärt den Fehler :) Danke für den Hinweis.

Zitat:

---

Zitat von pottkind

Diese Lösung liefert bei mir jedoch laut Log-Datei ein Exception Error "Call to a member function fromPath() on null".

---

Du musst deinen gesamten Code posten.

Zitat:

---

Zitat von Spooky

Das kann ich nicht nachvollziehen, funktioniert.

---

Ja, ich habe mich auch gewundert, da z.B. ->setLinkHref('https://example.com') auch funktioniert. Nur die Angabe lightboxGroupIdentifier wird nicht umgesetzt.

Zitat:

---

Zitat von Spooky

Du musst deinen gesamten Code posten.

---

Inline-Variante, bei der die Angabe lightboxGroupIdentifier keine Auswirkung hat:

Code:

---

    <?php if ($this->gallery): ?>
        <section class="ce_accordionSingle ce_accordion ce_text block">
            <div class="toggler">Mehr Bilder</div>
            <div class="accordion" aria-expanded="false">
                <div>
                                        <?php
                        $newsGalleryList = '<div class="ce_gallery"><ul>';

                        $arrMultiSRC = \StringUtil::deserialize($this->gallery);
                        $arrImages = \FilesModel::findMultipleByUuids($arrMultiSRC);

                        foreach($arrImages as $image){
                            $newsGalleryList .= '<li>' .
                                $this->figure(
                                    $image->path,
                                    2,
                                    [
                                        'enableLightbox' => true,
                                        'lightboxGroupIdentifier' => 'gallerygroup1'
                                    ]
                                ) . '</li>';
                        }

                        $newsGalleryList .= '</ul></div>';
                        echo $newsGalleryList;
                        ?>
                </div>
            </div>
        </section>
        <?php endif; ?>

---

FigureBuilder Variante mit Fehlerausgabe (Exception InvalidArgumentException: "render is not set or not a callable")

Code:

---

    <?php if ($this->gallery): ?>
        <section class="ce_accordionSingle ce_accordion ce_text block">
            <div class="toggler">Mehr Bilder</div>
            <div class="accordion" aria-expanded="false">
                <div>
                        <?php
                        $arrMultiSRC = \StringUtil::deserialize($this->gallery);
                        $arrImages = \FilesModel::findMultipleByUuids($arrMultiSRC);

                        $figureBuilder = \System::getContainer()
                        ->get(\Contao\CoreBundle\Image\Studio\Studio::class)
                        ->createFigureBuilder();

                        foreach($arrImages as $image){
                            $figureBuilder
                                ->fromPath($image->path)
                                ->setSize(2)
                                ->enableLightbox()
                                ->setLightboxGroupIdentifier('gallerygroup1')
                            ;
                       
                            if ($figure = $figureBuilder->buildIfResourceExists()) {
                                $this->render('image', $figure->getLegacyTemplateData());
                            }
                        }
                        ?>
                </div>
            </div>
        </section>
        <?php endif; ?>

---

Bitte immer [code] oder [php] Tags nutzen.

Zitat:

---

Zitat von Spooky

Bitte immer [code] oder [php] Tags nutzen.

---

Ja, sorry, ist untergegangen...:(

Zitat:

---

Zitat von pottkind

Ja, sorry, ist untergegangen...:(

---

Dann editiere doch bitte Dein Posting.

Zitat:

---

Zitat von lucina

Dann editiere doch bitte Dein Posting.

---

Erledigt

Statt $this->render muss es $this->insert sein.

Zitat:

---

Zitat von Spooky

Statt $this->render muss es $this->insert sein.

---

Ok, jetzt werden zwar die Bilder gerendert, allerdings hat auch bei dieser Variante die Angabe ->setLightboxGroupIdentifier keine Auswirkung.
Im Attribut data-lightbox steht weiterhin "image1".

Das kann ich nach wie vor nicht nachvollziehen.

Zitat:

---

Zitat von Spooky

Das kann ich nach wie vor nicht nachvollziehen.

---

Ok.
Trotzdem schon mal vielen Dank für die Hilfe! Die Ausgabe funktioniert ja schon mal.

Das Problem mit der Lightbox muss ich mir dann noch mal ansehen.
Ich hatte auch schon überlegt, ob es daran liegen kann, dass ich nicht die interne j_colorbox benutze, sondern lightbox.js. Das Problem besteht allerdings auch, wenn ich auf die j_colorbox umstelle.

Evt. passiert das durch eine ganze andere Anpassung von dir? Ohne dein gesamtes System zu kennen wird man hier nur raten können.

Zitat:

---

Zitat von Spooky

Evt. passiert das durch eine ganze andere Anpassung von dir? Ohne dein gesamtes System zu kennen wird man hier nur raten können.

---

Ja, muss ich mir noch mal genau ansehen...
Danke dir trotzdem für die Hilfe. Bin schon ein gutes Stück weiter.

Ich teste es einfach mal die Tage über eine neue Installation, in der ich nur diesen Teil anpasse. Vielleicht werde ich dann schlauer.

Zitat:

---

Zitat von pottkind

Ja, muss ich mir noch mal genau ansehen...
Danke dir trotzdem für die Hilfe. Bin schon ein gutes Stück weiter.

Ich teste es einfach mal die Tage über eine neue Installation, in der ich nur diesen Teil anpasse. Vielleicht werde ich dann schlauer.

---

Nur zur Vollständigkeit.
Ich habe den Fehler mit "setLightboxGroupIdentifier" gefunden. Da ich statt der j_colorbox die lightbox.js Bibliothek benutze, hatte ich das Attribut "data-lightbox" für die Images im Template image.html5 abhängig vom Setzen der "fullsize" Eigenschaft ins Template geschrieben. Damit kommt dann der figureBuilder nicht klar, da der Wert immer überschrieben wurde. Problem gelöst :D

Hallo Spooky, bis jetzt hat alles soweit gut funktioniert. Genau das Ergebnis, was ich mir vorgestellt habe.
Allerdings benötige ich nun auch noch in meine Custom-Galerie die Option "Sortieren nach" - "Individuelle Reihenfolge".

Die bekomme ich aber nicht so richtig eingebunden.

Die DCA in der tl_news habe ich durch "->addField('sortBy', 'gallery_legend'..." erweitert:

PHP-Code:

---

PaletteManipulator::create()
    ->addLegend('gallery_legend', 'image_legend', PaletteManipulator::POSITION_AFTER)
    ->addField('gallery', 'gallery_legend', PaletteManipulator::POSITION_APPEND)
    ->addField('sortBy', 'gallery_legend', PaletteManipulator::POSITION_APPEND)
    ->applyToPalette('default', 'tl_news');

$GLOBALS['TL_DCA']['tl_news']['fields']['gallery'] = array
(
    'label' => &$GLOBALS['TL_LANG']['tl_news']['gallery'],
    'inputType' => 'fileTree',
    'eval' => array(
        'mandatory' => false,
        'multiple' => true,
        'files' => true,
        'fieldType' => 'checkbox',
        'filesOnly' => true,
        'extensions' => 'jpg,jpeg',
        'orderField' => 'orderSRC',
        'isGallery' => true,
        'tl_class' => 'm12 clr'
    ),
    'exclude' => true,
    'sql' => "blob NULL",
);

$GLOBALS['TL_DCA']['tl_news']['fields']['sortBy'] = array
(
    'exclude'       => true,
    'inputType'     => 'select',
    'options'       => array('custom', 'name_asc', 'name_desc', 'date_asc', 'date_desc', 'random'),
    'reference'     => &$GLOBALS['TL_LANG']['tl_content'],
    'eval'          => array('tl_class'=>'w50 clr'),
    'sql'           => "varchar(32) COLLATE ascii_bin NOT NULL default ''"
);


$GLOBALS['TL_DCA']['tl_news']['fields']['orderSRC'] = array
(
    'label' => &$GLOBALS['TL_LANG']['tl_content']['orderSRC'],
    'sql' => "blob NULL",
); 


---

Das Feld "Sortieren nach" ist auch im Backend sichtbar. Allerdings weiß ich nicht, wie ich das nun mit der Generierung der Bilder über den figureBuilder im Template news_full.html5 verknüpfen kann.

Hier der Block, den ich mit deiner Hilfe im Template stehen habe:

PHP-Code:

---

<?php
                        $arrMultiSRC = \StringUtil::deserialize($this->gallery);
                        $arrImages = \FilesModel::findMultipleByUuids($arrMultiSRC);

                        $figureBuilder = \System::getContainer()
                        ->get(\Contao\CoreBundle\Image\Studio\Studio::class)
                        ->createFigureBuilder();
                        
                        // figureBuilder version
                        echo '<div class="ce_gallery"><ul>';
                        foreach($arrImages as $image){
                            $figureBuilder
                                ->fromPath($image->path)
                                ->setSize(2)
                                ->enableLightbox()
                                ->setLightboxGroupIdentifier('gallerygroup1')
                            ;
                            
                            if ($figure = $figureBuilder->buildIfResourceExists()) {
                                echo '<li>';
                                    $this->insert('image', $figure->getLegacyTemplateData());
                                echo '</li>';
                            }
                        }
                        echo '</ul></div>';

                    ?>

---

Hast du eine Tipp für mich?

Kannst du dir am besten vom Core abschaun: https://github.com/contao/contao/blo...y.php#L83-L195

Zitat:

---

Zitat von Spooky

Kannst du dir am besten vom Core abschaun: https://github.com/contao/contao/blo...y.php#L83-L195

---

Danke für den Link.
Werde ich mir mal in Ruhe ansehen und versuchen es in meinen Code zu übertragen.:)

Zitat:

---

Zitat von Spooky

Kannst du dir am besten vom Core abschaun: https://github.com/contao/contao/blo...y.php#L83-L195

---

Habe versucht, aus dem Code schlau zu werden. Da ich aber nicht aus dem Backend komme, habe ich doch meine
Schwierigkeiten, die Sortierung aus dem Core in meinen Code zu übertragen.

Laut Error-Log muss der erste Parameter von "sortByOrderField" ein Array sein. Dazu habe ich "$objImages" vorher so umgewandelt:

PHP-Code:

---

$arrImages = (array) $objImages; 


---

Grundsätzlich brauche ich doch aus dem Core nur diesen Block, richtig?:

PHP-Code:

---

// Sort array
switch ($this->sortBy)
{
    default:
    // alle anderen case-Bedingungen habe ich erst einmal entfernt, bis die Sortierung funktioniert
    // $this->sortBy liefert 'custom'
    case 'custom':
        $images = Contao\ArrayUtil::sortByOrderField($arrImages, $this->orderSRC);
        break;
} 


---

Benutze ich jetzt aber "$images" in meiner foreach-Schleife, liefert die Log-Datei:
"Argument 1 passed to Contao\CoreBundle\Image\Studio\FigureBuilder::from Path() must be of the type string, null given,..."

Irgendwie blicke ich nicht durch, oder ich sehe den Wald vor lauter Bäumen nicht...
Wie sortiere ich denn nun mein "$objImages" neu, bevor ich die Bilder in meiner foreach-Schleife generieren lasse?

Hier noch einmal der Code aus meinem Template:

PHP-Code:

---

                        $arrMultiSRC = \StringUtil::deserialize($this->gallery);
                        $objImages = \FilesModel::findMultipleByUuids($arrMultiSRC);

                        $figureBuilder = \System::getContainer()
                        ->get(\Contao\CoreBundle\Image\Studio\Studio::class)
                        ->createFigureBuilder();

$arrImages = (array) $objImages;
// Sort array
switch ($this->sortBy)
{
    default:
    // alle anderen case-Bedingungen habe ich erst einmal entfernt, bis die Sortierung funktioniert
    // $this->sortBy liefert 'custom'
    case 'custom':
        $images = Contao\ArrayUtil::sortByOrderField($arrImages, $this->orderSRC);
        break;        
}

                        // figureBuilder
                        echo '<div class="ce_gallery"><ul>';
                        foreach($images as $image){

                            $figureBuilder
                                ->fromPath($image->path)
                                ->setSize(2)
                                ->enableLightbox()
                                ->setLightboxGroupIdentifier('gallerygroup1')
                            ;

                            if ($figure = $figureBuilder->buildIfResourceExists()) {
                                echo '<li>';
                                    $this->insert('image', $figure->getLegacyTemplateData());
                                echo '</li>';
                            }
                        }
                        echo '</ul></div>'; 


---

Zitat:

---

Zitat von Spooky

Kannst du dir am besten vom Core abschaun: https://github.com/contao/contao/blo...y.php#L83-L195

---

Hallo Spooky, hättest du noch mal einen Tipp zu meinem Post von gestern?
Irgendwie will es nicht „Klick“ machen… :(

So, habe eine Notlösung gefunden.
So funktioniert es zwar, es ist aber sicher nicht die eleganteste Lösung :)

PHP-Code:

---

                        // custom ordered
                        $arrOrderSRC = \StringUtil::deserialize($this->orderSRC);
                        $objImages = \FilesModel::findMultipleByUuids($arrOrderSRC);

                        $figureBuilder = \System::getContainer()
                        ->get(\Contao\CoreBundle\Image\Studio\Studio::class)
                        ->createFigureBuilder();

                        echo '<div class="ce_gallery"><ul>';                        
                        foreach($objImages as $image){

                            $figureBuilder
                                ->fromPath($image->path)
                                ->setSize(2)
                                ->enableLightbox()
                                ->setLightboxGroupIdentifier('gallerygroup1')
                            ;

                            if ($figure = $figureBuilder->buildIfResourceExists()) {
                                echo '<li>';
                                    $this->insert('image', $figure->getLegacyTemplateData());
                                echo '</li>';
                            }
                        }
                        echo '</ul></div>'; 


---