Archived topic
Featured Image Thumbnail on a Blog Grid
5 replies · Started by Ophira on June 14, 2020
Hi Team,
I want my blog layout on the homepage to display as a single column grid where the Featured image thumbnail is floated to the left and the Blog Title, meta and Excerpt is displayed floated to the right - on a desktop and tablet.
Whereas on mobile I want the layout to be Featured image followed by Blog Title, meta and Excerpt.
I cannot find an option in the customizer to set a different layout for desktop, tablet and a different layout for a mobile.
As a work around I have set the Customizer > Layout > Blog > Featured Image > Location: Above Title, Alignment: Center, Media Attachment Size: Full.
and added custom CSS
@media (min-width: 768px) {
img.wp-post-image {
width: 200px;
height: 200px;
float: left;
margin: 15px 15px;
object-fit: cover;
}
.inside-article::after{
content: "";
clear:both;
display: table;
}
}
Doing so leads to
A. The image sticking to the top of the blog grid on a tablet.
B. Also I don't think it's best practice to load a full size image and shrink it down to a thumbnail to get the effect I want, is there a workaround?
I would appreciate if you could help me out.
Best Regards,
Ophira
Hi there,
I think you'd be better off setting the featured image alignment to "Left" in the Customizer. That way you can get your desired layout on desktop/tablet by using the Customizer, and make any necessary tweaks on mobile.
Let me know if that works or not :)
Hi Tom,
I tired your recommendation. However this leads to the thumbnail pixelating on mobile.
Is there a way to display the featured image on the mobile taking up the entire width of the screen without pixelating? Which would be the same effect as :
Customizer > Layout > Blog > Featured Image > Location: Above Title, Alignment: Center, Media Attachment Size: Full
Best Regards,
Ophira
Should be quite easy, can you set it up that way so I can adjust with CSS?
There shouldn't be any pixelating as long as the image isn't being resized up.
Hi Tom,
How do I share the login details? This is public forum.
Best Regards,
Ophira
Would we need login details? Is it possible for you to set it up like I mentioned above? We aren't able to make any changes to your website.
