Alternating Layouts within Collection Lists

Can someone please let me know how I can bind my collection list so that the image and heading for each collection item alternatives layout between two columns? Please see attached image.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

You mean automatically alternating down the page? It won’t do this automatically, unless you set up the div structure beforehand. Kind of hard to understand what you’re trying to do.

Yes, alternating down the page,

Okay, then you’ll need to set those collection divs up that way, then bind them with data down the page. Post your read-only link to see.

When you add the collection list. In the first block add the collection list but only add the 1st, then go down the page, add another collection list, then add the 2nd. Repeat down the page, just increment when binding the data.

Once I bind down the page as you’ve explained, how would I enable a new collection item to bind automatically to the next block in the sequence? Or is that not possible?

Oh I see now what you want. Unless I’m wrong, you would need to add some code to do this. Let me check to what snippet could be added…

Nice. Your help is most appreciated.

If I find a way to do it, I’ll hit you back. I did find another thread on this topic:

I found a slight work-around to alternating.

  1. In a section, add 1 Collection List, give unique class - Collection 1
  2. Bind to collection
  3. In settings Limit Items to: Start at 1 - Limit at 1
  4. Add Image

To repeat:

Add new collection, give unique class - Collection 2. Repeat steps. This time Start at 2 - Limit at 1.

Hi, I tried to embed the code from the ‘Alternating dynamic content’ post that you shared in the bottom container of my page, however I don’t think I did it correctly as when I publish nothing happens. My read only link is below and would welcome any insight into what i’m doing wrong. Many thanks.

https://preview.webflow.com/preview/michar-final-site-build?preview=a671e5864752fb13660e50065f1390a3

Sure give me a minute I’ll look for ya. Oh which page and section is it?

Hey so I had this same issue with the same exact layout on a blog post collection page.

There is a neat way around it with some custom code using CSS :nth-child pseudo class as @garymichael1313 pointed out.

Firstly you need to build your collum’s using flex box and not the Webflow collumns.

Make sure to give the row wrapper a unique class. In this case mine was .blog-flex-row

Once you have it built out, obviously all the images will be one side which is not what you want.

Then add this custom CSS code

  .w-dyn-item:nth-child(even) .blog-flex-row {
      flex-direction: row-reverse; 
  }

This selects every second row and reverses the flex direction so that now the image will appear on the right as you have it.

The nice thing about this method is that it will update dynamically when you add new items into the CMS.

Hope this helps anyone with the same issue.

10 Likes

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.