Contao 4.8.: Bootstrap-Bildergallerie mit Flexboxen und Lightbox

Druckbare Version

19.11.2019, 16:35
doescher

Contao 4.8.: Bootstrap-Bildergallerie mit Flexboxen und Lightbox

Hallo zusammen,

ich habe unter Contao 4.8 und der Bootstrap Erweiterung vor, auf einer Unterseite eine umfangreiche Darstellung meines Portfolios zu stellen.
Dazu möchte ich von jedem Projekt ein Hauptmotiv in einer Gallerie darstellen. Diese sollte eine Flexbox-Gallerie sein, da diese Motive (z.B. verschiedene Buchcover) unterschiedliche Größen haben und somit in der Höhe variieren.
Das habe ich mit der On-Board-Gallerie der Bootstrap-Erweiterung nicht wirklich hinbekommen, hier werden die Höhendifferenzen nicht berücksichtigt bzw. erzeugen Lücken in der Darstellung.
Wie kann ich das umsetzen?

Als wenn das nicht schon schwierig genug wäre, möchte ich zusätzlich noch, dass für jedes Motiv in der Gallerie beim drauf Klicken eine Lightbox aufgeht, die zusätzliche Motive zu diesem Motiv zeigt (z.B. Buchinnenseiten) und NICHT die anderen Bilder in der Bildergallerie.
Geht das? Kann man das mit einer Erweiterung lösen (die Erweiterung »heimrichhannot/contao-lightbox-gallery-bundle«, die ich probiert habe, ist nicht für Contao 4.8 und hat Probleme beim Installieren gemacht)?

Und natürlich wäre es schön, wenn man die Bildgrößeneinstellungen von Contao benutzen könnte...

Könnt Ihr mir Tipps geben, wie ich das am besten umsetzen kann?
Zur Not würde ich auch einen Ausschnitt für alle Motive der Gallerie in der gleichen Größe erstellen. Aber das Problem mit der Lightbox möchte ich auf jeden Fall lösen.

Bin gespannt auf Eure Tipps.
19.11.2019, 17:49
derRenner

für die unterschiedlichen Bildgrössen: masonry
für die lightbox: modal

mit etwas template-Anpassung und zusätzlichen HTML-Elementen sollte dein Vorhaben klappen
19.11.2019, 17:52
doescher

Zitat:

Zitat von derRenner

für die unterschiedlichen Bildgrössen: masonry
für die lightbox: modal

mit etwas template-Anpassung und zusätzlichen HTML-Elementen sollte dein Vorhaben klappen

Danke schon einmal.
Kannst Du noch ein wenig genauer sagen, wie diese template-Anpassung sein muss?
20.11.2019, 12:03
mdoll

Bootstrap 4 hat die Card columns, das ginge statt Masonry:
https://getbootstrap.com/docs/4.3/co.../#card-columns

Man könnte die Galerie einfach mit HTML Inhaltselementen bauen. Ist halt nicht so komfortabel, und man müsste das jedes Mal anfassen, wenn es eine Änderung an der Galerie gibt. Dafür käme man ohne Erweiterungen aus.

Gruß
Mathias
20.11.2019, 13:27
doescher

Zitat:

Zitat von mdoll

Bootstrap 4 hat die Card columns, das ginge statt Masonry:
https://getbootstrap.com/docs/4.3/co.../#card-columns

Man könnte die Galerie einfach mit HTML Inhaltselementen bauen. Ist halt nicht so komfortabel, und man müsste das jedes Mal anfassen, wenn es eine Änderung an der Galerie gibt. Dafür käme man ohne Erweiterungen aus.

Gruß
Mathias

Das klappt prima, die Cards nur als Bild eingebaut sieht gut aus.
Leider habe ich noch keine Lösung, wie ich nun die Modal-Funktion einbauen kann, dass sich eine »lighbox« mit mehreren Abbildungen öffnen, die nicht auf der Seite zu sehen sind.
Ich kann leider, wenn ich ein Bild einbaue, keine »data-toggle« oder ähnliches angeben (oder besser: Ich weiß nicht, wie das geht!).

