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 .
Blog post
image
image
Blog post continued
image
image
Blog post continued
image
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.
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:
Add custom class for you rich text editor - for example .post-body
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)
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
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.