well, the information on this page is pulled from the song list table, which provides all the content per song including the writers. but when I add a collection, its pulling all the information in a row, not a column like the page does. how can I change that without creating a third table, if I can’t I suppose I can create a third table.
by the way, I really appreciate all the help.
You mentioned the 4 writer names are in the table, but your screenshot shows 4 relations?
After thinking it through, I think a better approach is to store the writer IDs in a single cell per song. Then use a Split Text column to break them up, and create a multiple relation from the split Writer IDs in the Songs Table to the Writer IDs in the Writers table.
I think a few more screenshots of the data might help clarify things.
its a pretty massive table, but it’s pulling that information from this section.
The way I see it, you have two main options:
Option 1: Stick with the current setup. If you have 4 lookup columns pulling in images, use 4 individual image components (or four rich text components using the code below), one for each column of the container. Don’t use a collection. Then apply the custom CSS to the container as discussed earlier. This approach works, but it’s a little cluttered and not the best from a database design perspective.
You can use this HTML in a template column. You’ll need to create 4 separate template columns, each replacing {IMAGE} and {NAME} with values from the corresponding image and name columns:
<div style="position:relative; background:#1f1f1f; border-radius:10px; overflow:hidden; padding:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; width:90px; height:100px; box-sizing:border-box; white-space:nowrap; opacity:1;">
<div style="position:absolute; top:0; right:0; width:100%; height:100%; background:#212121; clip-path:polygon(100% 0, calc(100% - 80px) 0, 100% 80px); z-index:0; opacity:1;"></div>
<img src="{IMAGE}" alt="image" style="position:relative; z-index:1; max-height:60px; max-width:60px; object-fit:cover; border-radius:50%;" />
<div style="margin-top:6px; font-size:12px;">{NAME}</div>
</div>
Option 2: Add a “Joined Writer IDs” column in the Songs table that lists all writer IDs for a song, separated by commas. Use a Split Text column to break them up, then create a multiple relation from that split list to the Writer ID in the Writers table. Use the multiple relation as the source of a Card Collection. This keeps your database cleaner and is the more scalable approach.
I like option 2, is there a tutorial on these things somewhere?
of course, I have done it this way so far in order to have the writer names link to the writer statistics screen in my app. will this negatively impact that?
If the writer statistics page is sourced from the Writers tab, then Option 2 is the way to go. With that setup, clicking on a writer should take you to their detail screen.
thanks
I really like your Card Size XS, but perhaps I’m biased 
Option 3: A join table where every row houses a Song ID and Writer ID. It’ll use more rows than any other option, but it’s also a very clean way to set up the database. This option also allows you to add information about each relation and to edit each relation easily.
Maybe ‘which do you prefer’ wasn’t my best word choice. In some design scenarios, evenly spaced elements are important for visual balance and clarity. That said, if there’s a reason to prioritize another design aspect over uniform spacing, it ultimately comes down to individual design goals.