Help Center
    Help Center
  1. Creating your site
  2. Advanced features
  3. CMS
  4. Connecting CMS collection content to your site
    5. CMS: Displaying Collection Content in a Pro Gallery

CMS: Displaying Collection Content in a Pro Gallery

13 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. 
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 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 "Public" settings that allow anyone to view the content. 

To create a collection for storing gallery images:

  1. Go to CMS in your site's dashboard. Alternatively, you can click CMS in your Editor.
  2. Click Create Collection.
  3. Enter a name for your collection. 
  4. Leave Multiple items (Default) selected and click Create. 
  5. Add fields to your collection manually or by importing a CSV file:
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. 
  1. Add items to your collection:
    1. Click + Add Item.
    2. Add content about the item to each relevant field including the Image field type. 
    3. Repeat this step to create as many items as you need.
  1. Set permissions for the collection: 
    1. Click More Actions and select Permissions & privacy. 
    2. Click the What type of content will you store in this collection? drop-down and select an option. If necessary, you can click the drop-downs to adjust who can view, add, delete, and update content. Learn more about setting collection permissions. 
    3. Click Save. 
A screenshot of setting collection permissions and privacy.

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" field to link the items to their dynamic item pages, or to a URL, Image, or Video field. 
Wix Editor
Editor X
Studio Editor
  1. Go to your Editor.
  2. Go to the page where you want a gallery to display images representing different collection items.  
  3. Click Add Elements  on the left side of the Editor.
  4. Click Gallery. 
  5. Click and drag the Pro Gallery you want to use onto the page. 
  1. Remove the default images from the gallery:
    1. Click Manage Media on the gallery.
    2. Click Select All, then click Delete.
    3. Click Done. 
  2. Click the Connect to CMS icon .
  3. Click the Choose a dataset drop-down and select an existing dataset that connects to your collection. Alternatively, click Create a New Dataset, then choose the collection you want to connect.
  4. 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. 
  1. Click the Pro Gallery element 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 mode. Set the mode to Read & Write if you plan on letting visitors submit or edit images in the gallery's connected collection. 
Wix Editor
Editor X
Studio Editor
  1. In your Editor, select the dataset that connects to your gallery.
  2. Click Settings. 
  3. Click the Dataset mode drop-down and select and option: 
    • Read: Allow the dataset to display your collection content in the gallery.
    • Read & Write: Allow the dataset to display your collection content in the gallery and allow visitors to add or edit collection content with input elements. 
  4. Edit the Maximum items displayed field to adjust the maximum items that can initially load in the gallery. This is also the maximum items that load when visitors click a 'load more' button (see the next section for steps).
  1. (Optional) Click + Add Filter to only show specific items in the gallery. 
  2. (Optional) Click + Add Sort to choose the order in which collection items appear in the gallery.

Step 4 | (Optional) Create a 'Load More' button

You can improve your page's loading performance by adding a 'Load More' button if you have a lot of gallery images. Your dataset setting's Maximum items displayed field determines how many items can initially load in your gallery, and how many additional items can load when visitors click the 'Load More' button. 
Wix Editor
Editor X
Studio Editor
  1. Click Add Elements  on the left side of the Editor.
  2. Click Button, then drag the button to where you want it to appear.
    Tip: Alternatively, you can add an image and use it as your 'Load More' button. 
  3. Click Change Text and enter the text you want to display on the button (e.g. "Load More"). 
  4. Click the Connect to CMS icon .
  5. Click the Choose a dataset drop-down and select the dataset connected to your gallery. 
  6. Click the Click action connects to drop-down and select Load more. 
  1. Click the button and select the Design icon  to customize the appearance of your 'Load More' button.

FAQs

Click below for answers to the most frequently asked questions about connecting a gallery to the CMS. 

Did this help?

|

In This Article

  • Step 1 | Create a CMS collection
  • Step 2 | Connect a Pro Gallery to your collection
  • Step 3 | Manage the dataset settings
  • Step 4 | (Optional) Create a 'Load More' button
  • FAQs

Related Content

CMS: Connecting the Media Gallery Collection Field Type to a Pro Gallery
CMS: Displaying Collection Content in a Repeater
CMS (Formerly Content Manager): Using Input Elements to Allow Visitors to Filter Content
Wix Pro Gallery: Customizing the Expand Mode for Your Gallery
CMS: About Dynamic Pages
CMS: About Datasets
CMS (Formerly Content Manager): Supported Content in Collection Field Types
CMS: About Dataset Click Actions for Buttons and Images
CMS (Content Management System): An Overview

Hire a Professional

Get matched with a Wix Partner who can help you reach your site goals.
Get Matched