Connect Image
3 min
Connect image elements to the CMS to dynamically display images on your page that are stored in collections.
How do I connect images to my CMS collection?
After clicking the Connect to CMS icon 
on an image, set up the connections in the Connect image panel:
on an image, set up the connections in the Connect image panel:- Click the Choose a dataset drop-down and select an existing dataset that connects to your collection. Alternatively, click Add a Dataset, then choose the collection you want to connect, give the dataset a name and click Create.
- Click the drop-downs in the Connect image panel to connect each part of the image to the relevant collection fields. You can select Add new field 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).
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:
- Add an image in your editor.
- Connect the image to the same dataset that connects to the input elements visitors will submit.
- 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.
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.
How do I test my image connections before publishing?
To ensure your image connections are working correctly, click the Preview button at the top right of your editor. This allows you to see how the images display with the connected dataset content. If everything looks good, you can proceed to publish your changes and make them live on your site.
Did this help?
|
