Is it possible to override responsive settings for CMS/blog images?

Design help CMS
1

I’m a non-developer using Webflow for a blog (not yet live), the posts are graphic-heavy and feature mobile screenshots. I’ve been sizing the portrait images 576px wide, and they’re appearing comically large on desktop, and way too small on mobile in the previews. Is there any way to control their display with custom code/media queries, or some other workaround? I’m willing to pay for help :slight_smile:

2

Hi @elbu - Welcome to the forum.

Webflow does not support responsive image generation within rich text elements, making it a poor choice for image-heavy posts. It does support using custom code inserted into a rich text element via an embed, so you could leverage an image CDN to handle the heavy work. I have used Cloudinary, Imgix, and ImageKit, for example, and reverse proxying a Webflow site with Cloudflare and using workers to handle image processing.

There are limitations with this approach as it relates to maintainability since editors can’t participate (unless using Cloudflare) and you have to use code. I suggest using a more capable blogging platform that effortlessly handles images and media in posts like WordPress. Webflow is simply not up to the task here.

3

Thanks @webdev for your reply, Jeff! I’ve invested quite a bit in my Webflow build so far so I am pretty motivated to keep it, even if it requires a bit more effort and learning a bit of code

So if I understand correctly, I would use an image CDN to load/name my images, generate the responsive code and use embed in Webflow in the spots I want them, and Cloudflare would serve as the connector between the 2 apps to fetch the images?

I’ll be the only editor on this project, so this could work - could I hire you to tutor me how to get this set up?

4

If you used an image CDN like Cloudinary you would just use their JavaScript library to render the images. You would upload them to Cloudinary and just include a small block of code to render them responsively. Nice part is it not only renders the right sizes but also in optimized formats based on the visitors device. The free plan is pretty generous but if you have a busy site you would need a standard plan which can be expensive for some. I do offer consulting so that is an option. I also think I have a project in my stash which I can share.

Edit: Published URL demonstrating the Low Quality Initial Picture Technique and responsive image generation using Cloudinary - > https://webflow.com/design/cloudinary-aacb3c

5

Hey Lin, as always, Jeff’s solution is absolutely the right one to use for performance and scalability. If your goal is to have a very image heavy site, you’ll want that in order to keep your usability and performance optimal, which is also essential for SEO.

However looking at your original question, it sounded like you might be dealing with layout problem rather than a performance or image quality problem?

Is the problem that your images are inside of rich text elements and are justified to the right or left sides? You might share your published site link and read-only link so we can see the issue you’re facing.

Webflow doesn’t have a built in feature to change image position within RTE’s responsively, however it wouldn’t be difficult to add some CSS/JS to do that on mobiles. I’d have to take a look at the published site to make a recommendation.

It may be that Finsweet’s Powerful Rich Text, or Refokus’ Rich Text Enhancer might offer that feature already.

6

I haven’t published the site yet, just trying to build out my content before launch

I would like the images to stay centered, but what’s happening is the mobile screenshots (in portrait orientation) are scaling down with much padding on the left and right in mobile breakpoint, and appear larger than I want on desktop. Ideally I’d like to control it so that a 576px wide screenshot would be scaled down a bit on desktop with some margins (maybe a fixed height would help?) but fill the width of the screen (less the regular margins) on all mobile devices.

So Finsweet is something that could help here?

7

I think I found a quasi-solution for this, I was just adding the images and using the option on the far left, and switched to the 2nd option from the left, it looks better on mobile now for sure

image
image744×230 5.73 KB

8

This does fix potential presentation issues but you need to make sure you are optimizing images because Webflow won’t in this case.

2 Likes
9

Hey, webdev!

I’d like to specify that I just started learning development so there might be flaws in my thinking but how about:

  • overwriting the size attribute using JavaScript?
  1. I created two versions of the component containing the image, one with CMS and one without it.
  2. I picked the auto-generated sizes from the second version and added those to the JavaScript code. Here’s the code I’ve used:
document.addEventListener('DOMContentLoaded', function () {
  // Select all CMS images with a specific class
  const cmsImages = document.querySelectorAll('.image_absolute');

  cmsImages.forEach(function (img) {
    // Add/Override the sizes attribute
    img.setAttribute(
      'sizes',
      '(max-width: 479px) 44vw, (max-width: 767px) 47vw, (max-width: 991px) 46vw, (max-width: 1919px) 40vw, 520px'
    );
  });
});

Note: the thing is that Webflow seems to still generate the srcset versions, but it fails with the size attribute.

Using the JS code seems to work almost the same. With slight differences in size of a few kbs between CMS vs no CMS. In comparison when I’m not implementing the JavaScript code it jumps to the original image which in my case was 1.8MB.