• Queen Mary University of London
  • Barts Health NHS

Unpublished test page

Images can be styled to appear on the left

Here's some text which will be wrapped around an image. First we start on a clear paragraph, with the cursor at the far left.  From the "Format" drop down above, select "Div".  You should then see a box with a dotted outline withing the WYSIWYG field. Ensuring the cursor is within this div select "Image left"/"Image right" depending on where you'd like to float your image.  This should reduce the size of the box.  Ensuring the cursor is still within the box, now click on the image icon and add an image as usual, giving captions etc if necessary.  If you create a div box on a new line, then add the styling, you can then drag a previously inserted image into it.

Heading 2

Images can also be styled to appear on the right by selecting image right on the "style" dropdown

If you would like to associate a block of text with an image and have clear distinction between that and further images and text, enter a few returns and test the spacing by saving, as shown with the space above this text.  There is an element of trial and error so leave it unpublished until you're happy with it.  

Heading 4

An image inserted after a no wrap heading

A cleaner way to have a distinction is to insert a subheading with a style implemented to enforce a break.  To do this, place your subheading on a new line, select it with your cursor, then select the heading format you require.  Then with the heading still selected, apply the "No wrap" option from the "Styles" drop down.  You can then add images and text beneath this heading and there will be a clear break between this area and paragraphs further up the page.