Wie Sie Vorschaubilder in den Ordner der Page Bundle-Datei für Hugo-Webseiten mit dem Mainroad-Theme speichern können

Alle paginebezogenen Inhalte in einem Ordner zu halten...

Inhaltsverzeichnis

Schon seit geraumer Zeit plagt mich diese lästige Sache, Thumbnail-Bilder der Seiten in das statische Verzeichnis zu legen: Thumbnail-Bilder der Seiten.

Das gilt für Mainroad, Rodster und ähnliche Hugo-Themen.

Ich bevorzuge es, Hugo-Seiteninhalte als Page Bundles zu organisieren, und würde lieber alle mit der Seite verbundenen Bilder in diesem Page Bundle speichern.

Bild Page Bundle

Und hier präsentiere ich euch eine Lösung!

Wie man Thumbnail-Bilder des Mainroad-Hugo-Themes (und ähnlicher) im Page Bundle-Ordner behält

Fügt einfach diesen Text in die Datei ./layouts/partials/post_thumbnail.html ein, und ihr könnt euer Bild überall im Bundle- und statischen Ordner speichern :).

{{- 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 := "" }}
    
    {{- /* Versuche zuerst, das Bild als Ressource der Seite zu finden (für Bundle-Seiten) */ -}}
    {{- $resource := .page.Resources.GetMatch $thumbnail }}
    {{- if $resource }}
        {{- $thumbnailURL = $resource.RelPermalink }}
    {{- else }}
        {{- /* Fallback auf das statische Verzeichnis mit 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 }}

Wie aus den Kommentaren zu erkennen ist, versucht dieser schöne Abschnitt des Templates, einen Verweis auf das Bild zu generieren, das im Page Bundle gespeichert ist, und fällt im Falle eines Fehlschlags auf das Standardbild im statischen Ordner zurück. Somit ist es rückwärtskompatibel!

Viel Spaß!

Glückliches Hugo-Genießen!