feat: Ajout d'un module pour afficher une galerie

This commit is contained in:
Simon 2021-06-20 22:19:09 +02:00
parent 3fe2efc5b2
commit 2081925880
3 changed files with 67 additions and 0 deletions

View File

@ -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

View File

@ -16,6 +16,7 @@ $size-xl: 1280px
@import "./footer"
@import "./posts"
@import "./print"
@import "./css-masonry"
body
color: $color-primary

View File

@ -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">