Trying to duplicate collection page template

Hi,

I am trying to duplicate a collection page template – which seems to be a very common topic on these forums…

I’ve duplicated a CMS Collection – so “Posts” and “Posterity’s Sake” (PS) are identical. I plan on adding my own custom made component in the PS CMS collection, once I’ve successfully duplicated the collection page template.

I’ve used a workaround formed from the various recommendations.

  1. Copied the div from the template page that I want to replicate into the same page (“Posts Template”)
  2. Removed as many of the bindings from the copied div as I could in the CMS Collections > Settings > View Connections for “Posts Template” – the one I could not get rid of was the “Collection List Wrapper” in the second to last section
  3. Copied the the copied div to the target template page (“Posterity Sake Template”) and tried to bind them to their original fields

I’ve gotten stuck in this process though.

  1. It doesn’t seem like I found all of the CMS bindings – this seems like manual error but I’m not sure how to find the ones that are not connected?
  2. I don’t know how to copy over the Collection List Wrapper

Can anyone offer some insight? Would be forever grateful.

Here is my public share link: [LINK](https://preview.webflow.com/preview/letters-to-ayesha?utm_medium=preview_link&utm_source=designer&utm_content=letters-to-ayesha&preview=b4a9517b6e3e6525c20e16bfccdba134&pageId=651b7361c78416c9cdb1d48b&itemId=651b7361c78416c9cdb1d42f&workflow=preview)
(how to access public share link)

Your link doesn’t work, but you’re on the right approach. Look for anything purple under settings. Check conditional filtering and custom attributes. Expand your element view on the left, it will help you see purple things you’ve missed like HTML Embeds that might have embedded fields.

I need to add though that very often when someone is trying to “copy a collection page”, they’re making a design choice that will bite them later. Generally if the data is shaped the same, and presented similarly, it should probably be in one collection with one collection page. There are other ways to distinguish types of blog posts.

If you have good reasons though and are really committed to this path, there’s a tool to help you unbind CMS items.

1 Like

Your approach is probably the best answer, because I’m only looking to make one addition. Instead of tediously unbinding and rebinding collections, let me use your approach.

In the Posts Template, I want to create a placeholder for a custom-made component (it’s a 3 column grid that is a lightbox that is acting as my gallery – it’s called “3 Column Grid for Lightbox Gallery (my first component!)” (haha, sorry for the parenthetical, I was excited)).

It would be in the container that contains the “Page Content” class, above the Post First Letter and Post Text class. Here’s my biggest hurdle – not all posts will have this Lightbox component. I’d like to add conditional logic so that if the CMS Collection doesn’t have a linkbox, it would not show the lightbox and simply have the Post First Letter & Text at the top.

How would I achieve that kind of conditional logic?

Here’s a link to my page again – tested it and it should work this time:

https://preview.webflow.com/preview/letters-to-ayesha?utm_medium=preview_link&utm_source=designer&utm_content=letters-to-ayesha&preview=262ffe1507d4174ac7f0cff3d1dba350&pageId=651b7361c78416c9cdb1d48b&itemId=651b7361c78416c9cdb1d511&workflow=preview

I don’t know the details of what the component is designed to do or where it’s sourcing it’s content from- I don’t see an image gallery field in your collection.

However you’d typically just drop the component on your page, set it up however you like, and then set the conditional visibility on that element so that it only appears if the right conditions are met in your cms item.

I’d imagine that’s “if image gallery is set”, meaning it contains images.
But it could be anything. A simple switch field on/off could be used.

Got it. I haven’t gotten to conditional visibility yet, although I will get there.

I am now editing my component so that it can accept a multi-image field. I have created a CMS Collection called “Galleries”, where I plan to have a multi-image field (I added an image field as a placeholder as well).

When I navigate to the component, I’ve switched to Galleries for the Collection List Wrapper. However, when I go to select media, I do not get my multi-image as a field. Can someone elaborate what I need to do to select a multi-image? I have seen multiple posts about nesting collection lists [1], and I’ve tried to add another collection list, but I am getting an error when adding it to the “Post Medium” Class:

“Nested Collection Lists cannot be inside Symbols”

However, I can’t seem to understand how to decouple it from the Symbol.

Can someone help me troubleshoot this?

[1] CMS multi-image not showing Images? - #12 by aran_hrzn

I still don’t know what you’re trying to build, so my advice will have to be generic.
If components cannot yet handle nested collection lists, then you won’t be able to use a component for this setup. Not a big deal if it’s primarily on your collection page.

To decouple, select the component, then right click it on the canvas and you will see an option to unwrap it from the component.

If your component will contain one gallery, which is the same for all pages, then you don’t need an image gallery field or a nested collection list. Your Gallery collection can just contain an image field and you create one item for each image. Bind that to the collection list and create your gallery.

Some general advice for the future: Build this stuff as a static page on a draft, then paste it in to your cms collection after. This way you can reuse the components