Images

If you run into a problem, have questions about how something works, or have questions about functionality that is not covered, email webservices@uoregon.edu 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.

Ask for Assistance   Request Drupal Training


Notes About Images

Image Sizing

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 two most common maximum image 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

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:

  • ad
  • advertising
  • advertisement

Add New Images

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).

Menu bar, add media button highlighted

  • 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.

Screenshot of WYSIWYG of button to add a photo

  • 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.

To the Library

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.


Add Previously Uploaded Images

  • 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 ( Screen shot of the right hand, 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: 

Screen shot of the Library tab

  • The contents of the pop up box will change to show thumbnails of all the images that have been uploaded to your site:

Screenshot of the photo library pop up box

  • 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:

Screen shot of the Library tab paging

  • 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

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.
Swap media icon
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 reinsert the image manually. This is most often seen in images added prior to the new swap function.

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:

Edit a file

Once you are on the Edit page, click on the "Replace File" box, which will work similar to when you upload an image:

Replace file box

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:

Keep original file name checked box

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.

 


Edit Image Properties

  • To adjust the properties a photo you can click the left hand image icon in the Content Editor box:

Menu bar, edit image button highlighted

  • Or, you can right click on the image, then select the Images Properties option:

Screen shot of the right click menu for an image

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 ( Screen shot of the image lock icon ). 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 ( Screen shot of the image reset icon ) 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.

Screen shot of the Archive link

 

Screen shot of the uploader for multiple files

  • 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.

Screen shot of the Uploaded message


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.

Screen shot of multiple files selected

  • 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.

Screen shot of the file options

  • 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.