UMass Drupal Training

What is Drupal?

DrupalDrupal is a free software package that allows you to easily organize, manage and publish your content, with an endless variety of customization. Source: drupal.org/about

Drupal /ˈdrpəl/ is a free, open-source web development platform for online content and user communities. Drupal powers some of the busiest sites on the web, and can be adapted to virtually any visual design. Drupal runs over a million sites, including WhiteHouse.gov, World Economic Forum, Stanford University, and Examiner.com. Source: acquia.com/what-is-drupal

 

Why We Chose Drupal

Among other things, Drupal is open source, scalable, and secure. It is also used on some of the highest traffic sites in the world, including 71 of the top 100 universities.

 

How We Use Drupal

The UMass-branded Drupal platform offers a framework for departments, academic units, institutes and centers to develop websites. We also develop custom Drupal websites that incorporate advanced design and development processes for schools, colleges, and larger campus initiatives that adhere to the UMass Brand Guide.

 

Drupal Hosting

UMass Amherst Information Technology provides development, staging, and production Drupal environments, allowing users to create and test sites before makig them available to the public. Users of the Drupal service are also granted access to IT’s Collaborative Wiki Drupal space where policies, procedures, and other support information is maintained and published.

 

Questions

Contact us at urcommunications@umass.edu with questions or comments.

The training documentation found within this site was created and is maintained by University Communications.

Logging in to your UMass Drupal Website

Visit Your Site

Open your website using the browser of your choice.
Example: www.umass.edu/sitename --OR-- umwebdev.oit.umass.edu/sitename (if your site is still in development)

sitename

 

Login

Add /login to the end of the URL string.
Example: www.umass.edu/sitename/login --OR-- umwebdev.oit.umass.edu/sitename/login

Note: Some older sites require /user in place of /login

login

 

Authenticate

Enter your UMass NetID and password at the Web Login prompt. Press Enter (return on mac) or click the arrow to proceed.

Login Prompt

 

Verify

You will be directed back to your website and can verify that you are logged in by the black Admin Toolbar that appears at the top of your website above the UMass Amherst top banner.

Admin Toolbar

 

The Toolbar and Basic Site Information

Admin Toolbar

Admin Toolbar
Note: Your site may include slightly different buttons than those depicted above.

Once authenticated, the Admin Toolbar will appear on every page at the top of your site and will display your NetID.
Note: If another NetID appears, log out immediately.

The house icon on the far left of the toolbar will always bring you to the Front Page of your website.

You can log out of the site at anytime by using the link on the far right of the toolbar.

 

Admin Shortcuts

Quick Links

Clicking the arrow on the right side of the toolbar opens up the shortcuts menu where you can access menu items with a single click.

Shortcuts are editable by clicking Edit shortcuts on the right side of the shortcut bar.

Hide the shortcut bar by clicking the arrow again.

 

Site Information

There are a number of details that you can change on the Site Information page. From the Admin Toolbar, hover your mouse over Configuration > System and click Site Information.

Site Information

 

Site Details

On the Site Information page, Site Details can be changed including Site Name, Slogan (if your site has one), and Email address.

Site Contact
The email address that you enter in the E-mail Address field will automatically be used as the "Site Contact" link in the footer of your site.

Save Changes
Don't forget to save the page by clicking Save Configuration, otherwise your changes will be lost.

Note: The remaining information for FRONT PAGE and ERROR PAGES should be left alone unless otherwise specified.

Site Details

 

Introduction to Users and Roles

Local Administrator

Each site provided by University Relations requires at least one Local Administrator who has sitewide access to advanced settings and permissions including some of the following examples:

  • Adminster Blocks
  • Access Image Captions for the Front Page Slideshow
  • Create ANY Content Type
  • View, edit, and delete any site content nodes
  • Administer Content Types
  • Create and modify URL aliases (create short URLs)
  • Add or modify Admin Toolbar shorcuts
  • Change Site Name and default email address
  • View site reports

 

Content Manager / Content Editor

Upon request, Content Manager and Content Editor roles and permissions can be established and given to specific users. These additional roles are highly customizable and can grant specific access to certain content types and administration features.

Note: Contact University Relations to determine permission requirements and grant new users access to your site.

 

Introduction to Menus

Menu Blocks

