How to bind width of image to CMS field

Design help CMS
1

I haven’t used webflow for a while, so I forget how to do something quite simple. Basically I want to control the width of an image in the CMS, using a number field within the CMS. So, in the editor, the user uploads an image, then there is a field to enter a number. This number should represent the width in px of the image. I can’t remember how to bind this to make it work. Or is it a custom property?
I need to do this because some images are larger than others and I want the user to be able to set the width in the editor.

1 Like
2

Hi there,

You can control image widths using CMS number fields through custom attributes. Here’s how to set this up:

The number field from your CMS collection can be connected to an image element’s width through a custom attribute. First, add a custom attribute to your image (e.g., “data-width”). Then, bind your CMS number field to this attribute in the element settings. The width value from your CMS will automatically apply to the image when the page loads.

For more information about working with number fields and custom attributes, you can reference our documentation on CMS collections and custom attributes.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

1 Like
3
External Image
5

Hi Ashley,

As the WebflowAIModerator said, you can achieve what you’re looking for (binding CMS Number field → image width) inside Webflow. However, since Webflow doesn’t allow binding numeric values directly to style, the way to do this is through a custom attribute + a tiny script.

Here’s how it works:

/**
 * CMS Image Width Controller
 * Author: BRIX Templates
 * Attribute: brix-cms-img-width
 * Description: Reads a CMS-bound attribute and applies width in px.
 * Version: 1.0.0
 */

<script>
(function () {
  'use strict';

  function applyWidths(root = document) {
    root.querySelectorAll('img[brix-cms-img-width]').forEach(function (img) {
      var raw = img.getAttribute('brix-cms-img-width') || '';
      var n = parseInt(raw, 10);
      if (!isNaN(n) && n > 0) {
        img.style.width = n + 'px';
        img.style.maxWidth = '100%';
        img.style.height = 'auto';
      }
    });
  }

  function init() { applyWidths(); }

  // Run on initial load
  (document.readyState === 'loading')
    ? document.addEventListener('DOMContentLoaded', init)
    : init();

  // Ensure it works with Webflow IX / CMS pagination / dynamic inserts
  var mo = new MutationObserver(function (muts) {
    muts.forEach(function (m) {
      m.addedNodes && m.addedNodes.forEach(function (node) {
        if (node.nodeType === 1) applyWidths(node);
      });
    });
  });
  mo.observe(document.documentElement, { childList: true, subtree: true });
})();
</script>

To set this up, you’d:

  1. Add a Number field in your CMS (e.g., Image Width (px)).

  2. Inside your Collection List / Collection Page, select the Image element.

  3. Go to Element settings → Custom attributes:

    • Name: brix-cms-img-width

    • Value: bind it to your CMS Number field.

  4. Add the script above in your site’s Project Settings → Custom Code → Footer (or page-level before </body>).

The script will automatically read the number you entered in the CMS field, apply it as the image’s width in pixels, and keep the proportions correct :white_check_mark:.