Add Media within the Text Area

Your Stanford Site displays images, files, and other types of media.

Learn about all of the media options available on Stanford Sites.

Displaying media

Media can be displayed from any text area with HTML text format, such as on a Basic Page.

1. Within the Text Area, click on the add media button:
   
   This will cause a popup to appear, which will display all uploaded media, and provide you the option to upload your own new media on the site:
   
2. Select the type of media you would like to insert from the top-left tab menu:
   • Image
   • Embeddable
   • File
   • Google Form
   • Video
     
3. Add media from the existing library of media on your site
   • Select any of the media already uploaded to your site, displayed in the popup below the “Add file” option. (Please note, you may need to scroll down inside the “Add or select media” popup.)
     
4. Once you’ve selected the media, click on the Insert selected button:
   
5. Alternatively, to add your own images, locate your image on your computer drive. Once you find the image you would like to upload
   • You can drag and drop the image within the dotted lined box.
   • Or, you can click Select files to find and upload a locally stored image.
     
6. After the image uploads, click Upload and Continue. 
7. Next you'll be prompted to add alternative text to describe your image.

If this is an image of text or conveys important information, add that as Alternative text. However, if this is simply a decorative image, leave the Alternative text blank. That's the equivalent of alt="".

Learn more about alternative text

1. Select Save and insert. 
   *To style the image, see How do I style the media.
2. Click Save to view the published page.

Learn about Styling media within Text Area  

Adding Captions and Alt Text to Media:

Once you add an image you’ll want to explain the image. This is important for people who cannot see the screen such as our vision-impaired users. You can find more information regarding best practices for accessibility within our Accessibility section.

Using the caption to explain your image will help all people understand the purpose of the image. Alternatively, you can use alternative text or "Alt text" to explain the image for just the people using screen readers and other assistive technology.

Don't use the same text for both caption and alternative text fields as it will just be announced twice to our screen reader users.  

1. Edit the page you would like to update.
2. Click the Edit button to open the Text Area section. 
3. Navigate to the Media item and click the Edit Media button, located at the top of the Media: 
   
4. The following pop up should appear: 
   
5. Add your alternative text in the provided field. If this image is decorative or sufficiently described by your caption, leave the field blank.
   Learn more about using alternative text with images
6. To add a caption, check the box next to the Caption
7. Save. The image should now appear in the Text Area. 

Best Practices for using Alt Text

Using alternative text based on context

Alternative text is used to explain media when information, such as in an image, is available visually but not screen reader users. Because the purpose of an image or other media may change base on context, the associated alternative text will also need to change.

Alternative text in your Stanford Site is often associated with an individual image. If you reuse that same image elsewhere in your site, the associated alternative text may not be appropriate for that context. In this case it is necessary to upload a new copy of the image and give it the appropriate alternative text.

Learn more about context for alternative text

Inspecting alternative text

Once you've placed an image on a page, there are several ways to view the associated alternative text. 

In browsers such as Firefox and Chrome, you can:

1. Click the right mouse button on your image to bring up a menu. 
2. Select the Inspect menu item to bring up DevTools. The DevTools will display the HTML structure of the current page.

The alternative text will be included in or near the image. Look for alt="<alternative text>": 

<img src="media/ellen-ochoa.jpg" alt="example image" width="200">

Troubleshooting the display of Alt Text

Missing alt="" in HTML

Earlier versions of media displayed the decorative alternative text incorrectly. This bug has been fixed. However, if the image was added before the change, it is necessary to edit and save the media image for it to pick up the change.  

Depending on the browser, the expected alternative text for decorative image will be either alt="" or simply alt. That is: 

<img src="media/person-profile-image.jpg" alt="">

or 

<img src="media/person-profile-image.jpg" alt>