featured images aspect ratio

Hello ??

The way Chosen handles the images, it has to use a set aspect ratio across the posts. This ratio can be modified with the following CSS:

.featured-image {
  padding-bottom: 100%;
}

That will create a 1:1 ratio, and a value of “50%” reduces the height to a 2:1 ratio.

When adding a Featured Image, Chosen will display it above the title on the blog and on the post. It won’t need to be added elsewhere unless you also would like it displayed in the post content area.

great! I’m now deleting the old photos and adding all the featured images in my posts.

can I also specify a fixed width for the featured image? it looks HUGE on desktop, both on homepage AND post permalink (I would like it to be the same width of the post images, wich is perfect)
here an example: https://www.artemisiae.it/blog/2017/03/artemisia-e-zoltar-infinite-wedding/
(same on homepage)

thanks! I really appreciate it!

Yea no problem!

Give this CSS a shot:

.featured-image {
  width: 50%;
  padding-bottom: 50%;
  margin: 0 auto;
}

You can replace the previous snippet and this one will keep the image at a 1:1 ratio.

great! now working on it and experimenting a little bit. thanks!

You’re welcome, happy to help ??

Hiya,

I used this code to reduce the featured image size but it also reduces the thumbnail size and it is in disproportion with the width of the text underneath the thumbnail. Please see: https://dickwalshtheatre.com/category/shows/

Thanks!

PS great theme

Hello,

You can use this original snippet to change the height of the featured image without changing its width:

.featured-image {
  padding-bottom: 100%;
}

Reducing “100%” will make the image shorter.

Hiya,

thanks for your prompt reply. I tried but it’s not what we need. We want to reduce the width and the height proportionally without compromising the thumbnails as per my previous post. Thanks!

When referring to the “featured image,” I mean the selected featured image on both the archive pages and on the individual post pages.

If you’d like to adjust the width and height of the featured images on the post pages only, please use this CSS:

.singular-post .featured-image {
  width: 50%;
  padding-bottom: 50%;
  margin: 0 auto;
}

Hi Ben,

It is possible to have the featured image just as the original. If you know what I mean??? I now can only use pictures that are more landscape oriented where some pics are clearly portrait style. I tried the snippets above but they don’t seem to always do that.

Regards,

Anil

Hey Anil,

I’m afraid that’s not currently an option. The Featured Images need to be given the same aspect ratio.

Hi Ben, ok. Good to know ??. Thanks for the answer.