Connect image elements to a dataset to display images from your CMS collection on your site. Datasets let you decide which collection fields connect to different parts of your image, such as the picture, alt text, or link. This is especially useful on dynamic list pages with repeaters, where each repeater item can display content from a different collection item—making it easy to manage and update visuals across your site.

Learn more about adding and setting up a dataset.

Connecting an image to a dataset

Select the image element in your editor and connect it to the dataset that connects to the collection image(s) you want to display. Then connect the image source, alt text, and link to the relevant collection fields or actions. You can add new collection fields as needed, and decide what happens when visitors click the image, including setting how links open and their rel attributes.

Wix Editor

Studio Editor

1. Go to the relevant page in your editor.

2. Click the image you want to connect to the CMS. Learn how to add an image.

3. Click the Connect to CMS icon .

4. 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, give the dataset a name and click Create.

5. Click the drop-downs under Connections to connect each part of the image to the relevant collection fields. Select + Add to create and connect a new collection field.Image source connects: Select the 'Image' field type you want to connect.
   Alt text connects to: Select the field to use as the alt text for the images. You can choose from the following field types: 'Text', 'Number', 'Date', 'Date and Time', 'Address', and 'Tags'. Learn more about CMS alt text best practices.
   Link connects to: Choose what happens when visitors click the image. You can select a dataset click action (e.g. 'Submit', 'Load More'), a dynamic page to link to, or a field to open (e.g. a document, URL, image or video). 
   Note: When linking to a page or URL, choose how the link opens and set the rel link attributes.
   

1. Click Preview to test your connections.

2. Click Publish if you are ready to make the changes go live.

FAQs

Click below for answers to common questions about connecting images to CMS collections.

What should I use for the image alt text?

In general, we recommend creating a collection field to use as the alt text for CMS-connected images. To keep your collection organized, you can place the alt text field next to the image it represents and name it "Alt text [image name]". You can leave the alt text disconnected for decorative images as they do not typically need alt text.

Learn more about CMS accessibility best practices.

Can I use an image as the 'Submit' button on my custom CMS form?

Yes, you can use either an image or a button element as your CMS form's 'Submit' button.  Any input elements you add as part of a custom CMS form, need to have a 'Submit' button. When clicked, the values in each input save to your connected collection.

To use an image as your 'Submit' button:

1. Add an image in your editor.

2. Connect the image to the same dataset that connects to the input elements visitors will submit.

3. Click the Click action connects to drop-down and select Submit.

Tip: You can connect images to other dataset click actions to use them as 'buttons' for actions like 'Load More', 'Next/Previous Page', etc.

Learn more about creating a 'Submit' button for your custom CMS form.

Can I add a tooltip to an image that appears when visitors hover over the image?

We have removed the option to add tooltips to image elements as tooltips are not accessible to all users. It is no longer possible to set tooltips for static images or images that connect to the CMS. Instead, use the alt text field to explain images in a way that screen readers can understand them.

Learn more about CMS alt text best practices.

Can I display images or videos from the CMS in section backgrounds?

Yes. You can connect section backgrounds to 'Image' or 'Video' fields in your CMS collection. You can also connect the background color to 'Color' fields if you want to display a color from your collection.

If the section background is for decorative purposes only, we recommend leaving the alt text disconnected in the dataset. This helps screen readers skip over the image, preventing unnecessary distractions. For non-decorative background images, connect the alt text to a collection field that explains what the background image or video shows. Learn more about CMS accessibility best practices.

To connect a section background:

1. In your editor, click the relevant section, then click the Connect to CMS icon .

2. 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, give it a name and click Create.

3. Click the Section background connects to drop-down and select the 'Image' or 'Video' collection field you want to use for your section background.

4. Click the Background alt text connects to drop-down and select the field you want to use as the alt text.

5. Click the Section background color connects to drop-down to connect the background color to a 'Color' field.

What is a dataset?

Datasets are the vital link between the elements on your page and the content in your CMS collection. You can use datasets to create a two-way connection, allowing you to display collection content, capture user inputs, or both.

Datasets allow you to control which parts of your page elements connect to which fields in your collection. Each dataset connects to a collection and each element connected to the dataset connects to a field in the collection. This unlocks a new way of managing which content appears and where.

Learn more about adding and setting up a dataset.

Can I connect multiple images to the same dataset?

Yes, you can connect multiple images to the same dataset. The dataset only connects to one collection. However, you can connect each part of the images to different collection fields to use different content from the same collection.