From 1467d0d7ffdfec6f52aff983ea7c9eef56982017 Mon Sep 17 00:00:00 2001
From: Arnaud Levy <contact@arnaudlevy.com>
Date: Sun, 24 Mar 2024 16:17:36 +0100
Subject: [PATCH] wip
---
assets/sass/_theme/blocks/gallery.sass | 13 ++++++
config.yaml | 4 ++
.../partials/blocks/templates/gallery.html | 2 +
.../blocks/templates/gallery/large.html | 44 +++++++++++++++++++
4 files changed, 63 insertions(+)
create mode 100644 layouts/partials/blocks/templates/gallery/large.html
diff --git a/assets/sass/_theme/blocks/gallery.sass b/assets/sass/_theme/blocks/gallery.sass
index f75ddd42..e7a7dbe7 100644
--- a/assets/sass/_theme/blocks/gallery.sass
+++ b/assets/sass/_theme/blocks/gallery.sass
@@ -41,6 +41,19 @@
display: flex
flex-direction: column
gap: $spacing-2
+ &--large
+ figure
+ margin-bottom: $spacing-5
+ @include media-breakpoint-down(desktop)
+ picture
+ margin-left: var(--grid-gutter-negative)
+ margin-right: var(--grid-gutter-negative)
+ @include in-page-without-sidebar
+ &.image-portrait,
+ &.image-square
+ picture
+ width: columns(8)
+ margin-left: offset(2)
&--carousel
overflow: hidden
position: relative
diff --git a/config.yaml b/config.yaml
index 38b0724b..499b6eb6 100644
--- a/config.yaml
+++ b/config.yaml
@@ -191,6 +191,10 @@ params:
mobile: 170
tablet: 350
desktop: 415
+ large:
+ mobile: 400
+ tablet: 800
+ desktop: 1920
programs:
mobile: 400
tablet: 800
diff --git a/layouts/partials/blocks/templates/gallery.html b/layouts/partials/blocks/templates/gallery.html
index c9777aaa..c740d848 100644
--- a/layouts/partials/blocks/templates/gallery.html
+++ b/layouts/partials/blocks/templates/gallery.html
@@ -14,6 +14,8 @@
{{- if eq $layout "carousel" -}}
{{ partial "blocks/templates/gallery/carousel" . }}
+ {{- else if eq $layout "large" -}}
+ {{ partial "blocks/templates/gallery/large" . }}
{{- else -}}
{{ partial "blocks/templates/gallery/grid" . }}
{{- end -}}
diff --git a/layouts/partials/blocks/templates/gallery/large.html b/layouts/partials/blocks/templates/gallery/large.html
new file mode 100644
index 00000000..4506ae07
--- /dev/null
+++ b/layouts/partials/blocks/templates/gallery/large.html
@@ -0,0 +1,44 @@
+{{- $has_text := false -}}
+{{- range .images }}
+ {{- if .text }}
+ {{- $has_text = true -}}
+ {{ end -}}
+{{ end -}}
+<div class="gallery{{- if $has_text }} gallery--with-text {{ end -}}">
+ {{ range .images }}
+ {{ if .id }}
+ {{- $image := partial "GetMedia" .id -}}
+ {{- $image_class := printf "image-%s" (partial "GetImageDirection" .) -}}
+ {{- if $image -}}
+ <figure class="{{ $image_class }}">
+ {{ partial "commons/image.html"
+ (dict
+ "image" .file
+ "alt" .alt
+ "sizes" site.Params.image_sizes.blocks.gallery.large
+ )}}
+ {{ if not site.Params.image_sizes.design_system.lightbox.disabled }}
+ {{ $lightbox_text := false }}
+ {{ if and .text .credit }}
+ {{ $lightbox_text = delimit (slice .text .credit) " | " }}
+ {{ else if or .text .credit }}
+ {{ $lightbox_text = or .text .credit }}
+ {{ end }}
+ <a class="glightbox"
+ role="button"
+ data-glightbox="type: image; {{ with $lightbox_text }}description: {{ . | safeHTML }}{{ end }}"
+ href="{{ partial "GetLightboxUrl" (dict "id" .id) }}"
+ title="{{- i18n "commons.lightbox.link.title" -}}"
+ aria-label="{{- i18n "commons.lightbox.link.title" -}}">
+ </a>
+ {{ end }}
+ {{ with .text }}
+ <figcaption>
+ <p>{{- . | safeHTML -}}</p>
+ </figcaption>
+ {{ end }}
+ </figure>
+ {{- end -}}
+ {{ end }}
+ {{ end }}
+</div>
--
GitLab