« Back to the Table of Contents
Sometimes it is nice to insert an image into the middle of the main text content in a page. This helps to break up paragraphs and make a page more interesting to the reader. These types of images are often called inline images because they are placed inline with text.
To insert an image into the body area:
Step 1: Place your image
Place your cursor where you want the top of the image to start by clicking once in the body field.
Step 2: Link up your image file
Click the Image icon (
) in the visual editor.
This will open a pop up window which contains the IMCE, a file management tool:
Select an image or upload a new image to add it to your library of images. Click on Upload to insert a new image. Then click on Add image.
Browse for the image from your computer and click Select. If you need to resize the image before inserting, click on Resize and enter in the new width and height in pixels. Note that if you put in one dimension (for example the width) you can then click in the field for height and it will automatically plug in the dimension with the same aspect ratio for the height. If you would like to create a copy make sure Create a copy is checked.
Other options in the pop up is to create a folder (New folder button) or to delete an image (Delete button).
Deleting a file will remove it from the server. Any other references to that file will then break, as the file will no longer exist at the referenced location.
Alignment will be set using Styles (see below). You can edit an existing image the same way that you would add a new image. Simply click on the image, then click the Image icon () to open the wizard. Click Select to insert the image again or you can click on Resize to change the dimensions. Check Create a copy if you don't want to change the dimensions of the original image. If you don't check Create a copy the dimensions will change on the existing image wherever it may appear on your site.
Step 3: Style your image
If you want your image to float to the left or the right, and have the text wrap around it, use the Styles dropdown menu (
) to apply the desired alignment.
Select the image (after it has been embedded in your body content) by clicking on it. Then choose either Align Left or Align Right to align the image.
The reason not to use the Alignment field in the original image wizard is because this field uses Drupal out of the Box styling, and does not respect the changes needed for a responsive site. The Styles dropdown menu contains styles that have been specifically created for LibrarySite, and may also contain any custom styles you have requested.
