[Resolved] Page hero background image resolution

[Bernhard]

Hello,
in the page hero I have defined the featured image as background image. The problem is, that it has >90k (already downsized to 65% quality) and this is fine for desktop but too big for mobile.

Is it possible to load a scaled image on mobile?

Otherwise, my idea would be to load a different page hero for desktop and mobile, where I set in the mobile hero a scaled version of the image. How can I do this with a 768 px breakpoint?

[Relja]

This worked for me (got no solution without using the “!important” – if you’ve found it, let me know 🙂 ):

@media (max-width: 935px) {
    .page-hero {
         background-image: url( 'https://your.domain.com/wp-content/uploads/2021/09/hero-image-mobile.jpg' ) !important;
    }
}

935px is my website’s mobile menu breaking point – adjust according to your setup.
And replace the https://your.domain.com etc… with the link to your chosen mobile header image.

768 px breakpoint example (image link is still not valid, of course):

@media (max-width: 768px) {
    .page-hero {
         background-image: url( 'https://your.domain.com/wp-content/uploads/2021/09/hero-image-mobile.jpg' ) !important;
    }
}

[Bernhard]

Perfect, now it loads the scaled image. 10k instead of > 90k makes a big difference on mobile. Thank you Relja 🙂

It’s a bit particular because I have more page heros, but I can address them via Elements wrapping the css into <style></style>

Probably the GP Premium team may suggest a more generic solution and avoiding !important

[Tom]

We’ll likely be moving more towards using the Block Element page heroes with GenerateBlocks vs the Header Elements.

However, it’s still not possible in GenerateBlocks (yet) to define different dynamic image sizes on devices. I’ve logged an issue for us to look into it 🙂

[Relja]

Hi Tom,

User feedback – if it’s of any use:

I’ve been using GeneratePress for years. After having tried many highly recommended, as well as “random” themes – GP seems to work the most stably, and it performs fastest.

Top-class support, stellar documentation, speed and stability is what made me choose, and stick with GP. Whatever you do, please keep it stable and fast. With WP themes and plugins, I’ve learned that fewer fancy options is usually better. We still have the Elementor plugin for when we’re really lazy to code and want a “very exotic” design.
🙂

P.S.
The funny (and boring at the same time) story of my website redesign with GP Pro. 🙂

[Bernhard]

Hi Tom,
I played a bit around with the page hero block element and it’s very interesting. But it will become difficult to use the same hero for desktop and mobile. For example, I could use a grid for the desktop view but I would need to hide something on mobile to keep the proportions of the background image. If I hide the content via css it would still be loaded.
I think it would be fine to select the device type in the display rules to have the possibility to design different page heros for desktop, tablet and mobile.

[Relja]

If it’s of any help – using the code provided above, the desktop hero image version doesn’t load – only the configured mobile version.

I tested by pressing F12 in a browser, choosing a mobile phone (“toggle device option” or CTRL+SHIFT+M).
Only the mobile hero image gets loaded on a mobile simulation, and only the desktop hero image gets loaded on the desktop version.

I suppose other elements set to be hidden via CSS would be loaded – but are they really “heavy” (large in size and/or require a lot of CPU power to process)?

[Tom]

You can also check the “Network” tab in developer tools to see what is and isn’t getting loaded.

GenerateBlocks Pro has a device-specific background image feature, but it isn’t compatible with Block Elements (yet) 🙂

[Bernhard]

Ok. If I insert a grid in a hero like in this sample, how can I configure that the left and right image are not loaded on mobile?

[Elvin]

Hi Bernhard,

That’s quite tricky to do. Because there’s no 100% reliable way of detecting the client’s device on the server side of things.

We can try placing the 2 images on a shortcode helper function to use PHP and use WP core function wp_is_mobile() but it’s not 100% reliable.

The most reliable thing to do is to let the 2 image be a part of the page and set hide-on-mobile/hide-on-desktop on either of them depending on which appears on mobile and desktop and atleast make sure they’re optimized the load isn’t too heavy.

[Bernhard]

Hi Elvin,
ok. But with the css the images are loaded. The simplest solution for me would be to have one hero block element for desktop / tablet and one for mobile. Is this in some way possible? I don’t see device-specific display rules.

[Ying]

Hi Bernhard,

The simplest solution for me would be to have one hero block element for desktop / tablet and one for mobile. Is this in some way possible? I don’t see device-specific display rules.

No, there’s no display rules to specify devices.

As Elvin mentioned, you can use the WP core function wp_is_mobile() to define the content that is mobile only:
https://developer.wordpress.org/reference/functions/wp_is_mobile/

For example:

<?php
if ( wp_is_mobile() ) {
    // Code added here will only display on Mobile devices 
}
?>

For content on Desktop only the condition becomes:

<?php
if ( !wp_is_mobile() ) {
    // Code added here will only display on NON Mobile devices 
}
?>

[Relja]

I’m not an expert developer, so take this with a grain of salt:

It makes more sense to set a width break-point as a “limit” for showing mobile-friendly stuff.
That will then work nicely even on desktops, if used with a narrow window setting, and will certainly work on a mobile.

Please correct me if this logic is flawed in any way.

I’ve got no solution for not loading the images (over the network), but this should work for not showing them (not loading will probably require some PHP):

The left image CSS selector:

.gb-grid-column.gb-grid-column-28cbd2dd {
display: none;
}

Selector that works for the second image (on the right):

img.wp-image-17852 {
display: none;
}

For the linked website’s mobile break-point (768 px), I’d try this in the child theme’s CSS file:

@media (max-width: 768px) {
.gb-grid-column.gb-grid-column-28cbd2dd {
display: none;
}
img.wp-image-17852 {
display: none;
}
}

Again, take it with a grain of salt.

[Bernhard]

Hi Ying,
thank you for the information. Would it be possible to address the page hero block elements in the code above? Let’s say, the page hero block elements for mobile have the IDs 111, 112, 113 and the elements for mobile the IDs 211, 212, 213?

Basically, the discussion started here https://generatepress.com/forums/topic/page-hero-background-image-resolution/#post-1926395
and when I played around with the page hero block element I was wondering if it would make sense not only to make the background image device – specific but the whole element.

@Relja This is also possible with the addittional CSS classes hide-on-tablet hide-on-mobile in the container block. But it loads the content anyway and this is not good for core web vitals and more in general the loading speed on mobile.

[Ying]

Hi Bernhard,

Would it be possible to address the page hero block elements in the code above?

Yes, that’s what we meant 🙂

So you can try something like this for elements that display on none-mobile screen:

if ( wp_is_mobile() ) {
add_filter( 'generate_block_element_display', function( $display, $element_id ) {
    $id_targets = array(211, 212, 213);
  if ( in_array($element_id, $id_targets )) {
        $display = false;
    }

    return $display;
}, 10, 2 );
}

and this for elements that display on mobile screen:

if ( !wp_is_mobile() ) {
  add_filter( 'generate_block_element_display', function( $display, $element_id ) {
    $id_targets = array(111, 112, 113);
  if ( in_array($element_id, $id_targets )) {
        $display = false;
    }

    return $display;
}, 10, 2 );
}

You might need to switch the IDs, since in your reply all the IDs are for mobile 😛

he page hero block elements for mobile have the IDs 111, 112, 113 and the elements for mobile the IDs 211, 212, 213?

Let me know if it works 🙂

[Author]

Posts