CMS: About Displaying Collection Content in a Table or Gallery
4 min read
Tables and galleries are great for displaying multiple items from your collections at one time. They are useful for displaying your collection content on a dynamic list page or on a regular page. You can also attach tables and galleries to repeaters.
Tables and galleries can show related items from collections that have reference fields or in situations where you have filtered one dataset by another dataset.
Tables and galleries can show related items from collections that have reference fields or in situations where you have filtered one dataset by another dataset.
View full tutorials for displaying CMS content in:
Before you begin:
You must have at least one collection in your CMS, and a dataset added to the page.
Examples
Below are some examples of how you can use tables and galleries on your site to showcase your information to your site visitors.
1. Connecting one collection to a table or gallery
In this example, we used a gallery to display items from our collection about recipes. We put the gallery on a dynamic list page, where the category in this case is "course." Each image links to the dynamic item page for that dish. The text element at the top of the page is linked to the same dataset, so it functions as a page heading. In this example, the dynamic list page is showing "sides."
Below we use a table to dynamically display all the artist items from our Artists collection. This table is on a regular page. One column displays the artist's picture and the other a short bio of each artist. Each row in the table links to the dynamic item page for that artist.
Below we use a table to dynamically display all the artist items from our Artists collection. This table is on a regular page. One column displays the artist's picture and the other a short bio of each artist. Each row in the table links to the dynamic item page for that artist.
2. Connecting one collection with reference fields to a table
In this example, our Songs collection has a reference field to our Artists collection. This allows us to display information from both collections at the same time in one table on a regular page. The first column displays the title from the Songs collection. The second column displays the Artist's name, taken from the reference field.
3. Using a table to link to dynamic pages
In this example, we put our table on a regular page and connected it to our Recipes collection. It lists all the recipes we have in our collection, along with their course and cuisine.
Each column in the table links to a different dynamic page. The "Recipe" column links to the dynamic item page for that recipe. The "Course" column links to the dynamic list page for that course (like in the previous example), and the "Cuisine" column links to the dynamic list page for that cuisine.
Using a table to link to your dynamic pages means your visitors always have access to any new recipes, courses, or cuisines you add to your collections without you needing to add new buttons or other elements to link to the new dynamic pages.
Each column in the table links to a different dynamic page. The "Recipe" column links to the dynamic item page for that recipe. The "Course" column links to the dynamic list page for that course (like in the previous example), and the "Cuisine" column links to the dynamic list page for that cuisine.
Using a table to link to your dynamic pages means your visitors always have access to any new recipes, courses, or cuisines you add to your collections without you needing to add new buttons or other elements to link to the new dynamic pages.
4. Using a table to select which items to view
In this example, we have a table and a gallery together on a regular page, where the row selected in the table controls the items displayed in the gallery. They can both be connected to a dataset that has reference fields, or each can be connected to two datasets where one is filtered by the other.
In the figure below, the table is connected to the "Cuisine" dataset, and the gallery is connected to the filtered "Recipes" dataset. Our visitor selected "Tex Mex" in the table, so the gallery displays the recipes whose cuisine is "Tex Mex."
You could use any other element that can connect to a dataset to display information after your visitor selects an item from a table. In the example below, the table and the video player are both connected to our Songs collection. When our visitor clicks a song in the table, the video player plays that song.
In the figure below, the table is connected to the "Cuisine" dataset, and the gallery is connected to the filtered "Recipes" dataset. Our visitor selected "Tex Mex" in the table, so the gallery displays the recipes whose cuisine is "Tex Mex."
You could use any other element that can connect to a dataset to display information after your visitor selects an item from a table. In the example below, the table and the video player are both connected to our Songs collection. When our visitor clicks a song in the table, the video player plays that song.
Did this help?
|