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:
<!-- Modal 1 -->
<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