Streaming live at 10am (PST)

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


#1

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.

Thoughts/Advice?


#2

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:
https://wishlist.webflow.com/ideas/WEBFLOW-I-66


My idea/solution:

  1. Add custom class for you rich text editor - for example
    .post-body
  2. Add custom CSS
    https://university.webflow.com/article/how-to-add-custom-head-and-body-code-to-a-webflow-site
  3. Use CSS attribute selectors
    https://css-tricks.com/almanac/selectors/a/attribute/

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.


#3

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.