Add gallery-1, gallery-2, gallery-3 pages and templates

pages/03.galerie/galerie.en.md

@@ -1,6 +1,15 @@
 ---
 title: Gallery
 menu: Gallery
----
+intro: "An impression of Keramiekgalerie Groot Welsden – Natascha Rieter's studio and exhibition space in Bunde."
+section1_heading: 'Currently on display'
+section1_text: |
+    The gallery shows a changing selection of small sculptures, reliefs, clay paintings and monumental maquettes. *(editorial note: describe the current exhibition/setup here)*
+section1_images: []
+section2_heading: 'Visiting & purchasing'
+section2_text: |
+    The gallery is open every Friday and Saturday from 1pm to 5pm, and always by appointment. Works are for sale; ask about pricing and options during your visit or get in touch. Commissions and custom work are also possible.
 
-A selection of ceramic works by Natascha Rieter — from small sculptures to monumental commissions. Click an image for an enlarged view.
+    For individual pieces, see the [Work in detail](/werk-in-detail) page.
+section2_images: []
+---

pages/03.galerie/galerie.nl.md

@@ -1,6 +1,12 @@
 ---
-title: Galerie
+title: 'Galerie g p k l GLKP'
 menu: Galerie
+intro: 'Een sfeerbeeld van Keramiekgalerie Groot Welsden – het atelier en de expositieruimte van Natascha Rieter in Bunde.'
+section1_heading: 'Op dit moment te zien'
+section1_text: 'In de galerie is een wisselende selectie te zien van kleinplastieken, reliëfs, kleischilderijen en monumentale maquettes. *(redactie: hier de actuele expositie/opstelling beschrijven)*'
+section2_heading: 'Bezoeken & aankoop'
+section2_text: "De galerie is open iedere vrijdag en zaterdag van 13:00 tot 17:00 uur, en altijd op afspraak. Werken zijn te koop; vraag naar prijs en mogelijkheden tijdens uw bezoek of neem contact op. Opdrachten en maatwerk zijn eveneens mogelijk.\n\nLosse werken bekijkt u het beste op de pagina [Werk in detail](/werk-in-detail)."
+sitemap:
+    lastmod: '25-08-2026 17:40'
 ---
 
-Een selectie van keramische werken van Natascha Rieter – van kleinplastieken tot monumentale opdrachten. Klik op een afbeelding voor een vergrote weergave.

pages/04.werk-in-detail/werk-in-detail.en.md

@@ -1,6 +1,7 @@
 ---
 title: 'Work in detail'
 menu: 'Work in detail'
+child_type: album
 sitemap:
     lastmod: '18-08-2026 17:59'
 ---

pages/04.werk-in-detail/werk-in-detail.nl.md

@@ -1,5 +1,6 @@
 ---
 title: 'Werk in detail'
+child_type: album
 sitemap:
     lastmod: '24-08-2026 19:25'
 ---

pages/06.gallery-1/gallery-1.nl.md

@@ -0,0 +1,9 @@
+---
+title: Galerie
+menu: 'Galerie 1'
+intro: 'Een sfeerbeeld van Keramiekgalerie Groot Welsden – het atelier en de expositieruimte van Natascha Rieter in Bunde.'
+section1_heading: 'Op dit moment te zien'
+section1_text: 'In de galerie is een wisselende selectie te zien van kleinplastieken, reliëfs, kleischilderijen en monumentale maquettes. *(redactie: hier de actuele expositie/opstelling beschrijven)*'
+section2_heading: 'Bezoeken & aankoop'
+section2_text: "De galerie is open iedere vrijdag en zaterdag van 13:00 tot 17:00 uur, en altijd op afspraak. Werken zijn te koop; vraag naar prijs en mogelijkheden tijdens uw bezoek of neem contact op. Opdrachten en maatwerk zijn eveneens mogelijk.\n\nLosse werken bekijkt u het beste op de pagina [Werk in detail](/werk-in-detail)."
+---

