[WIP] Add gallery

content/blog/2024/03/2024-03-17_clt-2024/index.md

@@ -6,6 +6,16 @@ authors = ["tuxilio", "krfl9500", "pinguin"]
 image = "stand-clt-2024.jpg"
 alt = "Florian, Robert, Lukas, Nik, Tuxilio und Pingu hinter einem orange gedeckten Infostand mit Plüsch-Leopard, Plüsch-Pinguin, einem Laptop und einigen Flyern"
 credits = "Dominik George, CC-BY-NC-ND"
+
+[[extra.gallery.photos]]
+image = "elektronik.jpg"
+alt = "Hände eines Kindes, die Drähte und LEDs auf ein Breadboard mit einem ESP stecken"
+credits = "Dominik George, CC-BY"
+
+[[extra.gallery.photos]]
+image = "spiele.jpg"
+alt = "Blick über die Schulter eines Kindes, das an einem Laptop den Map-Editor Tiled bedient"
+credits = "Dominik George, CC-BY"
 +++
 
 Wir waren am Wochenende bei den [Chemnitzer Linux-Tagen](https://chemnitzer.linux-tage.de/2024/de/) (CLT).
@@ -33,6 +43,8 @@ zu programmieren und eine Karte dafür zu gestalten.
 Am nächsten Tag gab es den Workshop "Minetest-Modding". Dabei konnten Kinder nach
 einer kleinen Einführung in das Thema ihre eigenen Mods entwickeln und ausprobieren.
 
+{{ gallery(name="photos") }}
+
 Wir selbst fanden es wichtig, dass wir mit unseren Workshops Kindern freie Software
 näher bringen konnten. Dabei wollten wir vermitteln, dass man Software auch
 [verändern und verstehen](@/infos/verstehen/index.md), statt nur passiv nutzen, kann.

sass/_utils.scss

@@ -3,7 +3,7 @@
   height: 70%;
 }
 
-.card > .card-image figure.image > figcaption {
+figure.image > figcaption {
   position: absolute;
   bottom: 0;
   width: 100%;

templates/shortcodes/gallery.html

+<section class="section">
+  <div class="columns is-multiline is-same-height is-centered is-mobile">
+    {% for picture in page.extra.gallery[name] %}
+      <div class="column is-one-third is-half-mobile">
+        <a href="#">
+          <figure class="image is-4by3">
+            {% set image = resize_image(path="@/" ~ page.colocated_path ~ "/" ~ picture.image, width=800, height=600) -%}
+            <img src="{{image.url}}" alt="{{picture.alt}}" />
+            {% if picture.image.credits %}
+              <figcaption class="p-1 has-text-white has-background-black is-size-7 is-italic">{{ picture.image.credits }}</figcaption>
+            {% endif %}
+          </figure>
+        </a>
+      </div>
+    {% endfor %}
+  </div>
+</section>