CMS: Displaying Collection Content in a Pro Gallery

25 min read

Use a pro gallery to dynamically display images for each item in your CMS (Content Management System) collection. You control which 'Image' field to use for each item, while also connecting collection fields to the image titles, descriptions, alt texts, and links. This type of setup is ideal for both dynamic list pages and static pages, as you can link the images to their items' dynamic item pages.

Screenshot of a pro gallery's dataset connection options.

Important:

This article refers to connecting a pro gallery to an 'Image' field used for displaying one image per collection item. Alternatively, you can connect a pro gallery to a Media Gallery field used for displaying several images or videos for a single collection item on a dynamic item page.

Step 1 | Create a CMS collection

Create a multiple item collection for storing the images you want to show in the gallery. Add an image field type and text fields for the image titles, descriptions and alt text. Then add the images and values for each item in the collection. If needed, you can adjust the collection permissions from their default 'Show content' setting that allows anyone to view the content.

To create a collection for storing gallery images:

Wix Editor

Studio Editor

Dashboard

Go to CMS in your site's dashboard.
Click Create Collection.
Enter a name for your collection.
Leave Multiple items (Default) selected and click Create.
Add fields to your collection manually or by importing a CSV file:
- Add fields manually: Click + Add Field to begin adding fields to your collection manually.
- Import a CSV file: Click Import CSV file to upload a CSV file to your collection.

Tip:

Make sure to add an Image field type to store images for each item. You can also add Text field types for use as the image titles, descriptions and alt text.

Add items to your collection:
1. Click + Add Item.
2. Add content about the item to each relevant field.
3. Repeat this step to create as many items as you need.

A screenshot of adding an item in a CMS collection.

Set permissions for the collection:
1. Click More Actions and select Permissions & privacy.
2. Choose which permissions to use for the collection:
  Note: Site owners and collaborators are always treated as admins when logged in to the live site. This means they can always view, add, update, and delete collection content from the live site. This rule applies no matter which collection permission you select.

Show content

Collect content

Custom

Step 2 | Connect a pro gallery to your collection

Add a pro gallery to your site and connect it to a dataset that binds to your collection fields. Then connect the gallery's image sources to your collection's image field. You can also connect the titles, descriptions and alt text to fields in your collection. Use the 'Links connect to' drop-down to link the items to their dynamic item pages, or to a 'URL', 'Image', or 'Video' field.

Wix Editor

Studio Editor

Go to your editor.
Go to the page where you want a gallery to display images representing different collection items.
Click Add Elements on the left side of the editor.
Click Gallery.
Click and drag the pro gallery you want to use onto the page.

Screenshot of adding a pro gallery in the Wix Editor.

Remove the default images from the gallery:
1. Click Manage Media on the gallery.
2. Click Select All, then click Delete.
3. Click Done.
Click the Connect to CMS icon .
Click the Choose a dataset drop-down and select an existing dataset that connects to your collection. Alternatively, select Add a Dataset, then choose the collection you want to connect.
Click the relevant drop-downs to connect your collection fields to the gallery:
- Image sources connect to: Select the 'Image' field you want to display.
- Titles connect to: Select the field you want to use for the image titles.
- Descriptions connect to: Select the field you want to use for the image descriptions.
- Alt texts connect to: Select the field you want to use for the image alt texts.
- Links connect to: Select the dynamic page, 'URL' field, or 'Image' field you want to link the images to.

Screenshot of the dataset connection options for a gallery.

Click the gallery and select Settings to customize your gallery's layout, design, and more. Learn more about customizing your pro gallery.

Step 3 | Manage the dataset settings

Go to the dataset settings to set the total items that can load at a time, filter certain items from appearing, sort the order in which the items display, or change the dataset mode. Set the mode to Read & Write if you plan on letting visitors submit or update images in the gallery's connected collection.

Wix Editor

Studio Editor

Go to the gallery's connected dataset settings:
1. Click the gallery.
2. Click the Connect to CMS icon .
3. Click Dataset Settings in the Connect Gallery panel on the right.
(Optional) Click the permission type next to Permissions to determine who can view, add, update, or delete collection content on your live site.
(Optional) Click the Dataset name field if you need to edit the name of the dataset.
(Velo only) Click the Dataset ID field to edit the ID used to identify the dataset in your page's code.
Click the Dataset mode drop-down and select the relevant option:
- Read: Connected elements can read and display content from your collection. The elements cannot modify the collection content.
- Read & Write: Connected elements can display content from your collection. Input elements can add or edit content in your collection.
Edit the Items per load field to set the maximum number of items that can load at a time.
Note: This is also the maximum number of items that can load when visitors click 'Load More' buttons, 'Next/Previous page' buttons, or pagination bars. See the next section for steps.

Screenshot of the items per load dataset setting.

(Optional) Click + Add Filter to only show specific items in the gallery.
(Optional) Click + Add Sort to choose the order in which collection items appear in the gallery.

Step 4 | (Optional) Create 'Load More' or navigational buttons

You can improve your page's loading performance by adding a 'Load More' button if you have a lot of collection items. Your dataset's 'Items per load' field can be set as high as 1000 items. It controls how many items can initially load in your gallery, and how many additional items can load when visitors click the 'Load More' button.

This field also determines the number of items displayed per 'page' in your gallery if you connect 'Next/Previous page' buttons or a pagination bar (Wix Editor only).

Wix Editor

Studio Editor

Choose what you want to do:

Create a 'Load More' button