Consolidate gallery pages: gallery-1 becomes the main Galerie page
- Replace the old placeholder galerie page content with gallery-1's real content (text + 4 uploaded photos), keeping the /galerie route and its position in the main nav - Remove gallery-2 and gallery-3 (prototype pages) and their media - Switch section text fields from plain textarea to Grav's markdown editor type, restoring the formatting toolbar in Admin - Trim the image grid/blueprint caps to 2 per section to match gallery-1's actual content Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
GitSync
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
ea794f3b57
commit
78662aef8f
@@ -14,18 +14,19 @@ form:
|
||||
title: Inhoud
|
||||
fields:
|
||||
header.section1_text:
|
||||
type: textarea
|
||||
type: markdown
|
||||
label: 'Tekst – sectie 1 (boven)'
|
||||
rows: 10
|
||||
validate:
|
||||
type: textarea
|
||||
header.section1_images:
|
||||
type: list
|
||||
label: "Foto's – sectie 1 (boven, max. 4)"
|
||||
help: "Sleep om te herschikken. Deze foto's verschijnen naast de tekst hierboven. Maximaal 4 foto's; zonder foto's tonen we placeholder-afbeeldingen."
|
||||
label: "Foto's – sectie 1 (boven, max. 2)"
|
||||
help: "Sleep om te herschikken. Deze foto's verschijnen naast de tekst hierboven. Maximaal 2 foto's; zonder foto's tonen we placeholder-afbeeldingen."
|
||||
style: vertical
|
||||
collapsed: false
|
||||
multiple: true
|
||||
validate:
|
||||
max: 4
|
||||
max: 2
|
||||
fields:
|
||||
.image:
|
||||
type: pagemediaselect
|
||||
@@ -33,18 +34,19 @@ form:
|
||||
preview_images: true
|
||||
|
||||
header.section2_text:
|
||||
type: textarea
|
||||
type: markdown
|
||||
label: 'Tekst – sectie 2 (onder)'
|
||||
rows: 10
|
||||
validate:
|
||||
type: textarea
|
||||
header.section2_images:
|
||||
type: list
|
||||
label: "Foto's – sectie 2 (onder, max. 4)"
|
||||
help: "Sleep om te herschikken. Deze foto's verschijnen naast de tekst hierboven. Maximaal 4 foto's; zonder foto's tonen we placeholder-afbeeldingen."
|
||||
label: "Foto's – sectie 2 (onder, max. 2)"
|
||||
help: "Sleep om te herschikken. Deze foto's verschijnen naast de tekst hierboven. Maximaal 2 foto's; zonder foto's tonen we placeholder-afbeeldingen."
|
||||
style: vertical
|
||||
collapsed: false
|
||||
multiple: true
|
||||
validate:
|
||||
max: 4
|
||||
max: 2
|
||||
fields:
|
||||
.image:
|
||||
type: pagemediaselect
|
||||
|
||||
@@ -1,68 +0,0 @@
|
||||
title: Galerie 1
|
||||
'@extends':
|
||||
type: default
|
||||
context: blueprints://pages
|
||||
|
||||
form:
|
||||
fields:
|
||||
tabs:
|
||||
type: tabs
|
||||
active: 1
|
||||
fields:
|
||||
content:
|
||||
type: tab
|
||||
title: Inhoud
|
||||
fields:
|
||||
header.section1_text:
|
||||
type: textarea
|
||||
label: 'Tekst – sectie 1 (boven)'
|
||||
rows: 10
|
||||
header.section1_images:
|
||||
type: list
|
||||
label: "Foto's – sectie 1 (boven, max. 2)"
|
||||
help: "Sleep om te herschikken. Deze foto's verschijnen naast de tekst hierboven. Maximaal 2 foto's; zonder foto's tonen we placeholder-afbeeldingen."
|
||||
style: vertical
|
||||
collapsed: false
|
||||
multiple: true
|
||||
validate:
|
||||
max: 2
|
||||
fields:
|
||||
.image:
|
||||
type: pagemediaselect
|
||||
label: Foto
|
||||
preview_images: true
|
||||
|
||||
header.section2_text:
|
||||
type: textarea
|
||||
label: 'Tekst – sectie 2 (onder)'
|
||||
rows: 10
|
||||
header.section2_images:
|
||||
type: list
|
||||
label: "Foto's – sectie 2 (onder, max. 2)"
|
||||
help: "Sleep om te herschikken. Deze foto's verschijnen naast de tekst hierboven. Maximaal 2 foto's; zonder foto's tonen we placeholder-afbeeldingen."
|
||||
style: vertical
|
||||
collapsed: false
|
||||
multiple: true
|
||||
validate:
|
||||
max: 2
|
||||
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
|
||||
@@ -1,39 +0,0 @@
|
||||
title: Galerie 2
|
||||
'@extends':
|
||||
type: default
|
||||
context: blueprints://pages
|
||||
|
||||
form:
|
||||
fields:
|
||||
tabs:
|
||||
type: tabs
|
||||
active: 1
|
||||
fields:
|
||||
content:
|
||||
type: tab
|
||||
title: Inhoud
|
||||
fields:
|
||||
header.text:
|
||||
type: textarea
|
||||
label: Tekst
|
||||
rows: 12
|
||||
|
||||
content:
|
||||
unset@: true
|
||||
|
||||
header.media_order:
|
||||
ordering@: 99
|
||||
options:
|
||||
type: tab
|
||||
fields:
|
||||
taxonomies:
|
||||
unset@: true
|
||||
advanced:
|
||||
type: tab
|
||||
fields:
|
||||
columns:
|
||||
fields:
|
||||
column1:
|
||||
fields:
|
||||
name:
|
||||
disabled: true
|
||||
@@ -1,39 +0,0 @@
|
||||
title: Galerie 3
|
||||
'@extends':
|
||||
type: default
|
||||
context: blueprints://pages
|
||||
|
||||
form:
|
||||
fields:
|
||||
tabs:
|
||||
type: tabs
|
||||
active: 1
|
||||
fields:
|
||||
content:
|
||||
type: tab
|
||||
title: Inhoud
|
||||
fields:
|
||||
header.text:
|
||||
type: textarea
|
||||
label: Tekst
|
||||
rows: 12
|
||||
|
||||
content:
|
||||
unset@: true
|
||||
|
||||
header.media_order:
|
||||
ordering@: 99
|
||||
options:
|
||||
type: tab
|
||||
fields:
|
||||
taxonomies:
|
||||
unset@: true
|
||||
advanced:
|
||||
type: tab
|
||||
fields:
|
||||
columns:
|
||||
fields:
|
||||
column1:
|
||||
fields:
|
||||
name:
|
||||
disabled: true
|
||||
@@ -6,10 +6,10 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js" defer></script>
|
||||
{% endblock %}
|
||||
|
||||
{% macro imagegrid(images, dummy_start) %}
|
||||
{% macro imagegrid(images, dummy_start, count) %}
|
||||
<div class="row g-2">
|
||||
{% if images|length > 0 %}
|
||||
{% for img in images %}
|
||||
{% for img in images|slice(0, count) %}
|
||||
<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>
|
||||
@@ -17,7 +17,7 @@
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% for i in dummy_start..(dummy_start + 3) %}
|
||||
{% 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="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>
|
||||
@@ -37,7 +37,7 @@
|
||||
|
||||
<div class="row g-3">
|
||||
<div class="col-12 col-md-6 p-3 order-1 order-md-2">
|
||||
{{ gallery.imagegrid(section1_images, 1) }}
|
||||
{{ 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>
|
||||
@@ -54,7 +54,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 p-3 order-1">
|
||||
{{ gallery.imagegrid(section2_images, 5) }}
|
||||
{{ gallery.imagegrid(section2_images, 5, 2) }}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,63 +0,0 @@
|
||||
{% 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>
|
||||
{{ 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">
|
||||
{{ 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 %}
|
||||
@@ -1,31 +0,0 @@
|
||||
{% 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.media.images %}
|
||||
|
||||
<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>
|
||||
{{ page.header.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 %}
|
||||
@@ -1,31 +0,0 @@
|
||||
{% 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.media.images %}
|
||||
|
||||
<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>
|
||||
{{ page.header.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 %}
|
||||
Reference in New Issue
Block a user