Show ranking number in a list

Design help Custom code
1

Hello Webflowders

I want to use webflow and the collection system to show and list some participants from an ongoing sports-tuornament. I have no problem listing them and ordering them according to their individual points. But how do I show their ranking/number? (like 1, 2, 3, 4 etc.)

Thanks in advance

Kim

2

Hi @KimHougaard

Using a number field (#) in the collection should work - then a text field in the collection list on the page connected to display the rank for that person. Ordering if needed would be done in the settings panel…

Hope that helps?

3

thank you for your answer @StuM but I dont see how that solves my problem.
I want to order the list by the points the different persons has and then the ranking should be written automatic (not manual in a then collection - to much unnecessary work)… I dont think it can be done in the collection but, I guess I will have to use somekind of javascript, setting af varibel of 1 and then increasing it by 1 for every person in the collection… just dont know how and where.

4

Ah, I think I understand the query now…

Could this work (let’s say with 10 competitors):

  • Make two columns 10% and 90%
  • Add a static div to the 10% side and copy it 10 times, to house the numbers 1, 2, 3, 4 or First, Second, Third etc
  • Add the collection list to the 90% side to show 10 records
  • Match the styling of the left divs to the collection list items

Hope that helps?

5

hmmm Okay I think I know where you are going, and yes it should be possible but not very dynamic as you still would have to do the ranking numbers manually… And remember to add an extra number if a new member joins the club :wink:

Well thanks anyway, and it may be my solution until I find the dynamic way.
You can see the list here by the way (made for mobil-use)
http://aagg.webflow.io/champion

Kim

6

Hey Kim, did you find a solution to this? Trying to figure out how to number a collection from 1-100 dynamically that changes quite often.

7

No I did not find a dynamically solution to this, although I know its possible with javascript.
I ended up setting up the ranking manually in its own column ;-(

1 Like
8

Thanks for letting me know :slight_smile: I’ll post here if I find a solution.

1 Like