Introduction to drupal handbook by Alex Martines

Introduction to Drupal Handbook For UMass Package Sites

Labor/Management Workplace Education 303 Goodell Building University of Massachusetts Phone: 413-545-2031 www.umass.edu/lmwep December 2014

Alexandra Martines

Contents What is Drupal?............................................................................................................................................. 4 Getting a Drupal Site for Yourself or Your Department ................................................................................ 6 Logging in to your UMass Drupal Website ................................................................................................... 7 The Toolbar and Basic Site Information ........................................................................................................ 8 Introduction to Blocks and Menus .............................................................................................................. 11 Editing a Block ............................................................................................................................................. 16 Introduction to Menu Blocks ...................................................................................................................... 18 Introduction to Users & Roles ..................................................................................................................... 21 Introduction to Content Types.................................................................................................................... 25 Editing a Basic Page..................................................................................................................................... 29 Editing a News Item .................................................................................................................................... 32 Editing a Slideshow Image .......................................................................................................................... 35 Adding a Basic Page .................................................................................................................................... 43 Adding a News Item .................................................................................................................................... 46 Adding an FAQ Item .................................................................................................................................... 51 Adding a Profile ........................................................................................................................................... 53 Adding an Image Gallery ............................................................................................................................. 58 Adding a Webform ...................................................................................................................................... 63 Adding a Slideshow Image .......................................................................................................................... 69 Adding Email Notifications to a Webform .................................................................................................. 75 Adding a Confirmation Page to a Webform ................................................................................................ 78 Viewing Submissions to a Webform ........................................................................................................... 81 Formatting Text Using the WYSIWYG Editor .............................................................................................. 86 Removing formatting from copied text .................................................................................................. 86 Formatting text ....................................................................................................................................... 87 Adding Links ................................................................................................................................................ 89 Adding a Link to a Page on your Site........................................................................................................... 91 Linking to and Uploading a File ................................................................................................................... 93 Linking to an Email Address ........................................................................................................................ 97 Adding an Image to a Basic Page or Block .................................................................................................. 99 Labor/Management Workplace Education

Alexandra Martines

Labor/Management Workplace Education

Alexandra Martines

What is Drupal? Adapted from Drupal for Dummies by Lynn Beighly The official Drupal Web site, http://drupal.org, describes Drupal as “a free software package that allows an individual or a community of users to easily publish, manage and organize a wide variety of content on a website.” Free Drupal is distributed as open source software. This means that you can get a copy of the program and install it on your Web server, modify the appearance of the pages and layout to suit your needs, and add your content to it without paying for the program. Software designated as open source essentially means it’s “free.” Flexible Drupal sites are completely flexible. This means you can do things like: 



Modify the layout of your pages: With the use of blocks, you can move your navigation links to the side, top, or anywhere else on your pages you wish. You can put all your content in one column or choose multiple column layouts. Add and remove pages: Drupal wouldn’t be of much use to you if you were stuck with a specific set of pages. Drupal gives you complete flexibility to create as many pages as your site will need, as well as freedom to choose where page links will appear.

Customizable One of the best things about Drupal is the ease with which you can customize your site features. Drupal comes with lots of great features you can turn on with the click of a button. If you want a forum or a poll or a blog, for example, you can easily include or exclude it in your site. Beyond the features, or modules, included with the program, many Web developers have created and made freely available to you thousands more modules you can download and install. For information about some recommended modules for your UMass package site, see Recommended Modules near the end of this handbook.

Labor/Management Workplace Education

Alexandra Martines

If you aren’t already excited about the potential Drupal offers, you will be. For example, free modules allow you to integrate Facebook and Twitter information into your site, allow users to submit online forms on your site, or create photo galleries. All modules will need to be requested, approved and installed by UMass IT at webmaster@oit.umass.edu. Content Management System At its heart, Drupal is all about managing content. Drupal belongs to a class of applications known as Web Content Management Systems (CMS). These applications are designed to separate the content on a Web site from the presentation of that content. In other words, you can manage the text and graphics on your site through the Drupal interface as easily as you can create a Microsoft Word document. After you set your site up, you don’t have to worry about looking at HTML code and putting your desired text into some sort of Web format. You can simply type in a text box on a form and press a button. Your new content will show up on your site. Behind the scenes, Drupal handles the conversion of your text into a format viewable on the Web. Drupal will also, in the case of a blog style page, save any old content previously published and provide a link to it for your users. You can also give specific users the permission to easily post, edit, and/or delete content on your site, without having permission to change the layout or features of your site. You can even allow certain users to create content, but not allow it to be published on the site until you’ve had a chance to approve it. All of this control allows your site content to be maintained, while your site structure remains safe from possible harm. Drupal Training UMass Labor/Management Workplace Education offers Drupal workshop training to University staff. In this 5-week class, you’ll learn basic Drupal to navigate and develop your site, including adding and editing pages, changing the layout, adding image galleries, and building webforms. No previous Drupal experience required. To see a class schedule and register, visit https://www.umass.edu/lmwep/register-classes or call 413-545-2031 for more information. Labor/Management Workplace Education

Alexandra Martines

