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

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/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 %}