Contao-Camp 2024
Ergebnis 1 bis 8 von 8

Thema: Contao 4.8.: Bootstrap-Bildergallerie mit Flexboxen und Lightbox

  1. #1
    Contao-Fan
    Registriert seit
    05.11.2012.
    Beiträge
    400

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

  2. #2
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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
    Grüsse
    Bernhard


  3. #3
    Contao-Fan
    Registriert seit
    05.11.2012.
    Beiträge
    400

    Standard

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

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

    Standard

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

  5. #5
    Contao-Fan
    Registriert seit
    05.11.2012.
    Beiträge
    400

    Standard

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

  6. #6
    Contao-Fan
    Registriert seit
    05.11.2009.
    Ort
    Liebschützberg (Sachsen)
    Beiträge
    526

    Standard

    Ich habe mal das Tutorial gefunden: https://scrimba.com/p/pWqLHa/cBq3PsP aber noch nie mit Contao verwendet.

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

    Standard

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

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

    Standard

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