Getting a Drupal Site for Yourself or Your Department At this point, you may already have a Drupal site that you’ve worked with. If not, you can easily create a personal site and begin working or your department can work with the University Relations office to create a UMass package Drupal site. For information about professional development and Drupal, see Drupal Training above. Personal Website You can get a copy of the newest version of Drupal, find a place to host your site, and install it, but that’s probably more effort than you want to invest when you’re first starting out. Instead, http://www.drupalgardens.com/ will create a free Drupal site for you to work in and will host it for you. It’s as easy as making an account, requesting a site, and specifying a few settings. There’s a limited amount of storage and bandwidth for free sites, so you wouldn’t want to host a website for a business here forever, but it’s perfect for starting out. The site also has information and tips for working with Drupal. UMass Departmental Website The University Relations Web Development team works in collaboration with Information Technology (IT) to provide free Drupal web development services to campus groups who host their websites on www.umass.edu. Drupal is the official content management system for the campus. Websites for individual faculty, faculty or student projects, or student groups do not qualify for this free service. Please refer to Personal Website (above) or contact instruct@oit.umass.edu to discuss setting up a Blog. University Relations has developed a UMass Drupal Package (UDP) that is best suited for smaller departments, programs and units. The package system has the UMass brand built in, is web-based and comes with hands-on training for staff. This approach allows campus clients to actually build the site and get familiar with the Drupal system. If you are interested in working with University Relations, you can be added to their project queue for a UMass Drupal Package site. Contact newproject@admin.umass.edu to get started.

Labor/Management Workplace Education

Alexandra Martines

Logging in to your UMass Drupal Website

1. Go to your website in your preferred web browser. Add /login to the end of the siteâ&#x20AC;&#x2122;s URL. You will be directed to the UMass Web Login page. Note: If not using a UMass Drupal Package site, append /user to then end of your siteâ&#x20AC;&#x2122;s URL to log in instead. 2. Log in using your UMass NetID and password (the same one you use for other UMass services). Press enter on your keyboard or click the arrow.

Labor/Management Workplace Education

Alexandra Martines

The Toolbar and Basic Site Information

The editing end of your website will be displayed. 1. When you are logged in, you will see the Toolbar at the top of the page. You may see slightly different items in the Toolbar than those that appear here. Clicking the house icon on the far left will bring you to the Home page. 2. On the far right at the top of the page, you will see the Log out link.

Labor/Management Workplace Education

Alexandra Martines

3. You can change the title of your site, as well as other details including the email address associated with the site. In the admin toolbar, mouse over Configuration, then System, then click on Site information.

Labor/Management Workplace Education

Alexandra Martines

The Site Information page will open. Note: Occasionally, you will see security update notices on editing pages. Security updates are managed by UMass IT periodically and you do not need to respond to these warnings. 4. Make changes to your Site name here. 5. Add a Slogan here (optional). This will appear on the Home page beneath your Site name. 6. The Email address you enter here will receive emails through the Site Contact link in the footer of your website and act as the default email address for your site. 7. This setting is not functional in UMass Drupal Package sites. 8. - 10. You may wish to change the default home page and error messages on your site, but generally leave these as they are. 11. Click Save configuration at the bottom of the page to save your changes. Labor/Management Workplace Education

Alexandra Martines

Introduction to Blocks and Menus The basic structure of a site comes from the Blocks on its pages. Menu blocks are used for navigation.

There are three main types of blocks on a UMass Drupal Package site:   

Menu blocks Slideshow blocks HTML blocks

Additionally, News Items will be displayed on the Home Page in blocks. For more on News Items, see Adding a News Item. Labor/Management Workplace Education

Alexandra Martines

To view all of the blocks on your site: 1. In the toolbar, mouse over Structure and choose Blocks.

Labor/Management Workplace Education

Alexandra Martines

The Block Regions page will open. The Blocks and Regions columns list the names of blocks and where they appear. The Visibility column gives a summary of which pages the block appears on. The Operations column allows you to edit a block from this page. 2. To move a block, click and drag the move icon to the left of its name or choose a new Region from the drop-down menu. 3. To view an explanation of block Regions, click the Demonstrate block regions link.

Labor/Management Workplace Education

Alexandra Martines

The Block Region Demonstration page will open, highlighting the block regions on your site and their names. 4. To exit the block region demonstration, click the link at the top left. You will be returned to the Block Regions page.

Labor/Management Workplace Education

Alexandra Martines

5. You can add a new block from this page by clicking + Add block. For instructions on formatting a block, see Editing a Block, below.

Labor/Management Workplace Education

Alexandra Martines

Editing a Block To edit a block already on your site, mouse over it. A settings icon will appear in the top right.

1. Click on the settings icon and choose Configure block.

The Block settings page will open. Labor/Management Workplace Education

Alexandra Martines

2. The Block Title will display at the top of the block. Itâ&#x20AC;&#x2122;s best to make this something that will help users understand what the purpose of the block is. 3. The Block Description will not display anywhere except the administration page that lists the blocks on your site. Make it something that will help you recognize the block. Menu and Slideshow blocks will not have this field. 4. The Body content will be displayed on your site within the block. You can add links to other pages in your site to create an additional form of navigation on your site, plain textual information, or even images. Menu and Slideshow blocks will not have this field. 5. The Region Settings control where on your site the block will appear. The block pictured above will appear in the first sidebar on the left side of a page.

6. The Pages setting controls which pages your block will appear on. In the example above, the block will appear on all pages except the Home page and the Volunteer Information page. Volunteerinformation refers to the page www.umass.edu/lmwep/volunteerinformation. 7. The Content types setting determines which kind of pages your block appears on. For example, all News Items or all Basic Pages. 8. Click Save block. The Block settings page will close.

Labor/Management Workplace Education

Alexandra Martines

