[Resolved] Setting A Unique Mobile Hero Element and Non-Mobile Hero Element for Each Page

Home Forums Support [Resolved] Setting A Unique Mobile Hero Element and Non-Mobile Hero Element for Each Page

Home Forums Support Setting A Unique Mobile Hero Element and Non-Mobile Hero Element for Each Page

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1681119
    Milos

    https://generatepress.com/forums/topic/how-to-set-hero-page-on-mobile/

    Saw this topic, which is similar, but mine is a bit different.

    What I want to do is to make a unique hero element for each one of my pages. The reason I want to do a unique one is that the hero images are different aspect ratios, so having one single one + using featured image would cut off different parts of the image that I wouldn’t want cut off.

    On top of this, for each page, I would like to have one for desktop/tablet view (using a longer image), and a different one for mobile view (using a more square image), again, so that I can finely control which part of the image is shown vs what is cut off.

    How would I go about doing this?

    #1681223
    Elvin
    Staff
    Customer Support

    Hi there,

    You can try creating individual Hero Element for each page if you don’t many pages.

    But if you have a lot of pages, I’m not exactly sure if making a Hero element for each is a good idea.

    You can try making only 1 Hero element but ponder on this:

    This is quite tricky to do as you have to fetch the necessary information that makes the hero element “unique”. After this, another tricky thing is, having different CSS cropping for each page.

    If I may suggest, it’s better to make sure to keep the uniformity in size and aspect ratio for your featured image/page hero image rather than processing it as it creates unneccesary things to do for the server or extra styling, making the serving of your site potentially slower.

    A wise man once said:
    "Have you cleared your cache?"

    #1681238
    Milos

    Yes, unfortunately the images are furniture images, and it is just not possible to do them all in the same aspect ratio and to have all of them focus on one specific area of the image given the photos that we have available (center center, top right, etc), as just the way some of the images were taken, some are much longer, some are less long, etc.

    I might be able to put together 3-4 “standard” ratios that I can use for the desktop/tablet site, but that still requires me doing the above to some extent, and also I will definitely need to serve a different hero image entirely, so any way I slice it, I still will require making multiple desktop/tablet hero elements for specific pages, and multiple mobile hero elements for specific pages.

    David mentioned in the other thread I referenced that there are a few methods, and that they require a bit of code. I’m sensitive to speed performance as well, so if it has an impact, I will have to figure out a long term solution. For now, we’re moving our existing slow site to GeneratePress, and the hero images are pretty key part of our product pages.

    #1681261
    Elvin
    Staff
    Customer Support

    I think the main issue is actually the cropping for unique to each page.

    If you could perhaps pre-plan the pages that will require similar cropping I think we could lessen the number of Hero Elements to create.

    Say for example we have 4 cropping variants. We could just create Hero elements for each of this variants.

    A wise man once said:
    "Have you cleared your cache?"

    #1683830
    Milos

    Yes, that’s correct. So I guess my question is given that I will have more than one ratio, what would be the best way to do each variant for desktop and for mobile mode. I would assume the pattern for doing the 2nd variant would be similar to the 3rd, 4th, etc. Given that the website is always subject to adding/removing pages, and that I am naturally going to experiment with which sizing is best for each particular page, I would need to know how I can increase/decrease these.

    #1684329
    David
    Staff
    Customer Support

    Hi there,

    this is really complicated.
    You would need to use Custom Fields to set each individual image and their specific padding parameters on each post.

    Heres an simple example method of changing a Background image for various mobile and desktop:

    https://generatepress.com/forums/topic/want-to-add-different-background-photos-for-mobile-and-desktop-posts/#post-1489966

    It currently applies to the body but you can change that to page-hero

    Considering each post will have 3 x image and at least 3 fields for defining the hero padding thats a lot of Custom fields to be completed for each post.

    #1684629
    Milos

    Hi David.

    I guess then maybe the goal should be to make one total element for every single mobile feature image, since that image is significantly smaller, I have more width and height to crop off, so make all those cropped the same height/width ratio.

    And then make the rest of the headers for desktop/tablet one by one for each page using the Page rule in display properties (I will make each page’s desktop/tablet as one, don’t need to separate those two). So I guess the question is, for each element that I make, how do I tell Generatepress to only display that Header element on mobile? Or only display that header element on tablet/desktop?

    #1684750
    David
    Staff
    Customer Support

    There isn’t a ‘reliable’ method to choose an Element based on the screen size.
    The very most you can do is to first create a Header Element for desktop, then create the header element for Mobile. In that order only the Desktop version will display.

    Then we can use generate_header_element_display filter to disable the desktop header element if the wp_is_mobile() condition is met using this PHP snippet:

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

    In the code above the 10 should be changed to the ID of the element, which you can find by editing the element and checking its URL.

    However, if your server has Page Caching and does not provide a separate cache for Mobile devices you may find the Desktop element gets cached and the mobile version is never displayed….

    Adding PHP: https://docs.generatepress.com/article/adding-php/

    #1684937
    Milos

    I see, yes, caching would make this pretty unworkable.

    I think the best way to do this would them be not use the header element at all, and to just make a desktop/tablet hero image full sized on the page itself, and then put a mobile hero image right below it, again on the page itself. And then add CSS to show one image at mobile resolutions and hide the other (and vice versa for mobile).

    I assume that wouldn’t cause any issues?

    #1685012
    David
    Staff
    Customer Support

    Shouldn’t be any issues using that method.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.