Skip to main content

Lists: Set a different image for each item

Learn how to set a unique image for each item in a static list. We 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 list item.

Note: If other items end up with the same image

If you change the image of a box inside a list using the method below, the same image will be applied to all image boxes in the same column.

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

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

Before you start: Check the type of list

There are two types of lists in Studio.Design: static lists and dynamic lists. This article covers how to edit static lists. Follow the steps below to check whether the list you want to edit is a static list.

  1. Select the entire list.

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

  3. Check the dropdown text at the top of the [Data] tab.

If [Connect data] is shown

The list is a static list. You can use the image setup method described in this article.

If a data source (such as [CMS] or [API]) is shown

The list is a dynamic list. Please refer to the following article for instructions.
​In a CMS list, I want to change the image, text, or link of only one item, but the other items end up showing the same content

Once you've confirmed that it's a static list, follow the steps below to set up your images.

Step 1. Add an image property to the list

  1. Select the entire list. *If the selected box is outlined in light blue and a grid-shaped icon appears at the top-left of the box, you've successfully selected the entire list.

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

  3. Open the [Data] tab.

To change an existing image

Click the cell of the image property in the property management table and replace the image.

To add a new image

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

  2. Add an [Image] property.

  3. In the input fields of the [Image] column added to the table, set the individual image you want to use for 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 be reflected in the corresponding box.

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

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

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

Step 3. Update your site to apply the changes

  1. Check that the links are set correctly using Live Preview.

  2. Publish or update your site to apply the changes. Your changes won't appear on the published site until you do this.

Setting alt text for list item images

If you set alt text on an image inside a list item the same way you would for a regular image box, the same alt text will be applied to all images.

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

Help article: Setting alt text for list item images

Related Articles
Image Box: Setting Alt Text
Lists
List: Change colors for each item
Lists: Setting different links for each item
Lists: Setting different text for each item
Did this answer your question?