Skip to main content
Campus Resources

Media: Image

Max file size - 2 MB
Max image dimensions - 2400px X 1350px

File extensions allowed:
png, gif, jpg, jpeg, webp

Images allow for a more rich experience when visiting a websites. It can help get an idea across, break up the wall of text, or provide context to a story. Hydraulic allows images to be uploaded and styled in a variety of predetermined formats. This allows for consistency across all our sites and a great user experience for the client.

However, it is important to remember accessibility when using images. Images should add to the content and not be the content. For users who are using screen readers or have a visual impairment, images used as content may not be helpful. When uploading an image, editors are required to provide Alternative Text which will be read or displayed when using software such as screen readers. It is thus very important to give clues as to what the image is to those users. This does not need to be a description of the entire image but just enough so they do not miss out on any content.

For example, if a banner is displayed with lots of graphics and message reading Welcome to Our Site, the alt text could be just Welcome to Our Site and does not need to describe that background is pink with purple swirls. Less is more when it comes to describing images. Remember whatever is written there will be read out loud by a screen reader.

Focal Point

Focal point is a feature in Drupal that allows you to specify the most important part of an image, so that it is always displayed prominently when the image is resized or cropped.

To use focal point in Drupal, you will need to have the appropriate permissions to edit images and set the focal point. If you have these permissions, you can set the focal point for an image by following these steps:

  1. Log in to your Drupal site as an administrator or content editor.
  2. Find the image you want to set the focal point for in the list on the media overview page, and click the "Edit" link next to it. This will take you to the Edit media page for the image.
  3. Scroll down to the Focal point section of the page.
  4. Click on the image to set the focal point. A crosshair will appear on the image, indicating the focal point. You can move the crosshair to any position on the image by dragging it.
  5. Click the Save button to save the changes. The focal point will now be set for the image.

When the image is displayed on your site, it will be automatically cropped and resized to ensure that the focal point is always displayed prominently. For example, if the focal point is set to the center of the image, the center of the image will always be displayed, even if the image is resized to a smaller size.

Image Preview

Note: See Image Styles for more information

Image preview is a feature in Drupal that allows you to view a thumbnail of an image before it is uploaded to your site. This can be useful for a variety of purposes, such as:

  • Checking that the image is the correct one before uploading it.
  • Seeing how the image will look on your site before uploading it.
  • Checking the quality of the image before uploading it.

To use image preview in Drupal, you will need to have the appropriate permissions to upload images and view image previews. If you have these permissions, you can view an image preview by following these steps:

  1. Log in to your Drupal site as an administrator or content editor.
  2. Find the image you want to view a preview of on your computer, and select it.
  3. Drag the image from your computer and drop it onto the Drop files here area on the media overview page, or click the Choose files button and select the image from your computer using the file picker.
  4. The image preview will be displayed in a thumbnail on the media overview page. You can view the full-size image by clicking on the thumbnail.

It's important to note that image preview is only available for images that are supported by your browser. Some older browsers may not support image preview, or may only support a limited number of image formats. In these cases, you may not be able to view a preview of the image before uploading it.