Schrek.fr

Attention cette article date depuis plus d'un an (535 jours).
Table des matières

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.

Il faut installer la version extended (exemple:hugo_extended_0.123.7_linux-arm64.deb)

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>
ding support (and SCSS support).

Options

{{< galerie titre="super galerie" animation="scale" >}}

super galerie

Liens

https://getuikit.com/docs/lightbox#animations

https://unsplash.com/pt-br/@neom

Métadonnées

Posté le: 25.07.2023
Nombre de mots: 172
Temps de lecture: 1 minutes
Cet article fait partie de la série: Hugo