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 "./posts"
|
||||
@import "./print"
|
||||
@import "./css-masonry"
|
||||
|
||||
body
|
||||
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