Jak przechowywać miniatury obrazów w folderze page bundle dla stron Hugo z motywem Mainroad

Zachowanie wszystkich treści powiązanych z stroną w jednym folderze...

Page content

Już od dłuższego czasu męczy mnie ten uciążliwy problem, polegający na umieszczaniu miniatur z obrazów stron w katalogu statycznym. To dotyczy Mainroad, Rodster i podobnych tematów Hugo.

Lubię organizować zawartość stron Hugo jako zestawy stron, i raczej chciałbym, aby wszystkie obrazy związane ze stroną były przechowywane wewnątrz tego zestawu stron.

obraz zestawu stron

I tu prezentuję Ci rozwiązanie!

Jak zachować miniatury w temacie Mainroad (i podobnych) Hugo w folderze zestawu stron

Wystarczy wstawić ten tekst do pliku ./layouts/partials/post_thumbnail.html, i możesz przechowywać swoje obrazy wszędzie z folderu zestawu i statycznego :).

{{- 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 := "" }}
    
    {{- /* Spróbuj najpierw znaleźć obraz jako zasób strony (dla stron w zestawach) */ -}}
    {{- $resource := .page.Resources.GetMatch $thumbnail }}
    {{- if $resource }}
        {{- $thumbnailURL = $resource.RelPermalink }}
    {{- else }}
        {{- /* W razie niepowodzenia, ustaw domyślny obraz z folderu statycznego za pomocą 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 }}

Jak widać z komentarzy, ten ciekawy fragment szablonu próbuje wygenerować odnośnik do obrazu przechowywanego w zestawie stron, a jeśli obraz nie zostanie znaleziony – zwraca się do domyślnego – folderu statycznego. Jest to zgodne z wcześniejszą wersją!

Zachowaj się!

Życzę miłego korzystania z Hugo!

Przydatne linki