à£à£Ö±²¥Ðã

Skip to main content

Media Module

Steps to Add a Photo

These steps have been updated for Drupal 10. The video was made in a previous version.

  1. Log in to Drupal by going to Tools & Quick Links, My Account (Drupal).
  2. Find the page to edit and click Edit in the top right hand corner of the page.
  3. Click in the content of the text editor where you want the photo, then click the Media Library button within the menu bar.
Media library button
  1. Load a new photo or find one already in the library.
    1. New Photo to upload: In the Add or select media panel, upload a file from your computer with the Add file field. Click on "Choose file" and find where the image is saved on your computer. Make sure your file is under 1 MB. You will be required to add alt text to any new image. Learn more about writing accessible alt text
    2. Find an image already loaded: The grid and table view displays the most recently loaded images first. To search for an image, type the name of the file that was uploaded under in the "Name" field. Click Apply Filters. Check the left corner box by the image you wish to use. 
Add or select media pane
  1. Select your image. Click Insert selected.
  2. Click on the image to view the photo toolbar.
Screenshot showing the new image toolbar editor in Drupal 10.
Picture Caption Text
  • Image toolbar (icons described in order from left to right)
    • Caption: Toggle on or off from here. This places a caption box underneath the picture. Click on the box and type your caption in the field "Enter Media Caption"
    • Link: Link the picture to another page or site.
    • Alternative Text: This is required on all images when they are loaded. You can see the default text and change it for this instance if needed.
    • Rich Text Editor: From the dropdown list, you can choose the size to display. (small, medium, large)
    • Wrapping: Choose how you want the image and text to wrap around each other.
  1. Saving the page: From dropdown next to "Change to:" choose one of the following statuses:
    • Ready to Review: If it is ready to be published.
    • In progress: If you want to hold on publishing or are still editing.