We have come a long way in fixing the lightbox in rtmedia,

We have come a long way in fixing the lightbox in rtmedia, however there is still a couple of problems. When a portrait photo is displayed it is cut off instead of displaying the entire photo. The other problem is that the download button in the pro version does not show because the lightbox seems to be pushed too far down. You can also see images at the top in the background. Need Help!

  • Vinod Dalvi

    Hi Joel,

    I hope you are well today and thank you for your question.

    When a portrait photo is displayed it is cut off instead of displaying the entire photo.

    To resolve this issue try adding the following CSS code in the style.css file of your child theme or add it in your site using the following plugin.

    http://wordpress.org/plugins/simple-custom-css

    .mfp-content #rtmedia-single-media-container .rtmedia-media {
    max-height: 100% !important;
    }

    The other problem is that the download button in the pro version does not show because the lightbox seems to be pushed too far down.

    I don't see the download button on your site could you please share me the screenshot and the page URL where it is displaying so that i can help you to display it properly?

    Best Regards,
    Vinod Dalvi

  • Vinod Dalvi

    Hi Joel,

    The larger image can't be displayed in the smaller screen/window without resizing it so you can use the following CSS code removing the previously provided CSS code to display the image in the smaller screen/window by resizing it in the same proportion as the image size.

    .mfp-content #rtmedia-single-media-container .rtmedia-media img {
    height: 100% !important;
    }
    .mfp-content #buddypress #rtmedia-single-media-container .rtmedia-media {
    height: 100% !important;
    }

    Regards,
    Vinod Dalvi

  • Joel

    Here is a screen shot of what I now have and here is the css customization that is for the lightbox that was given to me by you guys. I think I deleted something that I was not supposed to.
    .mfp-content #buddypress .rtm-lightbox-container .rtmedia-single-meta,
    .mfp-content #rtmedia-single-media-container .rtmedia-media {
    height: auto !important;
    }
    body.logged-in.admin-bar .mfp-content #buddypress .rtm-lightbox-container {
    top: 30px !important;
    }

    .mfp-content #rtmedia-single-media-container .rtmedia-media img {
    height: 100% !important;
    }
    .mfp-content #buddypress #rtmedia-single-media-container .rtmedia-media {
    height: 100% !important;
    }

  • Michael Bissett

    Hey @Joel,

    In regards to the issue with the width you noted here, we ended up resolving this on the live chat today by inserting the following CSS code into Simple Custom CSS:

    .mfp-gallery .mfp-content #buddypress {
    width: 100%;
    }

    In regards to the issue with the portrait sized images being removed, we actually had to remove this code in order to get that working properly:

    .mfp-content #buddypress .rtm-lightbox-container .rtmedia-single-meta,
    .mfp-content #rtmedia-single-media-container .rtmedia-media {
    height: auto !important;
    }
    .mfp-content #rtmedia-single-media-container .rtmedia-media img {
    height: 100% !important;
    }
    .mfp-content #buddypress #rtmedia-single-media-container .rtmedia-media {
    height: 100% !important;

    Now, in regards to the last request you had mentioned on the live chat today:

    there is some space at the top of the lightbox where you can see background image also a little at the bottom. Is it fixable?

    rtMedia seems to be a tricky one to style in this respect (not to mention the concerns about making it mobile friendly), but if you're looking to just keep users from seeing the background image, as well as that white space at the bottom, you can use this as a workaround:

    .mfp-gallery > .mfp-container {
        background: black;
    }

    How would that work? :slight_smile:

    Kind Regards,
    Michael

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.