Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 30, 2014 at 12:09 am #343090
    GGLNetwork

    Hello –

    On this page: http://www.new.globalgl.org/?page_id=54

    With “perfect automatic masonry” selected, instead of making my large images double width, they are becoming half width.

    I have this quick css:
    .page-id-54 .container .av-masonry-entry { width: 35%!important; }
    implemented to make all of the items smaller on the page – but I wouldn’t think that would be the problem. I resized all of the images to be either 600×600 or 600×1200, and would like the larger items to appear double width.
    What am I doing wrong?

    Also, is it possible for the items to not appear zoomed? it is cutting off text… love to not have to resize and upload new images again if possible.

    Thanks for your input. Thank you.

    b.

    November 1, 2014 at 12:02 am #344360
    Andy

    Hi GGLNetwork!

    use this in Quick CSS:

    .avia_desktop.avia_transform3d .av-masonry-image-container {
margin: 20px;
}

.av-fixed-size .av-masonry-image-container, .av-fixed-size .av-masonry-outerimage-container {
width: 80%;
}

    Belonging to zoom effect, please refer to this post: https://kriesi.at/support/topic/disable-the-image-zooming-effect/

    Best regards,
    Andy

    November 1, 2014 at 12:14 am #344373
    Josue

    Hey!

    Try adding this code to the Quick CSS:

    .av-masonry-image-container {
    background-size: contain;
    background-repeat: no-repeat;
}

    Cheers! 
    Josue

    November 2, 2014 at 11:14 pm #345006
    GGLNetwork

    Hey guys,

    Thanks for your responses.
    Andy and Josue, both of your solutions helped make the images fit inside the box so they’re not cut off, thank you so much.

    I’m still a little confused about the image sizes – my understanding is that wider images (ratio of 16:9+) will be displayed at twice the width (same height) as the 1:1 images. I resized all of my images to either 600×600 (square 1:1) or 2400×1350 (16:9). but the wider images are showing up as half height same width, instead of double width same height.

    I got this response from Elliott (not sure why it isn’t here, maybe he deleted it?)
    “Right now they are all displaying as the same width, 400 x 400 but some are 400 x 225. Are you wanting to make it so the bigger ones will take up two columns? If so then you need to resize them so the aspect ratio is a bit more towards 16:9, so just increase the width a bit more.”

    –Yes, I want the bigger ones to take up 2 columns. But I don’t understand, the ratio should be correct already (all wide images are 2400×1350 already) , and I just tried making one of them wider (1350×600) and nothing worked. 16 is the width and 9 the height right?

    Anyone have any ideas? what am I missing?

    Thank you,

    b.

    November 3, 2014 at 11:11 pm #345600
    Andy

    Hi!

    Yes, 16 is width and 9 is height.
    Maybe it would be easier if you just put all images in photoshop how you want them to be and save the whole thing as one image?

    Cheers!
    Andy

    November 5, 2014 at 4:50 pm #346620
    GGLNetwork

    Hi Andy,

    But then you cannot click on the individual images.

    So, with the masonry gallery, you have to scale the images exactly how you want them to appear? because if you use something like this:
    .container .av-masonry-entry { width: 35%!important; }
    it will make all of them the same width, and you lose the “masonry” quality, having some images double width or height, correct?

    And, if you want to upload large images because you’re using them in other places on the site where you want them large, you have to ALSO upload smaller images to use for the masonry gallery because otherwise they’ll be huge.

    I think I’m understanding..

    Thanks!

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘masonry gallery – larger images are being made half size’ is closed to new replies.