Solved Image sizes

Discussion in 'Media Pro Gallery' started by Kathraina, May 24, 2016.

  1. Kathraina

    Kathraina New Member

    1
    0
    Hello museTHEMES, could you pls provide recommended image sizes for this really nice widget?
    I've been working with both, portrait and landscape images in the same gallery and while the landscapes work really fine, the portrait sizes are completely distorted once the lightbox option bigger than "small" is chosen.

    Thanks for your assistance, best Kathraina
     
  2. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    2,740
    209
    Kathraina, you need to make sure your image is large enough or the image will be re scaled to fit the light box.
    A good habit to get into is to size and adjust all your images before you load them into any widget.
    I was testing with images that were approx. 600 wide by 800 high. I had great results on all light box settings

    Dj
     
  3. dooalot

    dooalot Member

    16
    3
    Greetings. I have been searching for an answer to the same problem... most of my images are distorted and/or cropped severely in the light box for Media Pro. The only ones that look correct are the few images that are more landscape orientation.

    I read this thread in the forum yesterday and so spent some time checking all my images and saving them all to be about 600x800 pixels in size. Just re-uploaded the entire site to business catalyst to check it out and it's still showing everything distorted. Is there possibly another answer, or am I missing something? Seems like we ought to be able to have some control over how the images are sized when they go into the lightbox... or is that a feature that would be too complicated to develop?

    Here is a link to the business catalyst site, to the specific page that uses the Media Pro Gallery. Maybe you can see something I need to fix. Please excuse the very unfinished state of the site.
    http://provationstestsite.businesscatalyst.com/our-work.html
     
  4. dooalot

    dooalot Member

    16
    3
    I will qualify what I just posted and point out that it seems like the amount of distortion depends on the size of my browser window. When the browser itself is open in a large landscape-oriented window (i.e. a window that fills the screen of my MacBook Pro), then all the portrait images are distorted. If I size the browser window way down so that is is square, they are about right. If I make the window taller and skinnier (portrait orientation) then the images start to get squished in that way, although it is not as noticeable as then they are being stretched from side to side at the bigger window size.

    I'm anxious to know if there is a solution. Thanks for any help you can offer.
     
  5. Steve Harris

    Steve Harris Museologist Staff Member Moderator

    212
    77
    Hey guys,

    Here's something to try - we're going to embed some code into Muse.

    On the page where you are using Media Pro, click Page > Page Properties > Metadata, and in the box that says "HTML for <head>" please enter this:

    <style>
    .featherlight-content {
    width: 35% !important;
    }
    <style>

    You can change the value that says 35% to any number you like, and this should impact the image size in the lightbox. Let me know if this works...

    Thanks
    SH
     
  6. dooalot

    dooalot Member

    16
    3
    Sorry I didn't reply sooner... the code you provided does help. I think there are still some minor issues with some image distortion, but not as many and not very noticeable like before. I haven't studied every detail of it but I think it is working much better now. Thank you very much for your help!
     
    Steve Harris likes this.
  7. dooalot

    dooalot Member

    16
    3
    Question about the code you gave us. Does the percentage number only affect one dimension of the image, or both? I have been working on our portfolio page a lot lately, trying to get it ready to go live, but am still seeing a lot of squished images. I have tried different percentage numbers, but nothing seems to be universally helpful. Resizing the browser window affects the image proportions still. Any ideas of a fix for this, or does it have to be fixed within the widget itself? It seems so close and yet so far...
     
  8. Frans

    Frans New Member

    3
    1
    Hi Steve,
    First my admiration for your nice tutorials, although some seems to have maintenance backlog because of a widget update.
    This also applies to the MPG widget. I have the same problem with the presentation of photos in the lightbox. I use the 1.5 layout and have the code introduced by the Metadata, but now all the images are adjusted so that the landscape photos are very small.
    Is there a solution for this?
     
    Phil Jeyes likes this.
  9. Phil Jeyes

    Phil Jeyes Member

    7
    0
    Hi

    I have been experiencing this problem and have tried the suggested code solution.

    Whilst this has some effect it is not really a satisfactory solution. As Frans says, now all the images are smaller.

    We need more control over how images are treated as with Muses default widgets. The ability to dictate if the images 'Fit content proportionally' or 'Fill frame proportionally'. Without this, the widget only really works with landscape images. I need it to work with both as I expect most people do.

    Please tell me you are working on this as, for me, it's fairly useless at the moment.
     
  10. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    2,740
    209
    Phil, for a up to date response on a question like this I recommend placing a support ticket (support > contact us).
    Thanks
    Dj
     
  11. That resolved the distortion problem, I set the percentage to 70. works fine now on fullscreen. Cheers.
     
  12. Raul Salas

    Raul Salas Member

    7
    0
    hello MuseThemes, I've had the same issue and I tried the code. It looks great on fullscreen but it becomes really small on mobile devise (iPhone). Any updated codes?
     
  13. MirkoSonnenrein

    MirkoSonnenrein New Member

    1
    0
    Hello everyone,

    I have had the same issues with the way images scale in the lightbox and I have also tried to code snipped posted by Steve Harris. As far as I understand it, the unconditional scaling of the images in relation to the screen resolution causes the issue.

    So I searched for conditional style commands and came across something that seemed reasonable to try. I just added a condition to the code and it seems to have resolved the issue for me. I can´t guarantee for this to work for others, but thought I´d post it and maybe someone with more coding skills than myself could confirm this to be a valid solution?

    Here is the code snipped I use:

    <style>
    @media (min-width:800px) {

    .featherlight-content {
    width: 30% !important;
    }
    }
    <style>
     

Share This Page