Introduction to Menu Blocks Menu blocks function as navigation bars. They hold links to main pages on your website so that visitors to your site have easy access to these important pages. By default, a UMass package site include a Menu block along the top of the page, above the slideshow.

You can configure the Menu blockâ&#x20AC;&#x2122;s links and the order they appear in.

1. Mouse over the Menu block. The settings icon will appear in the top right of the block. Click on the settings icon and choose List links.

Labor/Management Workplace Education

Alexandra Martines

The Menu links list will open. 2. Rearrange menu links by dragging them into your desired order with the move icon. 3. You can disable a menu link so that it does not appear in the menu. This saves you from needing to delete the link in case you plan to use it later. To disable a menu link, uncheck the Enabled checkbox. Be sure to click Save configuration afterwards. 4. To add a new menu link, click + Add link.

Labor/Management Workplace Education

Alexandra Martines

The New Menu Link page will open. 5. The Menu link title is how the link will be displayed in the menu to visitors. 6. The Path indicates which page this will link to. For example, to link to the page “Computer Classes,” you might use either https://www.umass.edu/lmwep/computer-classes or node/127. When possible, try to use the node link. For more information on nodes, see Adding a Link to a Page on Your Site. Note: To find the node number of a page, go to that page and click Edit. In your browser’s URL bar, located the section that includes =node/XXX to determine that page’s node number. 7. The Description will appear when users hover over the link. 8. The Parent Link controls whether the link will appear in the menu on its own or as a subpage of another link. 9. The Weight will control where in the menu the link appears. Links with greater weights will appear later in the menu. Labor/Management Workplace Education

Alexandra Martines

Introduction to Users & Roles Drupal allows you to add users to the site and control the levels of access they have to its settings. For example, you can add an administrator who has full access to the site or a user who can only create and edit Basic Pages. New users, their roles, and the permissions users receive with roles can be controlled through the People menu on your site.

1. Click on People in the admin toolbar.

The People list will open. All of the users of your site are listed on this page, including the status, roles, length of membership, and the last time they accessed the site. 2. You can add a new user from this page by clicking + Add user. Labor/Management Workplace Education

Alexandra Martines

The New User page will open. 3. Enter the userâ&#x20AC;&#x2122;s NetID, E-mail address, and role. Click Create new account. Note: If you arenâ&#x20AC;&#x2122;t working on a UMass Drupal Package site, you will need to create a username and password for the new user, as well as provide their email address. 4. You will be returned to the People list. Click the Permissions tab to view all of the permissions options for your site.

Labor/Management Workplace Education

Alexandra Martines

You can use the checkboxes here to edit the permissions of various roles.

5. Click the Roles tab to view all of the roles on your site. You can add a new Role by entering its name in the Add role field.

Labor/Management Workplace Education

Alexandra Martines

6. Click Edit permissions to edit the permissions of a specific role.

The Role Permissions page will open. Here you can control what kinds of access each Role has, such as the ability to publish pages or edit blocks. To change the permissions of a Role, simply select or deselect the checkbox that corresponds to the permission that Role should have and click Save permissions at the bottom of the page.

Labor/Management Workplace Education

Alexandra Martines

Introduction to Content Types The content on a Drupal site is built through Content Types.

1. To select a Content Type to add to the site, mouse over Content in the toolbar, then click on Add Content. This will also show you a brief description of the content types.

Labor/Management Workplace Education

Alexandra Martines

The Add Content page will open. 2. You can always click the X to close the page.

Labor/Management Workplace Education

Alexandra Martines

You can view all of the Content on your site, including unpublished Content, by following the steps below: 3. Click on Content in the admin toolbar. The Content page will open. 4. The list in this page can be filtered and sorted by status and type, as needed, to find specific content. Bulk operations can be done by choosing the items you wish to update. 5. Checked boxes indicate selected items. 6. Choose the operation you wish to perform on the selected items from the dropdown menu. Then click Update.

Labor/Management Workplace Education

Alexandra Martines

See the sections Editing Existing Content and Adding New Content for more about content types.

Editing Existing Content

Labor/Management Workplace Education

Alexandra Martines

Editing a Basic Page

When you are logged in (but not visible to other users of the site who are not logged in), a Basic Page will have a series of tabs available. 1. To edit a Basic Page, click on the Edit tab.

Labor/Management Workplace Education

Alexandra Martines

The editing interface will open. Here you can change the page title and body content. 2. You can change the Title for the page here. 3. Body content for the page can be added, deleted, or changed here. 4. Do not change the Text format. WYSIWYG (What You See Is What You Get) is the correct setting.

Labor/Management Workplace Education

Alexandra Martines

Scrolling down the page, you will see a menu on the left side of the page, offering a variety of settings for this page. Because you are editing existing content, these settings should remain as you found them. Adjusting these settings will be covered in the section Creating a New Page. 5. The Menu settings tab will be open automatically. 6. The Menu link title contains the title of the page. 7. The Description is the text that will appear when a user hovers their cursor over the menu link. 8. If the page is a subpage of another section, its Parent page can be chosen here. 9. The Weight determines which order the page will display in related to other pages. Pages with smaller weights will appear earlier in the navigation than those with larger weights. 10. When you Save the page, the editing interface will close and a new revision of the page will be live on your site.

Labor/Management Workplace Education

Alexandra Martines

Editing a News Item

News Items display on the Home page and on the landing page of the News section. You can edit a News Item directly from the page where it is displayed. 1. Navigate to the News section of the site. 2. Hover your cursor over the top right corner of the News Item you wish to edit. A gear-shaped button will appear. Click the arrow next to the button. Options for Edit and Delete appear. Click on Edit.

