Drupal: Add an Image
Images must not contain text, unless the text is short enough that it can also fit into the alt text field. If an image does contain fewer than 150 characters of text, then all of the text must be added into the alt text for that image. Reason: Text included within an image cannot be read by search engines or by the screen readers used by visually-impaired visitors.
Do not copy and paste images into a web page. Please follow the steps provided below to upload each image to your website folder, then add it to the web page.
All images added to the website should be JPG, PNG, or WEBP. Please do not upload HEIC images (the image format commonly used by iPhones). Please use an image converter like https://cloudconvert.com/heic-to-jpg before uploading images.
Step-by-step guide
In the editor, first select a space to insert your image.
In the toolbar, click the Image button:
You may either browse the server, or paste a web link to get your picture.
To choose an image on the server or to upload a new image from your computer to the web page you are editing, click the magnifiying glass icon on the right to Open File Browser.The File Manager window appears. Be sure that your department folder is selected in the left folder list. If the image you want to add to the web page is already uploaded to your files list, just double-click it to select it, or click Select.
To upload a new image, click Upload in the upper left of the File Manager, then click + Add file.
Select the files you want to upload from your computer and click Select or Choose (depending on your OS). The file names will appear in the Upload file window.
Double-click on the file name to choose it, as shown in Step 4.
REQUIRED Steps to Alternative Text to all Images:
Click on the Add Missing Alternative Text message at the bottom of the image or click on the Eye icon in the image editing toolbar, above the image.
Purpose: Alternative text is required to ensure that all images are accessible to all website visitors.
Add the Alternative Text in the field that appears above the image, using text to describe the image which is accuracte, descriptive and brief.
Click the Checkmark to save the Alternative Text.
Optional Steps: Adjust Image Size and Add Caption
Edit the image placement as needed, (size, alignment, etc.) by dragging the blue handles on each corner.
To add image caption text underneath the image, click this icon to Toggle Caption:
The Caption field will appear under the image where you can type in your caption text.
Save and Publish