Skip to main content
Drupal Documentation for SCLS

Main navigation

  • Home
  • How-To Info for Library Staff
  • Drupal 9
  • Help

Breadcrumb

  1. Home
  2. How-To Info for Library Staff

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.
    Image
    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
    Image button
  3. Click Browse Server.
    Image
  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.
    Image
    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.
    Image
    Upload button is in the upper left corner
  6. Click the Browse button in the dialog box.
    Image
    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.
    Image
    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.
      Image
      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.
      Image
      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.
    Image
    Right-click or double-click to change Image Properties
  • Avoid copying and pasting images from clipboard
  • Images with Clickable Links

Book traversal links for Adding Images to Your Pages

  • Checklist for Email Address Changes on Drupal Sites
  • Up
  • Avoid copying and pasting images from clipboard
  • Managing Accounts for Your Drupal Site
  • Adding Images to Your Pages
    • Avoid copying and pasting images from clipboard
    • Images with Clickable Links
  • Creating and Editing Website Content
  • Uploading Files
  • Changing Menu Links
  • Creating Photo Albums & Galleries
  • Folders, Directories, and File Structure
  • Managing Sidebar Blocks
  • Paths and URL Aliases
  • Configuring Site Information
  • Developer Permissions
  • Homepage Variations
  • Events/Programs with repeating dates
  • Registration for Events/Programs
  • What is Cron?
  • Avoid mixed content warnings (HTTPS/HTTP)
  • LINKcat Title List (Experimental)
  • Performance settings: Cache pages for anonymous users
  • Slick Carousel

Tags

accordion (1)
account (2)
anchors (1)
blocks (1)
cache (1)
carousel (2)
CKEditor (4)
configuration (1)
content types (1)
CSS (1)
disable rich-text (1)
Drupal 9 (18)
email (2)
embed code (1)
Entity Registration (5)
events (6)
file browser (2)
files (2)
files media (1)
folders (1)
formatting (2)
front page (3)
Google Analytics (1)
headings (2)
HTML (1)
iframe (2)
images (7)
imce (3)
Layout Builder (3)
link a pdf (1)
links (7)
login (1)
media (2)
menus (3)
nodes (1)
openid (1)
paste as plain text (1)
paths (4)
performance (1)
photo albums (1)
photo galleries (1)
redirects (3)
registration (5)
remove format (1)
repeat dates (2)
reports (1)
revisions (1)
sidebars (1)
site name (1)
slogan (1)
source (1)
sticky (2)
text formats (1)
themes (1)
toolbar (2)
URL aliases (4)
Webform (2)
widget (1)