lightbox refacto

layouts/partials/GetLightboxUrl

+{{- $lightbox_sizes := "1920x2560" -}}
+{{- $image := partial "GetMedia" .id -}}
+{{- $url := $image.url -}}
+{{- if site.Params.keycdn -}}
+  {{- $url = $image.direct_url -}}
+{{- end -}}
+
+{{ return partial "GetImageUrl" (dict "url" $url "size" $lightbox_sizes ) }}
\ No newline at end of file

layouts/partials/blocks/templates/chapter.html

@@ -15,7 +15,6 @@
   <section class="{{ $class }}{{ if $title }} block-with-title{{ end }}" id="block-{{ $position }}">
     <div class="container">
       <div class="block-content">
-        
         <div class="chapter">
           <div class="text">
             {{ if $title -}}
@@ -38,19 +37,23 @@
             {{ end -}}
           </div>
           {{ if .image }}
-          <figure class="{{- $image_class -}}">
-            {{ partial "commons/image.html"
-              (dict
-                "image"    .image
-                "mobile"   "350x350"
-                "tablet"   "450x450"
-                "desktop"  "1280x1280"
-              )}}
-            {{ if partial "GetTextFromHTML" .credit }}
-              <figcaption>{{ partial "PrepareHTML" .credit }}</figcaption>
-            {{ end }}
-          </figure>
-        {{ end -}}
+            <figure class="{{- $image_class -}}">
+              <a class="glightbox"
+                data-glightbox="type: image;{{ if .credit }}description: {{ partial "PrepareHTML" .credit }}{{ end }}"
+                href="{{ partial "GetLightboxUrl" .image }}">
+                {{ partial "commons/image.html"
+                  (dict
+                    "image"    .image
+                    "mobile"   "350x350"
+                    "tablet"   "450x450"
+                    "desktop"  "1280x1280"
+                  )}}
+              </a>
+              {{ if partial "GetTextFromHTML" .credit }}
+                <figcaption>{{ partial "PrepareHTML" .credit }}</figcaption>
+              {{ end }}
+            </figure>
+          {{ end -}}
         </div>
       </div>
     </div>

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

@@ -13,23 +13,17 @@
     {{ if .file }}
       {{- $image := partial "GetMedia" .file -}}
       {{- if $image -}}
-        {{/*  TODO: refactor  */}}
-        {{- $url := $image.url -}}
-        {{- if site.Params.keycdn -}}
-          {{- $url = $image.direct_url -}}
-        {{- end -}}
-        {{- $lightbox_sizes := "1280x2560" -}}
         <figure{{ if $is_carousel }} class="splide__slide"{{ end }}>
           <a class="glightbox"
             data-glightbox="type: image;{{ if .credit }}description: {{ partial "PrepareHTML" .credit }}{{ end }}"
-            href="{{ partial "GetImageUrl" (dict "url" $url "size" $lightbox_sizes ) }}">
+            href="{{ partial "GetLightboxUrl" (dict "id" .id) }}">
             {{ partial "commons/image.html"
               (dict
                 "image"    .id
                 "alt"      .alt
-                "mobile"   "164"
-                "tablet"   "336"
-                "desktop"  "967x679"
+                "mobile"   "400"
+                "tablet"   "600"
+                "desktop"  "1024"
               )}}
           </a>
           {{ if or .text .credit }}

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

@@ -3,16 +3,10 @@
     {{ if .id }}
       {{- $image := partial "GetMedia" .id -}}
       {{- if $image -}}
-        {{/*  TODO: refactor  */}}
-        {{- $url := $image.url -}}
-        {{- if site.Params.keycdn -}}
-          {{- $url = $image.direct_url -}}
-        {{- end -}}
-        {{- $lightbox_sizes := "1280x2560" -}}
         <figure>
           <a class="glightbox"
             data-glightbox="type: image;{{ if .credit }}description: {{ partial "PrepareHTML" .credit }}{{ end }}"
-            href="{{ partial "GetImageUrl" (dict "url" $url "size" $lightbox_sizes ) }}">
+            href="{{ partial "GetLightboxUrl" (dict "id" .id) }}">
             {{ partial "commons/image.html"
               (dict
                 "image"    .file

layouts/partials/header/hero.html

@@ -19,20 +19,24 @@
       {{- end -}}
       {{- if .image }}
         <figure>
-          {{ partial "commons/image.html"
-            (dict
-              "image"    .image
-              "mobile"   "351"
-              "tablet"   "456"
-              "desktop"  "856"
-            ) }}
-          {{ if .image.credit }}
-            <figcaption tabindex="0">
-              <p>
-                {{- partial "GetTextFromHTML" .image.credit -}}
-              </p>
-            </figcaption>
-          {{ end }}
+          <a class="glightbox"
+            data-glightbox="type: image;{{ if .image.credit }}description: {{ partial "PrepareHTML" .image.credit }}{{ end }}"
+            href="{{ partial "GetLightboxUrl" .image }}">
+            {{ partial "commons/image.html"
+              (dict
+                "image"    .image
+                "mobile"   "400"
+                "tablet"   "800"
+                "desktop"  "900"
+              ) }}
+              {{ if .image.credit }}
+                <figcaption tabindex="0">
+                  <p>
+                    {{- partial "GetTextFromHTML" .image.credit -}}
+                  </p>
+                </figcaption>
+              {{ end }}
+          </a>
         </figure>
       {{ end -}}
     </div>