How to image manipulation in posts list?

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>

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

In page bundles, /images/ folder.
Thanks

Inside the range, you can have something like this:

{{ 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 }}
2 Likes

@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?

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

1 Like

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

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

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

@zwbetz It doesn’t work by replacing

@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?

I had that problem with over 700 posts :slight_smile:

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

resources:
  - name: "featuredimage"
    src: filename

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

2 Likes

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? would be resolved.

Thanks