CMS: Displaying Collection Content in a Pro Gallery
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 collectionCreate 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 EditorStudio EditorDashboard
Go to your editor. Click CMS  on the left side of the editor. 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:
    
Click + Add Item. Add content about the item to each relevant field.  Repeat this step to create as many items as you need.   
Set permissions for the collection: 
    
Click More Actions and select Permissions & privacy.  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 contentAllow the collection content to be viewable on the live site by site visitors. 
Click Show content. Click the Who can view this content? drop-down and choose an option: 
    
Everyone: Any site visitor can view the collection content on the live site.  Members only: Only site members can view the collection content on the live site.    Click Save. Collect contentAllow visitors to add content to the collection with input elements or API.  Note: This permission does not allow visitors to update existing content in the collection. Use the Custom permissions if you want to allow visitors to update existing content. See this FAQ section for more information. 
Click Collect content.  Click the Who can add content to this collection? drop-down and choose an option: 
    
Everyone: Any site visitor can add content to the collection from the live site.  Members only: Only site members can add content to the collection from the live site.    Click the Who can view this content? drop-down and choose an option: 
    
Admin: Site owners and collaborators can view the collection content from the live site.  Members only: Only site members can view the collection content from the live site.  Everyone: Any site visitor can view the collection content from the live site.    Click Save.CustomSet custom permissions to control who can view, add, update, and delete content. You can choose different permissions for item creators, site members, and everyone else. 
Click Custom. Click the relevant checkboxes next to each role to choose whether visitors with the role can view, add, update, or delete collection content from the live site:
    
Admin: Site owners and collaborators always have view, add, update, and delete permissions from the live site. You cannot change the permissions associated with this admin role.  Item's creator: This role's permissions only apply to the specific items that a member creates themselves. For example, the item's creator can only view, add, update, or delete collection items they created. Members only: This role applies to members of your site only. Selecting a permission for this role also selects the permission for the "Item's creator" role.  Everyone: This role applies to everyone who can access your live site. Selecting a permission for this role also selects the permission for the "Members only" and "Item's creator" role.    Click Save. 
Go to your editor. Click CMS  on the left side of the editor.  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:
    
Click + Add Item. Add content about the item to each relevant field.  Repeat this step to create as many items as you need.   
Set permissions for the collection: 
    
Click More Actions and select Permissions & privacy.  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 contentAllow the collection content to be viewable on the live site by site visitors. 
Click Show content. Click the Who can view this content? drop-down and choose an option: 
    
Everyone: Any site visitor can view the collection content on the live site.  Members only: Only site members can view the collection content on the live site.    Click Save. Collect contentAllow visitors to add content to the collection with input elements or API.  Note: This permission does not allow visitors to update existing content in the collection. Use the Custom permissions if you want to allow visitors to update existing content. See this FAQ section for more information. 
Click Collect content.  Click the Who can add content to this collection? drop-down and choose an option: 
    
Everyone: Any site visitor can add content to the collection from the live site.  Members only: Only site members can add content to the collection from the live site.    Click the Who can view this content? drop-down and choose an option: 
    
Admin: Site owners and collaborators can view the collection content from the live site.  Members only: Only site members can view the collection content from the live site.  Everyone: Any site visitor can view the collection content from the live site.    Click Save.CustomSet custom permissions to control who can view, add, update, and delete content. You can choose different permissions for item creators, site members, and everyone else. 
Click Custom. Click the relevant checkboxes next to each role to choose whether visitors with the role can view, add, update, or delete collection content from the live site:
    
Admin: Site owners and collaborators always have view, add, update, and delete permissions from the live site. You cannot change the permissions associated with this admin role.  Item's creator: This role's permissions only apply to the specific items that a member creates themselves. For example, the item's creator can only view, add, update, or delete collection items they created. Members only: This role applies to members of your site only. Selecting a permission for this role also selects the permission for the "Item's creator" role.  Everyone: This role applies to everyone who can access your live site. Selecting a permission for this role also selects the permission for the "Members only" and "Item's creator" role.    Click Save. 
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:
    
Click + Add Item. Add content about the item to each relevant field.  Repeat this step to create as many items as you need.   
Set permissions for the collection: 
    
Click More Actions and select Permissions & privacy.  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 contentAllow the collection content to be viewable on the live site by site visitors. 
Click Show content. Click the Who can view this content? drop-down and choose an option: 
    
Everyone: Any site visitor can view the collection content on the live site.  Members only: Only site members can view the collection content on the live site.    Click Save. Collect contentAllow visitors to add content to the collection with input elements or API.  Note: This permission does not allow visitors to update existing content in the collection. Use the Custom permissions if you want to allow visitors to update existing content. See this FAQ section for more information. 
Click Collect content.  Click the Who can add content to this collection? drop-down and choose an option: 
    
