Image Size Header Element for mobile

[Klaus]

I have a header element with an image width of 2500px or so, it takes a long time to load on mobile (like 7 seconds). Is it possible to have a different header element for the mobile screen or turn the header element off completly on mobile? Thanks Klaus

[David]

Hi there,

you could try adding the Mobile friendly image as your header element background.
And in the Element Classes field add: custom-background

Then use this CSS to swap the image on desktop:

@media(min-width: 769px) {
    .custom-background.page-hero {
        background-image: url(desktop_image_url);
    }
}

Not sure if it will do the job correctly – let us know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Klaus]

Thanks, and what about turning off the header-element completly for mobile? Would you have a suggestion for that (as I would say, that a header element for mobile often is not useful?). Klaus

[David]

You could try this PHP Snippet:

add_filter( 'generate_header_element_display', function( $display ) {
    if ( wp_is_mobile() ) {
       $display = false;
    }

    return $display;
} );

NOTE: wp_is_mobile() detects the browser NOT the screen size. So it will only apply on a mobile device not when you reduce the size of a desktop browser.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Klaus]

I use “navigaion as a header”. So now the menu has vanished as well…. not yet the solution. Maybe deleting the header is not the right way to do it? I guess I will have to do a redesign, as a photo for a large screen of 2500 px an one for the smallest screen are maybe not managable in terms of loading time. The header element is also really static, so maybe I shouldn’t use it here. Thank you Klaus

[Tom]

I think the media query method that David suggested (https://generatepress.com/forums/topic/image-size-header-element-for-mobile/#post-1311142) would work nicely. The browser shouldn’t download the image if the media query doesn’t match.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Klaus]

Thank you. I guess my problem is, that I don’t really know what I have to do to “add the Mobile friendly image”. If you could just give me a little more advice. Sorry, my fault, but…

[David]

In your Media library you can get the File URL / Link from the image you want to display on desktop. Then add the URL in place of desktop_image_url in this CSS:

@media(min-width: 769px) {
    .custom-background.page-hero {
        background-image: url(desktop_image_url);
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Klaus]

Ah, yes – easy. Wonderful result, loads almost immediately. Seems that google doesn’t notice in their pagespeed-result, but that may come some time later. Thank you very much (as always) Klaus

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Klaus]

Hello, one more question: is the breakting point in the header element set to 769px as a standard for all the mobile settings in the header element? I guess so, but want to make sure. Klaus

[David]

Yes ….
Mobile is max-width: 768px.
Tablet/Desktop min-width: 769px

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Klaus]

Danke (thank you). Klaus

[David]

You’re welcome !

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts