[Support request] Setting up images for WP showposts and featured images

[David]

This may have been answered before, but I couldn’t find it.
I use WP Showposts on my home page to display my latest blogs. I want to show Square images with the post title above the image. Then I want my blog posts to pull in a rectangular image as the featured image. Think Instagram post size for the home page and YouTube thumbnail size for the featured images. It’s probably a simple fix, but at this stage, it is beyond me, and I have been struggling with it for the last few days. Any help will be most appreciated

[David]

Hi there,

can you share a link to the site ?

[David]

Hi David,

Here is the link:

https://davidwattsblog.com/

Regards,

David Watts

[Fernando]

Hi David,

You can use a GenerateBlocks Query Loop Block for the Latest Blogs. Through this, you’ll be able to control the layout as you want. Reference: https://docs.generateblocks.com/article/query-loop-overview/

With regards to the featured image, are you referring to single post page’s featured image?

[David]

Hi Fernando,
Thank you for getting back to me. Yes, I want the latest Blogs images to be one size, and then I want each blogs featured image to be uniformly sized.

So the latest blog images, I want to be squared, and each blog post, I want to be more landscape size.

[Fernando]

You can try creating the Latest Posts through a GB Query Loop Block, alternatively, you can try this CSS:

section#wpsp-472 .wp-show-posts-image img {
    height: 286px;
    width: 100%;
    object-fit: cover;
}

section#wpsp-472 .wp-show-posts-image {
    margin-top: auto;
}

section#wpsp-472 .wp-show-posts-inner {
    display: flex;
    flex-direction: column;
}

For the single post images, you can use a Block Element – Page Hero, otherwise, you can try this CSS:

.single img.dynamic-featured-image {
    height: 150px;
    object-fit: cover;
}

[Author]

Posts