The Main Menu and Secondary Main Menu allow visitors to easily navigate your site. These menus list links to important pages on your site and allow visitors to easily and freely access content. The pages within your site should be structured in an easy to use and deliberate manner based upon a strategic sitemap.

The Main Menu accross the top of the site lists the hierarchy that all of the site pages should fall within. Think of these links as sections of your website.

The Secondary Main Menu on the side of your site lists the content within each section.

Menus

 

Configuring Menus

Hover your mouse over the menu block and click the gear icon that appear on the right side of the menu and click List Links to bring up the Menu Link page.

Note: Changes to the Menu Link page will not take affect until you click Save Configuration at the bottom of the page.

List Links

Rearranging Links
Use the move icon to drag links up and down to rearrange their order. You can also move links left and right to place them in a different section of the site.

Menu Link

Note: Sites can be set up to display different menu depths. Contact University Relations if you are having issues displaying multi-tiered navigation items.

 

Disabling Menu Items
You can disable a menu link by clicking the checkbox in the ENABLED column to uncheck that menu item from displaying on your site. To re-enable the link, click the checkbox again so the check appears. Click Save Configuration when you are ready to save your changes.

.Enabled

 

Adding Menu Links
You can add menu links via the Add Link button at the top of the Menu Link page, but the page you are linking to needs to be created in advance. For that reason, the preferred method for adding links is to do so when you are creating a page rather than through this interface.

Add Link

 

Introduction to Blocks

About Blocks

Blocks exist as separate pieces of content to add to one or several pages within your site. The Footer of a website is an example of an HTML block that is added to every page of your site. If you make a change to the footer on one page, that change will appear on every page.

You can identify blocks when hovering your mouse over them by the gear icon that appears in the upper right corner.

Note: Though blocks may appear on several pages, they are tied to a specific location (region) of the page.

Examples of Blocks

  • Default (HTML)
  • Menu
  • Slideshow
  • News
  • Events

Block Administration Page

In the Admin Toolbar, hover your mouse over Structure and click Blocks to view the Block Administration Page.

Note: Changes to the Blocks Administration Page will not take affect until you click Save Blocks at the bottom of the page.

Block
This column displays regions in bold. The regions represent the different locations on a page that you can add a block to. Under each region is the name of a block with a move icon that can be used to order blocks in a specific region or move them to a different region.

Region
The region column features a dropdown list of regions to quickly move blocks to different regions without using the move icon. Selecting - None - will move the block to the list of Disabled blocks.

Visibility
Any block that is restricted to display based on page, content type, Role, or User will display a message in this column. If you hover your mouse over the message you will see the criteria specified. This is very useful for displaying a list of which pages a block is visible on, which content type it is visible on, etc...

Operations
This column provides a configure link that you can click to edit any block (similar to clicking the gear while hovering your mouse over a block). There is also a delete link that lets you delete any block from the site. There is no undo once you delete a block, it will be removed from every page of your site permanently and there will be no history that it ever existed.

Note: This is the only place that you can delete a block from your site.

Disabled
Scrolling down to the bottom of the Block Administration Page, you will see a list labeled Disabled. All the blocks listed here are not active on the site. Blocks that are disabled can be moved to any of the sites regions and will be activated when you click Save Blocks at the bottom of the page.

Block Administration

 

Adding Blocks

In the Admin Toolbar, hover your mouse over Structure > Blocks and click Add Block. The Block Administration Page also includes an Add Block link directly above the list of blocks.

Add Block

Add Block Page

The Add Block Page controls a number of important fields and settings from Block Title, Block Description, and Block Body to Region Settings and Visibility Settings.

Block Title
If filled out, this field will display on your website as a title above the block. If left blank, it will not display.

Block Title

Block Description
This field displays the name of the block as it appears on the Block Administration Page. It will not appear to visitors on your site.

Region Settings
Use the dropdown to choose which region of the page the block will appear on.

It is important that you don't overlook this setting - if you do the block will be displayed in the Disabled list on the Block Administration Page.

Note: You can create a block for future use by setting the region to - None - and then moving it to an active region in the Block Administration Page when you're ready to use it.

Region Settings

Visibility Settings
The most common setting is Show block on specific pages. You can choose to display the block on 'All pages except those listed' or 'Only the listed pages' via the radio button. Pages should be specified by using their node id (the id displayed in the URL when a page is in edit mode). You can only include one page per line. If you want a block to appear on the Front Page of your site, use <front> instead of the node id. You can also use * as a wildcard to display the block on any page within a specified section.

