Image Optmisation in an array

support
1

Hi All,

I’m trying to optimise images within a template which pulls a range of images in an array. Similar to what was asked here. However, I am unsure how to translate the solution to put it into the template I am using. I have read the documentation and searched lots of YouTube videos but still can’t get it to work.

What I am trying to achieve is to convert the images to a .webp format with fallbacks for older browsers.

The array is in a partials html as:

 <div class="screenshots-slider">
          {{ $Section := .images }}
          {{ range $Section }}
            <div class="screenshots-slider-item">
              <img src={{ .url }} alt="" />
            </div>
          {{ end }}
        </div>

This utilised a .yml file in the /data directory which contains:

---
enable: true
title: This is a title
description: This is my description
images:
  - url: images/screenshots/slider1.png
  - url: images/screenshots/slider2.png
  - url: images/screenshots/slider3.png
  - url: images/screenshots/slider5.png
  - url: images/screenshots/slider6.png
  - url: images/screenshots/slider7.png
  - url: images/screenshots/slider8.png

These .png files are currently in the static/images/screenshots directory.

This is what I’ve tried which causes errors:

{{ $Section := .images }}
          {{- $banner := resources.Get "{{ .url }}" }}
            {{- $jpeg := $banner.Resize (printf "%dx%d jpeg" $banner.Width $banner.Height) }}
            {{- $webp := $banner.Resize (printf "%dx%d webp photo" $banner.Width $banner.Height) }}
            {{ range $Section }}
            
              <div class="screenshots-slider-item">
                <picture>
                  <source srcset="{{ $webp.RelPermalink }}" type="image/webp">
                  <img src="{{ $jpeg.RelPermalink }}" loading="lazy" width="{{ $banner.Width }}" height="{{ $banner.Height }}" alt="" />
                </picture>
              </div>
          {{ end }}

When trying to build the hugo website with my changes the terminal gives the following error:

\partials\screenshots.html:26:32": execute of template failed: template: partials/screenshots.html:26:32: executing "partials/screenshots.html" at <$banner.Resize>: nil pointer evaluating resource.Resource.Resize

I appreciate any guidance you can offer.

Many Thanks

*edited to provide more information on the directories of the files
** added terminal output error

2

Is the “YML” file is in your data directory, or are you referring to a content file?

In which directory are these located?

Are you rendering these images on a regular page, a section page, the home page?

3

Hi jmooring,

Apologies, The .yml file is hosted within the data directory and the screenshots are within the static/images/screenshots/

4

The resources.Whatever methods look in the assets directory, not in the static directory. Either move the images, or mount static to assets in your site configuration.

5

Just for clarfication - to mount the images to the assets folder would I create a new hugo.toml file in the root folder or would I add to the config.toml?

e.g add the following:

[module]
[[module.mounts]]
    source = 'assets'
    target = 'assets'
[[module.mounts]]
    source = '/static/images/screenshots'
    target = 'assets'
6

Use the existing site config file:

[module]
[[module.mounts]]
    source = 'assets'
    target = 'assets'
[[module.mounts]]
    source = 'static'
    target = 'assets'
7

Thanks for confirming. I’ve added that to the current config.toml

When using my solution in the /partial/screenshots.html the terminal gives the following error:

\partials\screenshots.html:26:32": execute of template failed: template: partials/screenshots.html:26:32: executing "partials/screenshots.html" at <$banner.Resize>: nil pointer evaluating resource.Resource.Resize

The solution I’ve been trying to use appears on those lines.

{{ $Section := .images }}
          {{- $banner := resources.Get "{{ .url }}" }}
            {{- $jpeg := $banner.Resize (printf "%dx%d jpeg" $banner.Width $banner.Height) }}
            {{- $webp := $banner.Resize (printf "%dx%d webp photo" $banner.Width $banner.Height) }}
            {{ range $Section }}
            
              <div class="screenshots-slider-item">
                <picture>
                  <source srcset="{{ $webp.RelPermalink }}" type="image/webp">
                  <img src="{{ $jpeg.RelPermalink }}" loading="lazy" width="{{ $banner.Width }}" height="{{ $banner.Height }}" alt="" />
                </picture>
              </div>
          {{ end }}

Line 26 is {{- $webp... in the code block above.

8

resources.Get didn’t get anything.

Search this forum for the phrase “defensive coding” or “coding defensively”

1 Like
9 
          {{- $banner := resources.Get "{{ .url }}" }}

I don’t think so. Try resources.Get .url – or do you want to get the string {{ .url }} as a resource?
And, to re-iterate: code defensively:

  {{ $para := "{{ .url }}" }} <– just for illustration, not the right thing to do
  {{- $banner := resources.Get $para}}
  {{ with $banner }}
  {{ Do what you have to do with $banner/dot }}
  {{ else }}
  {{ error "%s not found" $para}}
  {{end}}