[Support request] How can I make featured images full width?

[Paul]

And can I do this selectively on a post by post basis? Because for some posts I may not have a high enough resolution image available. But for the posts that I have a good high res image for, full width looks much better.

See what I mean in the below screenshots:

#1: Current post body width featured image design: https://cl.ly/3l0p243P2M1v

#2: Desired full body width featured image design: https://cl.ly/0f1z381d1u3x

[Leo]

Hi Paul,

I think the easiest way would be to create a full with page header. Turn the background image on without actually adding a background image so it would automatically uses your featured image.

Then on posts you would like to have full width featured image, apply for this page header.

Let me know if this works 🙂

[Paul]

Thanks Leo, visually it works. But there’s a problem when it comes to SEO. The featured image filename is nowhere to be found in the HTML, and not in the first level of CSS also. So this is giving Google a very hard time to determine what the post is about by looking at the post image.

Is there an alternative way to do this that retains the featured image filename in the HTML?

I really like the wide image design, but the likelihood of not-as-strong rankings in Google from having an unreadable background image may not be worth it.

[Paul]

A quote straight from Google:

“…from our point of view, for image search, we would use the image tag with the source attribute pointing at the image… and as far as I know we don’t use CSS images at all for image search. So for normal web search it doesn’t matter. You can use whatever works best for you. If you want to have these images indexed in image search then I would definitely use a normal image tag for that.” – source: https://www.searchenginejournal.com/google-image-search/231735/

From some more research it seems CSS images are looked at as pertaining to site design only, not content. Thus they aren’t treated as part of the content, hence the SEO problem here.

[Paul]

I found a part-solution to adding featured images to the page header as HTML here: https://generatepress.com/forums/topic/page-header-featured-image-template-tag/

This is the CSS I used:

.page-header-content-container img {
    width:100%;
    max-height:460px;
    object-fit:cover;
  }

To make this work across all devices, I do need to set a featured image that has the image ratio that I want on smaller devices where the viewport doesn’t accommodate widescreen…

If I don’t do this and for example set a widescreen aspect ratio image as the featured image, the height of the featured image looks very narrow on mobile.

The CSS background method doesn’t have this issue, instead it cuts off some of the sides of the widescreen image to maintain an attractive aspect ratio on smaller devices. Any idea how it does this? Can I tweak my CSS to do that also?

Reason I ask is because with my solution at the moment, I have to upload pretty large images. If I could stick to just the widescreen portion of those images, and have them cut off at the sides on smaller devices to maintain an attractive aspect ratio, that would lead to smaller images and faster load times for my visitors.

[Paul]

Deleted this post, contents not relevant anymore.

[Paul]

Deleted this post, contents not relevant anymore.

[Leo]

So is this problem solved?

[Paul]

Only partly. If you know how to turn the above CSS code into something that would behave exactly like the CSS background header solution, that would greatly help. Because now I have to upload pretty big images to make it work.

[David]

Hi Paul, you could try disabling the Featured Image for Posts in the Customiser > Layout > Blog and then adding this to the after header hook:

<?php if ( is_single() ) : 
           if ( has_post_thumbnail() ) { ?>
               <div class="featured-image-in-header">
                   <?php the_post_thumbnail(); ?>
               </div>
           <?php }
endif; ?>

It won’t be constrained by the grid container so should be full width and will be output as an img.

[Author]

Posts