Collection list wrapper can not be placed in a link. How link to

[Bobsz]

I have a challenge that I am not able to meet.
I made a collection list. Instead of the picture on the list, I used a slider that displays a multi-image from the CMS collection. it looks like this and works well BUT…

I would like the whole area of ​​the collection item slider and the caption to link to the appropriate CMS collection page. And here comes the problem. I can’t transform the div into a link box that contains a collection list (in this case the slider is collection list multi - image).

What custom code could I use to make this work?

---

Here is my public share link: LINK
(how to access public share link)

[vincent (Vincent Bidaux)]

1. wrap everything that’s inside of the collection item element into a div and turn that div into a link block

[new_work_city]

I ran into the same problem, only I have a nested collection inside the collection. What to do now?

[Ben_Davis]

Same issue. I have a nested collection inside a collection and I’m finding it difficult to turn the whole div into a link. I can add a link button inside of it, but when I try to wrap the entire div as a link I get the error “collection list wrapper can not be placed in a link”. Racking my brain trying to figure out how to accomplish this.

[ronaldpoi (Ronald Bardalez)]

So it’s impossible then? I’m having the same issue. And I’m indeed using a nested collection. Seems like it’s a no-go???

[memetican (Michael Wells)]

Generally you’d put the link inside of the collection item and link that.

If for some reason you really want to wrap the entire nested collection list in one big link wrapper, you can do that with custom code.

[Ben_Davis]

I found a way to do what I was trying to accomplish. I ended up putting a link block inside the collection item, set the position to absolute and full. This turns the entire div into a link and works around the limitation.

[craigb (Craig)]

It is possible with the following steps:

1. Convert the link block that is wrapping the collection list/s to a div. Assign a class to the div eg. item-link.
2. Drag a link element into the collection list wrapper and link it to the CMS page. Add a class to the link eg. item-link-url, and set the visibility to none.
3. Add the following script to the page before the closing body tag.

<script>
document.addEventListener("DOMContentLoaded", function() {
    const eventLinks = document.querySelectorAll('.item-link');

    eventLinks.forEach(link => {
        const url = link.closest('.w-dyn-item').querySelector('.item-link-url').getAttribute('href');     
        if (url) {
            link.style.cursor = 'pointer';
            link.addEventListener('click', function() {
                window.location.href = url;
            });
        }
    });
});
</script>

This will convert the div to a link block, and allow nested collection lists to be used within the link.

[reggielj (Reggie Lloyd-Jones)]

Wow, this is really dumb limitation. I’m building Portfolio Masonry Grid and I can’t make the portfolio items clickable because they contain a collection list of their categories. This should be possible in Webflow without needing to hack it with custom javascript!

[memetican (Michael Wells)]

@reggielj

This should be possible in Webflow without needing to hack it with custom javascript!

Do you mean an individual collection list item contains a nested collection list of categories, therefore you cannot link-wrap the portfolio item?

Have you tried using a custom element? Webflow gives you more freedom ( i.e. less protection ) when you use custom elements.

[reggielj (Reggie Lloyd-Jones)]

Yes, I have a collection list of my portfolio items, then inside each item I have a collection list of the categories that portfolio item is tagged with. For the time being I was able to accomplish the goal by making my link block position absolute and fill space of the parent. I just don’t understand the arbitrary rule that a collection list can’t be nested inside a link block. I’m guessing it’s because they don’t want links inside of links, but my sub collection list doesn’t have any links in it.