1: Image Captions and Float Clearing
Posted by Joe Oldak on 03/06/25 16:57

Inspired by a user on today's Voice User Group Chat, I have added some new features to the WYSIWYG editor.

You can now add image captions which "stick" to the image, and can be left/right aligned with the image. The entire image-and-caption can then be floated so that content flows around it.

The Voice Megaphone Guy
Megaphone Guy

So for example the megaphone guy here has a caption and is floated to the right, so the content flows around it.

Isn't that nice?

I've also added a Clear Floats option to the Content menu which you can add to content if you want it to always go below any floated images.

For an example have a look at this test page.

Each new header in the example has a Clear Floats in front of it so that they go below the previous image.

This gives you a more flexible way to achieve what could previously really only be done using a whole load of Custom Content includelets.

How To Do This

When you insert an image in the WYSIWYG editor you'll see a Show caption tick box. Tick this before inserting the image. Once you return to the editor you'll now see a box under the image for the caption.

The caption can be left/right/centred to the image. And then you can left/right float the entire image/caption combination.

Please have a go with it and see how you get on, and send feedback to the appropriate channels :-)

Thanks

Joe

2: Re: Image Captions and Float Clearing (response to 1)
Posted by Kimble and Ellesborough Horticultural Society on 09/06/25 16:02

Hi Joe

This looks like a very useful feature.

However, I’m having problems creating content similar to your example.

I originally inserted just an image with caption option and the existing text was automatically aligned next to the new image.  See The Garden This Month page.

I then tried to add a second image but had problems entering the new text next to the image, both putting it in the right place and with the right spacing as the Preview showed a lot of white space below the first image.  My cursor seemed to have a mind of its own.

I couldn’t exit the image section to enter a header or normal content below it for the next image/text.

I tried using the float option thinking this might create a new section so I could control the image placement and associated text.  I’m not really sure exactly how this float option works.  Again, the Preview looked different to the back office.

I’m not sure what I am doing wrong but I don’t seem to be able to control the text placement and I’m not sure when I should use the float option.  Should I using this to create separate sections or should I be creating a series of images and associated text without needing to use the float option unless I want a header or other separate content?

Created a completely new page in the Test website but not much success.

Are you able to provide any pointers or show what the back office layout should look like with and without a header?

Laura

3: Re: Image Captions and Float Clearing (response to 2)
Posted by Joe Oldak on 11/06/25 21:52

If I get chance I'll put together a demo video of using the image captions with floated images. And also am happy to demo it at the next Voice User Group meeting, scheduled for 1st July.

Thanks

Joe