# How to process image when using data driven partial

**URL:** <https://discourse.gohugo.io/t/how-to-process-image-when-using-data-driven-partial/33713>\
**Category:** support\
**Created:** [July 6, 2021, 2:58pm UTC](https://discourse.gohugo.io/t/how-to-process-image-when-using-data-driven-partial/33713 "2021-07-06T14:58:18Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Polarhardboiled](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/polarhardboiled/32/22623_2.png) [@Polarhardboiled](https://discourse.gohugo.io/u/Polarhardboiled)\
**Post date:** [July 6, 2021, 2:58pm UTC](https://discourse.gohugo.io/t/how-to-process-image-when-using-data-driven-partial/33713/1 "2021-07-06T14:58:18Z")

</div>

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

```auto
{{ 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:

```auto
# 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

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [July 6, 2021, 3:09pm UTC](https://discourse.gohugo.io/t/how-to-process-image-when-using-data-driven-partial/33713/2 "2021-07-06T15:09:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Polarhardboiled](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/polarhardboiled/32/22623_2.png) [@Polarhardboiled](https://discourse.gohugo.io/u/Polarhardboiled)\
**Post date:** [July 6, 2021, 3:31pm UTC](https://discourse.gohugo.io/t/how-to-process-image-when-using-data-driven-partial/33713/3 "2021-07-06T15:31:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![frjo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/frjo/32/18626_2.png) [@frjo](https://discourse.gohugo.io/u/frjo)\
**Post date:** [July 6, 2021, 3:33pm UTC](https://discourse.gohugo.io/t/how-to-process-image-when-using-data-driven-partial/33713/4 "2021-07-06T15:33:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [July 6, 2021, 3:38pm UTC](https://discourse.gohugo.io/t/how-to-process-image-when-using-data-driven-partial/33713/5 "2021-07-06T15:38:17Z")

</div>

### Step 1

Your partial needs to look something like this:

```auto
{{ 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:

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

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

```

---

<div class="post-metadata">

**Author:** ![Polarhardboiled](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/polarhardboiled/32/22623_2.png) [@Polarhardboiled](https://discourse.gohugo.io/u/Polarhardboiled)\
**Post date:** [July 6, 2021, 3:48pm UTC](https://discourse.gohugo.io/t/how-to-process-image-when-using-data-driven-partial/33713/6 "2021-07-06T15:48:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [July 8, 2021, 3:48pm UTC](https://discourse.gohugo.io/t/how-to-process-image-when-using-data-driven-partial/33713/7 "2021-07-08T15:48:13Z")

</div>

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