How can I change the value for the script 'data-src' dynamically for every item in a CMS collection in Webflow?

Published on
September 22, 2023

To change the value for the script 'data-src' dynamically for every item in a CMS collection in Webflow, you will need to use the combination of Webflow CMS and custom code. Below are the steps to achieve this:

  1. Create a CMS Collection: Start by creating a CMS Collection in Webflow, defining the fields that you need for your items. Make sure to include a field for the 'data-src' value.

  2. Populate the CMS Collection: Add the necessary items to the CMS Collection, providing values for each field, including the 'data-src' field.

  3. Design your Collection List Template: Create the layout and design for the dynamic content items using the Collection List element in the Webflow Designer. Customize it as per your requirements.

  4. Add a Custom Code Section: In your Webflow project, navigate to the page where you want to display the dynamic content. Insert a Custom Code section by clicking on the "+" button in the Webflow Designer and selecting "Embed."

  5. Write the Custom Code: In the Custom Code section, write JavaScript code that will retrieve the CMS data and modify the 'data-src' attribute value for each item in the Collection List.

    ```javascript

    ```

    Note: Replace the class names (e.g., your-collection-list-class, your-collection-item-class, your-data-src-element-class, your-script-element-class) with the appropriate class names from your Webflow project.

  6. Publish and Test: Save, publish your Webflow project, and test the dynamic change in the 'data-src' values of the script for each item in the CMS collection.

This approach allows you to dynamically change the 'data-src' value based on the CMS data, offering flexibility in managing and updating your collection items' script attributes.

Additional Questions:

  • Can I change other attributes dynamically for CMS collection items in Webflow?
  • How do I insert dynamic content from a CMS collection into my Webflow project?
  • What are the limitations of using custom code with Webflow CMS collections?