All the images are the same after replaced

I’m new to Webflow and frontend development. So I used a template to get started. Every image in the template is different in this grid.

When I replaced the images with my own from Assets, all the images in a row became the same. What can I do to make each image different? This issue has haunted me for a few days. I tried everything I can think of but nothing worked. Any insights would be greatly appreciated!

Read-Only site

Published site

Hi @Hui_Ren as this is an collection the image element should be linked to CMS from where images are pulled from. You can simple just replace your image in collection item.

You can find detail informations how to work with collections on Webflow University

@Stan, thank you for reviewing this issue. I truly appreciate it. I’m migrating from CMS to Assets. I don’t want to use CMS because I will deploy the website to S3.

HI @Hui_Ren that’s is a major information and as I do not work with S3 and do not know how you plan to fetch data into design from your database linked to yous S3 account I can’t help.

Good luck :wink:

Hi @Stan, I just want to put the images in Asset. But whenever I replaced the CMS images with the Asset images, all the images in a row became the same :thinking:

hi @Hui_Ren this is standard behaviour. You can thing about collection as a Loop. Because you have pointed only to one image as source it will load this single element as many time until loop ends. Collection are for pulling data from CMS that why I have pointed you to WFU to understand how they work. :wink:

Thank you, @Stan. That’s very helpful. I think that the best thing to do in this scenario is to start from scratch with the Asset images.

hi @Hui_Ren It can be solution as you can create and design element and when exported you will write logic in programming language and/or framework you prefer to feed data from your database using looping method of your choice and once project is done you will populate/install it to S3.