Labor/Management Workplace Education

Alexandra Martines

The editing interface will open. Here you can change the title and body content of the News Item. 3. You can change the title for the News Item here. 4. You can edit the Body content for the News Item here. (See the Table of Contents for sections about using the WYSIWYG editor, uploading images, etc.) Note: Only 300 characters will appear on the Home page before a Read More link. 5. Do not change the Text format from WYSIWYG. Labor/Management Workplace Education

Alexandra Martines

Scrolling down the page, you will see a menu on the left side of the page, offering a variety of settings for the News Item. Because you are editing existing content, these settings should remain as you found them. Adjusting these settings will be covered in the section Creating a News Item. 6. Note that News Items do not have menu links by default, so they do not appear in any menus. 7. The Revision Information tab keeps a history of all changes to the News Item so that you can revert to an earlier version if necessary. 8. You must click Save to save your changes.

Labor/Management Workplace Education

Alexandra Martines

Editing a Slideshow Image

The area selected in the picture above is the Slideshow, which can have between one and ten images that it rotates through.

Labor/Management Workplace Education

Alexandra Martines

1. To access the individual Slideshow Images click on Content in the admin toolbar. Clicking on Content in the toolbar brings you to the Content List, which shows all of the existing content on your site. 2. Sort the list by Status and Type. In this example, status remains as â&#x20AC;&#x153;anyâ&#x20AC;?. Choose Slideshow Image as the Type. 3. Click Filter. NOTE: This is also a useful way to search for existing Profiles and FAQ Items.

Labor/Management Workplace Education

Alexandra Martines

The filtered list will appear. Here you can see the current Slideshow Images. 4. Click on edit to open the Slideshow Image you want to change.

Labor/Management Workplace Education

Alexandra Martines

Clicking on edit brings you to the editing interface, where you can change the Slideshow Image. 5. Type the new Slideshow Image Name. The content of this field will not appear on the website. Its purpose is to help you find the slide in the Content List. 6. Type in the optional Title for the new image. The Title appears in the bottom portion of the image in the slideshow, flush left. It can be an image caption or other appropriate text. 7. Click Remove to delete the current image.

Labor/Management Workplace Education

Alexandra Martines

8. To add a new image, click Choose File.

A browsing page on your local drive will open. 9. Navigate to the image you wish to upload and select it. 10. Click Open.

Labor/Management Workplace Education

Alexandra Martines

You will return to the Edit Slideshow Image interface. The name of your image will appear in the Image field. NOTE:    

11.

Your image will be scaled horizontally and center-cropped vertically to fit. Files must be less than 30 MB. Allowed file types: .png, .gif., .jpg, .jpeg. Images must be larger than 920x300 pixels.

Click Upload.

12. You will see a thumbnail view of the full image (before cropping) in the Image field. Your image will be automatically cropped by an equal amount from the top and bottom in order to fit the long horizontal format of the slideshow. The orange lines in the image above indicate the approximate crop that will be applied to this image. If you wish to crop your image differently, you must use image editing software. The final size for such a cropped image should be 920 (wide) x 300 (high), minimum.

Labor/Management Workplace Education

Alexandra Martines

Scrolling further down the page, you will see a Settings Menu on the left side. Because you are editing an existing image, do not change these settings. 13. Click Save to save the edited Slideshow Image.

Labor/Management Workplace Education

Alexandra Martines

Adding New Content

Labor/Management Workplace Education

Alexandra Martines

Adding a Basic Page

1. To create a new Basic Page, mouse over Content and then Add Content in the toolbar. A dropdown menu of Content Types will appear. Click Basic page.

Labor/Management Workplace Education

Alexandra Martines

The Create Basic Page page will open. 2. Type the page Title in this field. 3. Type in the content for the Body of the page. (See the Table of Contents for sections on using the WYSIWYG menu bar, pasting content from Word, adding links, uploading PDFs, etc.) 4. Do not change the Text format. Leave WYSIWYG as the choice here.

Labor/Management Workplace Education

Alexandra Martines

Scrolling down, you will see a menu on the left side of the page. The Menu settings tab will be open automatically. 5. Click the check box to provide a Menu link. In rare cases, you will not want to include a page in the menu, but in most cases you will want to see it in the menu for easy navigation. The Menu link interface will appear. By default, the title of your page will become the Menu link title. In most cases this is not a problem, although if your page title is very long, you may wish to edit the Menu link title. 6. If you would like to shorten or change the Menu link title, you can do that here. 7. The Description field contains the text that appears when a user hovers over the menu link. Including this information is optional, but is good practice for accessibility standards. 8. Choose a Parent page for your new page. If, for example, your new page is a subpage of the About section, choose About from the drop down menu. If you do not choose a Parent item, the new page will appear in the top navigation. 9. Save the page.

Labor/Management Workplace Education

Alexandra Martines

Adding a News Item

1. To create a News Item, mouse over Content, and then Add content in the Toolbar. A dropdown menu of Content Types will appear. Click News Item.

Labor/Management Workplace Education

Alexandra Martines

The Create News Item page will open. 2. Type in the News Item title. 3. Tags are keywords that help visitors to your site find the information they are looking for. Type in any tags you wish to use to assist in searches. Note: It is best to include 2-6 tags. Include any terms related to your News Item, with the exception of any words that appear in your Title. 4. Type or paste the Body content. (See the Table of Contents for instructions on how to paste from Word) 5. Do not change the Text format. Leave WYSIWYG as the choice here. Labor/Management Workplace Education

