Großansicht der Galeriebilder

Ich habe mit RSCE eine Galerie im Template eingebaut:

HTML-Code:

<div ce_gallery block"> <ul class="cols_3" itemscope itemtype="http://schema.org/ImageGallery"> <?php $dataSorted = array_map('\StringUtil::binToUuid', deserialize($this->orderSRC, true)); foreach ( $dataSorted as $data ) { if ($image = $this->getImageObject($data, array('','', 22))): ?> <li><?php $this->insert('picture_default', $image->picture);?></li> <?php endif; } ?> </ul> </div>

Gibt es eine Möglichkeit, im Frontend die Großansicht eines Bildes per Klick auf das Vorschaubild aufzurufen?

Ja, schau dir das HTML eines Bilds mit aktivierter Lightbox an, dann siehst du was du dem Template noch mit auf dem Weg geben musst.

Hm, z. B. data-lightbox="lb693". Allerdings hilft mir das mit meinen weniger als rudimentären php-Kenntnissen nicht wirklich weiter ... Kannst Du mir vielleicht etwas konkreter helfen?

Hallo,

schau dir aus dem Contao Core die gallery_default.html5 an, wie diese aufgebaut ist und baue dein rsce_meintemplate.html5 dementsprechend nach.
Die Lightbox wird durch das data-lightbox angesprochen.

data-lightbox="???" fragt nur eine eindeutige Bezeichnung ab, damit sie auch als Gallery dargestellt werden kann. Hier kannst du dann z.B. die ID des Inhaltselementes abfragen und einsetzen, oder aber du fügst noch ein zusätzliches Feld ein, wo der Redakteur das Feld selbst befüllen kann.

z.B

PHP-Code:

data-lightbox="<?= $this->id ?>"

Zitat:

Zitat von derRenner

Hallo,

schau dir aus dem Contao Core die gallery_default.html5 an, wie diese aufgebaut ist und baue dein rsce_meintemplate.html5 dementsprechend nach.