Show Blocks

 

Block Regions

There are a number of different regions that blocks may be placed in. For an overview of block regions, on the Admin Toolbar, hover your mouse over Structure and click Blocks to bring up the Block Administration Page. Above the + Add Block and + Add Menu Block links, click the Demonstrate Block Regions link. Click Exit Block Region Demonstration in the top left corner when you are done.

Header / Main Menu Bar

Header and Main Menu Bar can be ignored - they are reserved for the sitename and Main Navigation Menu.

Featured Panel

This region contains the default Slideshow Image Gallery on the Front Page of many sites.

Featured Panel

Three Column Region

This is a set of three regions: Three column 3x33 - left, Three column 3x33 - center, and Three column 3x33 - right.

Empty by default, this regions is specifically set up for promoting three blocks of content, usually only on the Front Page. Commonly in conjunction with the Featured Panel.

Three Column

Help

This region is reserved for Drupal Messages and should be left empty.

Note: From time to time security notices will appear in the help region. Security updates are handled by UMass IT on a broad scale and will be addressed accordinly. Local Admins can ignore these warnings.

Help Region

Secondary Panel

Empty by default, the Secondary Panel displays a block on a gray background.

Secondary Panel

Two Column Region

This is a set of two regions: Two column 50/50 - left and Two column 50/50 - right.

Empty by default, this regions is specifically set up for promoting two blocks of content, usually only on the Front Page. Commonly in conjunction with the Secondary Panel.

Two Column

Highlight (content top)

Blocks in the Hightlight region appear above the name of a page.

Highlight

Main Content

The Main Content region is set directly below a page's title and displays the content of a page by default. It's advised to add content directly to a page's Body field rather than add an additional block to this region.

Content Bottom

The Content Bottom region displays directly below the Main Content region.

Note: Printer-friendly Version and Send by email links appear below Main Content but above the Content Bottom region and can cause undesirable effects.

Sidebar First

By default, Sidebar First houses the Secondary Main Menu navigation links. It's advised to place blocks below the navigation for ease of use.

Sidebar Second

This is the most commonly used region for blocks. It allows users to add important information about a page in a column on the right side of a page.

Sidebar Second

Tertiary Panel

By default, the Tertiary Panel region houses your sites Social Media Icons in the lower left of your site below your main content. If you don't have any icons, this region is hidden.

Tertiary Panel

Four Column Region

Similar to Two and Three, this region is a set of regions: Four column 4x25 - 1, Four column 4x25 - 2, Four column 4x25 - 3, and Four column 4x25 - 4.

Empty by default, this region is specifically set up for promoting four blocks of content, usually on every page of your site. Commonly in conjunction with the Footer region.

Typically these blocks are used to provide important information at the bottom of every page of your site. Information may include: Contact info (address, phone, email, location), Affiliations, Related sites/projects, etc...

Four Column

Footer

Empty by default, the Footer region is a wide region at the bottom of your site for displaying content across all pages on a black background.

If your website belongs within a College or large organization, it is recommended to display that info in the footer region.

Footer

Common Block Placement

