Web Authoring Procedures: Drupal

Select a topic from the left menu,
or click All Topics for a searchable, printable version.

Overview

This document describes how to create and edit Web pages for the CSU Libraries website using the Drupal Content Management System.

Also see:

Create an account

All Libraries staff may create an account. Student supervisors should contact Greg Vogl if their students need accounts. Unused accounts will be deleted periodically.

Accounts should be used only for work-related content and purposes.

When you log in with your eID for the first time, an account is created for you, and administrators are notified by e-mail so they can give you authoring permissions.

After you log in, click the Edit tab, click Personal Information, enter your First Name and Last Name, and click Save. This will appear as the contact name on the bottom of pages you author.

If you want, you may also enter the other information, which may help the administrators to know which roles you should have, and which Libraries Staff can see on the list of staff users.

Login

  1. Log in to a Libraries staff computer (directly or through Remote Desktop Connection).
  2. Go directly to https://lib2.colostate.edu/user or:
    1. Open the Libraries home page.
    2. Go to the Staff Wiki.
    3. Click Drupal Login in the left navigation under Web Pages.
  3. Type your eID username and password and click Log in.
  4. To log out, click the Log out link in the far right of the top administration menu.

Note: When you log in or perform administrative functions like editing pages, the URL in the address bar should begin with https. This is to ensure security since the information is encrypted when sent over the network using SSL. To edit a page, its URL in the address bar must begin with https.

Roles and Permissions

When you have created an account, administrators will receive an e-mail notification.

  • When you are not logged in, you are an anonymous user.
  • When you log in, you are an authenticated user.
  • Anonymous and authenticated users are generally limited to using the site read-only.

Administrators can assign you to additional roles which allow you to create and edit content.

  • Authors can create and edit pages and other content types. Authors can only edit their own pages.
    Most staff members who create an account will be given this role.
  • Editors can edit menus and blocks.
    Editor privileges will generally be given to people who manage the content for their units, or the Libraries as a whole.
  • Administrators have more complete control over the system content and functionality, including modules, roles and permissions.

To view your roles, click the My Staff Account link and click the Edit tab.

If you have not been given an author role two days after you have created an account, please contact an administrator.

Currently, the primary administrator is Greg Vogl. Daniel Hamp serves as a backup.

Create a new page (or other content type)

Using the top administration menu, go to Content > Add content > page. Fill in the required fields and click Save.

You can similarly create other content types (books, webforms, stories, promotions, etc.)

Finding and editing existing pages (or other content types)

To edit a page, simply click the Edit tab just below the main page heading.

If a page does not show the Edit tab and you have already logged in to Drupal, change the URL in the address bar of your browser to begin with https://.

  • If you still do not see an Edit tab, it is probably not a Drupal page. To edit an HTML or PHP page using Dreamweaver or a text editor, see the Web Authoring Procedures for instructions on how to obtain read/write access to the web server.

To list and edit pages for which you are the author:

  1. Click the Staff Account link on the right side of the main navigation bar.
  2. Click the Track tab.
  3. Click the title of the page you want to edit.

Or:

  1. In the Staff Wiki, click the Web Authoring link in the left navigation.
  2. Click the Drupal Pages link.
  3. Click your username.
  4. Click the title or URL of the page you want to edit.

The Glossary lists all Drupal pages alphabetically by title.

Logged in users can also search Drupal by keyword. Advanced search allows limiting to pages or other content types.

Only editors can edit others' pages:

  1. Using the top administration menu, click on Content.
  2. In the Show only items where box, Select Page from the type menu. (You can also use this to find existing books, webforms, stories, promotions, etc.)
  3. The most recently edited items are at the top.
  4. Click the title of the page you want to edit.

To list pages in a folder such as archives or access, go to Configuration > Search and metadata > URL aliases, type a folder name (a word that can contain dashes but not slashes) and click Filter. (Click Reset to view all aliases again.)

Only administrators should edit the home page or main navigation pages. This is for quality control and consistency of navigation in all Libraries pages.

Copy a Page

