AGNR Groups

Web Groups for the College of Agriculture &
Natural Resources and Affiliates

Using Image Fields

Image fields may have different names ("Main image" and "Images" are a few), but they all work in a similar way.

Uploading an Image

Click the "Browse" button in or next to the image field (in Chrome, the button says "Choose file").

A new window will open with the image selection dialog. Choose an image from your hard drive.

Once the image has been selected, click the "Upload" button.

image upload field

Using the File Browser

As an alternative to uploading a new image, you can choose one that's already on the server. (This option is not available on all image fields or on all sites)

To do this, click "Open File Browser" above the image upload field.

Open File Browser link highlighted above the Image field

Clicking the Browse link will open the file browser (in Drupal, this browser is known as IMCE, though you probably will not run across the name anywhere else). From here, you can navigate to any folder (on the left) and select any image (on the right.)

When you’ve clicked on the image you want to use, click “Insert File.” For more ways to use the File Browser (including uploading images and creating folders), see "Using the File Browser".

Insert link highlighted near the top of a screenshot of the file browser

You will be taken back to the edit form.

Once an image has been uploaded, you will see some new fields to provide more information about the image: Alternate Text is available on every image field, and Focus Rectangle and Crop Rectangle are only on certain content types.

Alternate Text

Alternate Text (sometimes shortened to alt text) should always be added for every image, as it is essential for making the website accessible for visitors with disabilities. Alt text describes the image for people who can’t see it. In this field, describe what can be seen in the image in the most literal way possible. People who can see the image will not see the alt text. Read more about alt text.

Sample of an image with descriptive text in alternate text field

Title

Different from Alt Text, the Title provides extra information beyond what can be seen in the image. The title becomes visible when you mouse over the image. A common use of the title field is to add a photo credit.

Sample of image with descriptive text in Alt text field and a photo credit in Title field.

Focal Points

The focal point is the most important part of the image—the part that should never get cropped out.
The focal point is marked with small crosshairs on the preview image.

You can click anywhere on the preview to move the focal point to that spot. Click and drag is also possible, but it works less reliably.

Arrow pointing to the focal point crosshairs on an uploaded image preview

Click “Image Preview” to open up a new tab where you can see examples of how the image will look at various sizes, if you choose the selected focal point.

Arrow pointing to the image preview link below an uploaded image preview