Gallerie mit nur einem Vorschaubild responsive

Moin zusammen,
ZIEL: ich möchte gerne im FE ein Bild zeigen, dabei ist mir das Modul egal (Text/Bild Gallerie...) klickt man dann auf das Bild, soll sich dieses ABER zusammen mit weiteren Bildern in der Lightbox öffnen.

PROBLEM: Ich kann in der Gallerie natürlich einfach die Höhe anpassen, dann werden die weiteren Vorschaubilder aus der Gallerie z.B. einfach abgeschnitten, wenn ich jetzt die Seite aber kleiner ziehe, passt sich das Bild an, die Höhe jedoch nicht und früher oder später kommt das nächste Bild zum Vorschein und es werden ja alle Bilder geladen.

FRAGE: Hat jemand für meine Anforderungen eine Lösung?

Ich bedanke mich für alle Vorschläge und wünsche allen einen schönen Abend.

Du könntest per CSS einfach nur das erste Bild der Galerie anzeigen lassen:

PHP-Code:

---

.ce_gallery > ul > li + li {
    display:none;
} 


---

anstatt das irgendwie mit der Höhe zu machen.

Perfekt lieben Dank... geht ohne probleme :-)
Ich habe so viel probiert, da wird man schon etwas weich in der Birne ;-)

Oder, vielleicht etwas sauberer:

Das Template anpassen, so dass es beim ersten durchlauf das normale li mit Bild erstellt und bei jedem weiteren durchlauf nur noch den Link generiert, der kein weiteres Bild enthält, aber für die Lightbox nötig ist.

Damit würdest Du auch die versteckten Bilder nicht mitladen.

Zumindest bei statischen Seiten hat das bisher problemlos funktioniert.

Zitat:

---

Zitat von Samuell

Das Template anpassen, so dass es beim ersten durchlauf das normale li mit Bild erstellt und bei jedem weiteren durchlauf nur noch den Link generiert, der kein weiteres Bild enthält, aber für die Lightbox nötig ist.

---

Ich kann leider nicht folgen. Kannst du das bitte etwas genauer erläutern oder das Template skizzieren?

zB. so:

PHP-Code:

---

<ul class="cols_<?= $this->perRow ?>">
  <?php $count = 0; ?>
  <?php foreach ($this->body as $class=>$row): ?>
    <?php foreach ($row as $col): ?>
      <?php if ($col->addImage): ?>
        <li class="<?= $class ?> <?= $col->class ?>">
          <figure class="image_container"<?php if ($col->margin): ?> style="<?= $col->margin ?>"<?php endif; ?>>
            <?php if ($col->href): ?>
              <a href="<?= $col->href ?>"<?= $col->attributes ?> title="<?= $col->alt ?>"><?php if( $count == 0 ) $this->insert('picture_default', $col->picture); ?></a>
            <?php else: ?>
              <?php if( $count == 0 ) $this->insert('picture_default', $col->picture); ?>
            <?php endif; ?>
            <?php if ($col->caption): ?>
              <figcaption class="caption"><?= $col->caption ?></figcaption>
            <?php endif; ?>
          </figure>
        </li>
        <?php ++$count; ?>
      <?php endif; ?>
    <?php endforeach; ?>
  <?php endforeach; ?>
</ul>

---

Kleiner Nachteil: mit dem Template werden die <li>s und <figure>s immer erzeugt, nur die Bilder werden weggelassen. Man muss also zusätzlich per CSS (wie oben erwähnt) auch die <li>s verstecken.
Hat mir aber trotzdem sehr geholfen :D

Zitat:

---

Zitat von Spooky

Du könntest per CSS einfach nur das erste Bild der Galerie anzeigen lassen:

PHP-Code:

---

.ce_gallery > ul > li + li {
    display:none;
} 


---

anstatt das irgendwie mit der Höhe zu machen.

---

.. gerade verwendet - passt!!!!!

Hallo zusammen,

ich habe auch versucht, dass die Galerie nur mit einem Anfangsbild auf der Übersichtsseite der News angezeigt wird, der oben genannte CSS-Code hat aber keine Veränderung gebracht.
Gilt er noch für Contao 4.13 oder hängt es mit der News zusammen?

Welches Template sollte man wie von Spooky beschrieben ändern?

doescher

Das sieht mir nach dem Galerie-Template aus. Musst Du dann ggf. für das aktuelle Template entsprechend anpassen. Der Code ist ja schon etwas älter.

Was denn CSS-Code betrifft, der nicht greift - poste einen Link zur Seite. An der Nutzung der Galerie in den News kann es nicht liegen zu mindestens nicht direkt. Es könnte z.B. durch andere Einstellungen für die Galerie in den News überschrieben werden.

Leider ist die Seite noch nicht live, daher kann ich noch keinen Link posten.
Ich habe es noch nicht hinbekommen, mich aber mit einer anderen Lösung beholfen, die auch okay ist.
Wenn die Seite live ist melde ich mich noch, falls ich das doch noch ändern möchte...