Drupal How To: Images, Documents and Videos (Media Library)

Table of Contents 1. About the Media Library 2. Media Tags 3. Accessing the Media Library 4. Finding an Existing Media Asset in the Library 5. Adding Media to the Library 6. Appendix: Screenshots

1. About the Media Library

The media library houses images, documents, and videos uploaded by the Office of Communications and Marketing and other Drupal users which are available for use by all users across the GC site. It also includes a pre-loaded library of icons for use in specific components/fields.

You can browse, filter or search for existing assets in the library, upload new assets, add or edit details associated with existing assets, or replace a file with a newer version.

Media assets must be added to the library before they can be inserted in pages or other content items.

Please note: the media library includes an option for “Tweet” which is still in development and not currently functional.

2. Media Tags

In place of a more-traditional folder system, the Drupal media library uses tags to associate individual assets with topics, programs/departments, and functions. Since the library itself is a single repository of all assets uploaded to the GC site, these tags are critical to keeping the library organized and allowing users to filter down to only the assets relevant to their area or need.

• Relevant media tags should be applied to every asset on upload. • Media tags can only be added to assets from within the media library.

• You can view a list of existing tags by navigating to Structure > Taxonomy > Media Tag in the Drupal menu bar. (see appendix for screenshot)

3. Accessing the Media Library

You can access the media library via the “Content” tab. (see appendix for screenshot)

1. Click in the toolbar to access parts of the site that are available to all users, then do one of the following:

a. Click , then click the tab.

b. Hover over , then click in the menu

c. Hover over , then hover over in

the menu, then click in the flyout menu

4. Finding an Existing Media Asset in the Library

There are multiple ways to find a particular piece of media within the repository using one or more of the following options.

1. Search for the specific asset using the “Media Name” field (either the full asset name or any word/string within the name)

2. Filter the list of assets using the available options: a. By type (Image, document, video, icon) b. By published status (published or unpublished) c. By media tag d. By author (ie. user who originally uploaded the asset)

Use the “Filter” button to apply your choices and refresh the list.

Combining search and/or filter options will return a more precise search result.

5. Adding Media to the Library

Although it is technically possible to add assets to the library from within the various page and content editors in Drupal, you will not be able to apply media tags within this interface. For that reason we urge all users to add new assets via the main media library only.

To add any media asset to the library:

1. Follow the instructions in section 3 above “Accessing the Media Library” to navigate to the media library page within Drupal

2. Click the button in the upper left corner of the screen 3. Select the type of media asset you would like to add, then follow the guidelines listed

below based on the type of asset you are adding. (see appendix for screenshot) 4. For all files, use the “Media Tags” field to add any and all relevant tags to the asset.

a. Begin typing the tag you’d like to select and the field will autocomplete with available matches. Click the correct tag to apply.

b. The autocomplete list will display a max of 10 matching terms; if you don’t see your desired term, try including more characters in your search, or use the full tag list under Structure > Taxonomy > Media Tags to find the term and copy/paste it into this field.

c. You can add multiple tags separated by commas

Please note that:

• Assets must be added one file at a time. • Files cannot be larger than 100 MB.

We recommend keeping the media library open in a separate tab whenever you are editing content in Drupal, so that you can easily add new assets as you go without the need to click back-and-forth between the library and other parts of the dashboard.

Adding Images (See appendix for screenshot)

1. Select after clicking the button. 2. Enter the name of your image file in the “Name” field

o Image files should be named as "descriptive-text-widthxheight", eg. "students-studying-600x400" or "graduate-center-exterior-1280x720".

o Please use full words and do not use abbreviations/acronyms. Include proper names for people, places, programs, etc. when appropriate.

3. Click “Browse” (or “Choose File”, depending on your browser) to select the image you would like to upload from your computer.

o Allowed file types are jpg, jpeg, png and gif. 4. Enter a brief description of the image in the “Alternative Text” field. (Field displays only

after an image file has been selected) o This is a requirement for accessibility compliance. When a person browses the

website using text to voice/screen readers or other assistive technologies the picture will be described using the alternative text.

o It is also the text that will be displayed if the browser is unable to load the image. 5. Enter any and all relevant tags in the “Media Tags” field. 6. When satisfied that everything is properly entered click “Save”.

Image Sizes

The following are the recommended minimum dimensions for images used in common components:

• Checkerboard: 1620x1240 • Listing: 810x1058 • Testimonial: 1260x1440 • Profiles (for headshots): 480x590 • WYSIWYG: 600x600 (recommended but not required)

Adding Documents (See appendix for screenshot)

1. Select after clicking the button. 2. Enter the name of your file in the “Name” field.

o PDFs and documents should be clearly named with the document title, eg. "Graduate-Center-Bulletin-2021" or "Linguistics-Program-Student-Handbook" or "Biology-Program-Thesis-Submission-Form".

o Please use full words and avoid abbreviations and acronyms. Do not include version numbers or unnecessary dates/initials.

3. Click “Browse” (or “Choose File”, depending on your browser) to select the file you would like to upload from your computer.

o Allowed file types are pdf, doc, docx and txt. It is recommended to convert documents to PDF for security reasons.

4. Optionally enter the document title in the “description” field o This will display only if/when a PDF link is added to a page/content item using

the “Insert Media” option in a WYSIWYG field. In most cases this can be left blank.

5. Enter any and all relevant tags in the “Media Tags” field. 6. When satisfied that everything is properly entered click “Save”.

Adding Videos (See appendix for screenshot)

1. Select (for videos from YouTube and Vimeo) OR (for videos from any other source) after clicking the

button. o It is recommended to use the Remote Video Embed option as much as possible.

2. Enter the video’s title in the “Name” field. o It is best to expand unusual acronyms in that field to aid in the search of the

video, once posted in the repository. 3. Copy and paste the video’s entire URL into the “Remote Video URL” field for Youtube

and Vimeo hosted videos OR the “Remote Video File” field for videos hosted on other websites.

4. Enter any and all relevant tags in the “Media Tags” field. 5. When satisfied that everything is properly entered click “Save”.

Appendix: Screenshots

Media Library

Media Tags

Add Media Item

Add Image

Add image (with sample image & alternative text)

Add Document

Add Remote Video Embed

Add Remote Video File