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

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

Home Forums Support How to make featured post featured image to be full width? not thumbnail

  • This topic has 10 replies, 2 voices, and was last updated 10 months ago by Paul.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1193171
    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

    #1193381
    Tom
    Lead Developer
    Lead Developer

    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 ๐Ÿ™‚

    #1194049
    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

    #1194290
    Tom
    Lead Developer
    Lead Developer

    You could do that using a plugin like WP Show Posts. Might be worth checking out ๐Ÿ™‚

    #1539508
    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;
    }
    #1539878
    David
    Staff
    Customer Support

    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.

    #1540409
    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.

    #1540861
    David
    Staff
    Customer Support

    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!

    #1541365
    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.

    #1542524
    David
    Staff
    Customer Support

    ‘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.

    #1542796
    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.

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.