gallery_default.html5 erweitern: CSS-Klasse für "Vorschaubilder pro Reihe"

[Nina]

Wenn man wissen möchte, welche Einstellung im Backend bei den Galerien im "Vorschaubilder pro Reihe"-Select gemacht wurde, kann man sich diese Information beispielsweise als CSS-Klasse über den PHP-Code ins Template holen:

 <?php if ($this->perRow): ?>per_row_<?php echo $this->perRow; ?><?php endif; ?>

Sind dann für eine Galerie z.B. 3 Vorschaubilder pro Reihe gewählt, wird so die Klasse per_row_3 ergänzt auf die man via CSS beliebiges Styling (z.B. eine prozentuale Breitenangabe) legen kann.
Das ganze Template sieht dann so aus:

<?php #perRow-Abfrage nach Bilder per Reihe um Styling anzupassen ?>

<ul>
  <?php foreach ($this->body as $class=>$row): ?>
    <?php foreach ($row as $col): ?>
      <?php if ($col->addImage): ?>
        <li class="<?php echo $class; ?> <?php echo $col->class; ?> <?php if ($this->perRow): ?>per_row_<?php echo $this->perRow; ?><?php endif; ?>">
          <figure class="image_container"<?php if ($col->margin): ?> style="<?php echo $col->margin; ?>"<?php endif; ?>>
            <?php if ($col->href): ?>
              <a href="<?php echo $col->href; ?>"<?php echo $col->attributes; ?> title="<?php echo $col->alt; ?>"><img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>"></a>
            <?php else: ?>
              <img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>">
            <?php endif; ?>
            <?php if ($col->caption): ?>
              <figcaption class="caption" style="width:<?php echo $col->arrSize[0]; ?>px"><?php echo $col->caption; ?></figcaption>
            <?php endif; ?>
          </figure>
        </li>
      <?php endif; ?>
    <?php endforeach; ?>
  <?php endforeach; ?>
</ul>

Ich habe im Ticketsystem auch angeregt, diese Ausgabe standardmäßig im Template zu machen, aber bis dahin (oder falls es nicht akzeptiert wird), hier eben meine Vorlage für andere Nutzer die das brauchen

[Andreas]

Mal ne Frage. Wenn du die Bilder damit auf ein passendes Format zwingen möchtest, das wäre doch schlecht, weil es für den Redakteur ja dann so aussieht, als wären die Bilder in Ordnung, owohl evtl. jedes Bild eine Breite von 2000px hätte? Ich verstehe den Sinn der Sache nicht wirklich.

Und warum würde eine Klasse z.B. col3 im Hauptcontainer nicht ausreichen? Warum muss das jeder Listenpunkt haben?

[Nina]

Zwei legitime Punkte, die aber im speziellen Anwendungsfall beide nicht zum Tragen kommen (vorausgesetzt man sorgt auf anderem Wege dafür, dass die Redakteure keine 2000px breiten Bilder einsetzen ).
Und ja, man könnte die Ausgabe auch vermutlich einmalig z.B. nur der UL zuweisen, aber für mich war es so praktischer.

Wie das halt mit CSS-Klassen so ist: Was man damit macht, ist dem jeweiligen Webdesigner überlassen und kann mehr oder weniger gute Ergebnisse erzielen

[Spooky]

Mal ne Frage. Wenn du die Bilder damit auf ein passendes Format zwingen möchtest, das wäre doch schlecht, weil es für den Redakteur ja dann so aussieht, als wären die Bilder in Ordnung, owohl evtl. jedes Bild eine Breite von 2000px hätte? Ich verstehe den Sinn der Sache nicht wirklich.

Nein, Contao agiert da nämlich sehr intelligent, evt. ist das auch Nina noch nicht aufgefallen (ist mir auch erst vor kurzem aufgefallen).

Wenn du in System - Einstellungen - Dateien und Bilder - Maximale Frontend-Breite einen Wert eingetragen hast, verkleinert die Gallery automatisch alle Bilder auf Maximale Frontend-Breite / Vorschaubilder pro Reihe, wenn man in der Gallery keine andere Größenangabe gemacht hat!

Also wenn du bspw. eine Maximale Frontend-Breite von 1200 Pixel eingestellt hast und eine Gallery mit 4 Bilder pro Reihe einfügst, werden die Bilder auf 300 Pixel Breite verkleinert, es sei denn der Redakteur gibt selbst einen Wert an.

[Nina]

Das meinte ich weiter oben, aber danke nochmal für die ausführliche Erläuterung für die Leute, denen diese Funktionalität nicht so bekannt ist

[Andreas]

Nein, Contao agiert da nämlich sehr intelligent, evt. ist das auch Nina noch nicht aufgefallen (ist mir auch erst vor kurzem aufgefallen).

Dein "Nein" ist hier nicht passend.
Max. FE-Breite ist schon seit 8 Jahren bekannt. Aber default ist der Wert leer, weil man ihn kaum nutzen kann. Man müsste dann nämlich Abstände in der Galerie eintragen. Die werden dann bei der Berechnung mit berücksichtigt. Meist will man aber die Abstände individuell setzen und vielleicht noch einen Border oder ein extra Margin für einen Schlagschatten usw. Also der Wert für max. FE-Breite macht nur Sinn, wenn du kein weiteres CSS aufsetzt welches margin, border od. padding vergibt und dir die Inline-Style Abstände vom BE genügen.

Mit dieser Einstellung kann man zwar verhindern, dass die Bilder dann übergroß werden, also z.B. 2000px aber das macht doch keinen Sinn, wenn die Bilder da z.B. 315px breit sind und Nina würde sie mit max-width 33% anhand ihrer Klasse auf 300px runter skalieren. Ich finde die Bilder sollten schon die richtige Größe haben. Max-Widht 100% für responsive ist ne andere Geschichte, das ist ok solange man nicht mit angepassten Bildgrößen für responsive arbeiten möchte.

@Nina
Ich denke ne Klasse im Wrapper DIV der Gallery wäre ok, wenn überhaupt. Der Selektor .col3 li ist doch ausreichend. Ich finde das ein wenig sehr speziell dafür noch ne extra Klasse zu generieren. Du kannst die Klasse ja auch manuell in die Galerie eintragen, oder wie du es gemacht hast, das Template anpassen.

[Spooky]

Ja, wenn du deine Bilder exakt in der Größe ausgeben willst, wie sie im (non-retina-)Desktop-Browser dann gerendert werden, dann ist dieser Anwendungsfall natürlich nichts für dich.

Wenn man responsive/fluid arbeitet, dann ist diese Vorgehensweise am praktischsten, finde ich. Für Developer und Redakteur. Die Aussage, dass man die Einstellung "Max. FE-Breite" kaum nutzen kann, halte ich daher auch für übertrieben - gerade hier sieht man einen sehr guten Anwendungsfall.