Alexandra Martines

6. To upload an image into the News Item, click Choose File.

A browsing window on your local drive will open. 7. Navigate to the folder that contains the image you wish to upload and click on it to select it. 8. Click Open.

Labor/Management Workplace Education

Alexandra Martines

You will be returned to the Create News Item page. The name of the image file you have selected will appear in the Image field. 9. Click Upload.

A thumbnail of the image will appear. 10. Add alternate text, briefly describing the image. Alternate text is optional, but it is good practice to add it for accessibility standards. This text will appear when a user hovers their mouse over the image.

Labor/Management Workplace Education

Alexandra Martines

Scrolling down the page, you will see the settings menu on the left side. 11. Menu settings will be open by default. Generally, you will not wish to create a menu link for News Items. Leave this box unchecked. Revision information is worth noting in that it provides the opportunity for you to enter notes about revision if you desire, and to access a previous version of the item if you wish to revert to it.

12. Publishing options is an important setting area for News Items.  The check box for Published will be checked by default.  The check box for Promoted to the front page will also be checked by default. This setting will cause the News Item to appear on the Home page in the News area.  Choosing Sticky at the top of lists will cause the News Item to move to the top of the News list, out of its normal chronological order. 13. Click Save to save the News Item.

Labor/Management Workplace Education

Alexandra Martines

Adding an FAQ Item FAQs (or Frequently Asked Questions) display a list of common questions for your site visitors. Clicking any question reveals the answer. FAQs allow visitors to quickly find answers to their questions without consuming your time. To see a list of the FAQ Items on your site or edit existing ones, visit the Content page and filter by FAQ Items (see Introduction to Content Types for more information).

You can add FAQ Items to the FAQ page on your site similarly to the way you create new Basic Pages and News Items. 1. To create a FAQ Item, mouse over Content, and then Add content in the Toolbar. A dropdown menu of Content Types will appear. Click on FAQ Item.

Labor/Management Workplace Education

Alexandra Martines

The Create FAQ Item page will open. 2. Type in the FAQ Item Question. 3. Type or paste the Answer content. (See the Table of Contents for instructions on how to paste from Word)

There is no need to adjust the settings for FAQ Items. 4. Click Save. Your FAQ Item will be added to the FAQ page on your site. FAQ Items appear in the order they were created. Labor/Management Workplace Education

Alexandra Martines

Adding a Profile You can create profiles of the staff and faculty in your program or department. Profiles will appear on the People page of your site. To see a list of the Profiles on your site or edit existing ones, visit the Content page and filter by Profiles (see Introduction to Content Types for more information).

1. To create a Profile, mouse over Content, and then Add content in the Toolbar. A dropdown menu of Content Types will appear. Click on Profile.

Labor/Management Workplace Education

Alexandra Martines

The Create Profile page will open. 2. Enter the personâ&#x20AC;&#x2122;s First and Last Name. 3. To add a Profile Image, see step 5. 4. Type or paste Bio information here.

Labor/Management Workplace Education

Alexandra Martines

5. To upload a Profile Image, click Choose File.

A browsing window on your local drive will open. 6. Navigate to the folder that contains the image you wish to upload. 7. Click on the image to select it. 8. Click Open.

Labor/Management Workplace Education

Alexandra Martines

You will be returned to the Create Profile page. The name of the image file you have selected will appear in the Profile Image field. 9. Click Upload.

10. Crop the image as desired.

Labor/Management Workplace Education

Alexandra Martines

Scrolling down the page, you will see the settings menu on the left side. 11. Open the Publishing options. Publishing options are outlined below. a. The checkbox for Published will be selected by default. b. Promoted to the front page will push your Profile to the front page of your site with your News Items. You likely do not want to do this. c. Choosing Sticky at the top of lists will cause the Profile to move to the top of the list, instead of appearing in its normal alphabetized order. 12. Click Save.

Labor/Management Workplace Education

Alexandra Martines

Adding an Image Gallery Image Galleries allow you to collect images from your program, department, or events. The Gallery page in your Main Menu aggregates all of the Image Galleries on your site and contains an example Image Gallery. You can edit and add images to the example gallery, or create a new one by following the instructions here.

1. To create an Image Gallery, mouse over Content, and then Add content in the Toolbar. A dropdown menu of Content Types will appear. Click on Image Gallery.

Labor/Management Workplace Education

Alexandra Martines

The Create Image Gallery page will open. 2. Enter a Gallery title for your page. 3. Type or paste any Body information here, such as a description of types of images in the Image Gallery. 4. Donâ&#x20AC;&#x2122;t change the Text format from WYSIWYG. 5. To upload a Gallery Image, click Choose File.

Labor/Management Workplace Education

Alexandra Martines

A browsing window on your local drive will open. 6. Navigate to the folder that contains the image you wish to upload and click on it to select it. NOTE: The image must be between 200x200 and 1200x1200 pixels in size. 7. Click Open.

You will be returned to the Create Image Gallery page. The name of the image file you have selected will appear in the Add a new file field.

Labor/Management Workplace Education

Alexandra Martines

8. Click Upload.

You will see a thumbnail view of the full image in the File Information area. 9. Enter the image title (caption or other text) in the Title field (optional). This text will be displayed below the image in the Gallery. 10. To add more images, repeat steps 4-8.

