Como armazenar imagens de miniatura na pasta do pacote da página para sites Hugo com o tema Mainroad

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

Conteúdo da página

Há algum tempo, tenho sido incomodado por essa incômoda necessidade de colocar as imagens de miniatura das páginas na pasta estática. Isso se aplica aos temas Mainroad, Rodster e temas similares do Hugo.

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

pacote de página de imagem

E aqui apresento a vocês uma solução!

Como manter as imagens de miniatura do Tema Mainroad do Hugo (e similares) na pasta do Pacote de Página

Basta colocar este texto no arquivo ./layouts/partials/post_thumbnail.html, e você poderá armazenar sua imagem em qualquer lugar, seja no pacote ou na pasta estática :).

{{- 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 := "" }}
    
    {{- /* Tenta encontrar a imagem como recurso da página primeiro (para páginas em pacote) */ -}}
    {{- $resource := .page.Resources.GetMatch $thumbnail }}
    {{- if $resource }}
        {{- $thumbnailURL = $resource.RelPermalink }}
    {{- else }}
        {{- /* Fallback para imagem na pasta estática 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 belo trecho de template tenta gerar uma referência à imagem armazenada no pacote de página, e se a imagem não for encontrada, ele recorre ao padrão - a pasta estática. Então, é compatível com versões anteriores!

Divirtam-se!

Feliz hugoing!