There is a different process for uploading images versus gallery images in Drupal.


  • Images: Photographs of people, places, and of student art work that will not be featured in the main part of a Gallery Content Type on a web page.

  • Gallery Images: The "Media Images" that are featured in a Gallery on a web page that the user will swipe through, such as examples of student work, with a caption beneath each photo or image.  Exception: The Thumbnail Image for the Gallery, as well as the Background Image for the Gallery should be uploaded "Images," not "Gallery Images."


Additionally, once you have properly saved your image or gallery image file, there are 2 ways to upload it: 


  1. Through the Media Section, before you start working on a page, gallery, or other content type; OR

  2. While you are working on a page or within a content type. 


IMPORTANT

Before you upload any images, please read these 2 related articles first:


Uploading "Regular" Images (Not "Gallery" Images)


Here are the 2 ways to upload an Image—in advance, or while you are working in the Content Type. See section below for uploading Gallery Images.


Regular Images Option #1: Upload in Advance, through the Media Section of Drupal


Follow these instructions to upload  images that will not be featured as the main part of a Gallery. 


  1. Go to Content > Media > +Add media

    screenshot add media
  2. Then, choose "Image."



  3. Select the BROWSE/CHOOSE FILE button to find the optimized image on your computer. Acceptable files are .png, .jpg, .gif, and .jpeg.

    choose file button

  4. Fill in the required ALTERNATIVE TEXT (Alt Text) field that appears once you upload the image. This is important for making sure our website is accessible to people with vision issues who may be using a screen reader. Put descriptive words in the alt text. You do not need dashes between words here. Spaces are fine in this field.

    You don’t have to include “picture” or “image” in the alt text—screen readers will know it is an image.

    Read this related article on how to create the best alt text.

    EXAMPLE:

    Image field with alt text populated
  5. Fill in the NAME field (also called the "Media Name" field in some places.)

    The words you use in the Name field will help you, and other web editors, find images when searching Drupal's photo library. In the above example, the Name field contains "circle-students-brattle-campus.jpg" which means anyone searching in the Drupal Image Library for "students" or "Brattle" will see this image in their results.

  6. SAVE. You are now ready to select this image when you are editing a web page, another Content Type, or Pattern.


Regular Images Option 2: Upload While Working in a Content Type


If you're working in a Content Type or Pattern that requires an Image, in many instances, you can upload it to the Drupal Library right then and there.


For example, say you want to add a image to a "More Content - Collapsed Content" block. After you optimize and save the image on your desktop, you'd create the asset in Drupal. 


  1. Content > +Add Content > "More Content - Collapsed Content."

  2. Populate the Title field, Title text, Body, and Collapsed Content field.

  3. In the Image area, choose "Create Image."

  4. Hit the "Browse" button to find the image on your computer.

    browse button
    In this example, you can see that the name of my photo is called matryoshka-nesting-dolls.


    red and yellow matryoshka dolls

  5. Populate the required Alternative Text field. The Alt Text is what a screen reader will read to a visually-impaired user, and is important for accessibility. Fill out this field with words that describe the image. In this example, we've added "a bunch of red and yellow Matryoshka nesting dolls" to the alt text field.

    Matryoshka nesting dolls with alt text

  6. Complete the Name field. The text you use here will help you and other web editors find this image later, in the Drupal Library, if needed. For example, if a web editor were to search "dolls", it would appear in the results.

  7. Click the blue "Select Entities" button.


  8. Save and Publish the Content Block. 


--------------------------------------------------------------------------------------------------------------------


Uploading Gallery Images


Here are the 2 ways to upload a Gallery Image—in advance, or while you are working in the actual Gallery. 


Follow these steps for any images that will be featured in the main part of a Gallery, except for the Gallery Background or Gallery Thumbnail. These images should be saved as IMAGES, as described above.


Gallery Images Option #1: Upload in Advance, through the Media Section of Drupal


  1. Make sure your images are optimized and saved properly, per the instructions in this related article.

  2. Go to Content > Media tab > + Add Media.

    sceenshot of the add media button circled in red


  3. Choose "Gallery Image."


  4. Type in a Name (required). This is how you'll find the image in Drupal. Feel Free to copy the file name, dashes and all, and paste it in the Name field.

  5. Add a Caption about image (not to exceed 255 characters, including spaces), the Student's Name if applicable, then hit the Browse button to get the optimized image from your computer.

    screenshot of blank add gallery



  6. As soon as you add the image in the "Browse" field, an empty Alternative Text box will appear. Fill in this box with words that describe the image or video. This is what a screen reader will read to a visually-impaired user, and is important for accessibility. (Again, review best practices on alt text in this related article.)

  7. For videos, you’ll also need to put the URL to the video in the Video field. For example, the URL to YouTube or Vimeo.  

    Example of a completed Gallery Image on the back end of Drupal:


  8. Save.

  9. Repeat the process for each image or video that will be in the Gallery.


Gallery Images Option #2: Upload While You are Working in a Content Type


You can also upload Gallery Images as your are creating the Gallery.

  1. In the Media section of the Gallery, select "Create Gallery Image". 

  2. Then, select "Browse" to upload a photo or image from your computer. Make sure that the image is optimized for search, per the instructions in this related article.

    red circle around "create gallery image" tab

  3. Click on "Select files."

  4. Click on "Edit" so you can add a Caption (no more than 255 characters, including spaces), the Student's Name, and populate the Alternative Text field with a clear description of what you can see in the image. This is what a screen reader will read to a visually-impaired user, and is important for accessibility.

    screenshot backend of adding gallery image


  5. Add the URL to the Video field, if this is a video. (For example, to YouTube or Vimeo.)

  6. Save. If the system does not allow you to save, and you get an error code, this is probably because you chose a gallery image when you should have chosen a regular image, or vice versa. The system won't tell you where you went wrong-you'll have to figure it out by trial and error.

    Remember, in a Gallery, the Background and Thumbnail Images must be Image files, and the Media field must be populated with Gallery Images.