How to Update Item Numbers in Portfolio 20 Collection List in Webflow

Steve H. · 2026-01-14T17:11:48.291Z

Hi - I'm working on a Collection List using the component Portfolio 20. I don't know how to update the number next to each portfolio item's title to correspond with the number within the feed. Would love your help. https://preview.webflow.com/preview/forgeaz?utm_medium=preview_link&utm_source=designe[…]41e9fbb6719af3a9596eccaab0dc1d4e&locale=en&workflow=preview (https://preview.webflow.com/preview/forgeaz?utm_medium=preview_link&utm_source=designer&utm_content=forgeaz&preview=41e9fbb6719af3a9596eccaab0dc1d4e&locale=en&workflow=preview)

15 comments

· Sorted by Oldest

Matt J.
·
·
Steve H. yeah the only way I see doing this is to have a number field in the collection and then incrementing the number manually within each CMS entry - then you'll link that field to this layout.
Steve H.
·
·
Bummer. I was really hoping there was a Finsweet attribute or something. A lot of the portfolio components have these numbers in them, so I figured it was a functional piece to the component. I can't really manually number the posts, because they'll all need to be renumbered every time a new portfolio item is added.
Matt J.
·
·
I mean, you could definitely get it done with some custom code written by AI
Steve H.
·
·
I spent a few hours down that rabbit hole without success, unfortunately.
Matt J.
·
·
ah roger that
Matt J.
·
·
yeah so strange honestly because the order of the items is literally right there technically, just need a simple mechanism to grab them. I'm also really curious why this specific component couldn't have been built using an ordered list and styling the number. We did this with the resources site and its pretty neat trick.
Steve H.
·
·
Yup, it's always a bummer when I find a component that doesn't work with the collection list properly, but it seems designed specifically for it.
Steve H.
·
·
Follow up question: where do the hover colors come from on this component? https://www.relume.io/components/portfolio-20 If I wanted the number to be instead of black when the item is hovered, how could i override that?
Steve H.
·
·
sandbox link: https://preview.webflow.com/preview/forgeaz?utm_medium=preview_link&utm_source=designe[…]&pageId=6967f81d0ee01b3cdd1d059f&locale=en&workflow=preview
Matt J.
·
·
It'll be an interaction on the item level - look for lightning bolt
Steve H.
·
·
i'm only seeing the interaction for the mouseover image opacity, but not the colors
Steve H.
·
·
I'm an idiot. It's portfolio20_hover-css code block inside the component. Sorry about that!
Matt J.
·
·
ah yes! 🤘
Melissa G.
·
·
Going back to the number thing, add a placeholder 0 give that a class name - Write some js that will get the list items in an array assign number to each item starting at 1 - update the placeholder - it will have to load after the page has loaded but that might be a solution
🔥1

Steve H.

You're correct. I added the class "post-count" to the existing text block that held the number and used the the following script:

<script>
$(document).ready(function() {
  $('.w-dyn-item').each(function(index) {
    let itemNumber = index + 1;
    let formattedNumber = itemNumber < 10 ? '0' + itemNumber : itemNumber;
    
    $(this).find('.post-count').text(formattedNumber);
  });
});
</script>

🔥1

Matt J.
·
·
Steve H. yeah the only way I see doing this is to have a number field in the collection and then incrementing the number manually within each CMS entry - then you'll link that field to this layout.
Steve H.
·
·
Bummer. I was really hoping there was a Finsweet attribute or something. A lot of the portfolio components have these numbers in them, so I figured it was a functional piece to the component. I can't really manually number the posts, because they'll all need to be renumbered every time a new portfolio item is added.
Matt J.
·
·
I mean, you could definitely get it done with some custom code written by AI
Steve H.
·
·
I spent a few hours down that rabbit hole without success, unfortunately.
Matt J.
·
·
ah roger that
Matt J.
·
·
yeah so strange honestly because the order of the items is literally right there technically, just need a simple mechanism to grab them. I'm also really curious why this specific component couldn't have been built using an ordered list and styling the number. We did this with the resources site and its pretty neat trick.
Steve H.
·
·
Yup, it's always a bummer when I find a component that doesn't work with the collection list properly, but it seems designed specifically for it.
Steve H.
·
·
Follow up question: where do the hover colors come from on this component? https://www.relume.io/components/portfolio-20 If I wanted the number to be instead of black when the item is hovered, how could i override that?
Steve H.
·
·
sandbox link: https://preview.webflow.com/preview/forgeaz?utm_medium=preview_link&utm_source=designe[…]&pageId=6967f81d0ee01b3cdd1d059f&locale=en&workflow=preview
Matt J.
·
·
It'll be an interaction on the item level - look for lightning bolt
Steve H.
·
·
i'm only seeing the interaction for the mouseover image opacity, but not the colors
Steve H.
·
·
I'm an idiot. It's portfolio20_hover-css code block inside the component. Sorry about that!
Matt J.
·
·
ah yes! 🤘
Melissa G.
·
·
Going back to the number thing, add a placeholder 0 give that a class name - Write some js that will get the list items in an array assign number to each item starting at 1 - update the placeholder - it will have to load after the page has loaded but that might be a solution
🔥1

Steve H.

You're correct. I added the class "post-count" to the existing text block that held the number and used the the following script:

<script>
$(document).ready(function() {
  $('.w-dyn-item').each(function(index) {
    let itemNumber = index + 1;
    let formattedNumber = itemNumber < 10 ? '0' + itemNumber : itemNumber;
    
    $(this).find('.post-count').text(formattedNumber);
  });
});
</script>

🔥1