From 2081925880e33a28129d87ab600a3f6b1756daf8 Mon Sep 17 00:00:00 2001
From: Simon C <simonc@linux.com>
Date: Sun, 20 Jun 2021 22:19:09 +0200
Subject: [PATCH] feat: Ajout d'un module pour afficher une galerie

---
 assets/styles/css-masonry.sass  | 36 +++++++++++++++++++++++++++++++++
 assets/styles/main.sass         |  1 +
 layouts/shortcodes/gallery.html | 30 +++++++++++++++++++++++++++
 3 files changed, 67 insertions(+)
 create mode 100644 assets/styles/css-masonry.sass
 create mode 100644 layouts/shortcodes/gallery.html

diff --git a/assets/styles/css-masonry.sass b/assets/styles/css-masonry.sass
new file mode 100644
index 0000000..60729a6
--- /dev/null
+++ b/assets/styles/css-masonry.sass
@@ -0,0 +1,36 @@
+.masonry
+  column-gap: 30px
+  column-fill: initial
+
+  @media only screen and (min-width: 1024px)
+    column-count: 4
+
+  @media only screen and (max-width: 1023px) and (min-width: 768px)
+    column-count: 3
+
+  @media only screen and (max-width: 767px) and (min-width: 540px)
+    column-count: 2
+
+  @media only screen and (max-width: 539px)
+    .brick
+      width: 100%
+      margin: 0 auto
+      text-align: center
+      img
+        margin: 0 auto .5rem
+
+.item
+  background-color: #eee
+  display: inline-block
+  margin: 0 0 1em
+  width: 100%
+
+.brick
+  margin-bottom: .5rem
+  display: inline-block
+  vertical-align: top
+
+  img
+    width: 100%
+    max-width: 300px
+    margin: 0 auto 1rem
diff --git a/assets/styles/main.sass b/assets/styles/main.sass
index 9b71da8..7e11ba0 100644
--- a/assets/styles/main.sass
+++ b/assets/styles/main.sass
@@ -16,6 +16,7 @@ $size-xl: 1280px
 @import "./footer"
 @import "./posts"
 @import "./print"
+@import "./css-masonry"
 
 body
   color: $color-primary
diff --git a/layouts/shortcodes/gallery.html b/layouts/shortcodes/gallery.html
new file mode 100644
index 0000000..2695688
--- /dev/null
+++ b/layouts/shortcodes/gallery.html
@@ -0,0 +1,30 @@
+{{ $baseURL := .Page.RelPermalink }}
+{{ $resources := .Page.Resources }}
+</div>
+</div>
+<div class="masonry" itemscope itemtype="http://schema.org/ImageGallery">
+  {{ range .Params }}
+  <figure itemscope class="brick" itemtype="http://schema.org/ImageObject">
+    {{ $path := . }}
+    {{ $text := "" }}
+    {{ if in . ":" }}
+      {{ $arg := split . ":" }}
+      {{ $path = index $arg 0 }}
+      {{ $text = index $arg 1 }}
+    {{ end }}
+
+    {{ $image := $resources.GetMatch (printf "*%s*" $path) }}
+    {{ $orientation := 1 }}
+    {{ with $image }}{{ with .Exif }}{{ $orientation = .Tags.Orientation }}{{ end }}{{ end }}
+    {{ if eq $orientation 8 }}
+    {{ $image = $image.Resize "300x r90" }}
+    {{ else if eq $orientation 6 }}
+    {{ $image = $image.Resize "300x r270" }}
+    {{ end }}
+    {{ $resized := $image.Resize "300x q100 webp" }}
+    <img src="{{ $resized.RelPermalink }}" alt="{{ $text }}" title="{{ $text }}" loading="lazy">
+  </figure>
+  {{ end }}
+</div>
+<div class="container">
+  <div class="container news md">