- This topic has 27 replies, 3 voices, and was last updated 2 years, 11 months ago by David.
-
AuthorPosts
-
March 15, 2021 at 1:05 am #1695420Sam
Hello
On my blog posts, I have an hero header displaying the feature image with post meta, merged into Navigation bar – so my logo etc overlay.
Created using an GP element header.
Been trying to improve my speed metrics and have pretty much nailed all other than LCP on mobile – which appears to be due to the hero header.
How can I improve this, as its the last piece in my PSI puzzle
March 15, 2021 at 2:52 am #1695561DavidStaffCustomer SupportHi there,
i think if it were a Harry Potter Title it would be something like Core Web Vitals and the never ending headache π
You can try adding this PHP Snippet to your site:
add_action( 'wp_head', function(){ $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'medium_large'); if ($featured_img_url) { echo ' <style> @media(max-width: 768px) { .page-hero { background-image: url(' . $featured_img_url . '); } } </style>'; } });
It will output some Mobile CSS for the background image using medium_large image size instead of the full image used on desktop…. for some it has helped…
March 15, 2021 at 3:11 am #1695583SamIt does feels like that – the never ending story
Is it ok to add that using the code-snippet plug in – as I don’t have a child theme?
March 15, 2021 at 3:14 am #1695587DavidStaffCustomer SupportIt certainly does π
Yep – you can add that using Code Snippets.
Let us know how you get on
March 15, 2021 at 4:23 am #1695661SamBrilliant, thanks – that worked a treat
99% mobile /100 % Desktop on all pages/posts
Just the default image size for WPSHOWPOST to sort now – if you could just give Tom a nudge to release the beta.
March 15, 2021 at 4:25 am #1695663DavidStaffCustomer SupportAwesome – glad to hear that!
Ill give him a nudge π
March 15, 2021 at 10:30 am #1696302SamSorry – just noticed that since that change I appear to have lost the background gradient on mobile
March 15, 2021 at 10:34 am #1696306Samlinear-gradient(0deg, rgba(20,10,4,0.33),rgba(20,10,4,0.33))
is missing – can that be added to that PHP snippet?
March 15, 2021 at 11:46 am #1696355SamNot to worry – I figured it out
add_action( 'wp_head', function(){ $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'medium_large'); if ($featured_img_url) { echo ' <style> @media(max-width: 768px) { .page-hero { background-image: linear-gradient(0deg, rgba(20,10,4,0.33),rgba(20,10,4,0.33)), url(' . $featured_img_url . '); } } </style>'; } });
March 15, 2021 at 12:56 pm #1696437DavidStaffCustomer SupportYep thats the one π Glad to see you got it resolved.
March 16, 2021 at 11:00 am #1697841SamI assume if I put ‘.post’ before than PHP statement, it will limited it to just post heros?
Just I have another Hero for ‘pages’
March 16, 2021 at 7:51 pm #1698206ElvinStaffCustomer SupportI assume if I put β.postβ before than PHP statement, it will limited it to just post heros?
Did you mean the
.page-hero
CSS within the PHP snippet?If so, then yes it would only apply on posts as
.post
meansbody.post
which is a class added to the body for post pages.March 17, 2021 at 12:32 am #1698354SamYes, .page-hero
I just noticed that the CSS was also appearing everywhere there is a pahe.hero class
For all other pages (other than posts), I have a custom picture – configured using a element header
The css code above was also applying to my category. about, terms, priv etc pages. On my cat pages it was taking the first post archive feature image and making that the hero
So I would like to limit it to just blog posts page heros
March 17, 2021 at 5:01 am #1698600DavidStaffCustomer SupportChange this:
if ($featured_img_url) {
to:
if ( is_single() && $featured_img_url ) {
Then the code only gets output on your single posts
April 7, 2021 at 1:20 am #1724340SamThough I would reopen this thread rather start a new one
Since adding the linear-gradient to the above code – my LCP has fallen out of range – PSI flagging page.hero as the issue.
I get a flash of the background colour then the image loading. The background gradient is purely to darken the image so the overlaid text is readable
Is there a way for me to improve this?
I saw someone post on the FB group about preloading the hero, but cant for the life of me find the post.
-
AuthorPosts
- You must be logged in to reply to this topic.