Help with understanding render-image.html

support
1

Hi,
I am progressing well in setting up my new hugo website but i have am having some issues in understanding render-image.html and shortcode in general. I have found 2 independent but very useful shortcodes that I would like use. Using either one independently works but I would like to use both.

The first will perform a zoom effect in images

<!-- Checks if page is part of section and page is not section itself -->
{{- if and (ne .Page.Kind "section") (.Page.Section ) }}
    <!-- Generate a unique id for each image -->
    {{- $random := (substr (md5 .Destination) 0 5) }}
    <input type="checkbox" id="zoomCheck-{{$random}}" hidden>
    <label for="zoomCheck-{{$random}}">
        <img class="zoomCheck" loading="lazy" decoding="async" 
            src="{{ .Destination | safeURL }}" alt="{{ .Text }}" 
            {{ with.Title}} title="{{ . }}" {{ end }} />
    </label>
{{- else }}
    <img loading="lazy" decoding="async" src="{{ .Destination | safeURL }}" 
        alt="{{ .Text }}" {{ with .Title}} title="{{ . }}" {{ end }} />
{{- end }}

The second resizes and creates webp images

{{ $src := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) }}

{{ if $src }}
<figure>
  {{ $data := newScratch }}

  {{ if gt $src.Width 1100 }}
    {{ $data.Set "webp" ($src.Resize "960x webp q90") }}
    {{ $data.Set "fallback" ($src.Resize "960x q90") }}
  {{ else }}
    {{ $data.Set "webp" ($src.Resize (printf "%dx%d webp q90" $src.Width $src.Height)) }}
    {{ $data.Set "fallback" ($src.Resize (printf "%dx%d q90" $src.Width $src.Height)) }}
  {{ end }}

  {{ $webp := $data.Get "webp" }}
  {{ $fallback := $data.Get "fallback" }}

  <a href="{{ $src }}">
    <picture>
      <source srcset="{{ $webp.RelPermalink }}" type="image/webp">
      <img src="{{ $fallback.RelPermalink }}" alt="{{ .Text }}" loading="lazy" decoding="async" width="{{ $src.Width }}" height="{{ $src.Height }}" />
    </picture>
  </a>
  {{ with .Title }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
</figure>
{{end}}

When I combined them I put them into a single file render-image.html and as a second if statement

Is it possible to use both or am I misunderstanding how this image processing works?

Thanks,
Adam

2

First, neither of the examples above are shortcodes. They are both examples of image render hooks, where the path is typically layouts/_default/_markup/render-image.html.

Second, instead of trying to figure out how to combine the examples above, start with a with a basic example and then start adding things. This is a much better learning exercise.

The context passed to the image render hook is documented here:
https://gohugo.io/render-hooks/images/#context

1 Like