wip

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

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

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

layouts/partials/blocks/templates/gallery/large.html

+{{- $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>