Everyone: Any site visitor can add content to the collection from the live site.  Members only: Only site members can add content to the collection from the live site.    Click the Who can view this content? drop-down and choose an option: 
    
Admin: Site owners and collaborators can view the collection content from the live site.  Members only: Only site members can view the collection content from the live site.  Everyone: Any site visitor can view the collection content from the live site.    Click Save.CustomSet custom permissions to control who can view, add, update, and delete content. You can choose different permissions for item creators, site members, and everyone else. 
Click Custom. Click the relevant checkboxes next to each role to choose whether visitors with the role can view, add, update, or delete collection content from the live site:
    
Admin: Site owners and collaborators always have view, add, update, and delete permissions from the live site. You cannot change the permissions associated with this admin role.  Item's creator: This role's permissions only apply to the specific items that a member creates themselves. For example, the item's creator can only view, add, update, or delete collection items they created. Members only: This role applies to members of your site only. Selecting a permission for this role also selects the permission for the "Item's creator" role.  Everyone: This role applies to everyone who can access your live site. Selecting a permission for this role also selects the permission for the "Members only" and "Item's creator" role.    Click Save. Step 2 | Connect a Pro Gallery to your collectionAdd 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 EditorStudio 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. 
Remove the default images from the gallery:
    
Click Manage Media on the gallery. Click Select All, then click Delete. 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, click Create a New 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.   
Click the gallery and select Settings to customize your gallery's layout, design, and more. Learn more about customizing your Pro Gallery.  
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.  Remove the default images from the gallery:
    
Click the gallery element and select Manage Media. Click Select All, then click Delete. 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, click Create a New 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.   
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 settingsGo 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 EditorStudio Editor
Go to the gallery's connected dataset settings:
    
