How to add photos for post thumbnails in list pages

Can every post have a cover photo with a particular alt property in its front matter in order to be used in list pages?
How is it done? And how the template of the thumbnail loop would be?

The scope of your questions is very wide. I am afraid that we cannot answer them here, because it would require posting and explaining half the Hugo documentation.

We are a support forum run by volunteers on their spare time, not teachers.

Please familiarize yourself with the Documentation.

Also have a look at the Hugo Themes Showcase. It contains several Free and Open Source themes that feature post thumbnails on list pages, you can have a look at their source code at their respective repositories.

If you have more specific questions do not hesitate to post them in the forum.

1 Like

Just added two more parameters in front matter thumbnail_image and thumbnail_image_alt
and then used it in template :
<img class="card-img-top" src="{{ .Params.thumbnail_image }}" alt="{{ .Params.thumbnail_image_alt }}">

p.s: The question was specific and didn’t need half the documentation. thank you for not being condescending :slight_smile:

Thank you for being such a polite member of this forum who has really taken the time to read the forum Requesting Help guidelines and who does not waste @moderators time.

EDIT
Your post above is not really the solution to your questions. Therefore I have unmarked it, because someone else in the future might read this topic and think that this is the way to create post thumbnails on list pages.

Front mater parameters used to be the way to define image thumbnails… back in 2017.

However since then, Hugo has a feature called The Image Resource that also comes with Image Processing, these are the methods one should use to create post thumbnails on list pages.

Front matter parameters require manual work. Page Bundles along with naming conventions for filenames do not require manual work.

2 Likes