# How to image manipulation in posts list?

**URL:** <https://discourse.gohugo.io/t/how-to-image-manipulation-in-posts-list/19934>\
**Category:** support\
**Created:** [July 31, 2019, 8:07pm UTC](https://discourse.gohugo.io/t/how-to-image-manipulation-in-posts-list/19934 "2019-07-31T20:07:06Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![johnson](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/johnson/32/9231_2.png) [@johnson](https://discourse.gohugo.io/u/johnson)\
**Post date:** [July 31, 2019, 8:07pm UTC](https://discourse.gohugo.io/t/how-to-image-manipulation-in-posts-list/19934/1 "2019-07-31T20:07:06Z")

</div>

The following code prints a list of posts along with their features\_image.  
How can I apply hugo image manipulations in this case (eg small thumbnails)?

Update: Images are in page bundle images folder.  
Update2: Featured image is set a param at post frontmatter.

```
    <ul>
      {{ range .Pages }}
        <li>
            <a href="{{ .RelPermalink }}">{{ .Title }}</a>
            <img src="{{ .RelPermalink }}/images/{{.Params.featured_image}}">
        </li>
      {{ end }}
    </ul>
```

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [July 31, 2019, 8:11pm UTC](https://discourse.gohugo.io/t/how-to-image-manipulation-in-posts-list/19934/2 "2019-07-31T20:11:39Z")

</div>

Are the images located under page bundles, or under the `static` dir?

---

<div class="post-metadata">

**Author:** ![johnson](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/johnson/32/9231_2.png) [@johnson](https://discourse.gohugo.io/u/johnson)\
**Post date:** [July 31, 2019, 8:25pm UTC](https://discourse.gohugo.io/t/how-to-image-manipulation-in-posts-list/19934/3 "2019-07-31T20:25:55Z")

</div>

In page bundles, /images/ folder.  
Thanks

---

<div class="post-metadata">

**Author:** ![brunoamaral](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/brunoamaral/32/21144_2.png) [@brunoamaral](https://discourse.gohugo.io/u/brunoamaral)\
**Post date:** [July 31, 2019, 8:31pm UTC](https://discourse.gohugo.io/t/how-to-image-manipulation-in-posts-list/19934/4 "2019-07-31T20:31:12Z")

</div>

Inside the range, you can have something like this:

```auto
{{ with .Resources.GetMatch "featuredimage" }}
	{{ $image := .Fill "350x233" }}
<img class="img rounded img-raised" src="{{ $image.Permalink }}" alt="header" />
{{ else }}
<img class="img rounded img-raised" src="{{ .Site.BaseURL }}images/fractal_thumb.jpg" alt="header" />
{{ end }}

```

---

<div class="post-metadata">

**Author:** ![johnson](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/johnson/32/9231_2.png) [@johnson](https://discourse.gohugo.io/u/johnson)\
**Post date:** [July 31, 2019, 8:50pm UTC](https://discourse.gohugo.io/t/how-to-image-manipulation-in-posts-list/19934/5 "2019-07-31T20:50:59Z")

</div>

@brunoamaral Thanks for your answer.  
I suppose have to rename the image that I want to include “featuredimage” inside its filename. Right?

Till now I had it as a param in post frontmatter. So, it’s not possible to make it work using as a page param?

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [July 31, 2019, 9:13pm UTC](https://discourse.gohugo.io/t/how-to-image-manipulation-in-posts-list/19934/6 "2019-07-31T21:13:11Z")

</div>

@johnson try replacing `"featuredimage"` with `.Params.featured_image` in @brunoamaral’s example

---

<div class="post-metadata">

**Author:** ![brunoamaral](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/brunoamaral/32/21144_2.png) [@brunoamaral](https://discourse.gohugo.io/u/brunoamaral)\
**Post date:** [July 31, 2019, 9:31pm UTC](https://discourse.gohugo.io/t/how-to-image-manipulation-in-posts-list/19934/7 "2019-07-31T21:31:07Z")

</div>

@johnson in my case, the post includes the following in the frontmatter:

```auto
---
resources: 
- src: images/P-lqcwtM.jpg
  name: "featuredimage"
---

```

The name can be whatever, as long as you use it in the code after.

---

<div class="post-metadata">

**Author:** ![johnson](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/johnson/32/9231_2.png) [@johnson](https://discourse.gohugo.io/u/johnson)\
**Post date:** [July 31, 2019, 9:32pm UTC](https://discourse.gohugo.io/t/how-to-image-manipulation-in-posts-list/19934/8 "2019-07-31T21:32:03Z")

</div>

@zwbetz It doesn’t work by replacing

---

<div class="post-metadata">

**Author:** ![johnson](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/johnson/32/9231_2.png) [@johnson](https://discourse.gohugo.io/u/johnson)\
**Post date:** [July 31, 2019, 9:34pm UTC](https://discourse.gohugo.io/t/how-to-image-manipulation-in-posts-list/19934/9 "2019-07-31T21:34:34Z")

</div>

@brunoamaral thanks for your reply.  
Till now I use page bundles. All images are in images folder. It would be a pain to write 10 or 20 photos by name inside he frontmatter.  
So, I just have a param called featured\_image where I put the relevant filename.

Alternatively, I could rename a filename of one of the pics to include features in its filename.

Based on that how should I proceed?

---

<div class="post-metadata">

**Author:** ![brunoamaral](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/brunoamaral/32/21144_2.png) [@brunoamaral](https://discourse.gohugo.io/u/brunoamaral)\
**Post date:** [July 31, 2019, 9:42pm UTC](https://discourse.gohugo.io/t/how-to-image-manipulation-in-posts-list/19934/10 "2019-07-31T21:42:03Z")

</div>

I had that problem with over 700 posts 🙂

In my case, I used a find and replace to turn `featured_image:` into

```auto
resources:
  - name: "featuredimage"
    src: filename

```

I think it’s not a problem if the src comes after.

---

<div class="post-metadata">

**Author:** ![johnson](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/johnson/32/9231_2.png) [@johnson](https://discourse.gohugo.io/u/johnson)\
**Post date:** [July 31, 2019, 10:15pm UTC](https://discourse.gohugo.io/t/how-to-image-manipulation-in-posts-list/19934/11 "2019-07-31T22:15:12Z")

</div>

I managed to make it working with both methods.  
Either with resources in frontmatter as you wrote,  
or by adding “featured” at a filename.

Finally I preferred the second method, since it’s a multilingual site and it’s the best to write the same frontmatter resources 4 times (4 languages). Except if [How to share params among translations of same post?](https://discourse.gohugo.io/t/how-to-share-params-among-translations-of-same-post/19919) would be resolved.

Thanks