HUGO

How to process image when using data driven partial

I have a working partial depending on a yml data file as follows:

{{ with site.Data.artists }}
		{{- range .artist }}
		<aside>
			<a href="{{ .link }}">
				<img loading="lazy" src="{{ .image | absURL }}"></a>
			<h4>{{ .name }}</h4>
			<p>{{- .bio -}}</p>
		</aside>
		{{ end }}
		{{ end }}

the corresponding data artists.yml file is:

# artists
    artist:
    - name : "Michael jackson"
      image : "images/artists/michael-jackson.jpg"
      bio : "The King of Pop"

How to modify the above partial code in order to have the possibility to use an image processing method such as Resize, Fill etc.
Thanks

What is the full path to images/artists/michael-jackson.jpg?

all artists images are in static/images/artists directly under the root project directory

Move them from “static” to “assets” and then you can use Hugo to process them.

Step 1

Your partial needs to look something like this:

{{ with site.Data.artists }}
  {{- range .artist }}
    <aside>
      <a href="{{ .link }}">
        {{ $i := (resources.Get .image).Resize "300x webp" }}
        <img loading="lazy" src="{{ $i.Permalink }}" width="{{ $i.Width }}" height="{{ $i.Height }}">
      </a>
      <h4>{{ .name }}</h4>
      <p>{{- .bio -}}</p>
    </aside>
  {{ end }}
{{ end }}

Step 2

Either (a) place the images in assets/images/ instead of static/images/ or (b) mount the static directory to the assets directory with this in your site configuration:

[[module.mounts]]
source = "assets"
target = "assets"

[[module.mounts]]
source = "static"
target = "assets"

Thanks a lot.
It works with step 1 and moving images in assets directory.
I am not very familiar with mount config

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.