Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • November 11, 2014 at 11:32 am #349268
    Nic

    Hello,
    I´d like to use the masonry gallery element to achieve an alignment like in this screen.

    I have 5 images and 4 columns. The first image is double width and double height compared to the other ones.

    Would be nice if you could help me.
    Thank you,
    Nic

    November 11, 2014 at 6:15 pm #349582
    Elliott

    Hey Nic!

    The image will need to have an aspect ratio of 16:9 or higher. So what you’ll want to do is crop your image so it’s width is a lot bigger than it’s height, something like 1280 x 720 should work, http://commons.wikimedia.org/wiki/File:Aspect_Ratios_and_Resolutions.svg.

    Or if you want to force them to display like that then you can use just the Masonry element instead of the Masonry Gallery element and when you edit your posts add a tag of “portrait” to your posts and save.

    Regards,
    Elliott

    November 12, 2014 at 9:05 am #349942
    Nic

    Hi Elliot,
    thanks for your help, but your advice with the landscape image does not achieve what I´d like to do. What I´m getting now ist this. The featured image is now double width. I´d like to have it double width and double height.

    I know this is possible with the masonry element (Tags: landscape, portrait), but I don´t have posts or portfolio entries. I only like to have an gallery like here

    Thanks for your help.

    Regards,
    Nic

    November 12, 2014 at 9:02 pm #350324
    Ismael

    Hey!

    Thank you for using Enfold.

    You have to custom code this or use the column layout shortcodes to separate the images. Image width and height might change on different screen sizes so you have to use css media queries to fix that.

    Regards,
    Ismael

    November 28, 2014 at 12:49 pm #359529
    Nic

    HI Ismael,

    after some tests, I found this solution:

    1. use the featured image with an aspect ratio of 16:9
    2. .av-fixed-size .av-masonry-entry.av-landscape-img .av-inner-masonry-sizer { padding-bottom: 80% !important; }

    Thanks for your help.

    Regards,
    Nic

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Masonry Gallery: Featured image’ is closed to new replies.