pages/07.gallery-2/gallery-2.nl.md

@@ -0,0 +1,9 @@
+---
+title: Galerie
+menu: 'Galerie 2'
+intro: 'Een sfeerbeeld van Keramiekgalerie Groot Welsden – het atelier en de expositieruimte van Natascha Rieter in Bunde.'
+section1_heading: 'Op dit moment te zien'
+section1_text: 'In de galerie is een wisselende selectie te zien van kleinplastieken, reliëfs, kleischilderijen en monumentale maquettes. *(redactie: hier de actuele expositie/opstelling beschrijven)*'
+section2_heading: 'Bezoeken & aankoop'
+section2_text: "De galerie is open iedere vrijdag en zaterdag van 13:00 tot 17:00 uur, en altijd op afspraak. Werken zijn te koop; vraag naar prijs en mogelijkheden tijdens uw bezoek of neem contact op. Opdrachten en maatwerk zijn eveneens mogelijk.\n\nLosse werken bekijkt u het beste op de pagina [Werk in detail](/werk-in-detail)."
+---

pages/08.gallery-3/gallery-3.nl.md

@@ -0,0 +1,9 @@
+---
+title: Galerie
+menu: 'Galerie 3'
+intro: 'Een sfeerbeeld van Keramiekgalerie Groot Welsden – het atelier en de expositieruimte van Natascha Rieter in Bunde.'
+section1_heading: 'Op dit moment te zien'
+section1_text: 'In de galerie is een wisselende selectie te zien van kleinplastieken, reliëfs, kleischilderijen en monumentale maquettes. *(redactie: hier de actuele expositie/opstelling beschrijven)*'
+section2_heading: 'Bezoeken & aankoop'
+section2_text: "De galerie is open iedere vrijdag en zaterdag van 13:00 tot 17:00 uur, en altijd op afspraak. Werken zijn te koop; vraag naar prijs en mogelijkheden tijdens uw bezoek of neem contact op. Opdrachten en maatwerk zijn eveneens mogelijk.\n\nLosse werken bekijkt u het beste op de pagina [Werk in detail](/werk-in-detail)."
+---

themes/natascha/blueprints/album.yaml

@@ -2,3 +2,13 @@ title: Album
 '@extends':
     type: default
     context: blueprints://pages
+
+form:
+  fields:
+    tabs:
+      fields:
+        options:
+          type: tab
+          fields:
+            taxonomies:
+              unset@: true

themes/natascha/blueprints/contact.yaml

@@ -0,0 +1,27 @@
+title: Contact
+'@extends':
+    type: default
+    context: blueprints://pages
+
+form:
+  fields:
+    tabs:
+      fields:
+        content:
+          fields:
+            header.media_order:
+              unset@: true
+        options:
+          type: tab
+          fields:
+            taxonomies:
+              unset@: true
+        advanced:
+          type: tab
+          fields:
+            columns:
+              fields:
+                column1:
+                  fields:
+                    name:
+                      disabled: true

themes/natascha/blueprints/cv.yaml

@@ -29,3 +29,17 @@ form:
               type: pagemediaselect
               label: 'Extra foto rechts (verborgen op mobiel)'
               preview_images: true
+        options:
+          type: tab
+          fields:
+            taxonomies:
+              unset@: true
+        advanced:
+          type: tab
+          fields:
+            columns:
+              fields:
+                column1:
+                  fields:
+                    name:
+                      disabled: true

themes/natascha/blueprints/galerie.yaml

