If you run into a problem, have questions about how something works, or have questions about functionality that is not covered, email firstname.lastname@example.org to ask for assistance.
If you would like to set up a training for someone in your department who needs to learn our Drupal system or needs help beyond the basic instructions, please complete the request form and select training.
Notes About Images
All images must be sized correctly for the web prior to uploading them to your site, 72 dpi, and RGB color. Images should generally be 500 KB, or smaller, in file size,
The most common maximum image sizes depend on which version of Drupal your site is using.
For Drupal 7 sites the two most common sizes are:
- 1200 px wide for full-width pages with no left-hand secondary menu (this width is only for banner images and should also be kept under 300 px tall)
- 780 px (or smaller) wide for pages with left hand secondary menu
For Drupal 8 or 9+ sites the two most common sizes are:
- 1440 px wide for full-width pages with no left-hand secondary menu (this width is only for banner images and should also be kept under 300 px tall)
- 820 px (or smaller) wide for pages with left hand secondary menu
Additional information on sizing and how to resize an image can be found on the Non-Web Tools page.
Image Naming Convention
Some ad blockers can hide or prevent images with "ad" words in the file name or Alt Text. To prevent an ad blocker from blocking an image, please avoid using "ad" words in your image names or image Alt Text such as:
To the Page
- In the Content Editor box, click your cursor where you want the photo to be inserted.
- Click on the double photo icon on the right hand side of the formatting bar (Disregard the other image icon on the left side).
- This will bring up a pop-up box.
NOTE: If you have already uploaded the image you want, or have used it previously on your site, skip down to the Add previously uploaded images section.
- Browse your computer to find the image you want to add to your content, click on it, then click the Open button.
- Once the title of the photo appears in the box next to Browse, click on the Next button.
- If you have a Destination screen, leave the setting on "Public local files served by the webserver" and click Next again. Otherwise, continue on to the next step:
- When you upload an image, the next screen will have Alt Text and Title Text fields for the image. After you have filled out the Alt Text and Title Text fields, click the Save button, and then click the Submit button.
- The image will now be inserted into the Content Editor box.
- To make size or padding changes see the Edit Image Properties section below.
Note: If you need to add multiple images, it's best to add them all at once. See Upload Multiple Images for more information.
Click on Manage Files in the Admin menu in the gray bar at the top of your page.
Click on the + Add file link located below the Content title at the top left of the page.
This will give you the same screen that appears in the pop-up box when you are adding a photo while creating a page.
Accessibility in Practice
All images must have "alt text" for website accessibility and search engine optimization.
Alt Text should have a clear and concise description of the images or graphics appearing on your site and will be a description of the image to someone who can't see the photo.
This text can be specific, such as "Professor Plum in the EMU ballroom with GTFs John Doe and Jane Doe" or a generic "Professor Plum with students".
"Comment out" (for the screen reader) strictly decorative graphics with alt = "". Use a testing tool to view images replaced with their alt text.
- To insert an image previously uploaded to your library, click your cursor where you want to insert your image.
- Click on the same double image icon ( ) on the far right side of the Content Editor menu that you use for adding a new photo. This will bring up the add an image box.
- Click on the Library tab on the right:
- The contents of the pop up box will change to show thumbnails of all the images that have been uploaded to your site:
- If you know all or part of the filename for the image you are looking to add, you can type it into the File name box and click the Apply button to filter the thumbnails.
NOTE: You do not have to type in the exact filename. If you don't remember the exact filename, you can type in the first few letters and it will show you all of the filenames that contain those letters. As an example, entering in "image" will also bring up any files with "image" or "images" in the name.
- You can also filter the Library content by Type (Audio, Document, Image, Video) or change the Sort by method.
- If you don't see the image you want to use on the first page of content, scroll down to the bottom and click the next or previous links to view additional thumbnails. There are 25 thumbnails per page and you can also use the numbers to jump to a different page of thumbnails:
- Once you find the image you want to insert, click on the image, then scroll down and click the Submit button at the bottom to add the image to your content.
- After the image has been added to your content, you can make changes to it the same way you would for a new image.
Replace an Image in the Editor
While editing your content, all images should have a yellow image icon in the bottom right corner of the image.
Click on that icon to bring up the media browser popup box that you see when you add new images and will function exactly the same, except you are replacing the existing image with a new one. Follow the same steps as adding a new image and the old image will be replaced by a new one.
NOTE: If you do not see the image swap button, you will need to right click on the image and choose the "Swap image" option to select or upload a new image.
Replacing an Image Globally from the Files Section
Please note, there are no UNDO or revision options available for this method so use with caution.
Occasionally you may need to replace an image you have uploaded previously, such as if a logo has changed. To replace an image globally, go to the "Files" section of your site:
Find the image you want to replace, either by scrolling, or filtering based on the file properties, then click the "Edit" link on the right:
Once you are on the Edit page, click on the "Replace File" box, which will work similar to when you upload an image:
If you do not want the original image available at all, you can overwrite the file name with your new image by checking the "Keep original filename" box shown below:
Click the "Save" button at the bottom and your new image version will be live on your site.
As a reminder, there are no UNDO or revision options available for this replacement method so make sure any file you are replacing has been backed up before you choose this replacement option.
- To adjust the properties a photo you can click the left hand image icon in the Content Editor box:
- Or, you can right click on the image, then select the Images Properties option:
From the Image Properties pop up box you can change the image size, padding, and alignment.
- To adjust the size of the photo, click on the Width field and type in the pixel width you want the photo to appear.
- To the right of the Width and Height boxes is a lock (
). When it is locked (right lock icon), the height will adjust automatically in proportion to any change in the width.
NOTE: If the lock is unlocked, the width will adjust independently of the height and can cause the image to be distorted.
- If you need to reset the image size, click on the circle with an arrow (
) located to the right of the lock.
- Padding (HSpace and VSpace) adds extra space around the images so that the text and other items are not touching or too close to an image.
- 8 is a commonly used number for the HSpace, but anything between 5 - 10 px (pixels) will work for the HSpace, although some situations may need more or less, depending on the content.
- 8 is also a commonly used number for the VSpace, but again, anything between 5 - 10 px will work, although in rare occasions you may find it necessary to use 0-2 px for the VSpace.
- The last Image Property option is Alignment. Alignment allows you to wrap the text and other objects around the photo and have the image aligned to the left or right of the page.
- If you'd like the image to stand alone (not included with paragraph text), leave the alignment to the default setting of <not set>.
- If you'd like the image to align left or right with the text wrapping around it, choose either left or right from the Alignment drop down.
NOTE: Make sure that the image is at the very beginning of your paragraph to ensure that it will allow the text to wrap properly.
- Click the OK button to commit the changes.
Additional information on how to format and resize images can be found on the Non-Web Tools page.
Upload Multiple Images
On the Add File page, click the Archive link located at the top right of the page under the UPLOAD tab.
- Click on the Browse button and find the compressed file folder that you want to add to your site.
NOTE: The only compressed file formats that can currently be uploaded are .zip, .tar, . tgz, .gz, and .bz2.
- The best practice is to only have just the files you want to upload in your compressed file. Although, should you need to single out a specific type of file to upload you can do so in the Pattern text field box. Type .* followed by the file type you want to batch upload. .*jpg for example, would cause only the jpg images to be batch uploaded. ;However, it is strongly recommended that your compressed folder contain only the files you want to batch upload as it will make the process much easier for you.
- After clicking the Submit button on the Archive upload page, it will process your compressed folder file and upload it to your site. It will automatically take you to the main Content page and a green banner will appear at the top of the page with a successful upload message. In the example below the message is: Extracted test-zip.zip and added 3 new files.
Changes Multiple Images
- Occasionally you may need to make updates to several images at the same time.
- From the Files page you can check the boxes to the left of the images that need updating.
- Select the relevant choice from the UPDATE OPTIONS dropdown menu.
- The most commonly used choice is the Delete selected files option which will, as it states, delete the files.
NOTE: There is no undo button for these updates so make sure you really want to choose that update option.
- You are very unlikely to use any of the other three options, and unless you know what you are doing, it is not recommended to use them.