Hugo 101: Processing Images

[pawsys]

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="https://static01.nyt.com/images/2013/07/27/sports/Y-SCORE/Y-SCORE-articleLarge.jpg">

[pointyfar]

If the question was how to do it with Hugo, the answer is that you can’t, not with an external image: https://gohugo.io/content-management/image-processing/#the-image-page-resource

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.

[lynda]

Perhaps this thread will help with resizing?

Resizing front matter images

Is there any way to resize images that are not included in a page bundle? Forestry suggest an interesting solution using .Resources.GetMatch that is close to what I need but requires all images be located in an ‘uploads’ directory. This makes managing large collections of images problematic. It seems like Hugo might be able to handle this scenario, but the syntax eludes me. If images are located as follows. |── content └── posts └── 2019 └── image1.jpg └── …

[pawsys]

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

[pawsys]

got it. Thanks.

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

[pointyfar]

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

Page bundles are here: https://gohugo.io/content-management/page-bundles/

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

[pawsys]

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?

[lynda]

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

[pawsys]

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

[alexandros]

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.

Thanks

[pawsys]

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.

[pawsys]

let me know if this is enough info

[pointyfar]

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:

content
└── posts
    ├── _index.md
    ├── one
    │   └── index.md
    ├── two
    │   └── index.md
    ├── three
    │   └── index.md
    ...
└── events
    ├── _index.md
    ├── one
    │   └── index.md
    ├── two
    │   └── index.md
    ├── three
    │   └── index.md
...

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:

• https://gohugo.io/content-management/page-resources/#methods discusses how to get a page resource.
• https://gohugo.io/content-management/image-processing/#the-image-page-resource discusses image resources, including the various methods you can perform on them.

[pawsys]

This is how my content organization looks like:

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

Say I am writing a post1.md 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.

[zwbetz]

@pawsys

width: 800 px; crop it to 2:1 aspect ratio (keeping anchor on the center of the image);

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

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

@pawsys

and display it with width: 100%.

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.

[maiki]

@alexandros

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

@pawsys

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.

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

[pawsys]

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

[pawsys]

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:

@pawsys

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?