Beta 11: Grid Looper Consumer and Cells

Beta
#1

I made a looper producer and then placed a grid element as the consumer. I was hoping the blog posts would place themselves sequentially into the cells in the grid - making it possible to have irregular layouts. The result is below, which isn’t what I hoped for.

Is there a right way to do this? Or a workaround?

Xnip2020-12-02_22-04-05
Xnip2020-12-02_22-04-051200×802 162 KB

Thanks, Bill.

#2

Hey Bill!

When you enable a Looper Consumer, that element is the one repeated. When working with Grids, you will most likely want to enable the Looper Consumer on your Cells. The easiest way to get started using Grids and Loopers would be to setup your grid layout, then enable a consumer on every Cell but set it to “One” now you have full control over the Grid like before, but each cell will be scoped to the next post. You’ll have to style and manage them all individually.

If you want something more automated, it’s also possible to have the Cell’s Consumer set to All or Many, and you’ll get a uniform grid right away using auto placement. However, to get an offset look you have to tune the Grid placement somewhat in advance. Here’s a quick way to get a simple staggered layout that might spark some other ideas:

  • Add a new Grid and choose “2 Columns”, then delete 2 of the cells. We’ll only use two of them
  • Drop a “The Title” element into the first Cell. For this example, it’s easier to see if you drop the font size down to 1 or 2 em.
  • Inspect the First Cell Element
  • Set height to 200px.
  • Click the cell position control (defaults to Auto Placement) and set the Y axis end position to span 2.
  • Enable the Looper Consumer. You should see a uniform grid of your posts now.
  • Inspect the Second Cell Element. It’s not the second cell in the grid anymore because we’re looping before it, but it is the second true builder element.
  • Set the height to 100px
  • Set the cell placement to: X: 2,2 and Y: 1,1
  • You should see your posts staggering downwards.

We’ve got some design cloud assets coming that will be good starting points for irregular / offset layouts, and we’ll also be doing some video tutorials to help show how all these different systems can work together.

1 Like
#3

Many thanks - I had realised that the Cell had to be the consumer but didn’t grasp the ‘one’ concept. I see it working now.

#4

Ok great! We just met this afternoon to get a game plan for some videos to go with the release so keep an eye out for those as well.