To copy the content from an existing Drupal page,

  1. Edit a page such as about/hours/regular, click somewhere in the body, and press Ctrl-A and Ctrl-C.
  2. Create or edit a Drupal page e.g. about/hours, click in the body, press Ctrl-A and Ctrl-V, fill in the required page fields if necessary, and then save.

To copy the content from an existing HTML page or other document, see pasting content from other sources.

Required Page Fields

Title

The title should be brief and descriptive.

Avoid using Libraries or CSU in the title, since they are already prominent in the page header.

Avoid repeating department/subsite names in all department/subsite page titles, since this would be redundant, e.g. in the HTML <title> tag and breadcrumb trail.

Body

Nearly every page must have a body. See Edit the page body below for instructions on using the editor.

URL path settings

Always uncheck the Automatic alias box and provide a URL. (Although an automatic URL will be generated if you leave this alone, it would put all such pages in the same /content/ directory, which is not user-friendly, makes page management more difficult, and the page will not have correct left navigation or breadcrumbs.)

The path should begin with a directory name and end without an extension, e.g. services/computers/lab

Use hyphens to separate words if the page title has multiple words, e.g. about/maps/study-areas-rooms

Avoid uppercase, abbreviations, underscores, spaces, and stop words (and, of, the).

Optional Page Fields

See Images and files for the Image and File attachments fields.

In the Revision information field, you may want to add a Log message to explain your page changes to other authors.

Editors can enable comments on pages, unpublish pages, and change page author or modification date.

If the author is administrator or gvogl, it will display at the bottom of the page as "Web Team".

Administrators can use Printer, e-mail and PDF versions to determine whether to show print, e-mail and PDF links and a printer-friendly URLs list. They are enabled by default.

Edit the page body

When creating or editing a page, use the Body field to add or edit the page content.

This field uses CKEditor, a web-based WYSIWYG editor that works much like Dreamweaver.

For all browsers, you no longer need to click Source or Switch to plain text editor before clicking Save.

Coding Standards

Use existing coding standards when creating content to keep the site as clean and consistent as possible for usability.

  • Using the Format menu (which defaults to Normal), use Heading 2 for main headings, and Heading 3 and Heading 4 for subheadings. (Heading 1 should not be used. The <h1> tag should only be used internally by Drupal, for the page title.)
  • Generally avoid using menus that format visually instead of semantically (Font, Size, Text Color, Background Color, indents, block quotes).

Pasting content from other sources

  1. Open a web page or a Microsoft Word document.
  2. Select some or all content using the mouse (excluding the page title).
  3. Press Ctrl-C to copy.
  4. Edit a Drupal page.
  5. Click in the body where you want to put the content.
  6. Click the Paste or Paste from Word button to paste.
  7. Click the Select All button or press Ctrl-A.
  8. Click the Remove Format button to remove all visual formatting that was in the original content.
    (Headings, lists, links and other semantic formatting will be correctly preserved.)
  • Click the Source button or Switch to plain text editor link to view and edit the HTML source code of the document.
    You can copy and paste source code between CKEditor and other editors (Notepad, Notepad2, Notepad++, WordPad, Word, Dreamweaver, FrontPage, etc.) to search and replace and to perform other advanced code cleanup.

Hyperlinks

To create a hyperlink,

  1. Select the text to be linked and click Link (chain icon).
  2. To get the URL,
    • If the link is external, start with http, or copy and paste from the address bar in a browser, e.g. http://www.colostate.edu/
    • If the link is internal (a Drupal page or lib2.colostate.edu page), start with a slash, e.g. /archives/water/
      • Links starting with a slash (absolute links) are generally easier to globally search and replace than relative links.
      • However, you can still create relative links by choosing Protocol <other> and a URL that does not start with a slash.
      • If the link is a Drupal page, it should end without slashes, e.g. /archives/staff
      • If the link is a document in the images area, e.g. a PDF file, you can click browse server and navigate to the directory where it is stored, e.g. services/computers

Anchors

To create an anchor,

  1. Position the cursor in the body text where the anchor should appear.
  2. Click the Anchor (flag) icon
  3. Type a name
  4. Click OK.

To link to the anchor,

  1. Select the text to be linked and click Link.
  2. For Link Type, select "Link to anchor in the text".
  3. Select the anchor by anchor name and click OK.

