Put CMS Collection List on a CMS Collection Page

hi,

Here is the live site page: https://www.jiujitionary.com/gordonryan

I want to turn the page above into a template page. I can imagine how to do it except for the fight record. The fight record is it’s own collection list, so how would I put a collection list on a collection page?

For example, I’m imagining creating collecitons called “Bio pages” and “Gordon Ryan Fight Record” (already exists). Gordon Ryan would be an item of the bio page collection, and that collection page would then need to reference the Gordon Ryan Fight Record collection list. A different bio item page would have to reference a different collection list - the fight record for that fighter. Is this possible?

Thanks in advance!!

Here is the read-only link:
https://preview.webflow.com/preview/jiujitionary?utm_medium=preview_link&utm_source=designer&utm_content=jiujitionary&preview=8e72085927383d2a4022413537c9d4a1&pageId=5d7030b28fe3981934a292e2&mode=preview

Yes, to make this more dynamic, I would create a collection called “Fighters” where each fighter including Gordon Ryan would be an item in the collection that you could add all of the bio fields that you need (height, weight, etc.).

I would then create a second collection called “Fights” that would then have single-reference fields for “Fighter 1” and “Fighter 2” that would both be linked to your “Fighters” collection so you can assign two different fighters to each fight.

On your “Fighters” template page, you would add a collection list for “Fights” like the one you have that would be filtered by Fighter 1 = Current Fighter OR Fighter 2 = Current Fighter. Make sure the filter is set to “ANY” not “All” since the fighter will either be Fighter 1 or Fighter 2, not both.

For the Opponent column, add two text blocks next to each other and connect one to Fighter 1 and the other to Fighter 2 so both fighter’s name appear in the column. Then set a condition for both text blocks that the fighter does NOT equal the current fighter (The fighter’s bio that you are looking at). If you want the opponent’s flag to appear with the opponent’s name, group those two in a div box, and set the condition to the div box instead of just the text so both the text and flag are hidden.

I hope that helps!

1 Like

Interesting! Thanks Ryan!! I’ll give this a try.

I like that idea of one master fights collection, eliminates duplicates that there would be if I made separate CMS collections for each fighter as the fight would be in both the winner’s and the loser’s CMS collection of fights.

How would I handle the “won” / “lost” part of their record on their page? I guess I could make Fighter 1 be the winner and Fighter 2 be the lose, and then do conditional visibility for the won/lost divs.

Will this affect page load time? Does webflow basically have to process the entire fight record (could be thousands, of which only a couple hundred at most will belong to any one fighter) every time any one page is to be loaded? also, there will be twice the amount of flag photos because one will just be hidden after the fact right?

Thanks again!

Yes, you could definitely make Fighter 1 the winner and Fighter 2 the loser, but if you want to promote the fights beforehand, that might not make sense. What if it’s a draw?

In some cases it might make more sense to have Fighter 1 be the challenger, and Fighter 2 the champion. I think you could maybe have a Winner select field for each Fight with the options, Fighter 1, Fighter 2, or Draw.

Then for the Result (win/lost column), you’d have some conditional visibility for the text blocks “Won” and “Lost”.

Won:
If Winner = Fighter 1
AND Fighter 1 = Current Fighter

Won:
If Winner = Fighter 2
AND Fighter 2 = Current Fighter

Lost:
If Winner = Fighter 1
AND Fighter 1 = Is NOT Current Fighter

Lost:
If Winner = Fighter 2
AND Fighter 2 = Is NOT Current Fighter

Draw:
Winner = Draw

As far as page load times, I wouldn’t worry too much, but I also wouldn’t display ALL of their Fights. I would possibly filter the data to only show recent fights or implement some custom code to create a “load more” button. See the Finsweet CMS Library for some ways to filter/sort the Fights so you’re not listing all of them.

Make sure to have the Fighters collection linked to your Flags collections where each fighter is assigned a flag. Then use conditional visibility to only show the opponents flag.

Makes sense, thank you very much Ryan!

1 Like