Hugo et les galeries
Cet article fait partie de la série: Hugo
Une petite galerie toute simple, qui utilise Uikit et lightbox.
Dans le dossier de l’article, il faut créer un dossier images/ pour y deposer les images.
Hugo va directement chercher les images.
Galerie
Shortcode
<!--
Options:
titre -> Nom de la galerie
animation -> Type de transition slide,fade,scale (des exemples sur Uikit:https://getuikit.com/docs/lightbox#animations)
Exemples:
galerie titre="super galerie" animation="scale"
-->
{{ $titre := .Get "titre"| default "Galerie" }}
{{ $animation := .Get "animation" | default "fade"}}
{{ $image := .Page.Resources.Match "images/*" }}
<div class="uk-h3">{{ $titre }}</div>
<div class="uk-child-width-1-3@m" uk-grid uk-lightbox="animation: {{ $animation }}">
{{ with $image }}
{{ range . }}
{{ $resized := .Resize "300x webp" }}
<div>
<a class="uk-inline" href="{{ .Permalink }}" data-caption="{{ path.Base .Name }}">
<img src="{{ $resized.Permalink }}" width="1800" height="1200" alt="">
</a>
</div>
{{ end }}
{{ end }}
</div>Options
- titre -> Nom de la galerie
- animation -> Type de transition slide,fade,scale (des exemples sur Uikit)
{{< galerie titre="super galerie" animation="scale" >}}super galerie
