MyCoE

Editing web pages with Drupal

These resources for UW Engineering communicators are actively being updated, reorganized and improved.

The College of Engineering and seven of the department websites are built and maintained with the Drupal 7 content management system. The Computing Services development team created a custom theme based on the UW Boundless design and plans to launch a Drupal 8 theme in 2019 or 2020. The College has a slightly different theme from the departments.

Our themes use the Bootstrap framework for responsive, mobile-friendly web pages and page layout based on a grid system. Some elements, particularly typography, are overwritten by the CoE theme and styles. Learn how to use our Bootstrap and CoE Boundless styles:

Logging in to Drupal

To log in:

  1. Go to your site’s home page, append /login to the url (ex: engr.washington.edu/login).
  2. Click the NetID button. This will take you to the NetID login page.
  3. Enter your information and log in. (There is a bug that sends you to the homepage if you click a link after an hour of no activity and another that makes you navigate back to the page before you logged in. Should be resolved in Drupal 8.)
  4. If you have not previously logged in:
    • Send a message to the appropriate webhelp email to have your permissions set after the first time you log in.
    • If you have had your permissions set, you should see a Manage bar at the top of your screen and, when you navigate to pages you can edit, tabs at the top of page content.

How to edit a basic page

  1. After logging in, navigate to the page you wish to edit. At the top of the content, just below the page title, you should see a series of tabs: “View Current,” “Edit Current,” and “Revision operations.”

    If editing tabs don’t appear (for example, on the News page), that page is generated via a view and needs to be edited a different way. See Other types of content.
  2. Click on the Revisions tab to make sure you are on the latest revision. It is possible that changes you or someone else have made are not yet published. If there is a more recent revision, then click on its date to view it. If the revision was made by another user, please contact that user to determine if you should use that draft or edit the currently displayed version.
  3. Click on either Edit Latest (in revisions) or Edit Current (if there is no more recent revision). You will see a form with the information contained on the page. You will mostly want to edit the Body section. This section contains an editor that operates in a similar manner to Word, which you can make edits in.
  4. If you are comfortable with editing HTML, you can change to an HTML editor by clicking “Switch to plain text editor” underneath the Body window.

    Note: things won’t look right in the rich text editor, because Drupal doesn’t take into account how we apply our own styles. The preview (button near Save button) is more accurate.

Other fields on the page editing form

Summary option
Ignore except on news.
Related content
Adds items to the sidebar for that specific page. To add to more than one page, use a block.
Revision log message field (Revision Information section)
Write a brief summary of the changes you made. This helps future users, and your future self, determine the nature of the edits you have made.
Saving and publishing
Save your changes as a revision by clicking the Save button. Note that your changes won't show up on the live site until they are published. Depending on your Drupal permissions, you may not be able to publish your edits live. Send a message to the appropriate webhelp email to request that your edits are reviewed and published.
  • There are two publish buttons to click; don’t forget the second publish.
  • You can also publish/unpublish from the Content menu.
  • It is a good practice to unpublish content rather than delete it. You might need to reference it later.

Page editing notes

  • Save a new revision every time you make a major change. Enter a revision message so you can keep track of what you did.
  • Preview your change by selecting the “Create new revision and moderate” option under "Revision Information." Review the page to make sure the styles are correct before you publish.
  • You can click the Revisions tab (next to Edit) to see previous revisions for the page.
  • You can compare revisions to see what changed. Select the two revisions and click Compare. Note that the diff shows only HTML.
  • It is generally best to maintain existing formatting. We have set up the site to meet accessibility guidelines and give the best possible reading experience to users.
  • When creating a link, use descriptive text (ex: "Download BSCE degree sheet", "Washington State EIT Application Instructions") rather than “Read More.”
  • Keep information concise.

Inserting images and links to documents on web pages

See Media management for help uploading images and documents to be available on the website, inserting them on web pages, and for image size recommendations.

Content building and editing tips

See Web style and formatting examples for examples of the most common styles used on UW Engineering web pages and snippets of reusable code in some cases. For examples that don't have code snippets, edit the page in html code view (if you have permission) or view the source code in your browser and copy the code you want to replicate.

Other types of content
  • Announcements, News, and Front Page Banners must be edited via the Content section.
  • To find content in Drupal, Click the Manage tab in the black Drupal bar, then click "Content." Use the fields at the top of the Content form to filter by content Type to make it easier to find what you want.
  • These types of content do not have revisions selected at the default option (in Drupal 7), unlike pages. Select whether you want to create a revision for these types of content in the "Revision creation and moderation options" section of the editing form.
Adding content
  • On the Content page, click Add Content and select the type of content you want to add.
  • If you are making a page, you will need to specify the URL under URL Path Settings. You can change URLs and the old URL will forward to the new one.
  •  
Ordering content
  • News items on the homepage are ordered by Weight. Lower weight = higher in the order. That means we increment from -245 to -246 as we create news items for the home page. On the News page, news items are ordered by date.
  • Front Page Banners are ordered by original publishing date. If you re-publish an old banner, it will end up behind newer banners.
  • Only two announcements (department sites only) are visible at a time. Unpublish the announcements that should not be displayed.
Blocks
Blocks are a way to get a chunk of content to show up on multiple pages. We use them for contact info in the right column of secondary pages, for the list of department advisers on the advising and other pages. See Blocks: What they are and how to edit for details.
Menus
  • There are two ways to put new pages in the menu: either with the Menu Settings at the bottom of editing page or in Structure > Menu.
  • The Menu page uses a drag and drop interface to organize the menu items. Important notes:
    • The interface (Drupal 7) works more smoothly if you zoom out the page on your web browser (Ctrl -) so that more lines are visible.
    • You must click Save Configuration for these ordering changes to appear.
  • You can disable menu items so they display the correct breadcrumbs but are not displayed in the menu on the sidebar.
  • Include the relative path, not the full URL, when adding a new menu item. Drupal converts this to the Node number.
Calendar
  • Maintained through a separate application: Trumba.
  • Four items show up on homepage widget. The rest are on /calendar.
  • You can hide calendar items from the homepage or change their homepage title under Configuration > Calendar Feed Settings > View.

Having a new page created

Even if your Drupal permissions allow you to create new pages, please work with the CoE web content specialists to have new pages created on the websites we maintain. We need to keep track of where information lives in Drupal and where it appears on the website.

To have a new page created, send a message to the appropriate webhelp email and request a new page be created. We can either create a new blank page for you to edit or you can send us a Word document to build the page from.

When you are requesting the page, please tell us the following:

  • The purpose of the page and who you expect/want to use it
  • Suggested page title
  • Suggested location of the page on the website (ex: under the Students menu or under the Research Areas menu item)
  • Any preference for the url.

Assistance

If you need help with more complex tasks, we are happy to help. Please email webhelp@engr.uw.edu or the appropriate webhelp email (find the list in the right column under Contact the Web Team).