The most common regions to place blocks on a page are as follows:

  • Sidebar Second (to the right of the page content)
  • Sidebar First (below leftside navigation)
  • Highlight (above the page's title)

The remaining regions are usually only used on the Front Page, or in the case of the Footer, the bottom of every page. These regions are often times pre-populated by University Relations and shouldn't be moved.

 

Introduction to Content Types

In Drupal, each item of content is called a node, and each node belongs to a single content type, which defines various default settings for nodes of that type, such as whether the node is Promoted to the Front Page, where in the navigation menu the node is placed, what fields of information are collected in that node, etc...

Adding Content

To add a new page of content (node) hover your mouse over Content > Add Content and choose the appropriate content type.

Note: Hovering your mouse over Content and clicking Add Content will open the Add Content administration page which displays a description of every content type on your site.

Adding Content

Default Content Types

By default, the UDP comes with five content types. Your site may differ based on the scope of your project and the specific needs of your site.

Basic Page

Basic pages are the catch all content type for nodes on your site. If your content doesn't fall into the remaining specialized content types, a basic page will likely fit your needs.

Event

Create an Event for time-based content that has a start date and time with the option to include an end date and a location.

Note: You can view a list of events on most UDP sites at the URL umass.edu/sitename/events

News Item

News Items are meant for time-sensitive content like news, press releases or announcements. News Items are promoted to the Front Page by default and include an image upload field. News Items also come with an Archive Date field by default. If the Archive Date is set, the news item will move off of the main news page and onto the News Archive Page.

Note: News can generally be found at umass.edu/sitename/news while Archived News is found at umass.edu/sitename/news/archive

Profile

By default, faculty, staff, and student profiles may be created on the site. Profiles include an image upload field as well as a number of informative fields. Profiles differ from the other content types in that their information is located across horizontal tabs that must be clicked for access.

Profile Tabs

Slideshow Image

By default, Slideshow Images display on the Front Page of your site in the Featured Panel region. Creating a new Slideshow Image automatically adds another image to the slideshow, while unpublishing or deleting the node removes the image from the slideshow.

Note: If there is only one node of this type published, the slideshow will be replaced by a static image.

Featured Panel

VIew Site Content

You can view all nodes on a site by clicking Content in the Admin Toolbar. For a list of all webforms, if any, on your site, click Webforms in the top right corner of the page.

Note: To view a list of all blocks on your site see Intro to blocks.

Sorting

By default, the nodes are sorted chronologically based on when they were last updated. The sorted column displays darker than the others and includes a black arrow beside the category being sorted.

Click on a category to sort by that column. The sorting categories available are:

  • Title
  • Type
  • Author
  • Published
  • Updated

Note: To toggle the display order, click the category a second time.

Filtering

By default, the content page displays all nodes on your site. You can filter these nodes by utilizing the available filters along the top of the page:

  • Title: Node title or page title
  • Type: Content type
  • Author: Person who initially created the node
  • Published: Whether or not Published is checked in the nodes Publishing Options tab.
  • Vocabulary: If the node has an associated vocabulary (Profiles include a vocabulary by default)

Click Apply after adjusting one or more of the filters to display results matching your criteria. Click Reset to clear all filters and display all nodes.

Note: No, all your site's content isn't missing! The site remembers your last filtered results and is displaying only those nodes. Click reset to display all nodes.

Operations

The Operations drop-down box allows you to perform actions on one or several nodes at the same time. Click the check-box to the left of the Title column to select all nodes (click again to un-select) or click the check-box next to individual nodes and then choose from one of the following operations:

  • Change author
  • Delete: Deleting a node is permanent. The content and all revisions will be lost.
  • Stick: Make page sticky at top of lists.
  • Unstick
  • Change value
  • Promote to front page
  • Publish
  • Demote from front page
  • Unpublish
  • Update node alias: Change URL alias listed in the URL path settings tab

Click Execute and follow the individualized on-screen prompts.

Note: Operations is an advanced feature that has the potential of severely damaging your site if used incorrectly.

Edit and Delete

You can edit or delete a node by clicking the links in the Operations column list on the far right of the page.

Note: To learn more about editing existing content, see Editing Site Content.

 

Editing Site Content

User Interface

Once logged in to a site, you will see a few new tabs that appear below a node's title:

New tabs when logged in

View

This tab is activated by default when you visit a node. It displays the public content of the node that visitors to your site will see.

Edit

This tab opens up the editing interface to edit the title and body content as well as change a number of node settings and upload a Header Image to the node.

Manage Display

Advanced users may choose to change the way specific content types display information. Changing display properties affects all nodes of a specific content type moving forward but pre-existing nodes may need to be manually updated. Display options include changing the order of items and choosing preset image styles.

Revisions

If applicable, revisions are extremely useful for viewing previosly saved states of a node and allow users to easily switch to a previous state.

 

Edit Content

Click the Edit tab to enter the edit view and make changes to a node. Click the Save button at the bottom of the edit view to save your changes.

Note: The keyboard shortcut to undo is ctrl+z (command+z for mac). If you've made a change to the content in error cannot undo the change, click the view tab  to discard changes that haven't been saved. See Revisions below to go to a previously saved state of the node.

Edit Content

Node Title

Enter or change the node title in the Title field at the top of the edit view.

Title FIeld

Header Image

Use the provided Header Image interface to upload an image that appears at the top of the edit view.

Header Image

Body

The body field provides a WYSIWYG (What You See Is what You Get) toolbar that empowers users to style text, add bulleted lists, indent, create links and add images to a node.

See Using the WYSIWYG Editor section below for a more in depth look into updating content with the WYSIWYG editor.

Node Summary

The blue Edit Summary link beside the Body field title allows users to insert an optional summary that is used when a node is promoted to the Front Page (See publishing options below). By default, Drupal will grab a snippet of text from the Body field to populate content that is shared on the Front Page. Click the Edit Summary link to input a custom summary describing the content rather than pulling content automatically. The custom summary is completely optional, in most cases the snippet of text Drupal grabs from the body field will be adequate.

Note: Teaser Breaks are ignored when summaries are applied to a node.

Text Formats

By default the Text Format dropdown is set to Filtered HTML. In most cases this should be left alone unless specifically directed otherwise.

Note: Changing the format risks the potential for deleting all or part of the content in the field. Do so at your own risk.

Adding Navigation Links

Scroll down to the Menu Settings tab and click the Provide a Menu Link checkbox to create a link to the current node in the navigation structure.

Change the link title (generated by default using the title of the node) if you want the link to appear in the navigation structure as something other than the node's title.

Use the Parent Item dropdown to choose which section of the site the node should belong to. By default, Main Menu is selected - this will create a link in the Main Navigation Menu that appears at the top of every node on your site. Use the dropdown to choose another node or section of the site that the current node she be included in.

The Description and Weight fields should be left at their default values.

Menu Settings

 

Publishing Options

You can publish, unpublish, promote nodes to the Front Page and make them sticky at the top of lists by utilizing the Publishing Options tab on the bottom of the edit view.

Check or uncheck the boxes for each of the following:

  • Published: This allows you to display or hide a node from the public. Commonly used for new nodes that aren't ready for public consumption or nodes that are not currently relevant but are good to keep around for future reference. Unpublished nodes will be automatically removed from navigation elements and will automatically return when they are published.
  • Promotoed to Front Page: Any node can be promoted to the Front Page of a website by clicking this box. By default, Drupal will grab a snippet of text from the node to add to the Front Page but you can manually change this by using the Edit Summary feature explained above.
  • Sticky at Top of Lists: By default, pages that are promoted to the Front Page will be ordered chronologically based on their creation date. If you want to push a node to the top of the list regardless of when it was created, you can check this box. If multiple nodes are set to Sticky at Top of Lists, those nodes will be ordered chronologically.

Publishing Options

 

Using the WYSIWYG Editor

The default WYSIWYG editor includes a number of preset tools for enhancing the content in the Body field of your node.

Note: Some editors may appear differently than the image below. Depending on your needs, additional tools may be enabled in the toolbar.

WYSIWYG Toolbar

Headings

Headings are great for identifyiing key messages in the content. If your content has three key messages, you can divide them by giving each message a heading of H2 directly above each message. If there are key points, you could further divide those points into another heading of h3. Make sure to follow the hierarchy of headings, H3 should only come after H2 and H4 should only come after H3 etc...

To create a heading, type the name of the heading, highlight it, and choose the heading style (h2-h6) from the paragraph style dropdown item (the default value is Normal).

Note: Headings shouldn't be more than a few words long. Sidebars should start at heading level 2 and go down from there.

Bold Text

To give text strong importance within content, use the Bold tool in the WYSIWYG toolbar. Visually, bold gives text a heavier weight so that it sticks out and is easy to identify. Semantically, bold gives portions of a sentence added importance (e.g., "Warning! This is very important.").

Bold appropriate text by highlighting it and clicking the B icon in the toolbar. Alternatively, you can use the keyboard shortcut  ctrl+b (command+b on mac).

Note: The B icon utilizes the <strong></strong> html element.

Italicized Text

To emphasize text, use the Italic tool in the toolbar.

Italicize text by highlighting the appropriate text with your mouse and click the I icon in the toolbar. Alternatively, use the keyboard shortcut ctrl+i (command+i on mac).

Note: The I icon utilizes the <em></em> html element.

Numbered and Bulleted Lists

Create a numbered or bulleted list by clicking the Insert/Remove Numbered List or the Insert/Remove Bulleted List icon in the toolbar. You can also enter items on seperate lines (press enter/return after each item) and turn them into a numbered/bulleted lists by highlighting the lines of content and clicking the numbered or bulleted list icon in the toolbar.

Bulleted List

Indentation

Increase (move to the right) or decrease (move to the left) the indentation of text by placing your mouse before a line of text or by highlighting a section of text and clicking one of the two Indent buttons in the toolbar.

Creating Links

Create a link by highlighting the appropriate text or image and click the Link icon in the toolbar to insert the appropriate URL.

Link Icon

Use the Link Type dropdown to change the type of link you will be creating

  • Select URL to link to external sites that aren't part of the current website.
  • Select internal path to link to nodes that exist within your site.
  • Select E-mail to link to email addresses.

Link Type

Removing Links

To remove an existing link, highlight the text or image that is linked and click the Unlink button in the toolbar.

Remove Link

Link to files

Create a link to a file or document by highlighting the appropriate text and click the Link icon in the toolbar and then click the Browse Server button in the window that appears. Choose an existing file or upload a new file by clicking the upload button after navigating to the folder of your choice.

Note: Upload files directly to your Drupal site by visiting umass.edu/sitename/imce (you must be logged in).

Link Files

Add Images

Insert an image by clicking the Image button in the toolbar. Click Browse Server and choose an existing file or upload a new one (similar to the Link to Files section above). Turn the image into a link by clicking the Link tab and entering the URL when the Image Properties window appears. Alternatively you can highlight an image and click the Link button in the toolbar to add a link.

Float an image to the left or right of text by clicking the Image buttoon in the toolbar and choose Left or Right from the Alignment dropdown. Alternatively, right click on an image and select Image Properties to bring up the image properties window.

Image Properties

Paste Content

Copy text from another source by highlighting it and pressing ctrl+c (command+c) and paste it into the appropriate field by pressing ctrl+v (command+v).

You can strip out styling by pasting content into the WYSIWYG using the Paste as Plain Text and/or Paste from Word icons in the toolbar.

Note: If you paste something that contains a formatting style that is not approved, it will be deleted upon saving content.

Teaser Breaks

Insert Teaser Breaks by clicking the Teaser Break button in the toolbar. Teaser breaks set a specific end point for teaser text that displays on pages that are promoted to the Front Page.

 

Manage Display

Advanced users may find the Manage Display functionality useful for their specific needs. Use the Manage Display tab to re-order fields, hide or display labels and change specific formatting options for fields.

Some content types include a Teaser tab in additon to the Default display settings. The Teaser typically styles what is displayed on the Front Page when a page is Promoted to Front. From this tab you can input a Trim Length which sets a specific character limit.

The tabs on the bottom left, including Layout for Page in Default, Custom Display Settings, etc..., should be left at their default values. Changing or modifying these settings may adversly affect the site.

Note: Any changes to the Manage Display settings will affect all nodes of that content type.

Display Settings

Revisions

Basic Page, News Item, and Profile content types all have revisioning enabled by default. Everytime a page is saved a new revision is created. Revisioning is great if you want to look at the past content of a node.

Click the Revisions tab to display a list of all revisions to a page. The current version of the page is highlighted in yellow and each revisions is ordered by date and displays the name of the user who revised the content.

View a Revision

Click the date to view that revision and click the back button in the browser to return to the revisions display. Alternatively, you can view the revisions in a new tab and close it when you are done viewing it.

Switch to a Revision

To revert the node to a previous revision, click the Revert link that appears in the Operations column.

Delete a Revision

Delete a revision by clicking the Delete link that appears in the Operations column. Once deleted, a revision cannot be restored.

Revisions

 

Accessing the File Browser

Your Drupal site will come with a file browser pre-installed. The file browser allows you to upload images and files (pdf's, word documents, power points, etc.) that can be used on your site. No one else has access to your sites file browser and you are free to organize it to your liking as long as you don't delete any default files and folders that it comes with.

Note: The File Browser replaces the need for FTP programs.

 

Open the File Browser

Visit the FIle Browser by adding /imce to the end of your site's URL. You must be logged in to visit your site's file browser.

Example: www.umass.edu/sitename/imce --OR-- umwebdev.oit.umass.edu/sitename/imce (if your site is in development).

File Browser URL

Root Folder

By default, you will see what's known as the root folder. This is the main folder that contains all of your assets. Most sites contain a few icons and logos in the root folder and a number of sub-folders that contain additional assets.

Sites with few assets are encouraged to upload files directly to the root folder for ease of use.

The user interface includes action icons (Upload, Delete, Resize, and Directory) a Navigation column that displays folders and an Information column that displays information about an asset (File name, Size, Width, Height, and creation Date). If the the asset is an image, clicking on the File Name in the right column will display a preview of the image.

Note: Never delete any folders or assets that you didn't add to your site.

Root Folder

 

Navigate the File Browser

Click on a folder in the Navigation column to select it. Selected folders will appear in bold with a grey background and will display any files in the right column. It is important to note that sub-folders will not appear in the right column. Click the + icon to the left of the folders name to display the sub-folders and continue clicking on the sub-folders to display the contents in the right column. Click the - icon to hide sub-folders.

The File Browser keeps track of the last selected folder when you close the browsers window. The next time you open the file browser, you will likely be placed within the same folder/sub-folder that you last worked in. The exception to this is if you've logged out of your site and cleared your browsers history/cache.

Note: Clicking a folder that is already open will bring up a dialog box asking if you want to refresh the directory - always click OK.

Sub Folders

 

Upload Files

Before uploading a file select the appropriate folder in the Navigation column. The selected folder's name will become bold and the content of the folder will display in the right column. To upload a file to the selected folder, click the Upload icon and then click Browse... to search for the file on your computer. Double click the desired file and then click Upload to add the image to the file browser. Upon successfully uploading a file, the name and additional info will appear highlighted in the column on the right. Images will also display a preview of the image below the right column.

Note: You can only upload one file at a time.

Upload Files

 

Delete Files

Navigate to the appropriate folder and select the file you want to delete (the selected file is highlighted in blue). Click the Delete icon in the top right of window and click OK in the confirmation popup.

You can only delete one file at a time and it will be gone forever once you delete it.

Note: You aren't required to delete files that aren't in use. Removing links to the file will suffice in most cirumstances.

Deleting Files in Use

You should never delete a file with an active link from your site. If you delete a file from the File Browser that is being used on a node in your site, the link will not be removed automatically. If a user clicks the link, they will be brought to a Not Found error page which is very bad for both user experience and search engine optimization.

Make sure to manually remove any links to a file before you attempt to delete the file from the file browser.

Note: In some instances a file that is saved in a nodes revision tab cannot be deleted without first deleting the instance of the revision containing the file.

Delete Files

 

Resize Images

Upload a large image and resize it within the File Browser by selecting the image and clicking the Resize icon in the top right corner of the File Browser interface. If you input a width, the browser will automatically add the height when you click your mouse in the heigh field (and vice versa) to retain the images original dimensions. If you want to keep the original image and make a duplicate at the smaller dimension click the Create a new image checkbox.

You should only resize images to make them smaller than the original, never larger. Attempting to make a small image larger will create a blurry image that isn't appropriate for a production website.

Note: When utilizing the Create a new image checkbox, the newly create fill will append _0 to the filename. You cannot rename the new file.

Image Resize

 

Create and Delete Folders

Use the Directory icon to create and delete folders within the File Browser. A popup interface will provide an empty field to add the name of the folder that is to be created or deleted. Input the name of the new folder and click Add to insert it into the parent directory.

Clicking the arrow beside the field will list all folders in the parent directory to easily choose and delete an existing folder. You could also manually input the name of the folder rather than choose it from the dropdown.

Deleting a folder will delete all of it's contents including sub-folders and files.

Users who have numerous asset's that are often used and updated are encouraged to create easily identifiable folders to keep track of specific assets. This makes the file structure much easier to manage as compared to uploading all assets to the Root folder. This is only a suggestion, file management is altered at the users discretion.

Folder Management

 

Linking to Assets

Linking files and images should always be done using the WYSIWYG editor (see Editing Site Content). Highlight the appropriate content, click the Link button in the WYSIWYG editor and click Browse Server. From here the File Browser will open in a popup window and you can choose an asset by navigating to the appropriate folder and selecting the correct file by double clicking the filename. Alternatively you can click the flle name and click Open, but double clicking is usually much faster.

If you want to share an asset directly without linking it to your site, you can use the URL structure as follows: http://umass.edu/sitename/sites/default/files/filename

Example: http://www.umass.edu/universityrelations/sites/default/files/Training_0-1.gif

Reminder, this should never be done to link files on your site, always use the Browse Server option in the WYSIWYG editor.

Note: You should never share a direct link to a file on a development site. Development sites are turned off once your site moves to production and any absolute link paths will be broken.

Best Practices