Contao-Camp 2024
Ergebnis 1 bis 11 von 11

Thema: Gallerie mit nur einem Vorschaubild responsive

  1. #1
    Contao-Nutzer
    Registriert seit
    11.11.2015.
    Beiträge
    6

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

  2. #2
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    34.050
    Partner-ID
    10107

    Standard

    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.

  3. #3
    Contao-Nutzer
    Registriert seit
    11.11.2015.
    Beiträge
    6

    Standard

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

  4. #4
    Alter Contao-Hase
    Registriert seit
    20.03.2010.
    Ort
    Hannover
    Beiträge
    1.041

    Standard

    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.

  5. #5
    Contao-Urgestein Avatar von folkfreund
    Registriert seit
    09.04.2010.
    Beiträge
    1.928

    Standard

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

  6. #6
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    34.050
    Partner-ID
    10107

    Standard

    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 == $this->insert('picture_default'$col->picture); ?></a>
                <?php else: ?>
                  <?php if( $count == $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>

  7. #7
    Contao-Urgestein Avatar von folkfreund
    Registriert seit
    09.04.2010.
    Beiträge
    1.928

    Standard

    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

  8. #8
    Contao-Nutzer Avatar von scater61
    Registriert seit
    29.03.2012.
    Ort
    94072 Bad Füssing
    Beiträge
    11

    Staunendes Gesicht Danke - toller Tip!

    Zitat Zitat von Spooky Beitrag anzeigen
    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!!!!!
    Auch der längste Weg fängt mit dem ersten Schritt an.

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

    Standard

    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

  10. #10
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.733
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




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

    Standard

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

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
  •