Major update to how to work with files: October 2019

We are beginning to phase out our old media tool and have a new, friendlier way for users to upload files and assign them to their Drupal group (images, pdfs, etc). This also creates a new way to browse to and replace these files. For now, you will still see your files at the bottom of your workbench (image below), however we ask that you use the "File Browser" tab at the top right of your workbench interface to find/manage/replace files.

NEW FILE MANAGEMENT:

File Browser tab highlighted - upper right of Drupal interface

OLD FILE MANAGEMENT:

no longer use bottom of workbench interface for managing new files; only for managing previously uploaded files.

 

Uploading images

To add a template image, choose the "Select file" link next to the folder icon.

The select file link allows you to upload a template image.

To add inline images, select the image upload icon that is three buttons to the right of the link upload icon. 

The image upload button is three buttons to the right of the link upload tool.

 

  1. Open by double-clicking the folder that corresponds to appropriate Drupal group.
  2. Upload a new image to this folder (or a sub-folder of your choosing) by selecting the “Upload” link in the top menu bar, select the “add file” button, choose the file from your computer or mounted drive, and then selecting the “Upload” button.
  3. Double-click on the image to add it to your page.
  4. Add appropriate ALT text:
    • ​For a template imageThe location of the alternative text field for a template image
    • For an inline image

 

Placeholder Images

We have provided some placeholder images for many of the image sizes called for in the Drupal templates. Working with placeholder images will allow you to build out your site in Drupal with gray placeholder images that you can later replace with your final images.

These placeholder images used to be stored in the “Curated Image Library” within your Drupal Workbench. Now, you’ll find these in a “Placeholder Images” directory in the new media tool file browser.

drupal placeholder images file directory

Finding and Preparing Final Images

When you are ready to research photography for your site, UVM has a few libraries of professional images available for use. Both are housed in the Photoshelter application. One is the general UVM Photography collection and the other is the collection of the UVM Photo department which provides professional photography services to the University of Vermont Community.

If you need some tips for working with these collections, we have instructions for downloading images from UVM Photoshelter and instructions for cropping, resizing and preparing your images for your website.

 

PDFs and non-image files

Link to a file (PDFs, PPTs, etc)

We strongly recommend that for the sake of your own file management that you delete old files when you upload new -- or replace old files with new (directions below). If you do not, your old file may continued to be found.

In order to upload a PDF, use the link tool to upload. Toggle to URL, then browse server. You must select a group directory at which piont the "upload" button will not be grayed out. New! You can also drag/drop your file into your directory.

use link icon in tool bar, select browser server, navigate to the drupal group where you'll store your files. Then you can "upload"

 

 

Give your PDF a friendly URL --  and a (PDF) tag for accessibility!

The above will upload the PDF in a way that you might want to display, filename.pdf. You can double click on the link and copy the file path. NOTE: It is important to use “relative” paths for PDFs -- do not include https://www.uvm.edu/uvmweb/ --- your links should begin with /sites/default …  Finally you will be to delete the file and write friendlier text like “Applications Guidlines (PDF)”. -- you’ll highlight that new text, and add the link you’ve just copied via the link button. Don't forget the (PDF) file type at the end of the link text -- it's a courtesy to the user, but also a requirement for accessibility.

link update -image

 

What if I need to have a link directly to a PDF for distribution purposes?

No problem. Upload the PDF to drupal. You will then double click on the file link to grab the file path info: /sites/default/files/file_name.pdf. You can put the path http://www.uvm.edu in front of that PDF file path in any web browser window to test, but in this case, http://www.uvm.edu/sites/default/files/file_name.pdf should link directly to the PDF.

link path -image

Replacing PDFs, Images, etc.

Replacing images and files with the new file management system is extremely easy. Find the "File Browser" tab, navigate to the directory where file is located, either "delete" and re-upload -- or -- drag and drop the file update of the same name. You'll know it was updated by the change in time stamp.

Find "File Browser" tab, navigate to directory where file is located, either "delete" and re-upload -- or -- drag and drop file update of the same name.

 

PDF replacement in the "Old" Media tool

Trick to updating existing PDFs

Go to “My Workbench” and scroll to the bottom to find either "My Files” or "Group Images and Files" (hopefully you've assigned your PDF to a group at time of upload). Here you’ll search to find the PDF you’d like to update/replace and select "Edit file". Once you've gone to the page for that file, you'll want to browse and find the new file via the browse button in the “Replace File” section. You should be able to upload the new PDF and it will REPLACE the old--therefore making it so you don’t have to change any links in your site. Additionally, in the tabs view, you’ll see the tab for “Usage”. If you select this tab, you’ll be able to see all of the pages where that PDF lives.

replacing files -image

 

Common issues with this method:

Sometimes users will prematurely upload a second PDF before they attempt to replace, which makes Drupal want to account for it by adding an "_0." This will break your links to your PDF. Image below shows that if you can see by hovering over the file name that you have "_0" (or another number) in the file path, it means that Drupal is holding on to a previously uploaded version with the _0 in the path. Uncheck "keep original filename" before you "replace file."

screenshot indicating If you can see by hovering over the file name that you have “_0” (or another number) in the file path, it means that Drupal is holding on to a previously uploaded version with the _0 in the path. Uncheck “keep original filename"

 

If Drupal hasn't been confused with multiple versions of the same file, you will see the following:

Screenshot of Drupal interface below indicates that if you can see by hovering over the file name that the original file name/path is referenced, it means that you can "keep original filename" checked when you replace file.

Screenshot of Drupal interface -- if you can see by hovering over the file name that the original file name is referenced, it means that you can "keep original filename" checked when you replace file.