CMS rich text image gallery

I don’t know if I’m missing anything important, but here’s what I want.

I have a simple CMS with rich text. I want to put a few images in that rich text, but I want them inline - next to each other and to be centered.

Something like this:

(the caption is not important.)

Does anybody know how to do this? Thanks!

What you want requires custom code which can be inserted inside a rich text element.

You may be able to get away with a third party tool from finsweet or refokus to pull it off but since I code that is what I choose to do.

As Jeff said, coding the HTML you want and placing it in an Embed is the approach that will give you the most control.

If you don’t code or want a different approach that is perhaps more accessible to the content editors who will be creating these, best approach I can suggest is-

  • Add an image gallery field to your collection
  • Create your image gallery element arrangement outside of the rich text element
  • Use Finsweet’s Powerful Rich Text to create the “component”, and you can then reference it in the rich text content e.g. {{ my-gallery }}

This is relatively easy for your content editors to work with, and you get some designer benefits. Make sure to limit the number of photos to something that will work responsively in your design.

Okay so custom code would be the best solution, I understand. I tried it and it works. However, if a client wants to add some images themselves, it would be pretty hard for them to implement that.

Hey Michael, thanks for the tips!

I managed to get it work with some custom code, but the problem is that it might not be suitable if the client wants to change or add anything.

If we use the component method, would the client be able to change the images and maybe add multiple different “my-gallery” into the same rich text element?

Yes, with constraints.

If you e.g. have 3 image gallery fields, and build 3 gallery “components” than the client would have up to 3 galleries they could embed in their rich text content, named something like {{ gallery-1 }}, etc.