Comment stocker les images miniature dans le dossier du bundle de page pour les sites Hugo avec le thème Mainroad

Conserver tout le contenu lié à la page dans un seul dossier...

Sommaire

Depuis un certain temps, je suis embêté par cette petite irritation de placer des images miniatures des pages dans le répertoire statique. Cela concerne Mainroad, Rodster et des thèmes Hugo similaires.

J’aime organiser le contenu des pages Hugo sous forme de bundles de pages, et je préférerais que toutes les images liées à une page soient stockées à l’intérieur de ce bundle de page.

image page bundle

Et voici une solution que je vous présente !

Comment conserver les images miniatures du thème Hugo Mainroad (et similaires) dans le dossier du bundle de page

Il suffit de placer ce texte dans le fichier ./layouts/partials/post_thumbnail.html, et vous pourrez stocker votre image n’importe où, depuis le bundle ou le dossier statique :).

{{- if $thumbnail := .page.Params.thumbnail }}
    {{- $class := .class }}
    {{- $visibility := .page.Site.Params.thumbnail.visibility | default (slice "list" "post") }}

    {{- $valueType := printf "%T" $thumbnail -}}
    {{- $isMap := in $valueType "map" -}}
    {{- if $isMap }}
        {{ $visibility = default (slice "list" "post") (default .page.Site.Params.thumbnail.visibility $thumbnail.visibility) }}
        {{ $thumbnail = $thumbnail.src }}
    {{- end }}

    {{- if in $visibility $class }}
    {{- $thumbnailURL := "" }}
    
    {{- /* Essayez d'abord de trouver l'image comme une ressource de page (pour les pages de bundle) */ -}}
    {{- $resource := .page.Resources.GetMatch $thumbnail }}
    {{- if $resource }}
        {{- $thumbnailURL = $resource.RelPermalink }}
    {{- else }}
        {{- /* Fallback vers l'image du dossier statique en utilisant relURL */ -}}
        {{- $thumbnailURL = $thumbnail | relURL }}
    {{- end }}
    
    <figure class="{{ with $class }}{{ . }}__thumbnail {{ end }}thumbnail">
        {{ if eq $class "list" }}<a class="thumbnail__link" href="{{ .page.RelPermalink }}">{{ end }}
        <img class="thumbnail__image" src="{{ $thumbnailURL }}" alt="{{ .page.Title }}">
        {{ if eq $class "list" }}</a>{{ end }}
    </figure>
    {{- end }}
{{- end }}

Comme vous pouvez le voir dans les commentaires, ce petit morceau de template tente de générer une référence vers l’image stockée dans le bundle de page, et si l’image n’est pas trouvée, il recule vers le paramètre par défaut – le dossier statique. Il est donc compatible vers le bas !

Profitez-en !

Bonne continuation avec Hugo !

Liens utiles