How to build a alphabethic list like wikipedia?

Im trying to build a CMS page where i have a list of words under each letter in the alphabet. Currently i add the letter manualy in my page, but i have a collection with all letters so my words under the letter is related to a spesific letter and then i filter down to only show words based on a letter.

Because of the limitation on 20 collections on a page im not able to add the last 9 letters so im a bit stuck.

Im guesing there could be another way of doing this, but im not getting any idea my self, so maybe someone here has an idea to solve this?



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

Could you put all the words in one collection and filter the cms items by letter there?

Hey Kim, this is kind of an unusual use case so I think I’d personally build it using script.
If you’re familiar with js, this might be the easiest approach;

  • Two CMS collections - one for your letter-groupings, one for your words. That way you can add a sortkey and sort your letters specially if you need to for e.g. special initial characters ( Spanish letters, German umlauts, etc. )
  • Two collection lists - first one is bound to your letter-groupings, and displays your letter heading, plus a DIV or CSS-GRID inner element to contain the words
  • Second collection list is your words. This one is tricky, because, if you’re over 100 words, you’ll have pagination issues. You may need to de-paginate it with script, or you may want to keep pagination intact, and just do the groupings per-page.
  • Script iterates through the words, and moves those elements into the matching container.

Note if you sort your words alphabetically, pagination should work fine, because it will makes sense… Page 1 might be A’s and B’s, then page 2 is B’s C’s and D’s. Page 3 is more D’s, E’s… etc. However make sure to scan for empty groups and delete them, so you don’t end up with a bunch of empty letter groupings.