BuddyDev

Search

Lightbox Responsivity on Mobile – Checking for Landscape or Portrait Orientation

  • Participant
    Level: Enlightened
    Posts: 29
    Simon on #5543

    Hello,

    I am trying to get the lightbox images to be centred vertically on mobile screens. By default the images are all at the top of the screen, which is good for portrait images but not for landscape images. I tried the following code to lower the images by 10% but it doesn’t work:

    <!– My code to lower images by 10% on a mobile screen –>
    <?php
    if ( wp_is_mobile() ) {?>

    <?php

    $image = mpp_media_src();
    $size = getimagesize( $image );

    if ( $width > $height ) {?>

    <style>

    .mpp-lightbox-media-container a img.mpp-lightbox-single-media {
    margin-top: 10%;
    }

    </style>

    <?php } ?>

    <?php } ?>
    <!– –>

    Apparently, the above code should return the width and height into the $size array but it doesn’t work for me. Any help would be appreciated or if there is a better way to do this that would be cool.

    Thanks!

    Simon

  • Keymaster
    (BuddyDev Team)
    Posts: 24636
    Brajesh Singh on #5546

    Hi Simon,
    Thank you for posting.

    1. You should avoid getimagesize() due to performance reasons here. If you still want to use it, you can use mpp_get_media_path() that returns the file system path. mpp_get_media_src() returns the url. all functions without get is used to print.

    2. Please try doing it via media query if possible. I am not able to look at it right today but this month huge updates are supposed to come for MediaPress, so most probably the lightbox will get some enhancements too.

    Thank you
    Brajesh

  • Participant
    Level: Enlightened
    Posts: 29
    Simon on #5655

    Hi Brajesh,

    Sorry for the late reply.

    1. Thanks for the heads up relating to the performance issue, I will avoid that method.

    2. I am not sure how to use a media query to check for landscape or portrait. Good news about the updates, I look forward to seeing them!

    Thanks,

    Simon

  • Keymaster
    (BuddyDev Team)
    Posts: 24636
    Brajesh Singh on #5658

    Hi Simon,
    You may find this helpful
    https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Regards
    Brajesh

You must be logged in to reply to this topic.

This topic is: not resolved