[Support request] How to make featured post featured image to be full width? not thumbnail

[FJ Solutions]

H there, I set the option to show the first post to be featuted but is using the same image size as the rest of the post in columns below. Is there a way to update this? maybe applying a filter?

Thanks for your help!
Santiago

[Tom]

Hi there,

We don’t have a solid solution for this at the moment, unfortunately.

You need to set your featured image sizing to something that works in the featured post, then use CSS to resize the images down in the other posts.

I’m actively trying to come up with a good solution 🙂

[FJ Solutions]

Hi Tom, i understand thanks for your quick answer, hope you implement that in a future update, the theme is great. The problem is that i want the featured post to be full width, and it wouldn’t be good for page speed at all if it loads all the rest of images in full size width.
I could find a solution if there is a way to offset at least by one the post listing query so i can custom code the latest post and insert it as an Element.

Thanks for your help,
Santiago

[Tom]

You could do that using a plugin like WP Show Posts. Might be worth checking out 🙂

[Paul]

Was wondering the same.

Tom, what if you were to set the featured image of the featured article as a background image of the .post-image container?

Here’s how I’ve done it temporarily. Of course, the featured image isn’t clickable when using this method though and I’d prefer it to be.

/* GP Blog Archive - Full-width featured image in featured post */
.blog .featured-column img {
	display: none;
}
.blog .featured-column .post-image {
  height: 340px; /* required, sets the height of the container */
  background: url("/wp-content/uploads/the-post-featured-image.jpg") no-repeat center center;
  background-size: cover;
}

[David]

Hi there,

maybe this topic provides the solution:

https://generatepress.com/forums/topic/image-size-of-pinned-post-on-blog/#post-1267748

It will allow you to set the Featured Image attachment size form the featured column post.

[Paul]

Sure, that looks like it works too David, but I’m suggesting a method Tom could use to build it in to GP so that extra code and steps aren’t required.

[David]

Not sure we get enough requests to incoporate an option in the Customizer to set a separate image size for the Featured Post – but we’ll definitely consider it!

[Paul]

OK I understand. But a 1 col wide featured image size does look weird on a 2 col wide featured post — so it should at least automatically stretch to fill the entire width of the container to match the width of the post title and excerpt.

[David]

‘Stretching’ the image using CSS is probably not a good thing, aside from degrading the image quality it also breaks the browsers ability to know the size of the image, which could lead to CLS issues.

The best option is the PHP snippet that allows you to define the larger size, the offset unfortunately is that it would mean loading a larger image on mobile devices.

With both options having their own positive / negatives is why it is tricky to make a theme level decision for users. But its something we will look into.

[Paul]

Thanks David, looks like the solution is to use a featured image that is at least as wide as the featured image container area. Anything smaller than that will be displayed at it’s full size. Cheers.

[Author]

Posts