How to change width and/or height for featured images in page list

[Natenom]

Hi.

I am new to hugo and would like to change the partial "list-item.html" of your theme so that it lets create Hugo thumbnail images for the featured image in the page list.

There are some width and height parameters(?) in partials/helpers/image.html of your theme but I couldn't find out how to pass height and or width to the helper.

Currently list-item.html uses the original files with in small size which are 1 MiB+ each in my blog.

Could you please help?

Thank you.

[razonyang]

See also Resizing Images. For example(front matter):

images = [
  "images/center.png?width=180px"
]

[chrisrummel]

As far as I understood the initial question, Natenom wants to have several differently sized images - for example: a small one for the list, a medium sized one for the post and an original sized one for the image viewer.

Passing height and width as parameters results in the same sizes everywhere, and it is still the fullsize image being delivered.

Something like this in the shortcode:

{{- $original := .Page.Resources.GetMatch (printf "*%s*" (.Get 0)) -}}
{{- $alt := .Get 1 -}}
{{- .Scratch.Set "small" ($original.Fit "500x500") -}}
{{- .Scratch.Set "big" ($original.Fit "1000x1000") -}}
{{- $small := .Scratch.Get "small" -}}
{{- $big := .Scratch.Get "big" -}}
<figure><a href="{{ $big.RelPermalink }}"><img style="max-width: 100%; width: auto; height: auto; box-shadow: 5px 5px 5px grey;" src="{{ $small.RelPermalink }}" width="{{ $small.Width }}" height="{{ $small.Height }}" alt="{{ $alt }}" /></a><figcaption style="margin-top: 5px;">{{ $alt }}</figcaption></figure>

This way the list only uses small sized thumbnail images and creates less network traffic.

[Natenom]

Jepp, thats what I meant. Currently the article images are always the full size images. That not efficient if the image is ~1 MiB large. The theme should handle that automatically for the featured image. Of course one could create a small image for every post but that seems not to be a nice solution when using a something that could do that automatically. :)

[razonyang]

Sounds good, I'll think about it after solving the #368.

[chrisrummel]

If I connect the dots correctly, then @ElanHasson worked on this, too and moved the thumbnail-part into hugo-theme-bootstrap/layouts/partials/post/thumbnail.html

As a result all image-links in lists are broken on my site now. Links are absURL https://servername/imagename.jpg with the whole directorystructure missing. To be fair: this change was marked as BREAKING CHANGE: page's images parameter no longer accepts page resources.

So how am I supposed to do that now?

[razonyang]

We discussed it in #368. The page's images parameter no longer accepts page resources, since Hugo internal twitter-card and opengraph template don't treat the images parameter as page resources. Sorry about the breaking changes, but I think it's the right way to go that follow the same rules of Hugo.

There are two options to fix the broken images:

1. Keep the images parameter, and the move page's images to the static folder. For example: content/foo/images/bar.png to static/images/bar.png.
2. Remove the images parameter, and then rename the image in **feature**, **cover** or **thumbnail** formats. Such as feature.png. PLEASE NOTE THAT it requires that the image places in the same folder of the page, subfolder won't work.

[chrisrummel]

I wasn't aware that I can use images without listing them in the front matter images:-array. Thanks a lot, solution 2 works great for me.

[razonyang]

@Natenom Since we changed the look up order of thumbnails #357, I've been thinking about it, but I couldn't find a way to shrink a large image automatically. Please feel free to share your ideas if you find some.

[Natenom]

Thats how it works: https://cpbotha.net/2020/05/02/drop-in-replacement-for-hugo-figure-shortcode-with-responsive-img-srcset/ :)

Your theme would need to generate one for 180(?) px for the default view, one for ~500 px for the mobile view and maybe a bit more for an image in the post itself on the top :)

[razonyang]

I created a simple version #393, currently the thumbnails will be resized with 180 width automatically, and the image viewer will show the original thumbnails on click. As for the image's size on the post content(detail) page, it's hard to define the proper size of images, it can be easy to resize by height and width parameters, I think it won't be a big problem.

[Natenom]

Can you please add another one for the mobile view? With current master it looks like this in mobile view:

[razonyang]

I reverted it, it seems not a good implementation.

[chrisrummel]

When I started with Hugo one of the first themes I tested was Papermod, and that theme automatically generated different sizes of all the images of a post. More specifically, if I remember correctly, that was done by a shortcode that came with the theme. But it only works with the images: page ressources, that became a breaking change when introducing the thumbnail search order.

[Natenom]

It should not be breaking anything. The code in list-item.hml already distinguishes between "page resource image" and "image within static folder". In the first case the thumbnail would be a generated smaller image and in the second case the original file.

?

[chrisrummel]

I'll wait and see what will happen.

[chrisrummel]

@razonyang I am in the process of renaming images in my content directory to featured* to get this to work.
Looking at the CSS in the diff I suspected as much and it turned out to work like this:

• images with landscape orientation get resized to a width of 180px and a height of 120px
• images with portrait orientation get resized to a width of 180px, too, but a height of 270px

(depending on 2:3 or 3:4 it is 240 instead of 270)

If you change the resize params to 180x180 the largest dimension gets chosen and both orientations end up 180x120 respectively 120x180.

[razonyang]

Sorry, I didn't get it. Actually, the thumbnail(#396) was resized into two different pictures(width: 500px on small screen and 180px on large screen). And the height is auto, so it'll preserve the aspect ratio of the image.
The portrait orientation on mobile will be treated as a large screen(depends on the screen width).

Please correct me if I misunderstand.

[chrisrummel]

Yes, it is difficult to describe... See here:

I am not sure if I just don't care or if I would like the 2nd image to be much smaller - 180 high and not wide.

[razonyang]

Thanks for the details. We can assign the thumbnail a max-height, crop it if exceeds. I'll create a PR later.

[razonyang]

See also #398, commit: dd52113.