How to wrap text around an image in Wagtail

0
votes

The Wagtail documentation on Inserting images and videos in a page explicitly states

Half-width left/right aligned: Inserts the image at half the width of the text area. If inserted in a block of text, the text will wrap around the image

How does one implement this?

I have created a page with an Rich Text block and inserted an image in the text (left aligned)

enter image description here

When I publish the page it is not wrapped enter image description here

What can I do to fix this in Wagtail without the need for an html/css solution?

1
wagtail
Why do you want to avoid an html/css solution? – gasman
Are you implying that Wagtail does NOT do the wrap as suggested by the docs? I'm not sure that I would know how to tell where in the page the user wanted the image to appear – Psionman

1 Answers

1
votes

You need to add a CSS rule such as img.left {float: left}. As per the developer docs on images embedded in rich text:

The CSS classes added to images do not come with any accompanying stylesheets, or inline styles. e.g. the left class will do nothing, by default. The developer is expected to add these classes to their front end CSS files, to define exactly what they want left, right or full-width to mean.

In general, Wagtail leaves front-end styling up to the developer. This detail isn't covered in the page of documentation you looked at because that's part of the editor's manual, intended to be given to non-technical users after the development side is complete.