Rename image fields and implement werk-in-detail gallery

- Rename image_main/image_secondary/image_logo/image_portrait to
  portret/extra_1/logo/extra_2 in pages, blueprints, and templates
- Add extra_2 image slot to home and CV (hidden on mobile)
- Wire werk-in-detail to real child pages instead of picsum placeholders
- Remove glightbox CDN dependency from werk-in-detail
- Add album blueprint, template, and grote-objecten album page

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

user/themes/natascha/blueprints/album.yaml

@@ -0,0 +1,4 @@
+title: Album
+'@extends':
+    type: default
+    context: blueprints://pages

user/themes/natascha/blueprints/cv.yaml

@@ -13,11 +13,19 @@ form:
           type: tab
           title: Inhoud
           fields:
-            header.image_portrait:
+            header.portret:
               type: pagemediaselect
-              label: 'Portretfoto'
+              label: 'Portret (zichtbaar op mobiel)'
               preview_images: true
-            header.image_logo:
+            header.extra_1:
               type: pagemediaselect
-              label: 'Logo'
+              label: 'Extra foto (verborgen op mobiel)'
+              preview_images: true
+            header.logo:
+              type: pagemediaselect
+              label: 'Logo (zichtbaar op mobiel)'
+              preview_images: true
+            header.extra_2:
+              type: pagemediaselect
+              label: 'Extra foto rechts (verborgen op mobiel)'
               preview_images: true

user/themes/natascha/blueprints/home.yaml

@@ -13,15 +13,19 @@ form:
           type: tab
           title: Inhoud
           fields:
-            header.image_main:
+            header.portret:
               type: pagemediaselect
-              label: 'Portretfoto (hoofdafbeelding)'
+              label: 'Portret (zichtbaar op mobiel)'
               preview_images: true
-            header.image_secondary:
+            header.extra_1:
               type: pagemediaselect
-              label: 'Portretfoto (tweede afbeelding, zichtbaar vanaf tablet)'
+              label: 'Extra foto (verborgen op mobiel)'
               preview_images: true
-            header.image_logo:
+            header.logo:
               type: pagemediaselect
-              label: 'Logo'
+              label: 'Logo (zichtbaar op mobiel)'
+              preview_images: true
+            header.extra_2:
+              type: pagemediaselect
+              label: 'Extra foto rechts (verborgen op mobiel)'
               preview_images: true

user/themes/natascha/templates/album.html.twig

@@ -0,0 +1,26 @@
+{% extends 'partials/base.html.twig' %}
+{% block extra_css %}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css">
+{% endblock %}
+{% block extra_js %}
+<script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js" defer></script>
+{% endblock %}
+{% block content %}
+<div class="row mb-3">
+    <div class="col-12 col-lg-8 offset-lg-2">
+        <h1 class="funky-font main-header text-center">{{ page.title }}</h1>
+        {{ content|raw }}
+    </div>
+</div>
+<div class="row g-3">
+    {% for name, img in page.media.images %}
+    <div class="col-6 col-md-4 col-lg-3">
+        <a href="{{ img.url }}" class="glightbox gallery-item" data-gallery="{{ page.slug }}">
+            <div class="gallery-thumb">
+                <img src="{{ img.url }}" loading="lazy" alt="{{ page.title }}">
+            </div>
+        </a>
+    </div>
+    {% endfor %}
+</div>
+{% endblock %}

user/themes/natascha/templates/cv.html.twig

@@ -2,15 +2,21 @@
 {% set page_class = 'row p-3' %}
 {% block content %}
 <div class="col-12 col-md-3 p-3">
-    {% set img_portrait = page.header.image_portrait ? page.media[page.header.image_portrait].url : url('theme://images/portret-1.jpg') %}
-    <img src="{{ img_portrait }}" class="img-fluid mb-3" alt="Portret Natascha Rieter">
+    {% set portret = page.header.portret ? page.media[page.header.portret].url : url('theme://images/portret-1.jpg') %}
+    <img src="{{ portret }}" class="img-fluid mb-3" alt="Portret Natascha Rieter">
+    {% if page.header.extra_1 %}
+    <img src="{{ page.media[page.header.extra_1].url }}" class="img-fluid mb-3 d-none d-md-block" loading="lazy" alt="Portret Natascha Rieter">
+    {% endif %}
 </div>
 <div class="col-12 col-md-6 p-3 text-start">
     <h1 class="funky-font main-header text-center">{{ page.title }}</h1>
     {{ content|raw }}
 </div>
 <div class="col-12 col-md-3 p-3 text-center">
