Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

[Resolved] landscape to portrait switch of static image on mobile

Home Forums Support [Resolved] landscape to portrait switch of static image on mobile

Home Forums Support landscape to portrait switch of static image on mobile

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1966329
    t29k75

    I have two static images added in content on my homepage, in landscape mode.
    I would like to have them switched to portrait orientation, but on mobile only.
    Is there some solution to achieve that?

    thanks,
    Tibor

    #1966338
    David
    Staff
    Customer Support

    Hi there,

    you would have to add 2 x Image blocks one for Landscape and one for Portrait.
    Then select each image block and use the hide-on-* classes in GP to hide each image on the different devices.

    https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

    #1966374
    t29k75

    Hi David,

    I didn’t think about that option:) Clever.
    I quickly did what you suggested on my local site and it works.
    Only thing I would like to adjust is breaking point between mobile & tablet. Using inspector tool I can see that images are swapping from 768 to 769px.
    Mobile image (portrait) is still on 768px screen (I believe iPads are 768px wide) and desktop img shows from 769px. I would like to have desktop image (landscape) exactly from 768px.

    Any chance to change the breaking point from 768px/769px to 767px/768px ?
    thanks,
    T

    #1966704
    Elvin
    Staff
    Customer Support

    Hi there,

    Are you trying to change the breakpoint of hide-on-* classes?

    If that’s the case, you’ll have to edit the theme/plugin’s CSS to do that. (not recommended)

    These are the default – https://docs.generatepress.com/article/responsive-display/

    If you wish to have a modified version of this, it may be better to write your custom @media rule for breakpoints.

    Example:


    @media
    (max-width: 767x) {
    img-hide-on-mobile {
    display:none;
    }
    }

    @media
    (min-width: 768px) and (max-width: 1024px) {
    img-hide-on-tablet {
    display:none;
    }
    }

    @media
    (min-width: 1025px) {
    img-hide-on-desktop {
    display:none;
    }
    }

    And then use img-hide-on-* classes. You can modify the @media rule for preferred breakpoints. πŸ˜€

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

    #1966832
    t29k75

    Hi Elvin,

    I copy/pasted custom @media rules for breakpoints to style.css.
    Added img-hide-on-mobile to horizontal img and img-hide-on-desktop img-hide-on-tablet to vertical img.
    Somehow, it doesn’t work. Both images are visible on all three devices.
    Tried with display:none !important; as well and cleared the cache.

    T

    #1966833
    Elvin
    Staff
    Customer Support

    Ah my bad. It was missing . indicators for the selectors. Try this:

    @media (max-width: 767x) {
    .img-hide-on-mobile {
    display:none;
    }
    }
    
    @media (min-width: 768px) and (max-width: 1024px) {
    .img-hide-on-tablet {
    display:none;
    }
    }
    
    @media (min-width: 1025px) {
    .img-hide-on-desktop {
    display:none;
    }
    }

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

    #1966834
    t29k75

    When I changed and added dot before img-hide-on-* in css, desktop and tablet shows correct image.
    Only on mobile there are still both images.

    T

    #1966838
    Elvin
    Staff
    Customer Support

    You may have to play around with @media values.

    Ideally I’d use these instead: @media (max-width: 768x) (for mobile) and @media (min-width: 769px) and (max-width: 1024px) (tablet)

    But then again, all of this won’t be necessary if that’s what you’re going to use because the default hide-on-* classes uses the same breakpoints as shown here – https://github.com/tomusborne/generatepress/blob/2c7c8a76d3b58b0b97e82b3a7a5ebf022a1ddfbe/assets/css/main.css#L1555-L1558
    https://github.com/tomusborne/generatepress/blob/2c7c8a76d3b58b0b97e82b3a7a5ebf022a1ddfbe/assets/css/main.css#L1628-L1638

    Unless you’re using Floats on Appearance > Customize > General which will then use this – https://github.com/tomusborne/generatepress/blob/2c7c8a76d3b58b0b97e82b3a7a5ebf022a1ddfbe/assets/css/all.css#L57-L60

    Can you link us to the page containing the images you’re working on? To check why it isn’t working.

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

    #1966854
    t29k75

    I was playing with all this locally using MAMP. I just add it to live site (see link in private window).
    T

    #1966927
    David
    Staff
    Customer Support

    Might be easier to start over to make it easier πŸ™‚

    @media(max-width: 769px) {
        .lg-screen {
            display: none;
        }
    }
    @media(min-width: 770px) {
        .sm-screen {
            display: none;
        }
    }

    For the large screen image add class: lg-screen
    For the smaller screen image add class: sm-screen

    #1967170
    t29k75

    Guys,

    your last suggestion did the trick! I just adjusted those pixels to 767 and 768.

    I believe those extra images will add to overall size of the page even thou they are hidden at some point. Correct?
    Maybe silly request, but would it make sense & be hard to code it for you to GB in the future that we will be able to choose/change orientation of static img for mobile (going from horizontal to vertical) and somehow save some kilobytes?
    …or that’s Gutenberg area?

    thanks for your help again, I mark it as resolved.
    have a great day,

    Tibor

    #1967212
    David
    Staff
    Customer Support

    The browser generally ignores making requests for hidden elements. You can check this in the Browser > Developers tools Network tab ( make sure caches are cleared ).

    Different orientation / cropping of images is known as Art Direction. The HTML <img> element doesn’t support that, its a one size fits all solution. But the newer <picture> element does support it. We’re kind of hoping that WP adds picture support in the future, as wherever we can, we try to use core functions πŸ™‚

    Might be something we review in the future if WP doesn’t get on board.

    Glad to be of help.

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