Adding Images to Your Pages

Images stored on your computer/file share can be added to your pages using the CKEditor toolbar and Drupal's File Browser.

  1. Place the cursor at the beginning of a paragraph. In most cases it's best to insert images at the left edge of the editing window, even if you want the image to be centered or right-aligned.
    Place the cursor at the beginning of a paragraph, at the left edge of the editing window.
  2. Click the Image button in the CKEditor toolbar. The Image Properties dialog box will open.
    Image button
  3. Click Browse Server.
  4. Navigate to the folder where you want to store the image by clicking on the folder names in the Navigation panel. The name of the folder you have selected will appear in bold text in the Navigation panel.
    Select a folder to store the image
    1. Use the Directory button to create new sub-folders as needed to keep your files organized neatly.
    2. Once an image has been stored in a folder, it cannot be moved. It can only be deleted from its current folder and uploaded to a new folder.
  5. Click the Upload button. A dialog box will appear.
    Upload button is in the upper left corner
  6. Click the Browse button in the dialog box.
    Click the browse button
  7. Navigate to the image on your computer/file share and select the image. Double click the image or click the Open button.
  8. Click the Upload button in the dialog box.
    With the file chosen, click the Upload button
    The file will be uploaded and added to the list of files in the main panel of the page. Blue highlighting will indicate the file is selected and a preview of the image will appear in the bottom panel.
    1. Optionally, click the Resize button to resize the image to different dimensions.
  9. Do one of the following to select the image for use in your page:
    1. Click the Insert file button.
      Insert the image via Insert button
    2. Or double-click on the image's filename in the main panel.
    3. Or click on the image preview in the bottom panel.
  10. In the Image Properties dialog box, add Alternative Text if the image communicates meaningful content to the page. (Leave blank if the image is purely decorative.) Alternative text is used in the following scenarios:
    1. It is read aloud in place of the image for visually-impaired visitors browsing the page with screen reader software.
    2. It is indexed by search engines.
    3. It is displayed to website visitors who are browsing the page with images turned off.
    4. It is displayed by some older browsers as a tooltip.
      Setting Alternative Text and optional image properties
  11. Optionally, set additional attributes for the image:
    1. Width & Height (in pixels): Changes the dimensions at which the image is displayed, but not the image's file size.
    2. Border (in pixels): Adds a visible border on all sides of the image.
    3. HSpace (in pixels): Adds a margin of space to the left and right edges of the image.
    4. VSpace (in pixels): Adds a margin of space to the top and bottom edges of the image.
    5. Alignment: Controls whether the image aligns itself with the left or right side of the page.
  12. Click the OK button.
  13. If you need to change Image Properties later, right-click on the image and select Image Properties.
    Right-click or double-click to change Image Properties

Tags: