ÈÕ±¾avÊÓƵ

Steps to Add an Image

1. Log in to Drupal via the "For Faculty and Staff" section in the footer, click "My Account.".
2. Go into the page you'd like to add your image by clicking Edit in the top right hand corner of the page.
3. Add your image

   1. 

      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.

   2. 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.
4. Add or select media 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. 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.

   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. You can also sort them by the category, newest, name (A-Z) and name (Z-A).

      

5. Select your image. Click Insert selected.

6. Click on the image to view the photo toolbar.

   

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).

7. Add the rest of your content and then save the paragraph.
8. 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!

1. Log in to Drupal via the "For Faculty and Staff" section in the footer, click "My Account.".
2. 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.
3. Add your Video

   1. 

      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.

   2. 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.
4. On the left side choose Remote Video
5. Copy the share URL from your video (YouTube) or you can find a video that was already embedded from other users in the library.
6. Select your video. Click Insert Selected.
7. Your video will now show and thumbnail and be outlined in the editor or shown in the paragraph component.
   1. Video toolbar within the text editor (icons described in order from left to right)
      1. 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"
      2. Link: Media Link
      3. Rich Text Editor: Always set to Medium
      4. Wrapping: Choose how you want the image and text to wrap around each other (four options).
8. Add the rest of your content and then save the paragraph.
9. Saving the page: From dropdown next to "Change to:" choose one of the following statuses:
   1. Ready to Review: If it is ready to be published.
   2. In Progress: If you want to hold on publishing or are still editing.

Captions

To comply with WCAG accessibility laws and SDState 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 SDState Web Content Governance.

Media Categories

• Icon: Used exclusively by Web Services. These are small graphic icons uploaded by Web Services and used as part of the eyebrow text field or the statistics paragraph component.
• Photos: General photography including images of student life, campus locations, events, research and other everyday activities.
• Banners: Images that are not photographs and used as posters, social media banners, advertisements or instructional graphics.
• Portraits: Used for professional or profile photos of individuals. For example, portraits featured on faculty or staff web profile pages.
• SDAM Artwork: Reserved for the South Dakota Art Museum to categorize and upload artwork images from their collections.
• Videos: For video content uploaded to the media library, including remotely hosted videos such as those linked from YouTube.
• ÈÕ±¾avÊÓƵ Logos: Applied only to media that includes official SDState logos such as departmental or campus-affiliated entity logos.
• Other Logos: For logos not affiliated with SDState, including those of sponsors, partners or other external organizations.
• Web Header and Footer: Used exclusively by Web Services to categorize and assign logos or graphics that appear in website headers and footers.