@@ -0,0 +1,75 @@
+title: Galerie
+'@extends':
+    type: default
+    context: blueprints://pages
+
+form:
+  fields:
+    tabs:
+      type: tabs
+      active: 1
+      fields:
+        content:
+          type: tab
+          title: Inhoud
+          fields:
+            header.intro:
+              type: text
+              label: Introductietekst
+              help: 'Korte openingszin, boven de eerste kop.'
+
+            header.section1_heading:
+              type: text
+              label: 'Kop – sectie 1 (boven)'
+              default: 'Op dit moment te zien'
+            header.section1_text:
+              type: textarea
+              label: 'Tekst – sectie 1 (boven)'
+              rows: 6
+            header.section1_images:
+              type: list
+              label: "Foto's – sectie 1 (boven)"
+              help: "Sleep om te herschikken. Deze foto's verschijnen naast de tekst hierboven."
+              style: vertical
+              collapsed: false
+              fields:
+                .image:
+                  type: pagemediaselect
+                  label: Foto
+                  preview_images: true
+
+            header.section2_heading:
+              type: text
+              label: 'Kop – sectie 2 (onder)'
+              default: 'Bezoeken & aankoop'
+            header.section2_text:
+              type: textarea
+              label: 'Tekst – sectie 2 (onder)'
+              rows: 6
+            header.section2_images:
+              type: list
+              label: "Foto's – sectie 2 (onder)"
+              help: "Sleep om te herschikken. Deze foto's verschijnen naast de tekst hierboven."
+              style: vertical
+              collapsed: false
+              fields:
+                .image:
+                  type: pagemediaselect
+                  label: Foto
+                  preview_images: true
+            content:
+              unset@: true
+        options:
+          type: tab
+          fields:
+            taxonomies:
+              unset@: true
+        advanced:
+          type: tab
+          fields:
+            columns:
+              fields:
+                column1:
+                  fields:
+                    name:
+                      disabled: true

themes/natascha/blueprints/home.yaml

@@ -29,3 +29,17 @@ form:
               type: pagemediaselect
               label: 'Extra foto rechts (verborgen op mobiel)'
               preview_images: true
+        options:
+          type: tab
+          fields:
+            taxonomies:
+              unset@: true
+        advanced:
+          type: tab
+          fields:
+            columns:
+              fields:
+                column1:
+                  fields:
+                    name:
+                      disabled: true

themes/natascha/blueprints/werk-in-detail.yaml

@@ -0,0 +1,30 @@
+title: 'Werk in detail'
+'@extends':
+    type: default
+    context: blueprints://pages
+
+form:
+  fields:
+    tabs:
+      fields:
+        content:
+          fields:
+            header.media_order:
+              unset@: true
+        options:
+          type: tab
+          fields:
+            taxonomies:
+              unset@: true
+        advanced:
+          fields:
+            columns:
+              fields:
+                column1:
+                  fields:
+                    name:
+                      disabled: true
+            overrides:
+              fields:
+                header.child_type:
+                  default: album

themes/natascha/css/custom.css