Other editing tools

  • Hover over each button to see a text description of it in a tool tip.
  • Standard editing buttons include Cut, Copy, Find, Replace, Undo, Redo, Bold, Numbered List, Bulleted List, Image and Table.
  • Choose Check Spelling from the ABC drop-down menu to check page spelling, or enable SCAYT (spell check as you type).
  • Click the Maximize (four arrow) button to enlarge the editing window to full screen. (Click it again to return to normal view.)
  • Click the Show Blocks button to see the HTML structure of the document, including P (paragraph), DIV and H2-5 (heading) tags.

Input format should be left as is (Full HTML). If you see two WYSIWYG editor windows in the same page, it was probably created before we changed to the CKEditor, and the input format probably needs to be changed from Full WYSIWYG to Full HTML.

Images and Files

Uploading

There are two ways to upload images and other files.

  1. The Web Team can use the Samba file share \\lib2.colostate.edu\images to drag and drop files using Windows Explorer.
  2. All authors and editors can use the IMCE image editor to upload and link to images.

File Management

Images should generally be put in an image subdirectory that corresponds to the directory structure in Drupal, e.g. building map images are in about/maps and computers and technology images are in services/computers. Web Team members can create directories in \\lib2.colostate.edu\images using Windows Explorer.

File URLs start with /sites/default/files/images/. As a shortcut, you can use /images/.

Drupal file system security prevents browsing the directories on the Web server where the existing pages are located. To locate existing pages and files, you can still use Samba shares like \\lib2.colostate.edu\html and the address bar of your Web browser.

File Placement

  • Most content types (including page, promotion, story and blog entry) allow putting images in the Body using CKEditor.
  • Pages allow an Image at the top of the body content, and File attachments at the bottom.
    Click the Browse... button to select a file, and click the Upload or Attach button to upload it.
    It is normally good to display the file size of large attachments, but to hide this for small files, uncheck the List box.

Image Management using CKEditor

There are two image buttons in the CKEditor that can be used to insert and edit images.

  • Use the IMCE button to quickly browse and select or upload images using IMCE. After you select an image, click the Send to ckeditor button at the top.
  • Use the Image button to specify any image URL, including remote images. You can also click the Browse Server button to select an image using IMCE.
  • You can also use the Image button to specify various attributes, such as alternative text, width, height, border, horizontal or vertical spacing (HSpace and VSpace), right alignment, and a clickable Link.

Menus

Cautions

  • Because editing menus can impact the entire site, editing menus is restricted to editors.
  • These menus should only be edited by an administrator, who should also copy the changes to the footer for static pages and all other web applications:
    • The Main menu (formerly Primary links menu in Drupal 6) is shown in the top drop-down navigation bar.
    • The Search/Find, Services, About and Help menus are shown in the left navigation and are copied from the Main menu.

Creating and Editing Menus

  1. Go to Structure > Menus to list all menus.
  2. To create a new menu, click the Add menu tab and type a menu name, title and description.
  3. Click a menu to edit its items. (You can also edit any left navigation menu from a page by hovering over it and clicking the "edit menu" link that appears.)
    1. To add a menu item, click the Add item tab and provide the path, menu link title text, and a description for mouseover.
    2. To move or indent menu items, drag their arrow icons up, down, left or right. Remember to click Save configuration.
  4. Use Blocks to make a menu appear in one or more pages.

Headings Within Menus

It is not possible to create non-linked headings within menus. In general, subheadings should be linked to separate pages that list and describe the items under them. For examples, see the Computers and Technology and Building Maps pages.

If the headings and items are so self-explanatory that separate pages would be patronizing, use this workaround:

Create menu items for each heading and link them to the subsite (e.g. department) home page. Click the Expanded check box, and indent items beneath them.

For an example, see the Employment menu.

This is not ideal, since the headings are only bold when on the home page, but at least they can be correctly indented.

Blocks

Note: Because editing blocks can impact the entire site, editing blocks is restricted to editors.

A block is a section of code that appears in certain areas of pages, called regions (left sidebar, right sidebar, etc.)

Menus are the most commonly used type of block. There are also blocks on the Libraries site for images and areas on the home page.