Das habe ich versucht und bin leider überhaupt nicht weitergekommen ... :(

Ich nehme an, dass ich in der rsce-Konfigurationdatei dem Array noch irgendwie die URL des Bildes hinzufügen muss, oder?

Code:

'multiSRC' => array( 'label' => array('Bilder und Ordner', 'Bitte wählen Sie ein oder mehrere Bilder oder einen Ordner aus. Wenn Sie einen Ordner auswählen, werden alle darin enthaltenen Bilder eingefügt.'), 'inputType' => 'standardField', 'eval' => array( 'tl_class' => 'clr', 'isGallery' => true, 'multiple' => true, 'fieldType' => 'checkbox', 'orderField' => 'orderSRC', 'files' => true, 'mandatory' => true, 'extensions' => \Config::get('validImageTypes') ), )

Weil

HTML-Code:

<a href="<?= $col->href ?>">

im Template liefert mir leider kein Ergebnis.

So sieht das Template an der Stelle im Moment aus:

HTML-Code:

<div class="col-md-8 order-md-2 ce_gallery block"> <ul class="cols_3" itemscope itemtype="http://schema.org/ImageGallery"> <?php $dataSorted = array_map('\StringUtil::binToUuid', deserialize($this->orderSRC, true)); foreach ( $dataSorted as $data ) { if ($col = $this->getImageObject($data, array('','', 22))): ?> <li><a href="<?= $col->href ?>" class="cboxElement" data-lightbox="<?= $this->id ?>" <?= $col->attributes ?><?php if ($col->linkTitle): ?> title="<?= $col->linkTitle ?>"<?php endif; ?>><?php $this->insert('picture_default', $col->picture); ?></a></li> <?php endif; } ?> </ul> </div>

du fragst in der foreach-Schleife $col ab, aber hast ein $data deklariert

PHP-Code:

foreach ( $dataSorted as $data ) { if ($col =

Danke für den Tipp :-)

So funktioniert es aber leider auch nicht:

HTML-Code:

<div class="col-md-8 order-md-2 ce_gallery block"> <ul class="cols_3" itemscope itemtype="http://schema.org/ImageGallery"> <?php $dataSorted = array_map('\StringUtil::binToUuid', deserialize($this->orderSRC, true)); foreach ( $dataSorted as $col ) { if ($col = $this->getImageObject($col, array('','', 22))): ?> <li><a href="<?= $col->href ?>" class="cboxElement" data-lightbox="<?= $col->id ?>" <?= $col->attributes ?><?php if ($col->linkTitle): ?> title="<?= $col->linkTitle ?>"<?php endif; ?>><?php $this->insert('picture_default', $col->picture); ?></a></li> <?php endif; } ?> </ul> </div>

auch die foreach-Schleife ist nicht zu.
Wie erwähnt, schau dir mal das default_gallery.html5 an

Zitat:

Zitat von derRenner

auch die foreach-Schleife ist nicht zu.

Hm, doch, die ist meines Wissens zu:

Code:

} ?>

Direkt vor dem schließenden </ul>

Wie gesagt: ich kann kein php, daher wäre es nett, wenn ich einen konkreten Tipp bekommen könnte. Die default_gallery.html5 habe ich mir schon gefühlte 50x angeguckt und komme trotzdem nicht weiter. Sorry ...

Die Anzeige der Galerie funktioniert einwandfrei. Nur wird das Bild beim Öffnen der Lightbox nicht geladen, weil die URL zum Bild schlicht fehlt. Die Ausgabe sieht - verkürzt - so aus:

HTML-Code:

<a href="" class="cboxElement" data-lightbox="769"> <picture > <source srcset="assets/images/d/712134_Loop_06-c7171382.jpg" media="(max-width: 549px)"> <source srcset="assets/images/5/712134_Loop_06-49e62e1c.jpg" media="(max-width: 767px)"> <source srcset="assets/images/3/712134_Loop_06-d0acfe7f.jpg" media="(min-width: 768px)"> <img src="assets/images/4/712134_Loop_06-5211afe6.jpg" alt="" loading="lazy" itemprop="image" width="800" height="600"> </picture> </a>

Wenn du dir die Variablen im Frontend ausgeben lässt, dann findes du wohl auch 'href' nicht ... <?= $col->href ?> wird nicht aufgelöst, weil 'href' bei dir möglicherweise nicht abgefragt wird, nicht vorhanden ist.

Umgehe dies, indem du den Bildlink direkt abfragst. Hier ein Beispiel - die Variablen musst du durch deine aber ersetzen

PHP-Code:

<a class="overlay-trigger-icon bg-light text-dark" href="<?php if (null !== ($objFile = Contao\FilesModel::findByUuid($portfolio->backgroundimage))): $imagePath = $objFile->path; echo $imagePath; endif; ?>" data-lightbox="<?php echo 'lightbx' . $count++; ?>>"></a>

Sorry, aber das hilft mir ohne PHP-Kenntisse leider überhaupt nicht weiter ...

Zitat:

Zitat von Lufine

Sorry, aber das hilft mir ohne PHP-Kenntisse leider überhaupt nicht weiter ...

Dafür gibts hier im Forum die Rubrik Kleinaufträge: https://community.contao.org/de/foru...Auftr%C3%A4ge)

Leider möchte anscheinend niemand diesen Auftrag haben ...:eek: (https://community.contao.org/de/show...351#post540351)

Könnt Ihr mir nicht vielleicht doch an dieser Stelle mit einem konkreten Codeschnipsel weiterhelfen?

Mal eine Frage am Rand. Mir ist nicht ganz klar was Deine eigene Galerie anderes erreicht als das die Standardgalerie tut.
Wahrscheinlich habe ich etwas entscheidendes übersehen.

Zitat:

Zitat von mlweb

Mal eine Frage am Rand. Mir ist nicht ganz klar was Deine eigene Galerie anderes erreicht als das die Standardgalerie tut.
Wahrscheinlich habe ich etwas entscheidendes übersehen.

Die Bilder in der Galerie werden von den Redakteur*innen neben noch ein paar anderen Text-Elementen über ein eigenes Inhaltselement 'Projektinformationen' eingefügt.

Vielleicht hat sich keiner auf den Auftrag gemeldet, weil Du die kompletten Angaben für einen Kleinauftrag nicht gemacht hast. https://community.contao.org/de/show...3%B6ffentlicht

Aber egal: Ich habe etwas recherchiert und folgende Codeschnipsel im Forum von Rocksolid gefunden https://help.rocksolidthemes.com/dis...customelements

Falls Du damit nicht zurecht kommst, kannst Du Dich gern direkt bei mir melden, dann würde ich das als Kleinauftrag übernehmen.

Nochmal einen Dank an Maren für diese Lösung:

rsce_projekt.html mit Figure:

HTML-Code:

<div class="col-md-8 order-md-2 ce_gallery block"> <ul class="cols_3" itemscope itemtype="http://schema.org/ImageGallery"> <?php $dataSorted = array_map('\StringUtil::binToUuid', deserialize($this->orderSRC, true)); foreach ($dataSorted as $data) { ?> <li> <?php if ($image = $this->getImageObject($data, array('', '', 22), null, null, ['fullsize' => '1'])): ?>  <?php $this->insert('image', (array) $image); ?> <?php endif ?> </li> <?php } ?> </ul> </div>

rsce_projekt.html ohne Figure:

HTML-Code:

<div class="col-md-8 order-md-2 ce_gallery block"> <ul class="cols_3" itemscope itemtype="http://schema.org/ImageGallery"> <?php $dataSorted = array_map('\StringUtil::binToUuid', deserialize($this->orderSRC, true)); foreach ($dataSorted as $data) { ?> <li> <?php if ($image = $this->getImageObject($data, array('', '', 22), null, null, ['fullsize' => '1'])): ?>  <a data-lightbox="<?= $this->id ?>" href="<?= $image->href ?>"> <?php $this->insert('picture_default', $image->picture); ?> </a> <?php endif; ?> </li> <?php } ?> </ul> </div>

Die dazugehörige rsce_projekt_config.php:

PHP-Code:

<?php return array( 'label' => array('Projektinformationen',''), 'types' => array('content'), 'contentCategory' => 'texts', 'moduleCategory' => 'miscellaneous', 'standardFields' => array('cssID'), 'fields' => array( 'multiSRC' => array( 'label' => array('Bilder und Ordner', 'Bitte wählen Sie ein oder mehrere Bilder oder einen Ordner aus. Wenn Sie einen Ordner auswählen, werden alle darin enthaltenen Bilder eingefügt.'), 'inputType' => 'standardField', 'eval' => array( 'tl_class' => 'clr', 'isGallery' => true, 'multiple' => true, 'fieldType' => 'checkbox', 'orderField' => 'orderSRC', 'files' => true, 'mandatory' => true, 'extensions' => \Config::get('validImageTypes') ), ), ), );