Tagged: custom.css, Masonry Gallery
-
AuthorPosts
-
October 29, 2020 at 3:48 pm #1256783
Hello, I want to set up a website with some Masonry Gallery’s and hgave some questions:
– Under Styling can choose for No Gap, Large Gap, 1 pixel Gap. But can I set this value myself (with some custom css)? For example 5 pixel Gap?
– I don’t want my pictures to be cropped so I choose the Flexible Masonry. However, The default is that all images get the same width and are displayed with their original height and width ratio. But what I like to do is set up all images with the same height, and then display them with the original height and width ratio. Is that possible at all?
– I set up 4 collums, when the last collum row have less then 4 pictures to display is it posisble to hide this last row? Or at least to center the images in the last row?
– I disbaled all animation options (Image effect, Animation on load) but still when I put my mouse o a thumbnail in the grid there is a “zoom in” effect. How can I completely disbale all this effects?
Thanks very much for your help :)
Alwin
- This topic was modified 4 years ago by Alwin.
November 3, 2020 at 4:38 pm #1258055Hey Alwin,
Thanks for contacting us and sorry for the late reply!
1- Yes, you can choose to display a Large Gap and then add following code to Quick CSS in Enfold theme options > General Styling
.av-large-gap.av-flex-size .av-masonry-entry .av-inner-masonry { margin-right: 5px; margin-bottom: 5px; }
2- Could you please post a screenshot and show the changes you would like to make? I am not sure if I understood the changes you would like to make clearly.
3- That would not be easily possible I am afraid. You might want to hire a freelance developer if this is something really important for you.
4- Please add following code to Quick CSS field
.avia_desktop .av-masonry-entry:hover .av-masonry-image-container { -webkit-transform: none; transform: none; }
Best regards,
YigitNovember 6, 2020 at 12:39 pm #1258843Hello Yigit,
Thanks; both custom codes you give me work perfect :)
Considering question 2:
The default setting for the Flexible Masonry is that all images get the same width and are displayed with their original height and width ratio. However, i would like to be able to give all images the same height instead of the same width.When all images of the same width (like it is now by default) the vertical images are a lot bigger then the horizental imgages. You can see what I mean on a test website here: https://www.mwp-owd.nl/
You see that the vertical image thumbnails are larger then the horizental thumbnails, because the default setting is that all images get the same width.
Now please take a look at this thumbnail grid created with the Meow Gallery plugin:
(on https://www.mwp-owd.nl/ click on the page “meow-test” in the topbar menu)Here you see that all images get the same height by deafult! I like this a lot more then the Enfold default.
So instead of making all images the same width I would like to make all images the same height in the Enfold Flexible Masonry.
I hope you understand my question now and also hope this is possible :)
Thanks,
Alwin- This reply was modified 4 years ago by Alwin.
November 10, 2020 at 11:11 am #1259517Hi,
Thank you for the inquiry.
The theme is using the isotope script to control the layout of the masonry element, and according to the documentation the layout that you are after is not possible, at least not without adding customization to the script. The closest layout to the meow-test is the fitRows layout mode, but it requires that all images have the same height.
// https://isotope.metafizzy.co/layout-modes/fitrows.html
Another user of the script provided a custom modification to allow same height for the fitRows layout, but implementing something like this will require changes that are beyond the scope of support. You may need to hire a third party developer or contact our partner, Codeable.
// https://github.com/metafizzy/isotope/issues/844
Best regards,
IsmaelNovember 10, 2020 at 11:13 am #1259519Hi,
Thank you for the inquiry.
The theme is using the isotope script to control the layout of the masonry element, and according to the documentation the layout that you are after is not possible, at least not without adding customization to the script. The closest layout to the meow-test is the fitRows layout mode, but it requires that all images have the same height.
// https://isotope.metafizzy.co/layout-modes/fitrows.html
Another user of the script provided a custom modification to allow same height for the fitRows layout, but implementing something like this will require changes that are beyond the scope of support. You may need to hire a third party developer or contact our partner, Codeable.
// https://github.com/metafizzy/isotope/issues/844
Best regards,
IsmaelNovember 10, 2020 at 2:08 pm #1259569Oke, thank you for the help :)
-
AuthorPosts
- The topic ‘Masonry Gallery questions’ is closed to new replies.