Hoe thumbnailbeelden op te slaan in de pagina bundelmap voor Hugo-sites met het Mainroad-thema

Alle paginaberelateerde inhoud in één map houden...

Inhoud

Al een tijdje ben ik geplaagd door deze vervelende gewoonte om thumbnail afbeeldingen van de pagina’s in de statische map te plaatsen. Dat geldt voor Mainroad, Rodster en vergelijkbare Hugo-themes.

Ik heb graag de inhoud van Hugo-pagina’s georganiseerd als pagina bundels, en zou liever willen dat alle afbeeldingen die gerelateerd zijn aan een pagina opgeslagen worden binnen deze pagina bundel.

afbeelding pagina bundel

En hier geef ik je een oplossing!

Hoe thumbnail afbeeldingen van Mainroad Hugo Thema (en vergelijkbare) in de pagina bundelmap te houden

Plaats gewoon dit tekstfragment in het bestand ./layouts/partials/post_thumbnail.html, en je kunt je afbeelding opslaan op elk gewenst plekje binnen de bundel of de statische map :).

{{- 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 := "" }}
    
    {{- /* Probeer eerst afbeelding te vinden als paginaresource (voor bundelpagina's) */ -}}
    {{- $resource := .page.Resources.GetMatch $thumbnail }}
    {{- if $resource }}
        {{- $thumbnailURL = $resource.RelPermalink }}
    {{- else }}
        {{- /* Terugval naar statische map afbeelding met 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 }}

Zoals je kunt zien uit de opmerkingen probeert deze mooie template om een verwijzing naar de afbeelding te genereren die opgeslagen is in de pagina bundel, en als de afbeelding niet wordt gevonden, valt het terug op de standaard - statische map. Dus het is achterwaarts compatibel!

Veel plezier!

Happy hugoing!