I’d like to create a company directory where I show the picture of people in the company, with some information for each person below. I’m thinking collection element is the way to do this, but is there a way where I can achieve this sort of formatting?
1 Like
Yes it is very easy with weweb. I think you must be new, and welcome. Weweb’s most powerful feature is that you can bind everything/anything to your data. You don’t need to specifically use a ‘collection item’. When you bind an array to an element, it will create repeatable items for the item in the element. And then in each item you can bind to their each data in the array.
-
Say you have an array of people in the company. This is what your data might look like.
-
Create a UI that you want for each data.
Note: You must put it all in a single div block. This div will be repeated for each data:
- Put the div block in another div block.
Red border is outer, black border is inner.
- Bind your outer div block to your array data.
Now you get to see your inner div block repeated with count of how many items in your array.
This div block will repeat the items according to the binded data, and you can shape how you want to align your data by adjusting the outer div block.
- Adjust how you want your items to be aligned/formatted. To align/format like how you described, there are 2 ways.
- Make the inner block width size as 25%(1/4) and align it horizontally
- Use a ‘column’ element as outer element insted of div block, and set it to mosaic and 4 items.
You can see both will yield same results.
- Final step, bind the name and image to your data.
And you will see everything comes to life.
That took me about 1 minute. You can see how fun and powerful weweb is, every steps of the way you get to see the results, and work with live data.
If you need more help just ask, we are happy to help
2 Likes
This is excellent! Thank you so much for the detailed write-up.
1 Like