Ich könnte das alles als html eintragen und dann eine echte Lightbox ansprechen (für jedes Bild eine andere), dann wäre das Titel-Bild aber nicht über die Bildgrößen-Funktion von Contao abgedeckt, oder?
21.11.2019, 10:05
swinde

Ich habe mal das Tutorial gefunden: https://scrimba.com/p/pWqLHa/cBq3PsP aber noch nie mit Contao verwendet.
21.11.2019, 12:12
mdoll
Ich habe mal etwas rumgespielt, und so könnte es gehen, denke ich.
- Du erstellst einen Artikel für Deine Galerie. Dem Artikel gibts Du die Klasse "card-columns".
- Dann brauchst Du ein eigenes Template für Deine Bilder.
- Im Artikel erstellst Du Deine Bilder jeweils als Inhaltselement. In den Templateeinstellungen verpasst Du den Bildern das individuelle Template (s.u).
- Gib jedem Bild die CSS-Klasse 'img-fluid' (oder definiere das zentral im Stylesheet), damit die Bilder responsiv sind. Bei mir sind sie sonst über die cards hinausgegangen.
- Das erste Bild bekommt die Überschrift 'modal1', das 2. 'modal2' usw. Warum, siehst Du unten.
Template (ich habe es 'ce_image_bs-card' genannt):

HTML-Code:

<div class="<?= $this->class ?> card block"<?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>> <?php $this->block('content'); ?> <div class="card-img-top"> <a href="" data-toggle="modal" data-target="#<?= $this->headline ?>"> <?php $this->insert('image', $this->arrData); ?> </a> </div> <?php $this->endblock(); ?> </div>
- Im Template habe ich dem ersten div die Klasse 'card' verpasst.
- Um den insert für das Bild kommt ein <a> tag für das Modal. Für data-target habe ich die Überschrift aus dem Inhaltselement Bild missbraucht (das geht bestimmt auch eleganter). :-)
- Um den <a> Tag kommt ein div mit der Klasse 'card-img-top'.
Den Inhalt der Modale habe ich als HTML-Inhalstelemente im selben Artikel:

HTML-Code:

 <div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="exampleModalCenterTitle">Yar Pirate Ipsum</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>Fore hang the jib bowsprit grog blossom Brethren of the Coast ye shrouds provost pressgang execution dock. Bilge rat keelhaul starboard brig belay long boat mizzen Gold Road fathom gunwalls. Maroon draught yawl boom hempen halter scourge of the seven seas prow grog blossom gally landlubber or just lubber.</p> <p>Rum spyglass spike hempen halter parrel quarterdeck hulk hearties tackle poop deck. Pirate port ballast chase guns log scuttle boom capstan black jack hands. Draft splice the main brace Jack Tar furl take a caulk pirate chase run a shot across the bow capstan Sea Legs. </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div>

Hier ein Dummytext mit Header und Close-Button. Das erste Modal bekommt ein id="modal1", das entspricht der Überschrift des ersten Bildes. Die anderen Modale dann halt 'modal2' usw.

Last not least im CSS ein 'figure {margin: 0}', weil das img-Tag in Contao von figure eingeschlossen wird. Bootstrap hat für figure als Vorgabe ein margin-bottom von 1rem, man hätte ergo einen Abstand zum unteren Kartenrand.

Ergebnis siehst Du hier: https://mathiasdoll.de/

Gruß
Mathias
21.11.2019, 15:55
mdoll

Es geht eleganter.

HTML-Code:

<div class="<?= $this->class ?> card block"<?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>> <?php $this->block('content'); ?> <div class="card-img-top"> <a href="" data-toggle="modal" <?= str_replace('id="', 'data-target="#', $this->cssID) ?>> <?php $this->insert('image', $this->arrData); ?> </a> </div> <?php $this->endblock(); ?> </div>

So kann man die id für das Modal unter CSS-ID eintragen. Dann muss man die Überschrift nicht missbrauchen.