« 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:
Only use the first two fields to add your image.
- Image URL: Images are files that need to exist on the server before they can be rendered in the page. This field is used to tell the page where the image file is located. If the image isn't already on the server, or if you need to find it, you will use the IMCE icon () just following the Image URL field to locate the image file (or upload it). This icon will open a new wizard (described below), and once you select an image through this wizard it will automatically fill in the Image URL field for you.
- Image Description: This field is for the Alt Text for your image field. As described at the end of Add/edit key presentational images, this field should never be left blank.
Once these two fields have been filled out, click Insert to add your image to the body text.
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. The Insert button will change to Update for existing images.
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.
Using IMCE to Upload, Locate and Manage Image Files
IMCE is a file management tool. You enter the IMCE tool when you click on this icon: .
The IMCE browser looks like a classic computer file system. You can navigate through the directories by clicking on them. Selecting an image in the right hand column will show you what that image looks like, and make it the active file.
Clicking Insert File, Resize, or Delete when a file is selected will perform the described action. Insert File adds the file to your Image wizard or field.
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.
To add a new file, click Upload at the top left. You will then be asked to browse for the desired file on your personal computer, and upload it to the server. It will upload into whichever directory (folder) you have activated when you click Upload.