Galerie mit 1 Thumbnail

Hi,

habt ihr eine Idee, wie ich die Galerie so anpassen kann, dass 1 Thumbnail gezeigt wird und beim Klick darauf kann man per Lightbox/Pfeiltasten die weiteren Bilder anschauen kann. Vermute, das wird über eine Template-Änderung möglich. Hat jemand eventuell eine Vorlage?

Contao 4-fähig wäre schön :rolleyes:

Hallo Kim,

das könntest du ansehen und testen:
https://www.marcosimbuerger.ch/conta...e-oeffnen.html

Im Grunde geht das auch mit einer Galerie und für die dann eine Klasse (damit man auch noch 'normale' Galerien haben kann).
Grundlage ist recht einfach: Per CSS alle Bilder verstecken (nur das erste nicht) fertig xD
Etwas mehr Arbeit im Template: Wenn die Galerie diese Klasse hat, dann Bilder ausgeben und bei allen Bildern (bis auf dem ersten) nen display: none (oder per Klasse).
Sollte dann auch klappen ;-)

Ich meine irgendwo gab es dazu auch mal nen Tutorial.. finde das gerade allerdings nicht (und das was ich dazu vor ewigkeiten mal gemacht habe find ich auch gerade nicht mehr.. ich glaub das Projekt gibts schon gar nicht mehr *g*).

Viele Grüße

Edit: Hab mal was rausgesucht:
https://de.contaowiki.org/Galerie_mi...m_Vorschaubild
https://contao.ninja/bildergalerie-tipps.html

Ich bin auch der Meinung, dass CSS die schnellste, einfachste und vermutlich sogar beste Variante ist.

Ich glaube zu wissen, dass die Bilder beim Einfügen in den DOM von der Lightbox initial übernommen werden. D.h. sie müssen zwangsläufig erstmal rein, wenn man beim Klicken nicht mit JavaScript was dazu frickeln will.

Am Einfachsten wäre es alle Bilder außer das erste per CSS einfach auszublenden .... z.B. so:

HTML-Code:

---

ce_gallery li:not(:first-child) {display: none;}

---

Gruß, Cliff

Eine 1-Vorschaubild-Galerie brauchte ich gestern auch. Da ich keine unnötigen Vorschaubilder ausgeben wollte, habe ich im gallery_default Template in der verschachtelten PHP-Schleife eine Zählvariable mitlaufen lassen. Nur bei Bild Nummer 1 wird noch alles vollständig ausgegeben, bei allen folgenden Galeriebildern gebe ich nur noch einen Link ohne Inhalt aus. Funktioniert gut.
Das Template habe ich natürlich umbenannt, so dass man in den Template-Einstellungen der Galerie auch noch die Standardvariante zur Verfügung hat.

Hallo, altes Thema, aber ich mache das wie bei foundation mit dem 'featured image',
also css, alles ausblenden und das erste (first-child) einblenden, geht schnell und gut, ohne Hacks.

Zitat:

---

Zitat von cliffparnitzky

Am Einfachsten wäre es alle Bilder außer das erste per CSS einfach auszublenden .... z.B. so:

HTML-Code:

---

ce_gallery li:not(:first-child) {display: none;}

---

Gruß, Cliff

---

Hallo Cliff

Schon eine Weile her aber dein Tipp hat mir gerade sehr geholfen.
Herzlichen Dank dafür.

Liebe Grüsse aus der Schweiz.

Zitat:

---

Zitat von rusty

Eine 1-Vorschaubild-Galerie brauchte ich gestern auch. Da ich keine unnötigen Vorschaubilder ausgeben wollte, habe ich im gallery_default Template in der verschachtelten PHP-Schleife eine Zählvariable mitlaufen lassen. Nur bei Bild Nummer 1 wird noch alles vollständig ausgegeben, bei allen folgenden Galeriebildern gebe ich nur noch einen Link ohne Inhalt aus. Funktioniert gut.
Das Template habe ich natürlich umbenannt, so dass man in den Template-Einstellungen der Galerie auch noch die Standardvariante zur Verfügung hat.

---

Danke, da bin ich heut mittag zufällig drübergestolpert, und habs mit diesem Code vollbracht. (Version 4.9.8) Schöne Idee!

Im Template selbst hab ich dazu noch via Flexbox gezaubert, sodass eine Überschrift, kurze Beschreibung des Albums und Anzahl der Bilder rechts daneben ausgegeben wird:
Mein Problem wäre "nur" noch: woher und wie bekomme ich die Überschrift der Galerie von links nach rechts oben hin? CSS?
Per DCA ein Feld für die Beschreibung generieren dürfte eher weniger das Problem sein, die Bilderanzahl hab ich schon mit einem Counter erfasst.
Hier mal ein Bild zur Veranschaulichung und Template + CSS dazu:

Anhang 23946

gallery_single_image_flex.html5:

PHP-Code:

---

