Como armazenar imagens de miniatura em pasta de bundle de página para sites Hugo com tema Mainroad

Mantendo todo o conteúdo relacionado à página em uma única pasta...

Conteúdo da página

Por um bom tempo, estive incomodado com essa irritação de colocar imagens em miniatura das páginas no diretório estático. Isso é para Mainroad, Rodster e temas Hugo similares.

Gosto de organizar o conteúdo das páginas Hugo como pacotes de páginas, e preferiria que todas as imagens relacionadas à página fossem armazenadas dentro desse pacote de páginas.

image page bundle

E aqui estou apresentando uma solução para você!

Como manter as imagens em miniatura do tema Hugo Mainroad (e similares) dentro da pasta do pacote de páginas

Basta colocar este texto no arquivo ./layouts/partials/post_thumbnail.html, e você poderá armazenar sua imagem em qualquer lugar do diretório do pacote e do diretório estático :).

{{- 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 := "" }}
    
    {{- /* Tente encontrar a imagem como um recurso da página primeiro (para páginas do pacote) */ -}}
    {{- $resource := .page.Resources.GetMatch $thumbnail }}
    {{- if $resource }}
        {{- $thumbnailURL = $resource.RelPermalink }}
    {{- else }}
        {{- /* Fallback para a imagem no diretório estático usando 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 }}

Como você pode ver pelos comentários, este trecho de template está tentando gerar uma referência à imagem armazenada no pacote de páginas, e, se a imagem não for encontrada, ele recorre ao padrão — o diretório estático. Assim, é compatível com versões anteriores!

Aproveite!

Felizes hugoing!