Labor/Management Workplace Education

Alexandra Martines

Scrolling down the page, you will see the settings menu on the left side. The Menu settings options will be open by default. You will likely want to set these so that your page appears in the Main Menu or as a subpage as another page you’ve already created. 11. Select the checkbox for Provide a menu link. 12. The Menu link title will match the Gallery title. You can change this if you wish to. 13. The Description will appear when someone hovers over the link to this page. This information is important to add for accessibility. 14. In the Parent item dropdown, choose the page your Image Gallery will become a subpage of. To list it in the Main Menu, choose <Main Menu>. 15. The Weight controls where in the menu order your page will appear. Items with lesser weights “float” to the top, while items with higher weights “sink” to the bottom, appearing later in the list. 16. Click Save.

Labor/Management Workplace Education

Alexandra Martines

Adding a Webform Webforms allow you to collect information from anonymous site visitors. You can create surveys, multi-page questionnaires, polls, registration forms, and sign-up sheets. Webforms feature a basic analysis of the results collected. You can download the data from your site for further analysis and use it in any spreadsheet program, such as Microsoft Excel. All UMass Drupal Package sites are able to use the Webforms module, but it must be turned on by University Relations staff.

1. To create a Webform, mouse over Content, and then Add content in the Toolbar. A dropdown menu of Content Types will appear. Click on Webform.

Labor/Management Workplace Education

Alexandra Martines

The Create Webform page will open. 2. Enter a Title for your Webform. 3. Type or paste any Body information here. This text will appear above your form, so instructions or additional information can be supplied here.

Alexandra Martines

4. Select the checkbox for Provide a menu link. 5. The Menu link title will match the Title. You can change this if you wish to. 6. The Description will appear when someone hovers over the link to this page. This information is important to add for accessibility reasons 7. In the Parent item dropdown, choose the page your Webform will become a subpage of. To list it in the Main Menu, choose <Main Menu>. 8. The Weight controls where in the menu order your page will appear. Items with lesser weights “float” to the top, while items with higher weights “sink” to the bottom, appearing later in the list. 9. Click on the Publishing options tab to open it. Uncheck the Published option if you plan to work on your Webform again before it is ready for use. 10. Click Save.

The Form Components page will open. On this page are the controls for creating and editing the rest of the form elements. 11. Enter a New component name for the first form component. This text will appear next to space for response on the form. 12. Choose a type of form component. Explanations of the different types are below:

Labor/Management Workplace Education

Alexandra Martines



Date: Allows the user to select a date.



E-mail: Only accepts valid e-mail addresses as input.



Fieldset: An organizational option for putting fields into groups on the page. Simply drag a fieldset into place, and then drag one or more fields into it.



File: Allows the user to upload a file with their form submission.



Grid: Provides a grid formatted field for radio button (single selection) or check box (multiple selection) input. Questions are formatted as rows, and responses are formatted as columns. All questions in the grid component have the same options for a response. Create separate grid components for different sets of responses.



Hidden: Provides a hidden field for internal content entry. Label and text in hidden ﬁeld will not be displayed on the Webform, but will be included in the data saved. A Hidden field does not provide for any input by the Webform submitter.

Labor/Management Workplace Education

Alexandra Martines



Markup: Provides a field for content entry by the form creator. Content in the markup field will be displayed on the Webform. Markup fields are typically used for text, links, or images to be displayed within the Webform components - i.e. for additional instructions. A Markup field does not provide for any input by the Webform submitter.



Number: Provides a field for number input.



Page Break: Insert one or more page breaks to create a multi-page form. This can help you keep question pages short and simple.



Phone Number: Allows the user to enter a phone number.



Select Options: Radio buttons or check boxes allow the user to select from a list of options.



Textarea: Allows the user to add several sentences or a paragraph of text.



Text field: A single-line text entry field.

Labor/Management Workplace Education

Alexandra Martines

ď&#x201A;ˇ

Time: Provides hour and minute drop-downs, as well as am/pm radio buttons, for time input.

13. Choose whether users are required to fill out this form component before they submit this form. 14. Click Add.

The Edit component page will open. On this page you can specify additional settings, such as a default value for this option that will autofill in the form or a description that will help users know what to enter in the field. 15. If you have no additional changes to make, click Save Component. 16. Repeat steps 12-16 to continue adding form components until your Webform is complete. Labor/Management Workplace Education

Alexandra Martines

Adding a Slideshow Image

Before creating a new slideshow image on your website, choose an image that will be visually successful in the long horizontal space available. The image must be at least 920 pixels wide x 300 pixels high. Because most digital images do not conform to this shape, you should consider in advance how your new image will crop. Your uploaded image will be automatically scaled horizontally to fit (920 pixels) and be automatically cropped by equal amounts from the top and bottom to fit (300 pixels). You may wish to resize and crop your image in image editing software such as Photoshop before uploading it to your site, in order to achieve the desired crop.

Labor/Management Workplace Education

Alexandra Martines

1. To add an image to the Slideshow, mouse over Content, and then Add content in the Toolbar. A dropdown menu of Content Types will appear. Click on Slideshow Image.

The Create Slideshow Image page will open.

Labor/Management Workplace Education

Alexandra Martines

2. Type in the Slideshow Image Name. The content of this field will not appear on the website. Its purpose is to help you find the image in the Content List. 3. Click Choose File.

A browsing window on your local drive will open. 4. Navigate to the folder that contains the image you wish to upload and click on it to select it. 5. Click Open.

Labor/Management Workplace Education