Click the gallery.  Click the Connect to CMS icon  . Click Dataset Settings in the Connect Gallery panel on the right.   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.    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 'Load More' buttons, 'Next/Previous page' buttons or pagination bars. See the next section for steps. 
(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.
Go to the gallery's connected dataset settings:
    
Click the gallery element.  Click the Connect to CMS icon  . Click Dataset Settings in the Connect Gallery panel.  
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.    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). 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 'Load More' or 'Next/Previous page' buttons. See the next section for steps. (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 buttonsYou can improve your page's loading performance by adding a 'Load More' button if you have a lot of gallery images. Your dataset's 'Maximum items displayed' 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 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 EditorStudio EditorChoose what you want to do: Create a 'Load More' button
Add a button to your page:
    
Click Add Elements  on the left side of the editor. Click Button, then drag the button onto your page where you want it to appear (e.g. below the gallery). Do not place the button on top of the gallery. 
Tip: Alternatively, you can add an image and use it as your 'Load More' button.    Click Change Text and enter the text you want to display on the button (e.g. "Load More").  Click the Connect to CMS icon  . Click the Choose a dataset drop-down and select the same dataset that connects to your gallery.  Click the Click action connects to drop-down and select Load more. 
 Click the button and select the Design icon  to customize the appearance of your 'Load More' button. Click Preview to test your 'Load More' button. Click Publish if you are ready to make the changes go live.  Create 'Next Page' and 'Previous Page' buttons
Add a 'Next Page' button to your page:
    
Click Add Elements  on the left side of the editor. Click Button, then drag the button onto your page where you want it to appear (e.g. below the gallery). Do not place the button on top of your gallery.  
Tip: Alternatively, you can add an image and use it as your 'Next Page' button.    Click Change Text and enter the text you want to display on the button (e.g. "Next Page").  Click the Connect to CMS icon  . Click the Choose a dataset drop-down and select the same dataset that connects to your gallery.  Click the Click action connects to drop-down and select Next page. 
 Click the button and select the Design icon  to customize the appearance of your 'Next Page' button. Duplicate your 'Next Page' button: 
    
Right-click the button (control + click on Mac).  Select Duplicate (or press Ctrl + D or ⌘ + D on Mac).    Click and drag the button where you want it to appear. Do not place it on top of your gallery. Click Change Text and enter the text you want to display on the button (e.g. "Previous Page").  Click the Connect to CMS icon  . Click the Click action connects to drop-down and select Previous page. 
 Click Preview to test your 'Next Page' and 'Previous Page' buttons. Click Publish if you are ready to make the changes go live. Connect a pagination barNote: Pagination bars are not relevant for static pages or dynamic item pages that can only display 1 item at a time. 
Add a pagination bar: 
    
Click Add Elements  on the left side of the editor. Click Interactive. Click Pagination Bar.  Click and drag the pagination bar you want to use onto the page.    Click Change Layout to adjust the layout.  Click the Design icon  on the pagination bar to edit the design.  Click the Connect to CMS icon . Click the Choose a dataset drop-down and select the same dataset that connects to your gallery. 
 Click and drag the edges of your pagination bar to resize it.  Click Preview to test your pagination bar.  Click Publish if you are ready to make the changes go live. View a full tutorial on adding and setting up a pagination bar. Choose what you want to do: Create a 'Load More' button
Add a button to your page:
    
Click Add Elements  on the left side of the editor. Click Button, then drag the button onto your page where you want it to appear (e.g. below the gallery). Do not place it on top of your gallery. 
Tip: Alternatively, you can add an image and use it as your 'Load More' button.    Click Change Text and enter the text you want to display on the button (e.g. "Load More").  Click the Connect to CMS icon  . Click the Choose a dataset drop-down and select the same dataset that connects to your gallery.  Click the Click action connects to drop-down and select Load more. 
 Click the button and select the Design tab  from the Inspector panel to customize the appearance of your 'Load More' button. Click the Preview icon  at the top right to test your 'Load More' button. Click Publish if you are ready to make the changes go live. Create 'Next Page' and 'Previous Page' buttons
Add a 'Next Page' button to your page:
    
Click Add Elements  on the left side of the editor. Click Button, then drag the button onto your page where you want it to appear (e.g. below the gallery). Do not place it on top of your gallery. 
Tip: Alternatively, you can add an image and use it as your 'Next Page' button.    Click Change Text and enter the text you want to display on the button (e.g. "Next Page").  Click the Connect to CMS icon  . Click the Choose a dataset drop-down and select the same dataset that connects to your gallery. Click the Click action connects to drop-down and select Next page. 
 Click the button and select the Design tab  from the Inspector panel to customize the appearance of your 'Load More' button. Duplicate your 'Next Page' button: 
    
Select the button. Press Ctrl + D on your keyboard (or ⌘ + D on Mac).   Click and drag the button where you want it to appear. Do not place it on top of the gallery.  Click Change Text and enter the text you want to display on the button (e.g. "Previous Page").  Click the Connect to CMS icon  . Click the Click action connects to drop-down and select Previous page. 
 Click the Preview icon  at the top right to test your 'Next Page' and 'Previous Page' buttons. Click Publish if you are ready to make the changes go live. Note: Pagination bars are not yet available in the Studio Editor. Vote for this feature if you would like to see it in the future. FAQsClick below for answers to the most frequently asked questions about connecting a gallery to the CMS. How can site visitors filter the content that appears in the gallery?To let site visitors filter the gallery content, connect input elements such as dropdowns or radio buttons to the same dataset that connects to your gallery. View a step-by-step tutorial for allowing visitors to filter content with input elements.Can I set the gallery image links to open when clicked?By default, Expand Mode opens when visitors click an image in a Pro Gallery. In Expand Mode, the image displays in an enlarged window with the Title, Description, and Link on the side. Visitors can then click the link to go to the destination you set in the gallery's connection options (see Step 2 | Connect a Pro Gallery to your collection). If you prefer, you can disable Expand Mode and set the gallery to open the links when visitors click the images. To set the links to open when visitors click images in the gallery:
Click the Pro Gallery element in your Editor and select Settings.  Click Settings on the left. Click the drop-down under Gallery Settings and select A link opens.What are the CMS connection options for this gallery?The connection options allow you to specify how different parts of the gallery link to specific fields in the collection.Connect the following options to collection fields: 
Image sources connect to: The images you want to display in the gallery.  Titles connect to: The fields used for each item's title in the gallery.  Descriptions connect to: The fields used for each item's description in the gallery.  Alt texts connect to: The fields used for each item's alt text in the gallery.  Links connect to: The fields or dynamic pages you want to link each item to.  Learn more about connecting CMS collection items to galleries. Why doesn't my Pro Gallery's 'Load More' button respond to the dataset settings? The Pro Gallery has a built-in 'Load More' button that can restrict the number of media items displayed in the gallery.If you enable this 'Load More' button in the gallery's layout settings, it uses these settings to determine when to appear and how many more images load. With the gallery's built-in 'Load More' button, the dataset's Maximum items displayed setting determines the aggregate total maximum items that can load in the gallery. However, it no longer determines how many items initially load in the gallery or how many additional items load when visitors click this 'Load More' button.
Consider the type of collection field your gallery connects to when deciding which 'Load More' button to use: 
Image field type: If your gallery connects to an image field used to display only 1 image per collection item, create a 'Load More' button that connects to the dataset.  Media gallery field type: If your gallery connects to a media gallery field used to display several images per collection item, use the gallery's built-in 'Load More' button. Learn how to enable the 'Load More' button in the Pro Gallery's custom layout settings.