Adding and Cropping Images in Drupal 10

Cropping is an important step when attaching images to a piece of content. Cropping is the removal of parts of an image to improve framing, accentuate subject matter, or change aspect ratio. By default the system will automatically crop the image, but sometimes you will need to adjust the cropping. We provide a cropping tool on the Department Web Framework sites that allows you to upload full size images without having to crop them in advance.

Add an Image

  1. Click the Images tab and then click Add Media to open the media window.
  2. In the media window, you have two options:
    • To upload an image from your computer, click Choose File and follow the computer prompts to select an image. Then fill out the required fields and crop the image as needed (see below for instructions). Click Save.
    • To use an existing image from the website library, select an image from the list then click Insert Selected.
  3. Click the Image Display tab and select a layout option (learn more about the image layout options).

Note: Before uploading an image from your computer, make sure it has a human-readable filename so it’s easier to find in the future (e.g., grand_tetons_spring.jpg).

Crop an Image

  1. Click the Images tab and then access the cropping tool in one of two ways:
    • When uploading an image from your computer, the cropping tool appears in a new window after you have selected an image from your computer.
    • If the image has already been added, click the edit button (a round pencil icon) in the upper right area of the image.
  2. Select one of image style tabs (Large, Medium, etc)
    • Square is used on lists that show thumbnails, such as Recent News, as well as the Gallery image display option.
    • Other image styles correlate to the Image Display option selected for the post (learn more about the image layout options).
  3. Adjust the cropping by resizing or moving the crop area (the brighter area with a grid overlay).
    • Click Reset Crop to remove your changes and start over
  4. Select another image style tab and adjust the cropping, as needed.
  5. Click Save.