Feature images - Is there a way to have a dfferent image show on the blog homepage to the actual blog post?

[kirk74]

Hi, with one of my clients the images for her blog vary a lot, and sometimes I need to crop it for it to work OK in the blog main page where the images are small and more square (eg to not have someone’s head cut off) … but then in the page for the blog itself, where there is a lot more room I want to display the larger image up the top … is there any way to have two feature images… one for the thumbnail on bog homepages, and a different one for the blog itself…

maybe a plugin that does this that you guys know works OK with X?

we are using Ethos stack.

Thanks!

[ruenel]

Hello @kirk74,

Thanks for writing in! Please be advised that there can only be one featured image in a post or page. The size of the featured images may vary in displaying it. There is thumbnail, medium, large and full. There is also a different image size built in the theme which will display the featured image.

Could you please give us the url where you want the featured image is big and the url of where the featured image should be displayed as small?

Regards.

[kirk74]

Thx, the issue was really a cropping / alignment issue - IE at certain sizes for the different views the default center center crop would cut out heads etc …

So I got around it buy adding this code as needed for the specific blog articles that have the issue … hsraing here in case its useful to others …

/* customising blog images     
.entry-cover is the square blogs on category homepage    
a.entry-thumb is the rectangular blogs on blog homepage     
.x-recent-posts-img is the Recent Posts RHS strip on individual blog pages (but this ony does a tiny shift ... center is being forced. so sometimes you need to crop the bottom of the image so that you don;t lose the top in this view   EG: */

post-468 .entry-cover, .post-468  a.entry-thumb, .post-468 .x-recent-posts-img {
  background-position: center right;
}

.post-475 .x-recent-posts-img {
    background-position: top center;
}


.post-485 .x-recent-posts-img, .post-485 .entry-cover, .post-485 a.entry-thumb  {
    background-position: top center;
}

[christian]

Glad you’ve achieved what you need, @kirk74.