Alexandra Martines

You will be returned to the Create Slideshow Image page. The name of the image file you have selected will appear in the Image field. 6. Click Upload.

Labor/Management Workplace Education

Alexandra Martines

You will see a thumbnail view of the full image (before cropping) in the Image page. 7. Your image will be automatically cropped by equal amounts from the top and bottom, in order to fit the long horizontal format of the Slideshow. The orange lines in the image above indicate the approximate crop that will be applied to this image. 8. Enter the image title (caption or other text) in the Title field. This text will be displayed below the image in the Slideshow. 9. Click Save. The new Slideshow Image will be added to the Slideshow.

Labor/Management Workplace Education

Alexandra Martines

Working with Webforms

Labor/Management Workplace Education

Alexandra Martines

Adding Email Notifications to a Webform You can set your Webform to send results to in an email when someone uses your form.

1. Go to your Webform on your site. Click the Webform tab. The Form components page will open. 2. Click the E-mails tab.

The E-mail settings page will open. 3. Enter the email address notifications will be sent to in the Address field. You may also add multiple email addresses separated by commas. Click Add. Labor/Management Workplace Education

Alexandra Martines

The E-mail to address page will open. 4. For E-mail subject, either leave Default selected or enter a custom subject. 5. The E-mail from address will be the default email address for your website. You may leave it as this Default or enter a Custom e-mail address for messages to come from. 6. For E-mail from name, either leave the default site name or enter a custom name.

Labor/Management Workplace Education

Alexandra Martines

7. Leave the E-mail template as Default unless you want to exclude specific information. 8. Click Save e-mail settings.

Labor/Management Workplace Education

Alexandra Martines

Adding a Confirmation Page to a Webform You can add extra information to the page users are directed to once they finish filling out your form.

1. Go to your Webform on your site. Click the Webform tab. 2. The Form components page will open. Click the Form settings tab.

Labor/Management Workplace Education

Alexandra Martines

The Form settings page will open. 3. In the Confirmation message field, enter any information you wish users to see when they complete your form, such as when to expect a response or how to get in touch if they have questions. 4. You may set the Redirection location to redirect to a specific page you have already created. If you have not done so, leave the default setting of Confirmation page. Labor/Management Workplace Education

Alexandra Martines

5. You may limit the total number of responses to your form by setting the Total submissions limit setting. 6. You may limit the number of times a user may submit to your form by entering a value in the Per user submission limit setting. Users will be identified with their IP address if they are not logged into your site, so users may be able to get around this setting. 7. The Status of this form setting allows you to close a form if you do not want users to be able to access it for a time. 8. Click Save configuration.

Labor/Management Workplace Education

Alexandra Martines

Viewing Submissions to a Webform You can view the submissions users have made to your Webform in a variety of ways, including in your browser when logged into your site or by downloading a spreadsheet.

1. Go to your Webform on your site. Click the Results tab.

The Submissions page will open. 2. This page lists all of the submissions to your Webform in a table listing the date submitted, name of the user (if logged in), their IP address, and admin operations. Click View to see the details of a userâ&#x20AC;&#x2122;s choices in the Webform. Labor/Management Workplace Education

Alexandra Martines

The Submission page will open. 3. Click Previous submission or Next submission to view more results. 4. Click Print to print a copy of this userâ&#x20AC;&#x2122;s submission. 5. Click Webform results to return to the Submissions page.

The Submissions page will open.

Labor/Management Workplace Education

Alexandra Martines

6. Click Edit to edit the userâ&#x20AC;&#x2122;s choices or Delete to delete this record.

7. Click Analysis to see a breakdown of the number of times users have selected each option in your form.

Labor/Management Workplace Education

Alexandra Martines

8. Click Table to see a table containing the details of usersâ&#x20AC;&#x2122; choices in submissions to your form.

9. Click Download to download a spreadsheet of the submissions to your form. The Download page will open. 10. For Export format, choose either Delimited text or Microsoft Excel. 11. If choosing Delimited text, choose a Delimited text format, such as comma or tab. 12. Click on Download range options to expand the settings. Choose whether to download all submissions or a range, including the latest submissions since your last download or a date range. 13. Click Download. Your file download will begin. Labor/Management Workplace Education

Alexandra Martines

Formatting Text, Uploading Files, Adding Links, & Placing Images

Labor/Management Workplace Education

Alexandra Martines

Formatting Text Using the WYSIWYG Editor When creating or editing a Basic Page or News Item, you will add text using the interface seen below. To discover what each button in the toolbar does, mouse over the button. Removing formatting from copied text

1. The default setting for text editing is WYSIWYG (What You See Is What You Get). Do not change this setting. All formatting should be removed from copied and pasted text, and reapplied using available tools. This is due to the different ways computer programs and web pages read text formatting. 2. Use the Paste from Word button if you are copying and pasting text from Microsoft Word. This should remove any formatting. 3. You can also remove formatting from copied content by selecting the pasted text, then clicking on the eraser icon. Labor/Management Workplace Education

Alexandra Martines

Note: You can also paste text without formatting by using Ctrl+Shift+V. Formatting text

4. After typing or pasting text, format it using the dropdown menu choices. Select the text you want to format, then choose the style from the dropdown menu. Try using the pre-styled heading and paragraph choices before using Bold or Italic formatting.

Labor/Management Workplace Education

Alexandra Martines

5. Choose the formatting style you wish to use from the dropdown menu. 6. Make sure there is a hard return after the text you wish to format by pressing enter at the end of the text you are formatting.

