At present, this change doesn’t include background images or images in rich text elements, but we’ll support these elements in a future iteration.
This was over 2 years ago…
What is happening is my clients are uploading huge images for blog and news posts. When a thumb image is needed for the summary card (looks like these How To Create a Card with CSS) the image has to be used as a background to a div so that they all are same size. Works fine with CSS and Cover but the image size is HUGE sometimes as there is no cropping or responsive functions applied. Clients don’t know how to crop images nor do they have time.
Is this feature coming soon? Can we contribute to get it added faster? Any workarounds? Responsive background images are pretty critical since we don’t have a native way to crop.
Wait for webflow to implement it. I only know one CMS where I can do this on client upload now.
Create three image fields (or four) for different break points and have the client upload optimized correctly sized images. Then assign the right one as the background image source. Look at Kraken.io
Stop using background images for images.
Get a pro account on Cloudlfare, turn on Mirage.
Offer optimizing service to client and handle it yourself, make some extra cash.
These are good and I will check them out. The last two CMS I used had image transforms where it would resize images to presets on upload. Craft and Statamic both had this. Craft can do it on the fly also. Just hard to believe I ha e no way to do this in Webflow. Like in my gallery I want all 300 x 300 pixel images cropped from center.
I agree background images are not the way. We need a way to do image transforms or something.
Kraken.io has a web based interface that could be used by editors could use to create versions of images and perform resizing. It has an API that would require server side code. So if you used the webflow API you could potentially handle the integration on your own app.
Does not look like Cloudflare Polish will work since the images need to reside on your domain. I was just looking at this for another site. Webflow serves up images from their CDN.
I am just used to Craft and Statamic where they have image transforms and optimization built in. When you upload an image, it is auto sized to presets. We really need this in Webflow. You can define them ahead or on the fly. See Image Transforms | Craft CMS Documentation | 2.x
Just need to get clients to learn to resize before upload I guess. New client flow. Not as client friendly in Webflow as far as images go.
There must be a better way to automate this for
Clients. Can Cloudinary do it?
I think the bigger issue is the one I face as a designer, each image is really unique. What settings you define for a background image does not necessarily translate to another image.
Whereas, a normal block level image is just filling the space in the flow, and is optimized.
I have a solution for this with a customized CMF/CMS I use when clients want to drive and the layout needs are complex and require programming. So if I need all those features …
I need to create a 2-column block containing an image zone and corresponding text zone on each row.
In the case of multiple rows, the image and text position need to alternate between image left, text right, and visa versa.
The width of the text zone always matches the width of the image zone. However, the depth of each text zone varies depending on the amount of content. This means the image zone depth also varies.
What is the best way to build these blocks in Webflow so I can use fixed-ratio images (800x600px)?
Just to be clear, I don’t need the images to display at a fixed ratio, I need the image placeholder to display at the same ratio as the corresponding text zone without distorting.