@@ -179,3 +179,48 @@ footer {
 .gallery-item:hover .gallery-thumb img {
     transform: scale(1.05);
 }
+
+.content-text h2 {
+    font-family: 'Hobo Std', Helvetica, Verdana, Arial;
+    color: var(--color-brand);
+    font-size: 1.4em;
+    margin-top: 1.75rem;
+    margin-bottom: 0.75rem;
+}
+
+@media (min-width: 768px) {
+    .content-text h2 {
+        font-size: 1.7em;
+    }
+}
+
+@media (min-width: 1200px) {
+    .content-text h2 {
+        font-size: 2em;
+    }
+}
+
+.btn-brand {
+    background-color: var(--color-brand);
+    border-color: var(--color-brand);
+    color: #fff;
+}
+
+.btn-brand:hover,
+.btn-brand:focus {
+    background-color: var(--color-text);
+    border-color: var(--color-text);
+    color: #fff;
+}
+
+.btn-outline-brand {
+    border-color: var(--color-brand);
+    color: var(--color-brand);
+    background-color: transparent;
+}
+
+.btn-outline-brand:hover,
+.btn-outline-brand:focus {
+    background-color: var(--color-brand);
+    color: #fff;
+}

themes/natascha/templates/galerie.html.twig

@@ -5,20 +5,59 @@
 {% block extra_js %}
 <script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js" defer></script>
 {% endblock %}
+
+{% macro imagegrid(images, dummy_start) %}
+    <div class="row g-2">
+        {% if images|length > 0 %}
+            {% for img in images %}
+            <div class="col-6">
+                <a href="{{ img.url }}" class="glightbox gallery-item" data-gallery="galerie-impressie" data-description="Impressie van de galerie">
+                    <div class="gallery-thumb"><img src="{{ img.url }}" loading="lazy" alt="Impressie van de galerie"></div>
+                </a>
+            </div>
+            {% endfor %}
+        {% else %}
+            {% for i in dummy_start..(dummy_start + 3) %}
+            <div class="col-6">
+                <a href="https://picsum.photos/seed/galerie-ruimte{{ i }}/900/900" class="glightbox gallery-item" data-gallery="galerie-impressie" data-description="Impressie {{ i }}">
+                    <div class="gallery-thumb"><img src="https://picsum.photos/seed/galerie-ruimte{{ i }}/450/450" loading="lazy" alt="Impressie van de galerie (voorbeeldfoto)"></div>
+                </a>
+            </div>
+            {% endfor %}
+        {% endif %}
+    </div>
+{% endmacro %}
+
+{% import _self as gallery %}
+
 {% block content %}
-<div class="row mb-3">
-    <div class="col-12 col-lg-8 offset-lg-2">
+{% set is_en = (grav.language.active ?? 'nl') == 'en' %}
+{% set section1_images = (page.header.section1_images ?? [])|map(item => page.media[item.image] ?? null)|filter(img => img is not null) %}
+{% set section2_images = (page.header.section2_images ?? [])|map(item => page.media[item.image] ?? null)|filter(img => img is not null) %}
+
+<div class="row g-3">
+    <div class="col-12 col-md-6 p-3 order-1 order-md-2">
+        {{ gallery.imagegrid(section1_images, 1) }}
+    </div>
+    <div class="col-12 col-md-6 p-3 text-start content-text order-2 order-md-1">
         <h1 class="funky-font main-header text-center">{{ page.title }}</h1>
-        {{ content|raw }}
+        {% if page.header.intro %}{{ page.header.intro|markdown }}{% endif %}
+        {% if page.header.section1_heading %}<h2 class="funky-font">{{ page.header.section1_heading }}</h2>{% endif %}
+        {{ page.header.section1_text|markdown }}
     </div>
 </div>
-<div class="row g-3">
-    {% for i in 1..12 %}
-    <div class="col-6 col-md-4 col-lg-3">
-        <a href="https://picsum.photos/seed/kunst{{ i }}/800/800" class="glightbox gallery-item" data-gallery="galerie" data-description="Werk {{ i }}">
-            <div class="gallery-thumb"><img src="https://picsum.photos/seed/kunst{{ i }}/350/350" loading="lazy" alt="Werk {{ i }}"></div>
-        </a>
+
+<div class="row g-3 mt-2">
+    <div class="col-12 col-md-6 p-3 text-start content-text order-2">
+        {% if page.header.section2_heading %}<h2 class="funky-font">{{ page.header.section2_heading }}</h2>{% endif %}
+        {{ page.header.section2_text|markdown }}
+        <div class="d-flex flex-column flex-sm-row gap-2 mt-3">
+            <a href="{{ url('/werk-in-detail') }}" class="btn btn-brand">{{ is_en ? 'View work in detail' : 'Bekijk werk in detail' }}</a>
+            <a href="{{ url('/contact') }}" class="btn btn-outline-brand">{{ is_en ? 'Plan a visit' : 'Plan een bezoek' }}</a>
+        </div>
+    </div>
+    <div class="col-12 col-md-6 p-3 order-1">
+        {{ gallery.imagegrid(section2_images, 5) }}
     </div>
-    {% endfor %}
 </div>
 {% endblock %}

themes/natascha/templates/gallery-1.html.twig

@@ -0,0 +1,66 @@
+{% 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 %}
+
+{% macro imagegrid(images, dummy_start, count) %}
+    <div class="row g-2">
+        {% if images|length > 0 %}
+            {% for img in images|slice(0, count) %}
+            <div class="col-6">
+                <a href="{{ img.url }}" class="glightbox gallery-item" data-gallery="gallery-1-impressie" data-description="Impressie van de galerie">
+                    <div class="gallery-thumb"><img src="{{ img.url }}" loading="lazy" alt="Impressie van de galerie"></div>
+                </a>
+            </div>
+            {% endfor %}
+        {% else %}
+            {% for i in dummy_start..(dummy_start + count - 1) %}
+            <div class="col-6">
+                <a href="https://picsum.photos/seed/galerie-ruimte{{ i }}/900/900" class="glightbox gallery-item" data-gallery="gallery-1-impressie" data-description="Impressie {{ i }}">
+                    <div class="gallery-thumb"><img src="https://picsum.photos/seed/galerie-ruimte{{ i }}/450/450" loading="lazy" alt="Impressie van de galerie (voorbeeldfoto)"></div>
+                </a>
+            </div>
+            {% endfor %}
+        {% endif %}
+    </div>
+{% endmacro %}
+
+{% import _self as gallery %}
+
+{% block content %}
+{% set section1_images = (page.header.section1_images ?? [])|map(item => page.media[item.image] ?? null)|filter(img => img is not null) %}
+{% set section2_images = (page.header.section2_images ?? [])|map(item => page.media[item.image] ?? null)|filter(img => img is not null) %}
+
+<div class="row bg-light-subtle text-center py-1 mb-2">
+    <small class="text-muted">Concept: tekst + 2 foto's / 2 foto's + tekst</small>
+</div>
+
+<div class="row g-3">
+    <div class="col-12 col-md-6 p-3 order-1 order-md-2">
+        {{ gallery.imagegrid(section1_images, 1, 2) }}
+    </div>
+    <div class="col-12 col-md-6 p-3 text-start content-text order-2 order-md-1">
+        <h1 class="funky-font main-header text-center">{{ page.title }}</h1>
+        {% if page.header.intro %}{{ page.header.intro|markdown }}{% endif %}
+        {% if page.header.section1_heading %}<h2 class="funky-font">{{ page.header.section1_heading }}</h2>{% endif %}
+        {{ page.header.section1_text|markdown }}
+    </div>
+</div>
+
+<div class="row g-3 mt-2">
+    <div class="col-12 col-md-6 p-3 text-start content-text order-2">
+        {% if page.header.section2_heading %}<h2 class="funky-font">{{ page.header.section2_heading }}</h2>{% endif %}
+        {{ page.header.section2_text|markdown }}
+        <div class="d-flex flex-column flex-sm-row gap-2 mt-3">
+            <a href="{{ url('/werk-in-detail') }}" class="btn btn-brand">Bekijk werk in detail</a>
+            <a href="{{ url('/contact') }}" class="btn btn-outline-brand">Plan een bezoek</a>
+        </div>
+    </div>
+    <div class="col-12 col-md-6 p-3 order-1">
+        {{ gallery.imagegrid(section2_images, 5, 2) }}
+    </div>
+</div>
+{% endblock %}

themes/natascha/templates/gallery-2.html.twig

@@ -0,0 +1,35 @@
+{% 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 %}
+
+{% import 'galerie.html.twig' as gallery %}
+
+{% block content %}
+{% set section1_images = (page.header.section1_images ?? [])|map(item => page.media[item.image] ?? null)|filter(img => img is not null) %}
+
+<div class="row bg-light-subtle text-center py-1 mb-2">
+    <small class="text-muted">Concept: tekst + 4 foto's (zoals hoofd-Galerie)</small>
+</div>
+
+<div class="row g-3">
+    <div class="col-12 col-md-6 p-3 order-1 order-md-2">
+        {{ gallery.imagegrid(section1_images, 1) }}
+    </div>
+    <div class="col-12 col-md-6 p-3 text-start content-text order-2 order-md-1">
+        <h1 class="funky-font main-header text-center">{{ page.title }}</h1>
+        {% if page.header.intro %}{{ page.header.intro|markdown }}{% endif %}
+        {% if page.header.section1_heading %}<h2 class="funky-font">{{ page.header.section1_heading }}</h2>{% endif %}
+        {{ page.header.section1_text|markdown }}
+        {% if page.header.section2_heading %}<h2 class="funky-font">{{ page.header.section2_heading }}</h2>{% endif %}
+        {{ page.header.section2_text|markdown }}
+        <div class="d-flex flex-column flex-sm-row gap-2 mt-3">
+            <a href="{{ url('/werk-in-detail') }}" class="btn btn-brand">Bekijk werk in detail</a>
+            <a href="{{ url('/contact') }}" class="btn btn-outline-brand">Plan een bezoek</a>
+        </div>
+    </div>
+</div>
+{% endblock %}

themes/natascha/templates/gallery-3.html.twig

@@ -0,0 +1,35 @@
+{% 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 %}
+
+{% import 'galerie.html.twig' as gallery %}
+
+{% block content %}
+{% set section1_images = (page.header.section1_images ?? [])|map(item => page.media[item.image] ?? null)|filter(img => img is not null) %}
+
+<div class="row bg-light-subtle text-center py-1 mb-2">
+    <small class="text-muted">Concept: 4 foto's + tekst (zoals hoofd-Galerie)</small>
+</div>
+
+<div class="row g-3">
+    <div class="col-12 col-md-6 p-3 text-start content-text order-2">
+        <h1 class="funky-font main-header text-center">{{ page.title }}</h1>
+        {% if page.header.intro %}{{ page.header.intro|markdown }}{% endif %}
+        {% if page.header.section1_heading %}<h2 class="funky-font">{{ page.header.section1_heading }}</h2>{% endif %}
+        {{ page.header.section1_text|markdown }}
+        {% if page.header.section2_heading %}<h2 class="funky-font">{{ page.header.section2_heading }}</h2>{% endif %}
+        {{ page.header.section2_text|markdown }}
+        <div class="d-flex flex-column flex-sm-row gap-2 mt-3">
+            <a href="{{ url('/werk-in-detail') }}" class="btn btn-brand">Bekijk werk in detail</a>
+            <a href="{{ url('/contact') }}" class="btn btn-outline-brand">Plan een bezoek</a>
+        </div>
+    </div>
+    <div class="col-12 col-md-6 p-3 order-1">
+        {{ gallery.imagegrid(section1_images, 1) }}
+    </div>
+</div>
+{% endblock %}

themes/natascha/templates/partials/base.html.twig

@@ -13,7 +13,7 @@
     <link rel="icon" type="image/png" href="{{ url('theme://images/logo-vignet-blauw.png') }}">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
     {% block extra_css %}{% endblock %}
-    <link rel="stylesheet" href="{{ url('theme://css/custom.css') }}">
+    <link rel="stylesheet" href="{{ url('theme://css/custom.css') }}?v={{ 'user/themes/natascha/css/custom.css'|filemtime }}">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" defer></script>
     <script src="{{ url('theme://js/main.js') }}" defer></script>
     {% block extra_js %}{% endblock %}

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

@@ -3,6 +3,13 @@
 <div class="row mb-3">
     <h1 class="funky-font main-header text-center">{{ page.title }}</h1>
 </div>
+{% if content %}
+<div class="row mb-3">
+    <div class="col-12 col-lg-8 offset-lg-2 text-center">
+        {{ content|raw }}
+    </div>
+</div>
+{% endif %}
 <div class="row g-3">
     {% for child in page.children %}
     {% if child.published %}