<div class="gallery_flex_container">
  <div class="gallery_flex_parts">
    <ul class="cols_<?= $this->perRow ?>" itemscope itemtype="http://schema.org/ImageGallery">
      <?php $i = 1; $count = 0; foreach ($this->body as $class => $row): ?>
        <?php $count++; foreach ($row as $col): ?>
          <?php if ($col->addImage): ?>
            <?php if ($i == 1): ?>
              <li class="<?= $class ?> <?= $col->class ?>">
              <figure class="image_container"<?php if ($col->margin): ?> style="<?= $col->margin ?>"<?php endif; ?>><?php endif; ?>    
                <?php if ($col->href): ?>
                  <a href="<?= $col->href ?>"<?= $col->attributes ?><?php if ($col->linkTitle): ?> title="<?= $col->linkTitle ?>" alt="<?= $col->alt ?>"<?php endif; ?>><?php if ($i == 1): ?><?php $this->insert('picture_default', $col->picture); ?><?php endif; ?></a>
                <?php endif; ?>
                <?php if ($i == 1): ?>
              </figure>
              </li>
            <?php endif; ?>
          <?php endif; ?>
        <?php $i++; endforeach; ?>
      <?php endforeach; ?>
    </ul>
  </div>
  <div class="gallery_flex_parts">
    <h2>Überschrift</h2>
    <p>Albumbeschreibung</p>
    <p class="info"><?= $count; ?> Bilder</p>
  </div>
</div>

---

gallery_single_image_flex.css:

Code:

---

/* Bildergalerie ein Vorschaubild in Flexbox */
.gallery_flex_container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.gallery_flex_container > div {
  flex: 0 40%;
  align-self: flex-start;
}

.gallery_flex_parts,
.gallery_flex_parts li {
  width: 100%;
  list-style-type: none;
}

---

Hat mir jemand eine Idee zu meiner Frage? Wär subber :D

ToM

Nachtrag: war nicht ganz einfach, aber ich habs hinbekommen :cool:
Ganz herzlichen Dank an Spooky für die neue Dokumentation!!!

templates/gallery_single_image_flex.html5:

HTML-Code:

---

<div class="gallery_flex_container">
  <div class="gallery_flex_part_left">
    <ul class="cols_<?= $this->perRow ?>" itemscope itemtype="http://schema.org/ImageGallery">
      <?php $count = 0; foreach ($this->body as $class => $row): ?>
        <?php foreach ($row as $col): ?>
          <?php if ($count == 0): ?>       
            <?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="<?= $this->headline ?>" alt="<?= $col->alt ?>"<?php $this->insert('picture_default', $col->picture); ?></a>
                  <?php endif; ?>
                </figure>
              </li>
            <?php endif; ?>
          <?php else: ?>
            <?php if ($col->addImage): ?>
              <li class="<?= $class ?> <?= $col->class ?>" style="display:none;">
                <figure class="image_container"<?php if ($col->margin): ?> style="<?= $col->margin ?>"<?php endif; ?>>
                  <?php if ($col->href): ?>
                    <a href="<?= $col->href ?>"<?= $col->attributes ?><?php if ($col->linkTitle): ?> title="<?= $col->linkTitle ?>" alt="<?= $col->alt ?>"<?php endif; ?>><?php $this->insert('picture_default', $col->picture); ?></a>
                  <?php endif; ?>
                </figure>
              </li>
            <?php endif; ?>
          <?php endif; ?>
        <?php $count++; endforeach; ?>
      <?php endforeach; ?>
    </ul>
  </div>
  <div class="gallery_flex_part_right">
    <h2><?= $this->headline ?></h2>
    <!--    <a href="<?= $col->href ?>"<?= $col->attributes ?> title="<?= $this->headline ?>" alt="<?= $col->alt ?>"><h2><?= $this->headline ?></h2></a>    -->
    <p><?= $this->galry_txt ?></p>
    <p class="info"><?= $count; ?> <?php if ($count == 0): ?> Bild <?php else: ?> Bilder <?php endif; ?></p>
  </div>
</div>

---

files/layout/css/gallery_single_image_flex.css:

Code:

---

/* Bildergalerie ein Vorschaubild in Flexbox */
.ce_gallery.block > h2 {
    display: none;
}

.gallery_flex_container {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
}

.gallery_flex_container > div {
    flex: 0 50%;
}

.gallery_flex_part_left li {
    list-style-type: none;
}

.gallery_flex_part_left {
    align-self: center;
}

.gallery_flex_part_right {
    align-self: flex-start;
}

---

contao/dca/tl_content.php:

PHP-Code:

---

<?php

// Galerie Feld zur Beschreibung vom Album 
use Contao\CoreBundle\DataContainer\PaletteManipulator;
$GLOBALS['TL_DCA']['tl_content']['fields']['galry_txt'] = [
    'label'                     => &$GLOBALS['TL_LANG']['tl_content']['galry_txt'],
    'exclude'                     => true,
    'search'                     => true,
    'inputType'                 => 'text',
    'eval'                         => array('maxlength'=>255, 'tl_class'=>'w50'),
    'sql'                         => "varchar(255) NOT NULL default ''",
];
PaletteManipulator::create()
    ->addLegend('galry_txt', 'headline', PaletteManipulator::POSITION_AFTER)
    ->addField('galry_txt', 'headline', PaletteManipulator::POSITION_AFTER)
    ->applyToPalette('gallery', 'tl_content')
;

---

contao/languages/de/tl_content.php:

PHP-Code:

---

<?php

// Galerie Feld zur Beschreibung vom Album
$GLOBALS['TL_LANG']['tl_content']['galry_txt'] = ['Beschreibung','Hier können Sie dem Inhaltselement eine Beschreibung hinzufügen.'];

---

Ergebnis:
Anhang 23947

Das man natürlich nach Leeren des Caches auch noch das Installtool aufrufen sollte, wurde mir dann auch irgendwann mal bewusst... :rolleyes:
Kleine Kosmetik am Rande wird noch passieren müssen: die Überschrift möchte genauso klickbar sein, wie das Bild auch und die Links sollten dann gleich sein.
Zudem stimmt die Anzahl der Bilder, aber zur Lightbox etc übergibt er eins weiter?!?:mad:

ToM