7. To make text bold or italic, select the text, then click the appropriate button, as you would using Word. Labor/Management Workplace Education

Alexandra Martines

Adding Links

1. To add a hyperlink to the body content on a page, highlight the words you would like to become a Link. 2. Click the hyperlink button in the WYSIWYG editor.

Labor/Management Workplace Education

Alexandra Martines

The Link window will open. 3. Type or paste your link’s URL into the URL field. 4. Click OK. The Link window will close and your URL will now be hyperlinked to the text you selected in your page’s body.

Labor/Management Workplace Education

Alexandra Martines

Adding a Link to a Page on your Site

1. To add a hyperlink to a page already on your site, highlight the words you would like to become a Link. 2. Click the hyperlink button in the WYSIWYG editor.

Labor/Management Workplace Education

Alexandra Martines

The Link window will open. 3. Change the Link Type to Internal path. 4. In the Link field, enter a portion of the name of the page. Drupal will search for pages with that name and provide a list of options. Choose the correct page from the list. 5. Click OK. The Link window will close and your URL will now be hyperlinked to the text you selected in your pageâ&#x20AC;&#x2122;s body.

Labor/Management Workplace Education

Alexandra Martines

Linking to and Uploading a File

1. To link to a document, PDF, or other file in a web page, highlight the text you would like to turn into a Link. 2. Click the hyperlink button in your WYSIWYG editor.

The Link window will open.

Labor/Management Workplace Education

Alexandra Martines

3. Click Browse Server.

The websiteâ&#x20AC;&#x2122;s File Browser will open. If your file has already been uploaded to the site, find it in the File Browser, double-click on it, and skip to Step 8. Otherwise, continue to Step 4. 4. Click Choose File.

A browsing window on your local drive will open. Labor/Management Workplace Education

Alexandra Martines

5. Navigate to the file you wish to upload and click on it. 6. Click Open.

You will be returned to the websiteâ&#x20AC;&#x2122;s File Browser. You should see the name of your file in the File field. 7. Click Upload.

You will see a message confirming that your file has been uploaded to the website. 8. Double-click on the file in the File Browser.

Labor/Management Workplace Education

Alexandra Martines

You will be returned to the Link window. 9. Click OK.

The text you selected will become a link to your file. Labor/Management Workplace Education

Alexandra Martines

Linking to an Email Address

1. To link to an email address in a web page, enter the text you wish to link to the email address, likely the personâ&#x20AC;&#x2122;s name, and highlight it. 2. Click the Link button in your WYSIWYG editor.

The Link window will open. 3. Choose E-mail in the Link Type field.

Labor/Management Workplace Education

Alexandra Martines

4. Type or paste the email address into the Email Address field. Adding a default subject line or email body content is not required. 5. Click OK. Your page will now contain a link to the email address.

Labor/Management Workplace Education

Alexandra Martines

Adding an Image to a Basic Page or Block Note: See the Creating a News Item section for how to add an image to a News Item.

1. To place a photo in line with text, place your cursor where you want the image to appear. 2. Click on the Image icon in the toolbar.

The Image Properties window will open. 3. Place your cursor in the URL field. If your image is from the web, paste the URL here and skip to Step 11. If not, continue to step 4. 4. Click Browse Server. Labor/Management Workplace Education

Alexandra Martines

The website’s File Browser will open. This is a directory of all of the files in your website’s server. NOTE: You can access your website’s File Browser at any time by adding /IMCE to the end of your website’s URL (e.g. www.umass.edu/lmwep/IMCE). 5. If your photo has already been uploaded to the website, find it in the directory, double-click on it, and skip to step 11. If not, continue to step 6. 6. To upload the photo, in the top left hand side of the screen, click Upload.

7. Click Choose File.

Labor/Management Workplace Education

Alexandra Martines

100

A browsing window on your local drive will open. 8. Navigate to the image you wish to upload and click on it. 9. Click Open.

You will be returned to the file browser. Note that the file name will appear in the Choose File field. It is important to choose file names that are clear and useful to both you and other users or the website when navigating the file directory. You can change the file name in your local drive directly. 10. Click Upload.

Labor/Management Workplace Education

Alexandra Martines

101

You will see a notification that your photo has been uploaded and it will be highlighted in the File Browser. Double-click on the photoâ&#x20AC;&#x2122;s file name to place it in the page.

The Image Properties window will open. You can adjust the size of your image here. Labor/Management Workplace Education

Alexandra Martines

102

11. The Image Properties window will show the size of the image to be placed. Note that the entire image does not fit in the box. You can scroll through the box to see how large or small your image is. 12. You can manually adjust the width and height of the image by typing numbers in these fields. The recommended maximum image width is 700 pixels, but smaller images are suggested. 13. Clicking the lock symbol will lock the image proportions so you can adjust the width and the height will automatically resize to keep the proportions the same (and vice versa).

14. Once you have adjusted your image’s size, click OK. The Image Properties window will close and you will see your image placed within the body of your page. Important Notes:  



You can always edit your image’s size by double-clicking on it to open the Image Properties window again. You can left align, center, or right align the image by using the alignment buttons in the WYSIWYG interface toolbar. You can wrap text to the left or right of the image by choosing an Alignment from the Image Properties window. You can access your website’s File Browser at any time by adding /IMCE to the end of your website’s url (e.g. www.umass.edu/lmwep/IMCE).

Labor/Management Workplace Education

Alexandra Martines

103