Image field – Webflow CMS tutorial


The Image field. To say it’s life-changing in the context of
CMS is hyperbole. But it’s not. Here’s why: You might be thinking to yourself, “isn’t
this just a field that lets someone upload an image? And to make it work, don’t I choose an image
element and bind that Image field to it?” Well, yes. That is one potential and frankly amazing
use of the Image field. Let’s look at that more closely. Fairly good-looking blog previews. Great content, meaningful words. Let’s go over and drag an image element inside,
then bind it to the relevant Image field. All the images from the relevant field popped
right into each item. Super powerful. Or, what about this? Select this section and head over to the Element
Settings panel, and right here we have access to this wonderful little checkbox, “Get Background
[BG] Image.” Bind it to the Image field — now our section
is using those images from our collection in the background. But wait — there’s more. If we go into the Style panel and add a background
image, we can use that placeholder to make changes to the background image we just bound
to our collection. Make it look just right. If we switch between items on our collection
page, it’s working on every single item. So the Image field can be used to bring in
an image for use in an image element (like a profile picture or an icon) and we can use
them as background images just like we’d manually configure background images on static content.

Leave a Reply

Your email address will not be published. Required fields are marked *