Webflow sync, pageviews & more.
NEW

Why aren't the images in my Webflow Collection displaying properly when I use them in a collection list on my portfolio page, even though each project has images attached to the corresponding Collection item?

TL;DR
  • Ensure the Image element is correctly bound to the image field in the Collection List settings.
  • Verify the CMS items have images uploaded in the relevant image field.
  • Check for any conditional visibility rules that may hide the image.
  • Use a bound Image element instead of a static background image unless dynamically set from the CMS.
  • Confirm you're editing the correct Collection List and not a static element or different Collection.
  • Publish the site to reflect and test the changes correctly.

If your Collection images aren't displaying in a Collection List on your portfolio page in Webflow, even though each item has images assigned, the issue usually involves image binding or image field settings.

1. Check Image Binding in the Collection List

  • Select the Collection List or Image element inside your Collection List.
  • In the Element Settings panel, confirm that the image is correctly bound to a Collection field (e.g., Main Image, Thumbnail, etc.).
  • If you see “Get Image from…” displaying as empty or not bound, click it and choose the correct image field from your Collection.

2. Ensure the Image Field Is Not Empty in the CMS

  • Go to the CMS (Collections > Your Collection) and open a few Collection items.
  • Confirm that the image field (e.g., Image, Thumbnail, etc.) actually contains uploaded images for each item.
  • If any items are missing their images, those entries will not display images unless the field is set with a default backup image in design.

3. Check Visibility Settings and Conditional Visibility

  • Select the Image element inside the Collection List.
  • Open the Style panel, scroll to the bottom and check if there are any Conditional Visibility rules applied.
  • If the image is hidden when a condition isn’t met (e.g., “Only display if caption is set”), it might be unintentionally hidden.

4. Verify That You Are Using an Image Element, Not a Background Image

  • If you’ve added the image as a background image via styles, it won’t update dynamically from the CMS unless you set that background FROM the Collection Binding.
  • To bind a dynamic background image, select the div or container, go to the Style panel, and next to the background image settings click “Get Image from” and choose the CMS image field.
  • Using a standard Image element is generally safer for CMS binding.

5. Confirm You're Viewing the Right Page Template or Collection List

  • Ensure you're working within the correct Collection List on the portfolio page and not a static image or the wrong Collection.
  • If you are using a Collection Page, item-specific content will only show per individual Collection item pages, not dynamically across a list unless you're using a Collection List wrapper.

6. Publish the Site After Changes

  • Images may appear as broken links or not update properly in preview.
  • Always click "Publish" to your domain and refresh the live site to test actual image rendering.

Summary

To fix missing images in your Webflow Collection List, make sure the Image element is correctly bound to the image field, the CMS Collection items contain the images, and there are no conditional visibility or styling issues hiding them. Use dynamic image binding, and publish changes to confirm updates.

Rate this answer

Other Webflow Questions