Hugo 101: Processing Images

If I have an external an image How to: resize image to width: 800 px; crop it to 2:1 aspect ratio (keeping anchor on the center of the image); and display it with width: 100%?

<img src="">

If the question was how to do it with Hugo, the answer is that you can’t, not with an external image:

The image needs to be a Page Resource for the .Resize, .Fit, and .Fill methods to be used, meaning they have to be in a page bundle.


Perhaps this thread will help with resizing?

1 Like

and how the code would look like if the image was in a page bundle folder?

got it. Thanks.

How the code will look like if they were in a page bundle folder?

The discussion in the topic @lynda links to above should be helpful for you.

Page bundles are here:

.Resize, .Fit, .Fill examples are at the page I linked to above.

1 Like

Before posting this I read couple of times through the docs page on page-bundles. There is one code example and it is pretty complex. I am trying to do something relatively simple. The discussion linked by @lynda is about something else. Not sure how to solve this.Does anybody know how to solve my relatively easy example?

You need to explain the problem in more detail. Where is your <img/> tag? Is it within the page .Content?

1 Like

<img> tag is in a partial;
partial is in layouts/_default/list.html

Hello @pawsys

It is impossible to debug the issue you report like this. Please have a look at the Requesting help guidelines.

Then please share the source code of your project (or if you cannot then do replicate it with dummy content).

People in this forum need to see the full context of your templates, especially since you report that a feature that works for most of us doesn’t in your case.


1 Like

thanks for the links to the guidelines.

The difference in my case is that I am not debugging my website. I am trying to figure out how to implement a basic functionality.

How to resize an image to width: 800 px; crop it to 2:1 aspect ratio (keeping anchor on the center of the image); and display it with width: 100%?

I am a novice web developer and I read through the docs. They cover complex cases and are really hard to understand for me. I assume this is not only my case. I am building my personal website while trying to figure out Hugo. I hope that my ‘Hugo 101’ questions will be helpful to other people who don’t know ins an outs of web development.

let me know if this is enough info

We still don’t really know the context of what you want to achieve, so I’ll make some assumptions.

I will assume content structure:

└── posts
    ├── one
    │   └──
    ├── two
    │   └──
    ├── three
    │   └──
└── events
    ├── one
    │   └──
    ├── two
    │   └──
    ├── three
    │   └──

You mention your list.html layout. I’m assuming you want to list the individual posts.

  1. Does each content piece (ie each post or each event) have its own related image?
  2. Is it just one image for the whole section? I.e. one image for post, a different image for events
  3. Is it the same image regardless of where you are in the site? I.e. a logo image that is the same no matter where you are in your site.
  4. How many images do you have in each context? For example, in case #1, say you have multiple images for posts/one/ sunflowers.jpg and roses.png, do you want all of them displayed in your list? Just the first? Do you want to specify which one? Where would you specify which one if so?
  5. Do you want your images transformed in the same way each time? Do you always want 800px width for example?

While the core concepts of Image Processing will be the same, the implementation of it will be slightly different depending on the context.

The main concepts are discussed in the docs:

1 Like

This is how my content organization looks like:

├── posts/
│   ├──
│   ├──
│   ├── img
│   │     ├──image1-post1.jpg
│   │     ├──image2-post1.png
│   │     └──image1-post2.jpg
│   └──
└── events/
    ├── img
    │     ├──image1-event1.jpg
    │     ├──image2-event1.png
    │     └──image1-event2.jpg

Say I am writing a and I want to use the image1-post1.jpg and image2-post1.png within the content of the post (single page).

Also I would like to somehow specify to use image1-post1.jpg on the list page. Can I specify it in the frontmatter of the post?

I want to transform all my images in the same way: width: 800 px; crop it to 2:1 aspect ratio (keeping anchor on the center of the image); and display it with width: 100%.

@pointyfar thanks so much for helping out. Please let me know if everything is clear now.

As @pointyfar has mentioned, you need to use the .Fill method for this and pass an Anchor arg, something like

{{ $image.Fill "800x400 Center" }}

This is accomplished through CSS, something like:

img {
  max-width: 100%;
  height: auto;

Keep in mind that you’ll first need to get your image(s) as page resources before doing any image processing.

@pawsys I hope you get the answers you seek. What we are pointing out is: I for one am not going to build a Hugo project from the ground up to figure out a partial configuration. Someone might! But if you built a repo I could clone and have mostly complete, I’d voluntarily go the rest of the way.

And a lot of folks on the forums have such criteria. For me it is time. Anyhow, good luck, and I hope that explains why we insist on working this way. :slight_smile:


that makes sense. thanks for the clarification! I will make sure to include repos in the future.

1 Like

thanks for help. I still don’t know how to take your advice and make it work on my site.

How to get the images as page resources given my content structure?

And how to: