Add Media (Images and Videos)
Learn how to properly add images and embed videos on our site. Review the steps to understand what to do, how to write effective alt text and how to format your media so it displays correctly.
Steps to Add an Image
- Log in to Drupal via the "For Faculty and Staff" section in the footer, click "My Account.".
- Go into the page you'd like to add your image on to by clicking Edit in the top right hand corner of the page.
- Add your image
Text Editor Tool Bar Click in the content of the text editor where you want the photo, then click the Insert Media button (icon with an image and music notes) within the tool bar.
- If you're adding an image within a paragraph component (Cards, Image Promo, Sliders, or Gallery, etc.) you will find an option for it. The paragraph component will include a Media section with Add Media button.
- Add or select media already in the library.
- 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. Choose your image. Then you will be required to add alt text to any new image. Learn more about writing accessible alt text. Choose the corresponding category.
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. You can also sort them by the category, newest, name (A-Z) and name (Z-A).
Add or select media panel
- Select your image. Click Insert selected.
Click on the image to view the photo toolbar.
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, Landscape, Original Image)
- Note: Uploaded images within the text editor will display a yellow border below the image by default. To remove it, set the image to Original Image – No Border.
- Wrapping: Choose how you want the image and text to wrap around each other (four options).
- Add the rest of your content and then save the paragraph.
- 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.
Steps for Embedding a Video
Each video must include a transcription for accessibility and must be uploaded to the university's YouTube channel. You may also link to a YouTube video, but it must have captions. Videos cannot be embedded from Box, MyMedia, or other platforms!
- Log in to Drupal via the "For Faculty and Staff" section in the footer, click "My Account.".
- Go into the page you'd like to add your video on to by clicking Edit in the top right hand corner of the page.
- Add your Video
Text Editor Tool Bar In the body field, place the cursor and click where you want to embed the video, then click the Insert Media button (icon with an image and music notes) within the tool bar.
- If you're adding your video within a paragraph component (Cards, Image Promo, etc.) you will find an option for it. The paragraph component will include a Media section with Add Media button.
- On the left side choose Remote Video
- Copy the share URL from your video (YouTube) or you can find a video that was already embedded from other users in the library.
- Select your video. Click Insert Selected.
- Your video will now show and thumbnail and be outlined in the editor or shown in the paragraph component.
- Video toolbar within the text editor (icons described in order from left to right)
- Caption: Toggle on or off from here. This places a caption box underneath the video. Click on the box and type your caption in the field "Enter Media Caption"
- Link: Media Link
- Rich Text Editor: Always set to Medium
- Wrapping: Choose how you want the image and text to wrap around each other (four options).
- Video toolbar within the text editor (icons described in order from left to right)
- Add the rest of your content and then save the paragraph.
- 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.
Captions
To comply with WCAG accessibility laws and SDSU web content governance, all video must have captions and audio descriptions. Captions are needed to provide the audio content to people who are deaf or hard of hearing.
Note: Automatic captions are not accurate, therefore not compliant.
Resources:
- For more instructions, review SDSU Web Content Governance.
Additional Web Editing Resources
