Blog CMS Workflows March 5, 2026 6 min read

Webflow CMS Collection Image Fallback for Blank Fields

Handle blank Webflow CMS image reference fields in collection lists using conditional visibility and custom code to inject fallback placeholder URLs.

Webflow CMS image placeholderWebflow collection listCMS image fallbackWebflow custom code

Webflow CMS Collection Image Fallback for Blank Fields

Webflow CMS image reference fields render nothing when left blank — the bound image element simply disappears from the DOM. This collapses card layouts, breaks grid alignment, and leaves an unexpected gap where the image should appear.

Webflow's native conditional visibility lets you show a fallback image element when the CMS image field is empty. For more control, a small script in the page's custom code section can replace missing images with generated placeholder URLs sized to match each slot.

Webflow CMS images

What happens when a CMS image field is empty

Webflow CMS image fields are optional. When an author creates a collection item without uploading an image, Webflow renders the bound element with an empty src or hides it depending on your visibility settings. An empty src triggers the browser's broken-image icon. Hidden elements collapse the layout and break grid spacing.

Collection list templates are static Webflow designs — you cannot write conditional logic directly in the template. Webflow provides conditional visibility as a design-level workaround, and custom code for programmatic handling.

Conditional visibility

Use conditional visibility with a static fallback image

In the Webflow Designer, select the CMS image element and set its visibility to show only when the image field is set. Then add a second static image element in the same slot — a locally uploaded fallback image — and set its visibility to show only when the CMS field is empty. The two elements occupy the same layout slot and exactly one is visible at a time.

This approach works without code and is easy for non-developers to configure. The tradeoff is that you must upload a static fallback image to Webflow's asset manager and update it manually if the placeholder design changes.

Custom code

Replace empty images with generated URLs via JavaScript

For dynamic fallbacks — where the placeholder shows the item name or dimensions — add a small script to the collection list page's before-body-close custom code. The script finds bound images that failed to load, reads the element dimensions, and replaces the src with a generated fallback URL.

This approach scales better than static fallbacks: each missing image gets a placeholder labeled with the item name, and dimension changes in the design automatically propagate to the fallback URLs without needing to re-upload an asset.

Implementation text

<script>
  // Runs after DOM is ready
  document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('[data-cms-image]').forEach(function (img) {
      if (!img.src || img.src === window.location.href) {
        var w = img.offsetWidth || 600;
        var h = img.offsetHeight || 400;
        var label = img.closest('[data-item-name]')
          ?.getAttribute('data-item-name') || '';
        img.src =
          'https://fallback.pics/api/v1/' + w + 'x' + h +
          (label ? '?text=' + encodeURIComponent(label) : '');
      }
    });

    // Also handle images that load but return 404
    document.querySelectorAll('[data-cms-image]').forEach(function (img) {
      img.addEventListener('error', function () {
        var w = this.offsetWidth || 600;
        var h = this.offsetHeight || 400;
        this.src = 'https://fallback.pics/api/v1/' + w + 'x' + h + '?text=No+Image';
        this.onerror = null; // prevent infinite loop
      });
    });
  });
</script>

Webflow attributes

Tag CMS image elements for reliable script targeting

Webflow-generated class names change unpredictably during redesigns. Instead of targeting by class, add a custom attribute like `data-cms-image` to each CMS image element in the Designer. This gives the fallback script a stable hook that survives layout changes.

To pass the item name to the script, add another custom attribute — `data-item-name` — bound to the CMS item Name field. The script reads this attribute and uses it as the fallback image label, making each placeholder distinct.

Webflow API

Headless Webflow: handle null in Data API responses

Webflow's Data API returns CMS collection items with image fields as objects containing `url`, `alt`, and dimension metadata, or null when the field is empty. Headless frontends using the Data API should apply the same null-check helper pattern used for other headless CMS platforms.

Implementation tsx

// Webflow Data API response
// { fieldData: { image: { url: '...', alt: '...' } | null } }

function webflowImageUrl(
  item: WebflowCollectionItem,
  fieldName: string,
  width: number,
  height: number,
): string {
  const image = item.fieldData?.[fieldName] as WebflowImage | null;
  if (image?.url) return image.url;
  const name = (item.fieldData?.name as string) ?? '';
  return `https://fallback.pics/api/v1/${width}x${height}?text=${encodeURIComponent(name || 'No Image')}`;
}

Resources

What to standardize before shipping

Webflow CMS image fields render an empty src or collapsed element when blank — both break grid layouts.
Use conditional visibility in the Webflow Designer to show a static fallback image when the CMS field is empty.
For dynamic fallbacks, add a custom attribute to CMS image elements and use a small DOM script to inject generated placeholder URLs.
Prevent the onerror infinite loop by setting onerror = null after the first fallback assignment.
In headless Webflow setups, use the same null-check helper pattern as other headless CMS platforms.

Production fallback layer