diff --git a/assets/sass/_theme/blocks/gallery.sass b/assets/sass/_theme/blocks/gallery.sass index f75ddd42a15ed6fae94ec58b6f296d95c1cb0b66..e7a7dbe79b3b683b8574faf9641e5e0d4f45793c 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 38b0724b3c95306793197b12e432efd4ef850d36..499b6eb6e8c7a8c30ea06e34d7bd057290e23ff8 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 c9777aaafc0c754c0dc7cea8587c938c294a5cec..c740d848bb53ceaf2d24840787b4850df71f3d4d 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 0000000000000000000000000000000000000000..4506ae073d0ae285e4d2b088c8d300594e83281f --- /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>