To add an image to the body field, click the image icon:

In the dialog box click the file browser icon:

Next, click the "upload" button to upload an image from your desktop. You can also use any existing image displayed on the right. After you have uploaded your image, click the "insert file" button to insert the image into the body field.

After the image path is displayed in the "Image URL" field, enter a description of the image in the "Image Description" field. This will provide alternative text to those who can not see the image.

You can also resize the image by entering dimensions in the dimensions field.

Finally, click "insert" at the bottom of the dialog box. Your image should be displayed in the body field.


The image can be resized by right clicking on the image and selecting "Insert/Edit image". Click the "Appearance" tab and enter the dimensions in the fields. Make sure "Constrain Proportions" is checked. Finally, click the update button at the bottom of the dialog box.


To align the image to the left or the right of the copy, right click on the image and select "Insert/edit image". Click the "Appearance" tab. In the "class" drop down, select "Image left" or "Image right". Finally, click the update button at the bottom of the dialog box. 

Adding the responsive image class

The images in the body field need to automatically resize to fit the users screen size. To do this the "responsive-img" class needs to be added to the image element. To add the class, click the "HTML" button in the toolbar. Find the image in the code and add the class to the class attribute. After the class is added the code should look like:

<img src="/sites/default/files/test.jpg" width="500" height="500" class="responsive-img">

If the class attribute already exists, add the responsive-img class to the end. 

<img src="/sites/default/files/test.jpg" width="500" height="500" class="some-class responsive-img">

Click the update button to save the changes.

If you prefer the webteam to do this, please submit a web request.