Media

Hydraulic comes with a multimedia content management system within Drupal which we use for different types of media. This included images, videos, and files which can be added and managed on a website. The media system offers features like multimedia embedding, media library management, and media handling capabilities that make it easy to add and manage media content.

Using media allows the editor the ability to manage all media from a centralized location. By utilizing media, we have the ability to reuse media across many pieces of content. Updating media is simple as well, as the editor can update the original media item and it will update every instance of that item automatically.

Media Overview

The media overview in Drupal is a page that lists all the media items that have been added to your site. A media item is a piece of content that represents a file, such as an image, external media, or document.

On the media overview page, you can view the following information for each media item:

  • Thumbnail image of the media item
  • Title of the media item
  • Type of media item (image, external media, file)
  • Date the media item was created
  • Date the media item was last changed
  • Published status of the media
  • Author who uploaded the media

The media overview page can be used to manage your media items by performing tasks such as adding, editing existing, publishing or unpublishing, and deleting media items. To perform these tasks, you will need to have the appropriate permissions.

Media allows for content o be changed out when needed quickly and easily without the need to upload multiple copies of the same content. This will also automatically update all instances of the media across the site.

Bulk operations are also available, allowing multiple media items to be updated at one. Simply select the media items you want to affect, choose the appropriate action from the dropdown menu, and then click the Apply button.

Add Media Item

To add media (such as images, external media, or documents) to your Drupal site, you will need to have the appropriate permissions to create and upload media. If you have these permissions, you can add media by following these steps:
  1. Log in to your Drupal site as an administrator or content editor.
  2. Click on the Media button in the admin toolbar
  3. Click on the Add media button on the media overview page.
  4. Select the type of media you want to add.
    1. External Media - An external video or content can be embedded on your site using an iframe.
    2. File - A file that is not one of the other types, such as a document or an image that is not supported by Drupal's built-in image tools.
    3. Image - An image that can be displayed on your site and manipulated using Drupal's built-in image tools.
  5. Give the Media Item a Name
    1. This will be used to search for media once it is uploaded

External Media

  1. Provide a Remote URL
    1. Allowed services Flickr, SlideShare, TED, Vimeo, X / Twitter, YouTube
  2. Switch on or off the Published field
  3. Ignore Revision information
  4. Click Save

File

  1. Upload a File
    1. Allowed formats (txt, doc, docx, pdf)
    2. File size limit of 5 MB
  2. Switch on or off the Published field
  3. Ignore Revision information
  4. Click Save

Image

  1. Upload an Image
    1. Allowed formats (png, gif, jpg, jpeg, webp)
    2. File size limit of 2 MB
  2. Place the Focal Point for where the center of the image should be when adjusted for the different available image styles
    1. Preview to see the media in the different image styles and determine if Focal Point is in the correct position
  3. Provide Alternative text for the image which will be used to describe the image for users who use screen reader technology
  4. Switch on or off the Published field
  5. Ignore Revision information
  6. Click Save

Instructions start from within a component on a piece of content.

Add Media Button

  1. Select the image(s) you want to add to the text by searching or scrolling
    1. Checkbox indicated the item has been selected
  2. Click on Insert selected

Body (WYSIWYG Editor)

  1. Click on the Insert Media button in the text editor tools. This will open the Insert media dialog box
  2. Select the media item you wish to add to the text by searching or scrolling
    1. Only one media item can be selected at a time
    2. Checkbox indicated the item has been selected
  3. Click on Insert selected
  4. Additional options will show up above or below the media item when selected
    1. Caption On/Off
    2. Link media
    3. Override alternative text
    4. View mode
    5. Alignment
  5. Caption can be entered below the media