Every page should have both a left sidebar for internal navigation, and a right sidebar for images and/or non-essential information like promotion, quick links or external links. This keeps the site consistent and prevents paragraphs in the center content from being too wide for easy reading. (Various Web usability sources put the optimum line width at 50 to 100 characters.)

  1. Go to Structure > Blocks. Note the region for each block.
  2. Click the Configure link next to a block, or click Add Block to create a non-menu block of code.
  3. The block title should be <none> to use no title, or blank to use the block's name as the title.
  4. Most blocks do not need user or role specific visibility settings.
  5. Caution: Most blocks should only be shown on specific pages. It is very easy to accidentally display a subsite menu on every page!
    Before selecting a region for a subsite menu or any other block, the block should be restricted by listing the subsite home page and all subpages.
    In the Page specific visibility settings, select the Show on only the listed pages radio button and enter the set of pages, e.g. for an entire subsite:
    • reserve
    • reserve/*

If you want a different right sidebar on each page in your subsite,

  1. Editors can exclude your pages from the Library Images block. This will assure that the page spans the full width.
  2. Enclose the 3 right sidebar images (width x height = 170 x 85 pixels) or other content in a div tagin the top of the page body:
    • <div id="csulib-rightnav">(your content here)</div>
  3. To prevent text wrapping under the sidebar, you may need to use an inline style to set a minimum height or bottom margin:
    • <div id="csulib-rightnav" style="margin-bottom: 300px">(your content here)</div>

Stories

Stories are news items that appear in the right column of the home page.

Stories should only be created by the Web Team. Please submit news items to the news form or contact Greg Vogl.

How to create a story

  1. Go to Content > Add Content > Story
  2. Provide required fields (title, body and URL) as usual. No menu item is needed.
  3. Under URL path settings, add a user-friendly URL starting with about/news/year, e.g. about/news/2014/vote.
  4. If you want the story to be forwarded directly to an existing page, please ask a Web server administrator to add the redirect.

Display of stories on the Libraries home page

  • By default, stories will be displayed on the Libraries home page in the order published.
  • The home page will always display the most recently published items which are "Promoted to front page".
  • To remove an item from the home page, uncheck "Promoted to front page" under "Publishing options" at the bottom of the Edit screen.
  • To put an item at the top of the list, check the box "Sticky at the top of lists".
  • You can also change the published date under Authoring information, Authored on:. Use today's date to assure that the item is at the top.
  • Administrators and editors can edit the block of the news view and change the number of items to display; it is currently set at 10.

Promotions

Promotions are items that promote existing web pages. They appear in the bottom row of the home page, and on the promotions test page.

Promotions should only be created by the Web Team.

Note: The home page is cached for performance, so these are maintained by Greg Vogl in a JavaScript file instead of in Drupal.

How to create a promotion

  1. In the top Administration menu, go to Content > Add content > Promotion.
  2. Add a title and URL path alias as usual.
  3. Add a category (liaisons, archives, repository or renovation) which determines whether the item will appear in the left, center or right of the page.
    If there is more than one item in a category, an item will be chosen randomly.
  4. Add the URL of the existing web page to which the item (title and thumbnail) will be linked.
  5. Click attached images and upload an attached image (height at least 80 pixels) which is displayed as a thumbnail on the home page.
  6. Add a teaser which is displayed as the description.
  7. The body can be left blank.
  8. To not display an item on the home page without deleting it, uncheck "Promoted to front page" under "Publishing options".

How to edit a promotion

  1. In the top Administration menu, click Content.
  2. Select type Promotion and click Filter.
  3. Click the edit button next to a promotion to edit.

Blogs

Authors can create blog entries under their name using Content > Add content > Blog entry, or:

  1. Click the My Staff Account link in the right of the main navigation bar.
  2. Click the View recent blog entries link at the bottom.
  3. Click the Post new blog entry link.
  4. Provide a Title, Body and URL alias (blogs/username/entryname) and click Save.

To get a link to a blog's feed (of the form /blog/9/feed), click the Feed icon and copy the URL from address bar.

Books

Books are a collection of book pages, similar to regular Drupal pages but with a hierarchy (outline structure) and sequence (previous and next pages).

Links are automatically generated to the previous and next page in the book, as well as up to the parent page, or down to one of the child pages.

Here is an example book.

Web Forms

Overview

Web forms allow authors to create forms that users can fill in.

Results can be sent to one or more e-mail addresses, viewed online in a table, and downloaded to Excel.

Standard form components are allowed, such as text field, text area, select, date, email and file.

Drupal webforms have several advantages over FormHandler, including:

  • Editing the content works just like Drupal pages and other Drupal nodes.
    • No need to view or edit HTML or PHP code.
    • WYSIWYG editor is available for body text.
    • A history of all revisions is kept.
    • The form can be unpublished.
  • Many built-in field types are available, with field validation.
  • Results of all submissions are automatically stored and available for viewing or download.

How To Create a Webform

  1. Go to Content > Add content > Webform.
  2. Click the Edit tab, provide a title and URL, and type the body of the form in the WYSIWYG editor. (Provide instructions to the user explaining the purpose of the form, how the data will be used, how to complete the form, and contact information if the user has questions.)
  3. To define form fields, click the Webform tab and click Form components.
    • For each field you need, type a label, select the field type, check the Mandatory box for fields the user is required to enter, and click Add. The available field types:
      • Textfield: A single line of text (e.g. name, address, or phone number). This is the most commonly used field.
      • Textarea: Multiple lines of text (e.g. comments).
      • E-mail: An e-mail address field.
      • Fieldset: Group fields by dragging them beneath and to the right of a fieldset.
      • Markup: Put text, images, or any other HTML tags anywhere in the form.
      • Select options: A drop-down menu with multiple choices.
      • Date and Time: A menu to select a date and time.
      • File: Select a file to attach or upload.
      • Hidden: A non-displayed field that can be used in scripting.
      • Grid: Create a list of multiple-choice questions (e.g. for a survey or quiz).
      • Page break: Allows creating a multiple-page form with Next Page and Previous Page buttons at the bottom.
    • Click the Edit link for any field to customize the default value, description, validation or display of the field.
    • To select an e-mail recipient from a drop-down menu, use the Select options type. Options should look like this:
      first.last@colostate.edu|Person's Real Name
      first1.last1@colostate.edu,first2.last2@colostate.edu|Group Name
    • To let the user get a copy of the message, include a field for their e-mail address and add it to the E-mails list.
  4. Click the E-mails tab to define the recipients. Either type an email address or select an e-mail field (Component value) which contains the e-mail recipient(s) and click Add.
  5. Click the Form settings tab to view and change settings for confirmation message, redirect page, submissions limits, and restricted access to submissions.
  6. Click the Results tab to see submission results.
    1. Submissions lists an overview of submissions.
    2. Analysis provides a simple summary report of submissions, including average values for numeric fields.
    3. Table lists each field of each submission.
    4. Download can be in text or Excel format, can be formatted in different ways, and can be limited to specific fields and submissions.
  7. Editors should protect forms from automated spam:
    1. Go to Site Configuration > Mollom. If the form is not listed,
    2. Click Add Form, select your form, and click Next.
    3. Make sure all fields are checked, and click Save.

Examples and Documentation

Contact Form

The Drupal Contact form is intended for sending feedback about important libraries units and services. Only Drupal editors can modify the categories, recipients, introduction (additional information), and response to users (auto-reply).

The email comments form is similar but intended for individuals or small, less public units/services.

To link to the form and preselect an individual category, add the category name to the end of the URL. For example:

Form categories and recipients

Events Calendar

Events are pages with start and end dates and times. They appear automatically in a site-wide calendar.

The site-wide calendar is not currently used, but may be a future place for posting Libraries exhibits, events, meetings, training sessions, etc.

Forums

Forums allow for online text discussions by authenticated users.

Forums are not currently used.

Polls

Polls allow for multiple choice options and automatically summarize results.

Test poll

Comments

By default, comments are turned off for pages, but editors can enable comments for a page by editing the page and changing Comment settings to Read only or Read/Write. News and Events pages allow comments by default.

When a user submits a comment for a page, the page author will be notified by e-mail. Editors can view and publish comments.

Be aware that comments from external sources can contain images or links that can compromise the security of the site.

Revisions

Revisions are versions of a page which are automatically created whenever a page is edited.

Author revisions of pages are not visible to the public until they are published by editors.

Authors can click the Revisions tab of any page to see a list of all revisions with dates, times and authors.

  • Click the date of an old revision to see what the page used to look like.
  • Click Edit edit the current or older revision.

Editors can revert a page to a previous revision by clicking the revert button to the right of the revision.

Administrators can delete revisions (rarely necessary).

Workflows

The workflows feature is intended to allow multiple states (e.g. draft, under review, published) to give editors more control of changes to files. No workflows are currently implemented, since revisions seem to do this well enough.

URL aliases and redirects

Editors and administrators can redirect pages and files in several ways.

Usually you will want to create a redirect.

How to create a redirect:

  1. Go to Configuration > Search and Metadata > URL Redirects > Add a redirect.
  2. From: Enter the old or shortcut URL, e.g. help/contact.html or discovery
  3. To: Enter the new URL that the user will be redirected to, e.g. about/contact or http://discovery.library.colostate.edu/
  4. Click Save.

Ways to Redirect

  • A single page can have multiple different URLs that are redirected to it.
  • URL aliases map a system URL of the format /node/number to a user-friendly URL. This occurs automatically when you create a Drupal page.
  • URL redirects are used to point a non-existing URL to any existing URL (including Drupal, HTML, PDF, Libraries or non-Libraries).
  • Rewrite rules are created in .htaccess files by administrators in Apache server files to map multiple old URLs to new URLs, e.g. to temporarily manage directory indexes, when an entire directory is moved, or when a set of non-Drupal pages is moved into Drupal. These will eventually be removed or put into Drupal redirects instead.

Reasons to create a redirect:

  1. Prevent broken links and bookmarks when a page is renamed.
    • Drupal automatically creates a redirect whenever a Drupal page URL is changed.
    • You must manually add a redirect when an HTML page that is not a directory index is migrated into Drupal.
  2. Provide a shortcut URL for printed publications or ease of typing.

How to check for existing aliases and redirects:

  • If the old page exists, remove it (move to the appropriate subdirectory of temp/oldsite).
  • Check for existing Apache .htaccess redirects by typing in the URL of the old page.
  • Check for existing Drupal aliases by typing a word in the "Filter aliases" box (e.g. help) and clicking Filter.
  • Check for existing Drupal redirects by typing a word in the "Filter redirects" box (e.g. help) and clicking Filter.

Global search and replace

Editors can use Global search to search the source code of the body of all pages for some text, such as a URL. Regular expressions can be used to match certain patterns of code, and there are options like case sensitive, match whole word, and surrounding text.

Global replace is powerful but dangerous. Although there is a Replace undo tab, global replace is only recommended for administrators and experienced editors. Global replace can be performed by administrators upon request. Before clicking Replace, always click Search first to see what replacements would be made in what documents. (Advanced note: use $1 to replace a regular expression in parentheses.)

Authors and editors can also use the search and replace buttons in the editor of individual pages.

Static pages

Static pages with the current header and footer will be displayed with the new header and footer.

  • Most static pages with the current header and footer do not need immediate changes, but should be migrated to Drupal eventually.
  • Drupal will display an existing directory instead of a new Drupal page of the same name, unless instructed otherwise.
    If you create a Drupal page but an old index page or the directory index is still showing instead, you have two options:
    • delete the directory completely, or
    • contact an administrator (who can fix it by adding a rewrite rule).
  • Web Team members can move old pages to \\lib2.colostate.edu\html_writeable\temp\oldsite\ or delete very old pages that are unlikely to be referenced again.
    The site was fully backed up on the day the redesign was implemented (July 19, 2010).

Static pages with custom headers and footers do not need changes at this time.

Right navigation in existing pages (<div id="csulib-rightnav">) will be displayed between the center column and the right images.

  • To move it below the images, use <div id="csulib-rightnav" class="csulib-rightnav-absolute">
  • To move it in place of the images, use <div id="csulib-rightnav" class="csulib-rightnav-top">