Cómo almacenar imágenes de miniatura en la carpeta de paquete de página para sitios Hugo con el tema Mainroad

Mantener todo el contenido relacionado con la página en una sola carpeta...

Índice

Durante bastante tiempo he estado molesto con esta molestia de poner imágenes de miniatura de las páginas en el directorio estático. Eso es para Mainroad, Rodster y temas similares de Hugo.

Me gusta organizar el contenido de las páginas de Hugo como paquetes de página, y preferiría que todas las imágenes relacionadas con la página se almacenaran dentro de este paquete de página.

imagen paquete de página

Y aquí te presento una solución!

Cómo mantener las imágenes de miniatura del tema Mainroad de Hugo (y temas similares) en la carpeta del paquete de página

Solo coloca este texto en el archivo ./layouts/partials/post_thumbnail.html, y podrás almacenar tu imagen en cualquier lugar desde el paquete y la carpeta 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 := "" }}
    
    {{- /* Intentar encontrar la imagen como recurso de página primero (para páginas de paquete) */ -}}
    {{- $resource := .page.Resources.GetMatch $thumbnail }}
    {{- if $resource }}
        {{- $thumbnailURL = $resource.RelPermalink }}
    {{- else }}
        {{- /* Caída de respaldo a la imagen de la carpeta 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 puedes ver en los comentarios, este hermoso fragmento de plantilla intenta generar una referencia a la imagen almacenada en el paquete de página, y si la imagen no se encuentra, cae de vuelta al predeterminado: la carpeta estática. ¡Así que es compatible hacia atrás!

¡Disfrútalo!

¡Feliz hugoing!

Enlaces útiles