Merge pull request #224 from noesya/fix-gallery-figcaption

Fix gallery figcaption

assets/sass/_theme/blocks/gallery.sass

@@ -6,7 +6,6 @@
         img,
         picture
             display: block
-            margin-bottom: $spacing0
         > a
             transition: filter .3s ease
             &:hover
@@ -31,7 +30,7 @@
 
     &--grid
         .gallery
-            align-items: end
+            align-items: baseline
             @include in-page-with-sidebar
                 @include grid(3, desktop, half($grid-gutter), half($grid-gutter))
             @include in-page-without-sidebar
@@ -39,9 +38,14 @@
             @include media-breakpoint-down(desktop)
                 @include grid(2)
                 grid-gap: half($grid-gutter-sm) !important
-            figure
-                &:after
-                    content: ' ' // This is used to allow align baseline without figcaption
+            &--with-text
+                figure
+                    display: grid
+                    grid-template-columns: subgrid
+                    gap: space(3)
+                    figcaption
+                        &::after
+                            content: ' '
 
     &--carousel
         overflow: hidden

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

-<div class="gallery" role="group">
+{{- $has_text := false -}}
+{{- range .images }}
+  {{- if .text }}
+    {{- $has_text = true -}}
+  {{ end -}}
+{{ end -}}
+<div class="gallery{{- if $has_text }} gallery--with-text {{ end -}}" role="group">
   {{ range .images }}
     {{ if .id }}
       {{- $image := partial "GetMedia" .id -}}
       {{- if $image -}}
         <figure>
           {{ if not site.Params.image_sizes.design_system.lightbox.disabled }}
-            {{ $carousel_text := false }}
+            {{ $lightbox_text := false }}
             {{ if and .text .credit }}
-              {{ $carousel_text = delimit (slice .text .credit) " / " }}
+              {{ $lightbox_text = delimit (slice .text .credit) " / " }}
             {{ else }}
-              {{ $carousel_text = or .text .credit }}
+              {{ $lightbox_text = or .text .credit }}
             {{ end }}
             <a  class="glightbox"
                 role="button"
-                data-glightbox="type: image;{{ if $carousel_text }}description: {{ partial "PrepareHTML" $carousel_text }}{{ end }}"
+                data-glightbox="type: image;{{ if $lightbox_text }}description: {{ partial "PrepareHTML" $lightbox_text }}{{ end }}"
                 href="{{ partial "GetLightboxUrl" (dict "id" .id) }}"
                 title="{{- i18n "commons.lightbox.link.title" -}}"
                 aria-label="{{- i18n "commons.lightbox.link.title" -}}">

layouts/partials/blocks/templates/pages/grid.html

@@ -28,8 +28,8 @@
         {{ if and $show_descriptions .Params.summary }}
           {{ if site.Params.pages.index.truncate_description }}
             <p>{{ partial "GetTruncateContent" ( dict 
-              "text" .Params.summary
-              "length" site.Params.pages.index.truncate_description
+                "text" .Params.summary
+                "length" site.Params.pages.index.truncate_description
               ) }}</p>
           {{ else }}
             <p>{{ partial "PrepareText" .Params.summary }}</p>