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

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.

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.

I mean, you could definitely get it done with some custom code written by AI

I spent a few hours down that rabbit hole without success, unfortunately.

ah roger that

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.

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.

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?

sandbox link: https://preview.webflow.com/preview/forgeaz?utm_medium=preview_link&utm_source=designe[…]&pageId=6967f81d0ee01b3cdd1d059f&locale=en&workflow=preview

It'll be an interaction on the item level - look for lightning bolt

i'm only seeing the interaction for the mouseover image opacity, but not the colors

I'm an idiot. It's portfolio20_hover-css code block inside the component. Sorry about that!

ah yes! 🤘

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

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>