Masonry gallery with MLA possible?

  • Resolved cristiano771

    (@cristiano771)


    2 years, 10 months ago

    Hi David,
    I am trying to use this plugin for all galleries of my site. In the link I posted there is a preview of one of my galleries. How could I create a masonry gallery? Or how could I force vertical images to have the same height of horizontal ones?
    Hope my question is clear…
    Thank you again,
    Cristiano

    The style used is: 

    <style type="text/css">
#[+selector+] {
    text-align: center;
    margin: auto;
}
#[+selector+] .gallery-item {
    display: inline-block;
    margin: auto;
    padding: 5px;
    height: auto;
    text-align: center;
}
#[+selector+] .gallery-item .gallery-icon img {
    display: inline;
    margin: auto;
    border: 0px solid #ffffff;
    max-width: 150px;
}
#[+selector+] .gallery-caption {
    visibility:none;
}
/* see mla_gallery_shortcode() in media-library-assistant/includes/class-mla-shortcodes.php */
</style>

    The markup:

    Open:
    <div id='[+selector+]' class='gallery galleryid-[+id+] gallery-columns-[+columns+] gallery-size-[+size_class+]'>

    Item: 

    <[+itemtag+] class='gallery-item [+last_in_row+]'>
	<[+icontag+] class='gallery-icon'>
		[+link+]
	</[+icontag+]>
</[+itemtag+]>
    • This topic was modified 2 years, 10 months ago by cristiano771.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author David Lingren

    (@dglingren)

    Thanks for the question and for including the details of your style and markup templates; very helpful. It might be possible to achieve your goal by changing the CSS styles, but I don’t have enough CSS expertise to give you a complete answer.

    The easiest way to create masonry or other more sophisticated gallery layouts is to use one of the many gallery and lightbox plugins. For example, the “Photonic Gallery for Flickr, Picasa, SmugMug, 500px and Instagram” Plugin gives you a wide selection of layouts including masonry and fixed-height. Here’s more information:

    Photonics Layout Options and Examples

    Once you install Photonic, using it is as simple as adding a style=masonry or style=mosaic parameter to your [mla_gallery] shortcode. You can find more information in the “Support for the Photonic Gallery for Flickr, Picasa, SmugMug, 500px and Instagram Plugin” section of the Settings/Media Library Assistant Documentation tab. If you find another plugin you prefer you can probably combine it with MLA by following the steps outlined in the “Support for Other Gallery-generating Shortcodes” section of the Documentation. If you are willing to spend a few Euros, consider the excellent Justified Image Grid for more sophisticated display formats.

    I hope that gets you started on a solution for your application. I am marking this topic resolved, but please update it if you have problems or further questions regarding the above suggestions. Thanks for your continued interest in MLA.

    Thread Starter cristiano771

    (@cristiano771)

    Thank you David!
    I’d like to keep light my web site without any other plugins that could impact on page speed… With actual code I am using a single view-page for all images at full resolution so I don’t need any Lightboxes (that is necessary with masonry of Photonic).
    So my question now is: can I modify the style:

    <style type="text/css">
#[+selector+] {
    text-align: center;
    margin: auto;
}
#[+selector+] .gallery-item {
    display: inline-block;
    margin: auto;
    padding: 5px;
    height: auto;
    text-align: center;
}
#[+selector+] .gallery-item .gallery-icon img {
    display: inline;
    margin: auto;
    border: 0px solid #ffffff;
    max-width: 150px;
}
#[+selector+] .gallery-caption {
    visibility:none;
}

    to have rows with small-images (not thumbs) with the same height?
    I tried any modifies with max-width and height but without good results… perhaps I miss something in the way that style works…
    Hope you can help me…
    the URL of the page is the same…
    Thank you again,
    Cristiano

    Thread Starter cristiano771

    (@cristiano771)

    Hi David!
    a quick update: I have solved so:

    #[+selector+] .gallery-item {
    display: flex;
    margin: auto;
    padding: 5px;
    height: 150px;
    text-align: center;
}
#[+selector+] .gallery-item .gallery-icon img {
    display: inherit;
  margin: auto;
    border: 0px solid #ffffff;
    height: 140px;
width: auto;
   

}

    I will do a check to see if the solution is cross-browser.

    Have a nice day

    • This reply was modified 2 years, 10 months ago by cristiano771.
    Plugin Author David Lingren

    (@dglingren)

    Thanks for your updates and for sharing the solution you finally found; much appreciated!

    Here is more information on the display: flex support across browsers:

    CSS display Property

    If you find any problems, post an update.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Masonry gallery with MLA possible?’ is closed to new replies.