Mixed approach with Page Bundle and render-image.html

[idarek]

Hello,

Paweł Grzybek in his article about Migration from single content files to Hugo page bundles cover aspect of migration into page bundle.

Followed by @bwintx The big rebundle

When I would like to do this on my site I know that I may be facing some challenges, especially with my custom render-image.html file.

On one site, I would like to try mixed approach. Before I will migrate into page bundle I would like to tried mixed approach. Leaving everything as it is I would like to create only one article that is a Page Bundle.

This off course, if got reference to images will cause render hooks to fail.

I would like to see if is possible to evaluate render-image.html to check if page is a Page Bundle, than search for file in page bundle folder, if not, search using a path specified.

On Hugo forum I found the following code that is used to check if page is a bundle, however this is not working when processed inside render-image.html that is using .Destination however in other rendering hooks where is used .Params.featuredImage it didn’t thrown an error.

{{ $r := "" }}
{{ if .BundleType }}
{{ $r = .Page.Resources.GetMatch .Destination }}
{{ $r = $r.RelPermalink }}
{{ else }}
{{ $r = resources.Get .Destination }}
{{ $r = $r.RelPermalink }}
{{ end }}

Error: error building site: execute of template failed: template: _default/_markup/render-image.html:2:6: executing "_default/_markup/render-image.html" at <.BundleType>: can't evaluate field BundleType in type goldmark.imageLinkContext

My render-image.html

{{- $image := resources.Get .Destination -}}

<picture{{ with .Title }} role="img" aria-labelledby="{{ printf "figcaption-%d" ($image.Permalink | crypto.FNV32a) }}"{{ end }}>

{{ $isJPG := eq (path.Ext .Destination) ".jpg" }}
{{ $isJPEG := eq (path.Ext .Destination) ".jpeg" }}
{{ $isPNG := eq (path.Ext .Destination) ".png" }}

{{ if or ($isJPG) ($isJPEG) ($isPNG) }}

        {{ $smallw := "480x webp" }}
        {{ $mediumw := "960x webp" }}
        {{ $largew := "1920x webp" }}
        {{ $originw := (printf "%dx webp" $image.Width) }}

        {{ $data := newScratch }}
        {{ if ge $image.Width 480 }}
                {{ $data.Set "small" ($image.Resize $smallw) }}
        {{ else }}
                {{ $data.Set "small" ($image.Resize $originw) }}
        {{ end }}
        {{ if ge $image.Width 960 }}
                {{ $data.Set "medium" ($image.Resize $mediumw) }}
        {{ else }}
                {{ $data.Set "medium" ($image.Resize $originw) }}
        {{ end }}
        {{ if ge $image.Width 1920 }}
                {{ $data.Set "large" ($image.Resize $largew) }}
        {{ else }}
                {{ $data.Set "large" ($image.Resize $originw) }}
        {{ end }}

        {{ $small := $data.Get "small" }}
        {{ $medium := $data.Get "medium" }}
        {{ $large := $data.Get "large" }}

        <source media="(max-width: 480px)" 
                srcset="{{with $medium.RelPermalink }}{{.}}{{ end }} 2x,
                        {{with $small.RelPermalink }}{{.}}{{ end }}"
                type="image/webp">

        <source media="(max-width: 834px)" 
                srcset="{{with $large.RelPermalink }}{{.}}{{ end }} 2x,
                        {{with $medium.RelPermalink }}{{.}}{{ end }}"
                type="image/webp">

        <source media="(min-width: 835px)" 
                srcset="{{with $large.RelPermalink }}{{.}}{{ end }} 2x,
                        {{with $medium.RelPermalink }}{{.}}{{ end }}"
                type="image/webp">

{{ end }}

  <img
    src="{{ $image.Permalink | safeURL }}"
    alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }}
    decoding="async"
    {{ if or ($isJPG) ($isJPEG) ($isPNG) }}width="{{ $image.Width }}"
    height="{{ $image.Height }}"{{ end }}
    loading="lazy">
    {{ with .Title }}<span id="{{ printf "figcaption-%d" ($image.Permalink | crypto.FNV32a) }}" class="caption">{{ . }}</span>{{ end }}
</picture>

[chrillek]

BundleType is a Page variable. Inside your render-image.html, you might want to access it with .Page.BundleType, I guess.

[idarek]

So simple