This topic is now archived and is closed to further replies.

  • 0

Resolved How To Customize Featured Image Size


Posted · Report post

Hi there,

I've been trying to find a workaround for this, so far unsuccessfully...

My client wants all the Featured Images in Blog Index and Single Post pages to be the same width and height, which means the have to be cropped in many cases.

I've tried achieving this with the wordpress featured image settings, the pagelines settings and CSS but haven't been able to fully achieve it.

if you check the blog index page here: , you will see that the images are cropped but the surrounding frame or border doesn't display properly (at the bottom edge of pic).

I've tried many variations of CSS and targeting the different divs for the image and frame, etc... but haven't found a way to do this properly.

My code at the moment is fairly simple:

#postloop span.c_img {

  width: 100%;

  max-height: 290px !important;

  overflow: hidden !important;

  box-shadow: 0 0px 3px rgba(0, 0, 0, 0.4);


I appreciate your help!

Share this post

Link to post
Share on other sites

26 answers to this question

Posted · Report post

The problem is that all your images have different sizes as far as I can see, for both width and height. The only way for the Featured Image on your posts to have the same height and width is to edit these images so they have the same dimensions. If you were to do this with CSS, the images would become distorted and look odd.

What I'm trying to do is no different than what Pagelines does when it displays the square thumbnails in the excerpts... Pagelines doesn't distort the images when it does that, it just shows a portion of the image, and the rest is hidden.

That's what I'm trying to replicate with the featured image...

It would be super useful to add more control in the Pagelines settings for the size, cropping and handling of featured images and thumbnails in excerpts and in the single post layout...

Let me know if you can think of any suggestions on how to handle this...


Share this post

Link to post
Share on other sites