- This topic has 12 replies, 7 voices, and was last updated 3 years, 3 months ago by David.
-
AuthorPosts
-
August 23, 2020 at 12:52 pm #1415212Alexandre
Hi there,
I just created a header element for my posts and I’m really happy with it. Only thing is I’d rather not load my full-sized featured image (1800px+) on mobile devices, but instead use a smaller source image.
I’ve seen multiple topics that seem to be related, but nothing that seemed to answer this directly. I’m guessing it’s a bit complicated as you can’t use the srcset property on background images…
What would be the best way to go about this?
Thanks!
August 23, 2020 at 2:28 pm #1415285DavidStaffCustomer SupportHi there,
you can add this PHP Snippet to your site:
add_filter( 'generate_hero_thumbnail_id_size', function() { return 'large'; } );
Adding PHP: https://docs.generatepress.com/article/adding-php/
Just change the
large
to the attachment size you want to display. The default ismedium
August 23, 2020 at 2:53 pm #1415299AlexandreHey David, thanks for the answer.
Setting it to large would indeed be an improvement, but is there a way to dynamically set a size based on the viewport?
Something along the lines of:
vw 1800px+ => Full
vw 728px+ => Large
vw 300px+ => MediumAugust 23, 2020 at 4:24 pm #1415330DavidStaffCustomer SupportSorry i gave you the wrong filter above thats for outputing the featuered images as an attachment within the hero content.
There isn’t any simple way of outputting the background image for responsive screen sizes with PHP without using a custom library or some half assed CSS that could lead to multiple image requests.
The closest option is to use the
wp_is_mobile()
function within the ( correct )generate_page_hero_background_image_url
filter.Here’s an example – which will load the Medium size image when a mobile device is detected:
add_filter( 'generate_page_hero_background_image_url', function( $image_url, $options ) { if ( wp_is_mobile() ) { $image_url = get_the_post_thumbnail_url( get_the_ID(), 'medium' ); } return $image_url; }, 10, 2 );
Note:
wp_is_mobile()
detects the client device not the Screen size, so it won’t repsond to just reducing a desktop browsers size.August 23, 2020 at 5:48 pm #1415366AlexandreHi David, thanks again for answering.
It does seem like there’s no easy way to go about this, however I feel using wp_mobile could give base results in regard to people using Retina tablets getting served low-quality images.
I think I’m just gonna take then longer loading time in the end!
August 24, 2020 at 3:26 am #1415744DavidStaffCustomer SupportNo problems, i agree π You’re welcome
October 26, 2020 at 11:20 am #1505167MathiasHello David and GP team,
I am probably on the same path and I’ve read a lot here in the forum and elsewhere about responsive images, srcset and related topics.Here is our issue:
https://mygoal.de/trainingsplan-triathlon/
I’d love to have the header background image responsive, but not only on detection of device. The following image in a certain section does respond as it should.Did I get it right, that
a) The responsiveness of images comes with the WordPress core function of srcset and by having stored different thumbnails for that occasion?
b) Background images like the one above won’t resize even if there are those thumbnails?Since many others seem to ask for related support; might that be a kind of feature request? It would really help to improve performance. Since desktop screens become larger and come with even higher resolutions we are here in the conflict area between 4k and mobile use.
Thank you for any explanation.
Regards
MathiasOctober 26, 2020 at 7:06 pm #1505553ElvinStaffCustomer SupportHi,
a) Yes, that’s pretty much it. But this isn’t automatically applied through all of the content. Some contents are coming from plugins. Some plugins have efficient use of srcsets, some don’t.
b) Related to the first question. It doesn’t automatically swap image source on different devices unless specified otherwise w/ PHP snippets.
Since many others seem to ask for related support; might that be a kind of feature request? It would really help to improve performance. Since desktop screens become larger and come with even higher resolutions we are here in the conflict area between 4k and mobile use.
It’ll get worked on if more people get behind this feature. π Features with the most request from users will get priority over less requested ones.
As for the conflict area between 4k and mobile use:
To be honest, the best solution would be to have a standard breakpoint for 4k screens added to the most used ones.
But 4k screen users are a minority, so the web development community isn’t exactly inclined to pursue this YET.
November 21, 2020 at 9:30 am #1540250MartinHi David,
to which file.php i need write the code? i am beginner on this π
i have this issue this is the link: https://www.screencast.com/t/7LXVNnn0mui need the shoe make smaller this is a feature image and i use bacground color (blue)
thank youNovember 21, 2020 at 11:09 am #1540360TomLead DeveloperLead DeveloperHi Martin,
I’m not sure if the above is what you’re looking for. Any chance you can open a new topic with a little more information on the issue/desired outcome?
Thanks!
November 21, 2020 at 11:15 am #1540365MartinHi Tom,
thank you for answer,yes i can.
a sorry for me english πDecember 4, 2020 at 2:20 pm #1567878SarahSince many others seem to ask for related support; might that be a kind of feature request? It would really help to improve performance. Since desktop screens become larger and come with even higher resolutions we are here in the conflict area between 4k and mobile use.
Itβll get worked on if more people get behind this feature. π Features with the most request from users will get priority over less requested ones.
I’d really like an easy way to be able to swap images when moving from desktop to mobile/tablet.
Or, if there is a way to ‘focus’ the mobile viewing of the hero-image centred on a particular section of the larger image so that it looks okDecember 5, 2020 at 4:08 am #1568258DavidStaffCustomer SupportSomething we’re looking into for a future update using Block Elements and GB Pro.
-
AuthorPosts
- You must be logged in to reply to this topic.