How do you add images to the post body in Webflow's CMS Collections if it only allows for a Hero image?

Published on
September 22, 2023

To add images to the post body in Webflow's CMS Collections, you can follow these steps:

  1. Create an image field in your CMS Collection:
  • Go to your CMS Collections in the Webflow Designer.
  • Select the Collection where you want to add the image field.
  • Click on the "+ Add Field" button.
  • Choose the "Image" field type.
  • Give it a name, such as "Body Image".
  1. Add the image field to your Collection template:
  • Open your Collection template in the Webflow Designer.
  • Drag a new image element onto the page where you want the image to appear in the post body.
  • Make sure the image element is selected.
  • In the right-side panel, click on "Bind Field".
  • Select the image field you created earlier ("Body Image").
  • Customize the image settings as desired, such as the size, alignment, and alt text.
  1. Add images to your posts in the CMS:
  • Go to your CMS Dashboard.
  • Open the Collection where you want to add images to your posts.
  • Click on the "+ New" button to create a new post or edit an existing post.
  • Locate the "Body Image" field and click on the "Upload" button.
  • Choose the image file you want to use from your computer.
  • Optionally, fill in the alt text for accessibility purposes.
  • Save your changes.

Now, each post in your CMS Collection will have a separate image in the post body. You can add multiple images to each post by repeating the process for the "Body Image" field.

Additional Questions:

  • How do I create an image field in Webflow's CMS Collections?
  • Can I add multiple images to a post in Webflow's CMS Collections?
  • How do I customize the design of the image element in the post body in Webflow?