How can I edit the display of images in my Webflow template and ensure that each image is unique to its respective project on my portfolio site without the same image appearing on every page when using a Quick stack layout?
TL;DR
- Ensure each project in your CMS Collection has a unique image field.
- On the Project Collection Page, select image elements and bind them to the corresponding CMS image field.
- Replace any static or duplicated image components with dynamic CMS-bound ones to display unique images per project.
You’re seeing the same image on every project page because the template or layout is likely pulling from a static image, not a dynamic CMS field. To make each image unique per project, you need to connect image elements to your CMS.
1. Use a Webflow CMS Collection for Projects
- Go to the CMS panel (left sidebar) in Webflow.
- Open the “Projects” Collection (or the collection you’re using for portfolio items).
- Make sure each project has a unique image field (e.g., “Main Image”).
2. Design the Project Template Page
- Go to the Collection Page for your Projects (in the Pages panel, under "CMS Collection Pages").
- This is the template Webflow uses for every individual project.
3. Replace Static Images with CMS Image Fields
- In the designer, select the image element (in your Quick stack layout or wherever it’s displaying).
- In the right-hand settings panel, click the purple “Get Image from” option.
- Bind the image element to the correct CMS field (e.g., “Main Image” or “Project Cover”).
4. Use CMS-aware Layout Components
- If you’re using a Quick stack, ensure each image or content block inside it is dynamic, pulling from CMS fields.
- Avoid reusing components from static pages or symbols that include hard-coded images.
5. Double-Check Static Templates
- If you duplicated a page or section from a static template, it may include hard-coded images.
- Replace those with CMS-bound image elements, so each project page pulls its own content.
6. Preview and Test
- Preview the site and navigate to different project pages.
- Each page should now display its unique, CMS-linked image rather than repeating the same one.
Summary
To make each project’s image unique, you must use dynamic CMS image fields on the Project Collection Page, not static images. Connect your image elements inside layouts like Quick stacks directly to the appropriate CMS field, and Webflow will display the correct image for each project.