[Resolved] Image Size Header Element for mobile

Home Forums Support Image Size Header Element for mobile

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1311006
    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

    #1311142
    David
    Staff
    Customer Support

    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.

    #1311396
    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

    #1311454
    David
    Staff
    Customer Support

    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.

    #1311567
    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

    #1311829
    Tom
    Lead Developer
    Lead Developer

    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.

    #1311878
    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…

    #1312199
    David
    Staff
    Customer Support

    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);
        }
    }
    #1313115
    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

    #1313740
    David
    Staff
    Customer Support
    #1313866
    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

    #1313916
    David
    Staff
    Customer Support

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

    #1314002
    Klaus

    Danke (thank you). Klaus

    #1314019
    David
    Staff
    Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.