diff --git a/assets/sass/_theme/blocks/gallery.sass b/assets/sass/_theme/blocks/gallery.sass index 609e87c3552240b2c451940e187cc179d2b39877..bb4bcaf0142b52c8ca7ed9b348f54bc74bf4a7b9 100644 --- a/assets/sass/_theme/blocks/gallery.sass +++ b/assets/sass/_theme/blocks/gallery.sass @@ -2,11 +2,17 @@ figure display: block margin-bottom: 0 + position: relative > a, img, picture display: block > a + position: absolute + top: 0 + left: 0 + height: 100% + width: 100% transition: filter .3s ease &:hover // if low opacity means not selected, selected needs to be darker diff --git a/layouts/partials/blocks/templates/gallery/carousel.html b/layouts/partials/blocks/templates/gallery/carousel.html index c00ad366cc7306266bfe02aa44c3c94f3bc823c5..3e838f5bad951af960d7e2e2f02c710a0b82ed53 100644 --- a/layouts/partials/blocks/templates/gallery/carousel.html +++ b/layouts/partials/blocks/templates/gallery/carousel.html @@ -14,6 +14,12 @@ {{- $image := partial "GetMedia" .file -}} {{- if $image -}} <figure {{ if $is_carousel }} class="splide__slide"{{ end }}> + {{ partial "commons/image.html" + (dict + "image" .id + "alt" .alt + "sizes" site.Params.image_sizes.blocks.gallery.carousel + )}} {{ if not site.Params.image_sizes.design_system.lightbox.disabled }} <a class="glightbox" role="button" @@ -21,14 +27,6 @@ href="{{ partial "GetLightboxUrl" (dict "id" .id) }}" title="{{- i18n "commons.lightbox.link.title" -}}" aria-label="{{- i18n "commons.lightbox.link.title" -}}"> - {{ end }} - {{ partial "commons/image.html" - (dict - "image" .id - "alt" .alt - "sizes" site.Params.image_sizes.blocks.gallery.carousel - )}} - {{ if not site.Params.image_sizes.design_system.lightbox.disabled }} </a> {{ end }} {{ if or .text .credit }} diff --git a/layouts/partials/blocks/templates/gallery/grid.html b/layouts/partials/blocks/templates/gallery/grid.html index ce2d5a2157c44f5cea2d6bdf1abbcf1b3a023800..f5429d3e18427b3655f662cf320fa454d9f81381 100644 --- a/layouts/partials/blocks/templates/gallery/grid.html +++ b/layouts/partials/blocks/templates/gallery/grid.html @@ -10,6 +10,17 @@ {{- $image := partial "GetMedia" .id -}} {{- if $image -}} <figure> + {{ partial "commons/image.html" + (dict + "image" .file + "alt" .alt + "sizes" site.Params.image_sizes.blocks.gallery.grid + )}} + {{ if .text }} + <figcaption> + <p>{{- partial "PrepareText" .text -}}</p> + </figcaption> + {{ end }} {{ if not site.Params.image_sizes.design_system.lightbox.disabled }} {{ $lightbox_text := false }} {{ if and .text .credit }} @@ -23,21 +34,8 @@ href="{{ partial "GetLightboxUrl" (dict "id" .id) }}" title="{{- i18n "commons.lightbox.link.title" -}}" aria-label="{{- i18n "commons.lightbox.link.title" -}}"> - {{ end }} - {{ partial "commons/image.html" - (dict - "image" .file - "alt" .alt - "sizes" site.Params.image_sizes.blocks.gallery.grid - )}} - {{ if not site.Params.image_sizes.design_system.lightbox.disabled }} </a> {{ end }} - {{ if .text }} - <figcaption> - <p>{{- partial "PrepareText" .text -}}</p> - </figcaption> - {{ end }} </figure> {{- end -}} {{ end }}