Displaying a different image depending on device type on CMS / blog

Hey guys,

I’m designing a blog using the CMS feature, and want to show a different photo depending on the device type.
This is a common situation with images for me when displaying infographics. For a desktop/tablet device it makes sense for the infographic to be in landscape orientation. For a phone held in portrait mode, it makes more sense to do a portrait optimized version. The landscape infographic would look TINY on a mobile screen if not.

I didn’t see a way to do this within the richtext control, so here’s how I solved it. Is there a more elegant way I could be doing this?

I created 9 fields on the CMS instead of one rich text blog post field .

  1. Blog post
  2. image
  3. image
  4. Blog post continued
  5. image
  6. image
  7. Blog post continued
  8. image
  9. image

Then I have these fields vertically aligned right after the other, and for each image I change the display settings on the webflow editor so only one of them appears depending on the device.

here’s a working example -> https://www.datacue.co/blog/five-ways-to-lower-your-ecommerce-customer-acquisition-cost

launching that on a desktop should show a different image to what you would see on mobile device.


For now you dont have this idea - only - responsive images (same image with diff sizes).

CMS toggle

Create two fields. One for "vertical-image" and one for "horizintal-image" and thats it. Set the vertical to be visible on mobile/tables" and the -h- to be visible on desktop.

Why not?
not to dynamic / bad over time / works only for 1-2 images per post in same position

"The Problem - No way to add custom class to rich-text CMS content

For now is you cannot add custom class to images inside rich-text editor - so you can not add custom CSS to control visibility with simple CSS (visible: hidden and block toggle).
See this wishlist idea:

My idea/solution:

  1. Add custom class for you rich text editor - for example
  2. Add custom CSS
  3. Use CSS attribute selectors

How to

  1. Add two images to your rich context block - named like this (change names on windows/mac):
    circle-h.jpeg (horizontally image)
    circle-v.jpeg (vertically image)
  2. Add this selector (custom code):
    $= (ends with)
 /* phones */
@media screen and (max-width: 600px) {
  /* hide -h- on mobile */
  .post-body img[src$="-h.jpeg"] {
    display: none;
  /* show -v- on mobile */
  .post-body img[src$="-v.jpeg"] {
    display: block;
/* tablet-desktop */
@media screen and (min-width: 600px) {
  /* show -h- on desktop */
  .post-body img[src$="-h"] {
    display: block;
  /* hide -h- on desktop */
  .post-body img[src$="-v.jpeg"] {
    display: none;


Why its better?
Not perfect but like this you can add 30 images in the same post and set any order you want. Only remeber to add the -h and -v to file ends name (You also add this idea to alts or other any other att). One Con: Only works on publish mode

Test this.

This is a great tip! Thanks @Siton_Systems , my method fixed the number of images I can use in the blog post to just the number of fields I created in the CMS. Your method achieves the same effect with unlimited images.

1 Like


Is this still working? I’m having trouble applying your code…

Read only link

Live page here