- This topic has 9 replies, 3 voices, and was last updated 5 years, 10 months ago by
David.
-
AuthorPosts
-
June 9, 2018 at 10:32 am #596124
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
June 9, 2018 at 2:44 pm #596235Leo
StaffCustomer SupportHi 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 🙂
June 9, 2018 at 11:08 pm #596391Paul
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.
June 9, 2018 at 11:18 pm #596393Paul
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.
June 10, 2018 at 12:47 am #596408Paul
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.
June 10, 2018 at 2:10 am #596447Paul
Deleted this post, contents not relevant anymore.
June 10, 2018 at 2:39 am #596451Paul
Deleted this post, contents not relevant anymore.
June 10, 2018 at 9:12 am #596702Leo
StaffCustomer SupportSo is this problem solved?
June 10, 2018 at 10:37 pm #596950Paul
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.
June 11, 2018 at 8:37 am #597427David
StaffCustomer SupportHi 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.
-
AuthorPosts
- You must be logged in to reply to this topic.