Expand image in rich text (CMS)

Design help CMS
1

I’m not sure whether i am missing something obvious.

Create an rich text field in the CMS. Use the editor to create text and upload images. If i upload a large image then the site can display a smaller image, this is fine. Add captions and so on. All good.

Now how can i get the image to show full size when clicked on? The image is already downloaded and high res so don’t need to fetch a new resource.

I’m not sure if this can be done natively?

Now i was thinking of using fancy box, jquery and being able to link images together like that, but that’s an awful lot of hoops for what ought to be a very simple job

Am i missing something super simple?

thanks
Paul

2 Likes
2

Showing a bigger image on click of another image can be done in Webflow natively with 2 things: the Lightbox component, and Interactions.

Unfortunately none of which can be used inside a Rich Text element. I’m afraid you’re not missing anything super simple no.

3

A JS that would target all images in a given Rich Text (.classoftherichtext.img) and show the source image centered on screen should do it. You could also limit to certain images by adding a H6 in front of the images that should be clickable, and filter with that.

4

I ended up using fancy box with a bit of jQuery. Find all the a href surrounding the image, then give them the main image src and apply fancy box and a gallery name. At least now clicking on an image will show the full sized images and also let you scroll through them.

But this is such a basic oversight, no?

cheers
Paul

1 Like
5

You mean it should be possible to do that?

I don’t know… RT is great to give a lot of power to editors and a lot of versatility to the CMS. Doing so it has an apparent lack of control and it’s hard to make complicated, interactive things with its base elements.

For your use case, it’s all personal… I’d personally avoid using anything that is a popup, overlay, lightbox etc… because I don’t like the experience. So I’d try another way (don’t know which).

Also, there’s a huge potential for RT that resides in the multimedia embed thing. You can embed a LOT of things into it. Everything that is listed here Providers | Embedly is compatible and can be integrated in a RT with just the page URL of the node you’re on (no embed code, just the url).

So you could maybe also find a way of showing images differently by using an external service.

6

Yes, sorry i mean it’s a pretty common requirement and i’d rather use inbuilt webflow tools. Integrating a decent lightbox shouldn’t be too difficult really should it?

I will take a longer look at the multimedia embed option as well. I’ve not been able to experiment with the video options and i will need that.

I’m basically checking out the functionality required to bring our sites over the webflow. So seeing that we can do everything that we can now

cheers
Paul

1 Like
7

If you can develop bits of Javascript on your side then there is little you can’t do with Webflow I think. Only things like DOM rewriting are limited. And features such as multi language site is problematic too. Other than that, possibilities are vast.

Go on the new wishlist site to add what you require or add your voice in already published wishes. https://wishlist.webflow.com/

Also yes simple things… will probably come. Webflow is young and the CMS even younger. Innovation comes at a steady rhythm though.

8

This topic was automatically closed after 60 days. New replies are no longer allowed.