How to achieve masonry layout similar to pinterest where images are shown in different sizes?
Thank you
Hello. Click on the images, on the left side you have the setup, and then scroll down to advanced options where you have columns and layout. In the layout, choose masonry.
1 Like
Yes it works. But the masonry effect is based on the content below the image, not based on the size of the image.
Sorry. That’s the extent of my knowledge for now. I hope someone can tell you how and help you out.
Hi arkimark,
You can use CSS Grid or a JavaScript library like Masonry.js. These tools allow you to display images in various size and arrange them in a visually pleasing grid layout similar to pinterest.
Hello @arkimark! As @Domba and @Nehakumari have mentioned, the Masonry layout is displaying the items of the list with different sizes, depending on the image, content below the image and other sections in the list that affect the sizing of the list item.
Thank you!
1 Like
Only the content below affects the layout. While we can only choose rectangular, square, or portrait for the images, only 1.
Hello, the content will always affect the masonry layout to create the differences between the sizes and order of the items. It is the same concept in the Pinterest list that you provided:
In Pinterest, we can see that having texts underneath the images is affecting the sizes of the items lists, that achieves the (Masonry layout).
Thank you!
But in pinterest, the images are shown in different shapes. While in adalo, only 1 shape can be shown.
Images only grow by width in Adalo. But there is a hacky workaround.
In the list shown here, there are two images, show them conditionally.
Here I have set a simple boolean in the collection for ‘long_image’.
You could also set it for ‘image height > 300’, or maybe better to calculate the ratio.
Getting the height of the image is not straightforward, it can be done via the Adalo API.
Depending on your use case, you might want to just have a boolean.
It’s not a perfect solution but it’s OK IMO. You could have more than two image sizes.
Combine with IMGIX params if you like too.
2 Likes
Great workaround. Many thanks.
1 Like
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.