Skip to main content

Lists: Setting a Different Image for Each Item

Learn how to assign a unique image to each item in a static list. We'll also cover what to watch out for if all the images in your list end up looking the same.

This article explains how to set a different image for each item in a static list (regular list). If you're not sure which type of list you have, or if you're using a CMS list, please refer to the following:

Note: If other items in a static list (regular list) end up with the same image

If you change an image inside a list box using the method below, the same image will be applied to every image box in that column.

  1. Select a list item and open the right panel.

  2. Set the image from the [Image] tab.

Step 1. Add an image property to the list

  1. Select the entire list.

    ​Open the Layers panel and select the element with a light blue list icon at the front. On the screen, a list icon appears at the top-left of the target element.

  2. Open the right panel. If it's closed, open the right panel.

  3. Open the [Data] tab.

To change an existing image

Click the image property cell in the property table to replace the image.

To add a new image

  1. Click [+] at the top right of the property table.

  2. Add an [Image] property.

  3. In the [Image] column added to the table, set the individual image you want to assign to each list item.

Step 2. Link the image property to an image box

Next, link the list's image property to an image box on the screen. This way, the image property registered for each item will automatically appear in its corresponding box.

  1. Select a list item. You can select any item in the list. If it's hard to select a list item directly on the screen, you can select it from the Layers panel instead.

  2. Open the [Data] tab in the right panel. If the panel is closed, open it.

  3. Drag the connector for the [Image] property and link it to an image box on the screen.

Step 3. Update your site to apply the changes

  1. Use Live Preview to check that the links are set correctly.

  2. Publish or update your site to apply the changes. Until you do this, your changes won't be reflected on the live site.

Setting alt text for list item images

If you set alt text for an image inside a list item the same way as for a regular image box, the same alt text will be applied to every image.

To set individual alt text for each image in a list item, see the article below.

Help article: Set alt text for list item images

Related Articles
Image Box: Setting Alt Text
CMS list items all show the same image, text, or link after editing
Lists: Set a Different Link for Each Item
Set a unique external link for each item in a CMS list
Lists: Setting different text for each item
Did this answer your question?