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.

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

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

In page bundles, /images/ folder.

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 }}

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

- 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

  - name: "featuredimage"
    src: filename

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


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.