-    {% set img_logo = page.header.image_logo ? page.media[page.header.image_logo].url : url('theme://images/logo-blauw.png') %}
-    <img src="{{ img_logo }}" class="img-fluid mb-3" loading="lazy" alt="Logo Galerie Groot Welsden">
+    {% set logo = page.header.logo ? page.media[page.header.logo].url : url('theme://images/logo-blauw.png') %}
+    <img src="{{ logo }}" class="img-fluid mb-3" loading="lazy" alt="Logo Galerie Groot Welsden">
+    {% if page.header.extra_2 %}
+    <img src="{{ page.media[page.header.extra_2].url }}" class="img-fluid d-none d-md-block" loading="lazy" alt="Portret Natascha Rieter">
+    {% endif %}
 </div>
 {% endblock %}

user/themes/natascha/templates/home.html.twig

@@ -2,17 +2,20 @@
 {% set page_class = 'row p-3' %}
 {% block content %}
 <div class="col-12 col-md-6 col-lg-3 p-3">
-    {% set img_main = page.header.image_main ? page.media[page.header.image_main].url : url('theme://images/portret-2.jpg') %}
-    {% set img_secondary = page.header.image_secondary ? page.media[page.header.image_secondary].url : url('theme://images/portret-1.jpg') %}
-    <img src="{{ img_main }}" class="img-fluid mb-3" alt="Portret Natascha Rieter">
-    <img src="{{ img_secondary }}" class="img-fluid d-none d-md-block" loading="lazy" alt="Portret Natascha Rieter">
+    {% set portret = page.header.portret ? page.media[page.header.portret].url : url('theme://images/portret-2.jpg') %}
+    {% set extra_1 = page.header.extra_1 ? page.media[page.header.extra_1].url : url('theme://images/portret-1.jpg') %}
+    <img src="{{ portret }}" class="img-fluid mb-3" alt="Portret Natascha Rieter">
+    <img src="{{ extra_1 }}" class="img-fluid mb-3 d-none d-md-block" loading="lazy" alt="Portret Natascha Rieter">
 </div>
 <div class="col-12 col-md-6 col-lg-6 p-3 text-start">
     <h1 class="funky-font main-header text-center">{{ page.title }}</h1>
     {{ content|raw }}
 </div>
 <div class="col-12 col-md-6 col-lg-3 p-3 text-center">
-    {% set img_logo = page.header.image_logo ? page.media[page.header.image_logo].url : url('theme://images/logo-blauw.png') %}
-    <img src="{{ img_logo }}" class="img-fluid mb-3" loading="lazy" alt="Logo Galerie Groot Welsden">
+    {% set logo = page.header.logo ? page.media[page.header.logo].url : url('theme://images/logo-blauw.png') %}
+    <img src="{{ logo }}" class="img-fluid mb-3" loading="lazy" alt="Logo Galerie Groot Welsden">
+    {% if page.header.extra_2 %}
+    <img src="{{ page.media[page.header.extra_2].url }}" class="img-fluid d-none d-md-block" loading="lazy" alt="Portret Natascha Rieter">
+    {% endif %}
 </div>
 {% endblock %}

user/themes/natascha/templates/werk-in-detail.html.twig

@@ -1,21 +1,24 @@
 {% extends 'partials/base.html.twig' %}
-{% block extra_css %}
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css">
-{% endblock %}
-{% block extra_js %}
-<script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js" defer></script>
-{% endblock %}
 {% block content %}
 <div class="row mb-3">
     <h1 class="funky-font main-header text-center">{{ page.title }}</h1>
 </div>
 <div class="row g-3">
-    {% for i in 1..8 %}
+    {% for child in page.children %}
+    {% if child.published %}
     <div class="col-6 col-md-4 col-lg-3">
-        <a href="https://picsum.photos/seed/detail{{ i }}/800/800" class="glightbox gallery-item" data-gallery="detail" data-description="Werk {{ i }}">
-            <div class="gallery-thumb"><img src="https://picsum.photos/seed/detail{{ i }}/350/350" loading="lazy" alt="Werk {{ i }}"></div>
+        <a href="{{ child.url }}" class="gallery-item d-block">
+            <div class="gallery-thumb">
+                {% for name, img in child.media.images %}
+                {% if loop.first %}
+                <img src="{{ img.url }}" loading="lazy" alt="{{ child.title }}">
+                {% endif %}
+                {% endfor %}
+            </div>
+            <p class="mt-2 text-center small">{{ child.title }}</p>
         </a>
     </div>
+    {% endif %}
     {% endfor %}
 </div>
 {% endblock %}