Grav: Bildergalerie

Anmerkung: Der Artikel entstand bevor ich die Website mit Kirby neu aufgebaut hab und bezieht sich auf Grav.

Ich hab länger nicht an GRAV weiterentwickelt, weil mir Kirby mehr Spaß macht. Aber bis ich diese Website und das Blog umgezogen und in Kirby neu aufgebaut hab, wird es noch etwas dauern.
Trotzdem wollte ich versuchen den Aufwand, der aktuell in den einzelnen Blogposts und Rückblicken steckt, technisch noch zu verringern. Gestern hab ich etwas umgebaut, das mir evtl etwas Arbeit abnimmt.

Alte Variante

Die dreispaltige Bildergalerie in den Rückblicken wurde bislang über einen Array im Page-Frontmatter gefüllt. Beispiel aus KW24:

gallery:
    -
        title: 100
        src: kw24-omaellen.jpg
    -
        title: Feldweg
        src: kw24-feldweg.jpg
    -
        title: Chewie
        src: kw24-chewie.jpg

Ich muss also die Dateinamen der Bilder und Alt-Texte bzw. Bildunterschriften in der gewünschten Reihenfolge angeben.

Twig geht die Einträge durch und wirft dann den entsprechenden Code raus:

<div class="mb-5" id="bilder">
   <div class="columns">
      {% for g in header.gallery %}

         {% if g.sub != "" %}
         {% set caption = g.sub %}
         {% else %}
         {% set caption = g.title %}
         {% endif %}

         <div class="column col-sm-12 col-4 text-center mt-3" markdown="1">
          <a rel="lightbox" href="{{ page.url(true)|e }}/{{ g.src }}"><img src="{{ page.url(true)|e }}/{{ g.src }}" alt="{{ g.title|e }}" title="{{ g.title|e }}"> {{ caption|e }}</a>
         </div>
      {% endfor %}
   </div>
 </div>

Als Bildunterschrift wird hierbei der Alt-Text (title) genommen, wenn "sub" nicht gesetzt wurde.

Neue Variante

Mir war bewusst, dass man auch mit GRAV bzw. twig irgendwie einfacher an alle Bilder kommt, die im gleichen Folder wie die Seite liegen. Das geht mit page.media. Reihenfolge wird über eine Nummerierung im Dateinamen gelöst und durch das |sort berücksichtigt. Bildunterschrift hab ich erstmal so gelöst, dass sie Bestandteil des Dateinamens ist. Damit das hero-Bild nicht mitangezeigt wird, hab ich es ausgeschlossen.

{% spaceless %}
<div class="mb-5" id="bilder">
   <div class="columns">
   {% for image in page.media|sort %}
      {% set title = image.basename|e %}
      {% set rtitle = title|regex_replace(['/kw[0-9]{2}-[0-9]{2}-/'], ['']) %}
      {% set htitle = rtitle|regex_replace(['/-/'], [' ']) %}

      {% if htitle != "hero" %}
         <div class="column col-sm-12 col-4 text-center mt-3" markdown="1">
          <a rel="lightbox" href="{{ uri.base() ~ image.url() }}"><img src="{{ uri.base() ~ image.url() }}" alt="{{ htitle }}" title="{{ htitle }}"></a>{{ htitle }}
         </div>
       {% endif %}  
      {% endfor %}
   </div>
 </div>
{% endspaceless %}

Das kann man garantiert noch optimieren, klappt aber erstmal. Ob das wirklich weniger Arbeit bedeutet, weiß ich noch nicht, aber ich war beschäftigt. 😄

Zeit kostet vor allem auch die Bilder vor dem Upload auf 1080x1080 zu bringen und ggf. zu retuschieren, Filter in Pixelmator drauf usw. Vielleicht spar ich mir das auch zukünftig. Man kann mit Grav auch "on the fly" Bilder beschneiden (cropResize), aber hat man dann den gewünschten Ausschnitt? So würde ich aber auch gern versuchen automatisch ein OG:image aus dem hero zu erzeugen, das ich momentan auch noch lokal zuschneide.

Ich hab noch zwei, drei Dinge am Template für die Artikel verändert, so, dass der header wesentlich übersichtlicher ist. Den Gallery-Part vom Anfang spare ich mir so auch an der Stelle.

Edit: Bilder quadratisch

Mit cropZoom hab ich es schonmal hinbekommen, quadratische Ausschnitte automatisiert zu erzeugen:

<a rel="lightbox" href="{{ uri.base() ~ image.url() }}"><img src="{{ uri.base() ~ image.cropZoom(1080, 1080).url()|e }}" alt=""></a>

So wird dann bei Klick das Originalformat in der Lightbox angezeigt, Thumbnail aber im Grid als Square.

Edit: Alt-Text aus Dateinamen

Das hat ein bisschen gedauert gestern, weil die Doku zu regex_split irgendwie falsch war. Jetzt kann die Bildunterschrift/Alt-Text im Dateinamen am Ende mit drei Unterstrichen getrennt werden. Es funktioniert offenbar auch mit Umlauten.

Beispiel:

IMG_20230619_111541_edit_123562930741040___Chewie im Körbchen.jpg
IMG_20230621_114133 (1)___Pferde am Damm.jpg
IMG_20230622_074526___Weißrosa Phlox.jpg

Code:

{% for image in page.media|sort %}
  {% set title = image.basename|e %}
  {% set parts = regex_split(title,'/\\_\\_\\_/u') %}
  {% if title != "hero" %}
     <div class="column col-sm-12 col-4 text-center mt-3" markdown="1">           
        <a rel="lightbox" href="{{ uri.base() ~ image.url() }}"><img src="{{ uri.base() ~ image.cropZoom(1080, 1080).url()|e }}" alt="{{ parts.1|e }}" title="{{ parts.1|e }}"></a> {{ parts.1 }}
     </div>
  {% endif %}  
{% endfor %}

Ergebnis:

Jetzt hier aus Kirby, Code anders, aber es sah in Grav ungefähr genau so aus.