Featured content with Masonry Grid

Feature Request
#1

The Wappler Masonry app component is great for organizing content, especially images with different sizes.

I would love the Wappler team to add a setting to set the number of featured content to show.

The use case (see the picture attached) is that I want to show the first image in my array of objects as the intro image and the remaining as a masonry grid. This feature is not available by default with the masonry app component. My workaround is I would display the first index of the array [0] to be the intro which is separate from the masonry grid. Then, I filter the array for the masonry grid to exclude the first item in the array as such: arrayData.where(id, arrayData[0].id, ‘!=’)

I think adding this feature will be great, particularly for those who are just getting started with Wappler.

Masonry Grid Update Example
Masonry Grid Update Example1094×926 9.17 KB

#2

Did you find the solution to this??

#3

Such kind of layout (a column spanning 100 of the component) won’t be possible with the current masonry component, as it uses a fixed number of columns per row.

#4

The masonry component is driven from an array data source. You could set your featured item to item [0] or use the where formatter to look for a flag that sets it as featured.

Then repeat the other items in the masonry

3 Likes
#5

This was my work-around. I was hoping the Wappler team could implement a feature update to the masonry component that provides an easy solution with a click of a checkbox to enable or disable featured image.