feat: Ajout d'un module pour afficher une galerie
This commit is contained in:
parent
3fe2efc5b2
commit
2081925880
|
@ -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
|
|
@ -16,6 +16,7 @@ $size-xl: 1280px
|
||||||
@import "./footer"
|
@import "./footer"
|
||||||
@import "./posts"
|
@import "./posts"
|
||||||
@import "./print"
|
@import "./print"
|
||||||
|
@import "./css-masonry"
|
||||||
|
|
||||||
body
|
body
|
||||||
color: $color-primary
|
color: $color-primary
|
||||||
|
|
|
@ -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">
|
Loading…
Reference in New Issue