From 1f3cbd0137cbd382803c7b67af776b6aad36f924 Mon Sep 17 00:00:00 2001
From: Geo <gcushen@users.noreply.github.com>
Date: Tue, 28 Jun 2022 18:11:38 +0100
Subject: [PATCH] feat: redesign Gallery to use grid layout

Postfix -f (full width), -s (small), or -m (medium) to image names for them to span different areas of the grid.
---
 .../assets/scss/wowchemy/elements/_media.scss | 112 +++++++++++++-----
 wowchemy/layouts/shortcodes/gallery.html      |  19 ++-
 2 files changed, 99 insertions(+), 32 deletions(-)

diff --git a/wowchemy/assets/scss/wowchemy/elements/_media.scss b/wowchemy/assets/scss/wowchemy/elements/_media.scss
index 1963a2fb..869ecc6b 100644
--- a/wowchemy/assets/scss/wowchemy/elements/_media.scss
+++ b/wowchemy/assets/scss/wowchemy/elements/_media.scss
@@ -94,38 +94,94 @@ svg {
 }
 
 /*************************************************
- *  Gallery.
+ *  Gallery shortcode.
  **************************************************/
 
-.gallery {
-  margin: 0.5em -4px 1.5em -4px;
-  font-size: 0;
-}
-
-.gallery img {
-  // Satisfy Lighthouse criteria even if a lazy image hasn't loaded yet.
-  min-height: 48px;
-  min-width: 48px;
-}
-
-a[data-fancybox] {
-  text-decoration: none;
-  cursor: zoom-in;
-}
-
-.gallery a[data-fancybox] img {
-  height: 250px;
-  width: auto;
-  max-width: inherit;
-  display: inherit;
-  margin: 0;
-  padding: 4px;
-  box-shadow: none;
-  vertical-align: inherit;
-}
-
 .fancybox-caption {
   font-size: 1rem;
   line-height: 1.5rem;
   text-align: center;
 }
+
+.gallery-grid {
+  display: grid;
+  grid-gap: 30px;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-auto-rows: 150px;
+  grid-auto-flow: row dense;
+}
+
+.gallery-item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  box-sizing: border-box;
+  color: #fff;
+  grid-column-start: auto;
+  grid-row-start: auto;
+  background-size: cover;
+  background: #000 center;
+  box-shadow: -2px 2px 10px 0 rgba(#444, 0.4);
+  transition: transform 0.3s ease-in-out;
+  cursor: zoom-in;
+  counter-increment: item-counter;
+
+  a {
+    z-index: 1;
+  }
+
+  a[data-fancybox] {
+    text-decoration: none;
+    cursor: zoom-in;
+  }
+
+  img {
+    all: initial;
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    cursor: zoom-in;
+    // Satisfy Lighthouse criteria even if a lazy image hasn't loaded yet.
+    min-height: 48px;
+    min-width: 48px;
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    // background-color: black;
+    // opacity: 0.3;
+    // transition: opacity 0.3s ease-in-out;
+  }
+
+  &:hover {
+    transform: scale(1.05);
+
+    //&:after {
+    //  opacity: 0;
+    //}
+  }
+
+  &--medium {
+    grid-row-end: span 2;
+  }
+
+  &--large {
+    grid-row-end: span 3;
+  }
+
+  &--full {
+    grid-column-end: auto;
+
+    @media screen and (min-width: 768px) {
+      grid-column: 1/-1;
+      grid-row-end: span 2;
+    }
+  }
+}
diff --git a/wowchemy/layouts/shortcodes/gallery.html b/wowchemy/layouts/shortcodes/gallery.html
index 63301104..29b4a9ff 100644
--- a/wowchemy/layouts/shortcodes/gallery.html
+++ b/wowchemy/layouts/shortcodes/gallery.html
@@ -1,5 +1,6 @@
 {{/* Gallery Shortcode for Wowchemy. */}}
 {{/* Load gallery images from media library. */}}
+{{/* https://github.com/wowchemy/wowchemy-hugo-themes */}}
 
 {{/* Get album folder or default to `media/albums/gallery/`. */}}
 {{ $album := (.Get "album") | default "gallery" }}
@@ -7,14 +8,14 @@
 
 {{/* Gallery options */}}
 {{ $sort_order := .Get "order" | default "asc" }}
-{{ $resize_options := printf "%s webp" (.Get "resize_options" | default "x190") }}
+{{ $resize_options := printf "%s webp" (.Get "resize_options" | default "750x750") }}
 
-<div class="gallery">
+<div class="gallery-grid">
 
   {{/* Attempt to automatically load gallery images from page bundle */}}
   {{ $images := resources.Match $album_path }}
   {{ range (sort $images "Name" $sort_order) }}
-    {{ $image := .Resize $resize_options }}
+    {{ $image := .Fit $resize_options }}
     {{/* Check if the user set a caption for this image */}}
     {{ $filename := path.Base .Name }}
     {{ $caption := "" }}
@@ -23,9 +24,19 @@
         {{ $caption = .caption }}
       {{ end }}
     {{ end }}
+  {{ $image_size := "gallery-item--medium" }}
+  {{if in .Name "-f." }}
+    {{ $image_size = "gallery-item--full" }}
+  {{else if in .Name "-s." }}
+    {{ $image_size = "" }}
+  {{else if in .Name "-l." }}
+    {{ $image_size = "gallery-item--large" }}
+  {{end}}
+  <div class="gallery-item {{$image_size}}">
     <a data-fancybox="gallery-{{$album}}" href="{{ .RelPermalink }}" {{ with $caption }}data-caption="{{.|markdownify|emojify|safeHTMLAttr}}"{{ end }}>
-      <img src="{{ $image.RelPermalink }}" loading="lazy" alt="{{ plainify $caption | default $filename }}" width="{{ $image.Width }}" height="{{ $image.Height }}">{{/* Width & height (or low res src) required for lazy loading. */}}
+      <img src="{{ $image.RelPermalink }}" loading="lazy" alt="{{ plainify $caption | default $filename }}" width="{{ $image.Width }}" height="{{ $image.Height }}">
     </a>
+  </div>
   {{else}}
     {{ errorf "Unable to load gallery `%s` in `%s`." $album_path .Page.File.Filename }}
   {{end}}