Drupal Theme: 
UQ Base Template
Learning Objectives: 

On this page, site editors will find the step-by-step instructions on how to navigate through the image browser, upload, delete and manage their images.

Manage your images

The Image browser displays all the images that have been uploaded to Drupal that may be inserted in a page. You can upload, rename and delete the image files from this view.

Access the Image browser via the admin menu under Content > Image browser.

Image browser in admin menu

Structuring files with subfolders

Subfolders can be created within the Image browser to create structure and make finding images easier. To create a subfolder, right-click on the parent folder and select New Subfolder. Enter the name for the new folder and click OK.

Subfolders can be created under other subfolders for more specific structures.

Creating a new subfolder in the file browser

Folder settings

The settings button allows you to view the images in the selected folder by different filters. You can change from a list view to a thumbnail view, or order the files by Name, Type, Size, or Date modified.

Folder settings in the File browser

Uploading images

First select the subfolder you want to upload to by clicking on it. Then select the Upload option with the green, up-facing arrow. This will display a window to browse your computer so you can select the image you want to upload.

Select the image to upload and click the Open button. The image will be uploaded and appear in the folder of the Image browser.

There is a size limit of 20MB per file, although no limit on the total number of files.

One image, multiple uses

If the image you are uploading is intended to be used in multiple ways (eg. banner, news feed), upload only one image that is as large as its intended maximum use. The system then can crop and rescale accordingly for different purposes.

NOTE ALSO: Image file names should not have spaces or special characters in them like ' or ( ) as these are not valid url characters on the web and can prevent some browsers from opening those images. Best practice is to replace all spaces with hypens before uploading. e.g. "professor mat hemagical.jpg" becomes "professor-mat-hemagical.jpg"

 

Renaming image files

Once an image has been uploaded you can rename it via the Image browser. However, if the image is already being displayed on a page then the file path will likely break and need updating.

Right-click on an image and select Rename. Change the file name as required and click OK.

Renaming an image file via the Image browser

Moving images between subfolders

Images can be moved from one folder to another without having to re-upload them. Select the image you want to move, right-click on it and select Add to Clipboard.

Select the folder you want to move it to, right click on it and select Move files. The image will be moved to the new folder but the url will remain the same so it won't break on any pages displaying it.

Moving multiple images to another folder

Moving multiple images

Hold Control (on PC) or Command (on Mac) when clicking on the images you want to move. Then selecting Add to Clipboard will add them all at once.

Deleting images

To delete an image, right-click on it and select Delete. You will be prompted to confirm you want to delete that file so that images cannot be deleted by accident. Once an image is deleted it is gone permanently and cannot be recovered.

Deleting an image via the Image browser

Deleting multiple images

Hold Control (on PC) or Command (on Mac) when clicking on the images you want to delete. This will select multiple files at once which you can delete in a single action.

Downloading images

To save a copy of an image to your computer, right-click on the file and select Download.

Image URL

For the full URL of the image, right-click on the file and select Copy URL. Then press Ctrl+C to copy the address as it appears.

Deleting subfolders

To delete a subfolder, right-click on it and select Delete. Once a folder is deleted it is gone permanently and cannot be recovered.

You can only delete folders that are empty. If it contains any files or other folders you will not be able to delete it until you have either deleted or moved all of its contents. This guards against accidentally deleting a large number of files.

EXERCISE: Image browser

  1. Go to the admin menu under Content > Image browser and create a subfolder for your site using a category that will help you organise and find your images. Eg. events, news, about, people.
  2. Upload all the images (9) located on the Training Resources page. Place these images into the relevant folder(s)
  3. Move an image between folders.
  4. Move multiple images between folders.
  5. Delete Sample homepage banner 1 image.
    ‚ÄčSite Coordinators Note: Once deleted upload Sample homepage banner 1 again as this will be required for Site Coordinator Training exercises.

NEXT: Adding & replacing Images