How to process image when using data driven partial

support
1

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

2

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

3

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

4

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

5

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"
6

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

7

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