Drupal guide

Guidance and standards for working in our Drupal content management system. These are no longer available as separate PDFs on the website, but on this page instead.

This guide only includes what you can do in our Drupal system.

Please see the Web Standards website to learn more about Web Accessibility or Use stats to make better pages.

 

Something missing?

Share your comments on the Drupal Guide survey or email kocika@wsdot.wa.gov.

 

Updated:

Aug. 29, 2019
Updated guidance on images under Login to Drupal.

 

Chapter 1: Know before you login

 

Chapter 2: Drupal basics

Chapter 3: Creating new web pages

 

Chapter 4: Getting images onto your page

Chapter 5: Getting documents onto the page

 

 

Chapter 1: Know before you login


 

Our webpage standards
 

Look and feel

  • Your left navigation represents the content areas of the topic of your page. No hyperlinks to pdf files or documents in the left navigation bar
  • The right column should only be used for secondary information and only if absolutely necessary, do not include primary information on the page in the right column
     

Content

  • There are no office pages on the external website. Our online content is organized by topic instead. Each page should have unique content with a title that helps users find it.
  • Users read in an “F” pattern, help them find the content by putting what’s important up top and leading them to any concurrent information they need.
  • Never publish a page before it is complete, no “under construction” or “coming soon” pages
     

Writing

  • All WSDOT web pages must follow our current Web Content Strategy and Style Guide.
  • Anything you put on the web should be easy for readers to scan through and written in plain talk.
  • Break up ideas using headings to make a page easy to scan.
  • Any list of items more than three long should be bulleted with no more than five items.
     

Maintenance

  • Every page has a content editor and subject matter expert who perform quarterly maintenance on the website.
  • If your content is getting less than 500 views over a six-month period it should be removed from the website or moved to a better place for people to find.
  • Once you remove a link to a document, that document should also be removed from the Drupal system.
  • All content should be posted with a life cycle and end date in mind.

Have any questions or concerns about these guidelines?
Please contact Web Help at WebHelp@WSDOT.WA.GOV or by calling 360-705-7079.

 

 

Readying your content for the web

Before you login to Drupal to update your web content, please make sure the images, documents and exact edits for the pages are ready to go.

Naming files
  • The file name is important and must be a unique title to find in our Drupal library
     
  • File names should not include “draft,” “edit,” “final” or the numerical date in the file name.
     
  • Use dashes (-) instead of spaces or underscores ( _ )
    Correct filename example: sr6-roadway-paving-map.png”
     
  • No special characters like ampersands (&), asterisks (*), dollar signs ($), etc.
     
  • All filenames, regardless of type, should make sense out of context and clearly label the content when created for an online audience.
    Ex: “January Report” is not unique enough but updating it to “Tribal-Leg-Report-Jan-2016” will satify those standards.

 

Documents
  • The maximum size of any documents on our site is 64 mb. If your document is larger than that, try splitting it up into separate sections or save it in a reduced quality.
     
  • PDFs should be saved for fast web viewing and contain the document title and author in its properties in order to be searchable.
     
  • The first page of your PDF should clearly label what the document is and where it originated
     
  • All documents on the website are considered copies of the original for records retention purposes and should be stored accordingly

 

    Images

    All images, including GIF, PNG and JPEG files, should be edited and saved for the web in Photoshop. If you do not have access to Photoshop, please send your file to Web Help and we can produce that for you.

    Web image suggestions

    • Size should be no more than 700 pixels or page formatting will break
    • Unless it's a project page map: These must be 510 pixels wide (185 pixels wide for project page map thumbnails)
    • Never use images to break up text on a page, they should always be there to illustrate a point in a visual way.

     



     

    Getting PDFs ready for the web

    Visit the Documents section of our external Web Content Strategy to learn how to get PDFs and Word documents ready for the web.

    Back to top

     

    Chapter 2: Drupal basics  

     

    Login to Drupal
     

    You must take Drupal training to get an account created for the system. This system is not tied to any other WSDOT systems, so you must change and update the password separately from the one you use to login to you computer.

    1. Always use the Google Chrome browser to work in Drupal.
       
    2. Go to www.wsdot.wa.gov/user.
       
    3. Use your WSDOT username (the name part of your email address before the @) and password (which is separate from all other WSDOT systems.)
       
    4. Once you are logged in, you will be taken to your personal home screen. You will know you are logged into Drupal any time there is black bar on top of the screen, with your username in green on right.
       
    5. You can see that pages are in Drupal if they have “Powered by Drupal” on the bottom left of the page.
       

     

    Forgot your password?
    1. If you cannot remember the password you set for your account, select the Request new password tab under the User account heading.
      Screenshot of the Drupal login screen with arrow posting at Reset my password
    2. Fill in your WSDOT username (your truncated name before the @ in your email address) and click the E-mail new password button. You will taken to a page letting you know your new password is on its way.
    3. Drupal should send an email to the address associated with your account with directions on how to update your password.
    4. Once set, login as you normally would.

     

    Trouble logging in?

    You have five tries to login successfully or Drupal will lock your account for several hours. This is a security measure to ensure unauthorized users cannot just continually guess passwords to steal an account. If a red box appears around your username, that means it is incorrect. If you continually try, you may eventually need to contact webhelp@wsdot.wa.gov to unlock your account. 

    Tips to avoid being locked out:

    • Don't trust Google autofill to put in your password, type it in each time or else if you use different passwords, it may be using the autofill for a different page
    • Use a secure password that is easy for you to remember (just like your main WSDOT password)
    • Change your Drupal password whenever you have to change your main WSDOT password
    • Your Drupal username is the same as all WSDOT systems (the part before the @ symbol of your official email address), not your full email address
    • Locked out or didn't update password when asked? Contact webhelp@wsdot.wa.gov and we can check your account to see what may be wrong.

     

     

     

    Finding your pages

    Files and pages should have short, descriptive and unique names. This is how you link to and find these items in our Drupal system instead of the folder system from our old CMS.

    1. Once you login to Drupal, click on Content on the top of the black bar that appears beneath your browser toolbar.

       
    2. In Drupal, pages are under the Content area while images and documents are under Files. To find your page, make sure you are under Content. If you are actually looking for a File, then click on the Files link tab just below the big Content heading on the upper left of the page.
    3. The most recently added or updated pages or files will be listed at the top. Unless you just made changes or created the item, you will have to search for it.
       
    4. Find your page several different categories under the Content tab:Title: The unique name of the page
      Type: Narrow down further by the content type, such as Basic Page or News Article.

      Section: What area of the site and what group within WSDOT has access to edit the page such as About, Environment, Rail, etc.

      Author: The Drupal username of the person who created the content.

      Published: You can narrow down results to only show items currently live on the web or only show the pages in progress.
       
    5. Find your document or image using just three different categories under the Files tab:
      Name: The unique name of the document or image

      Type: Narrow down further by content type such as image or document.

      User: The username of the Drupal user who owns the content
       
    6. Hit Apply once you’ve filled out the parameters you’d like to use to search for the item. Once you have found the page or file you are looking for, look under the Operations section on the far right. Click on the Edit link to edit the page or modify the document.
       

     

    Editing content


    Drupal is a system to help us manage, create and share content on the web. This section goes over some of the tools you can use to get information out to our site visitors.

    Working with text

    Thankfully, a lot of the formatting is automatically done for you. Just put the text into the correct area (which depends on what kind of page you’re making, see the specifics under Creating a new page.)


    Anywhere you can modify the look of text, you will see a bar in the box like the one below:

    A. Source: Press this to see the HTML behind the item you are working on. Click it again to return to What You See Is What You Get mode for a more word processing experience.

    B. Adding and removing text area:
    This area is where you will find familiar cut, copy, paste, paste as plain text and spell check buttons. These work the same as those you find in Microsoft Word.

    C. Edit actions:
    This area is for the undo, redo, find and find and replace buttons. The last button in this box is the select all button.

    D. Add a table: Clicking this button will open up the Table Properties window. Here you can choose the rows, columns and alignment, and once you click Okay, it will be inserted into the textbox wherever your cursor is.
    Note on tables:
    Any information you put into a table must be summarized to lead someone using a screen reader through. Screen readers read all the headers first, then go line by line. This can be confusing for our site visitors who use them. Any information put into tables must all be easy to summarize in paragraph form for those who request the information. Do not use tables to override formatting or create columns on the page.

    E. Special symbols: such as those used in other languages, can be added using this menu.

    F. Expand textbox: Press the button with the four arrows to expand the Body textbox editable area to make it easier to read and edit. Press this button again to return to the normal size.

    G. Shows blocks of code’s beginning and end to show what may be creating an odd spacing or formatting issue. If you are comfortable with HTML, this can be useful but is not a necessary tool.

    H. Text dropdown: Highlight text you want to edit and use this dropdown to select the proper heading size. Single level subheads can be in bold. If there is another level of subheads under subheads, then use Heading 4 for the top level, then bold. If there is another level, then use Heading 3.
    Note:
    Our page title formatting is Heading 2, so never use Heading 1 or 2 as those sizes will compete with what should be the largest heading on our pages.

    I. These are also familiar from word processing programs. The B button bolds and the capital T followed by the x button removes formatting from selected text.

    J. List buttons:
    Creating a list is similar to other word processing software. Every list must start with a descriptive header that gives a quick overview of what the list is for. Put a line break, but hitting Enter or Return after each line, then highlight these lines with your cursor. You can create with numbered or bulleted lists by clicking one of these buttons and switch back and forth if needed.

    K. Hyperlinks: highlight what you want to make into a hyperlink and then hit the Link button (looks like a chain link). A new window will open with a dropdown to choose a link type.

    • Internal path: Create a link pages/images/documents on our site by searching for them by their name used to upload them to our site
    • URL: for pages outside of our site or still in our old CMS system. If this is an old WSDOT page, be sure to use HTTPS for the URL.
    • Link to anchor in text: Also called jump links, clicking on the link takes you to a specific part of the page. Use the flag button (M) to choose the areas of the page you need to link to.
    • E-mail: opens a new email with the email address, message subject you choose as the default

    L. Remove hyperlinks from text using this button.

    M. Add anchor links: Put your cursor where you would like an anchor link to jump to. Name it something unique and short, such as the first word in a heading (keep it to just one word or remove the spaces such as "UpdartingDocs." You can now write a link text for users to click on using the Hyperlinks button (K) to select which anchor it jumps to.

    N. Add Photos/Documents Directly: Use the Add Media button (looks like two photos stacked) to embed images that have already been uploaded. (See Upload an image).

    O. Embed media: Link to Flickr photos with the Embed Media button (a piece of film reel with a plus sign in the bottom right corner) on your Body textbox toolbar (See Embed media).

     

    Edit a saved or published news article, web page or project page
     

    1. Open and login to Drupal using Google Chrome. Find your page following the directions on Finding your content.
       
    2. Once you have made your edits to the news article, web or project page, scroll down to the bottom of the edit window.
       
    3. In the Revision log message box, delete what is already there and type in a short description of what you changed. This helps make the process of approving the page go faster as Web Help knows what to look for and check before making the page live.

       
    4. Use the dropdown box under Moderation state to change the Moderation state back to Needs Review to send the page to Web Help for approval. Or, if more changes are needed before the page is sent for approval, leave the page under Draft and hit Save to keep your changes.

     

    Edit your region homepage

    1. Login to Drupal.
    2. Click on the home button in the upper left corner of the top black bar.
       Screenshot of the home button in the upper left corner of the top black bar.
       
    3. Scroll down to the Local Information map on the bottom left of our homepage. Select your region
      Screenshot of Scroll down to the Local Information map on the bottom left of our homepage. Select your region.
       
    4. Your region homepage will open, but with black bars on the top and bottom of the page. Click on the button with a gear labeled Customize this page on the bottom black bar.
      Screenshot of the gear on the bottom black bar.
       
    5. More options will appear over each Panel on your region page. Click on the gears icon in the taskbar of the panel you want to edit (news will automatically update so don’t manually do that panel.)
      Screenshot showing the the gears icon in the taskbar of the panel you want to edit
       
    6. A window will pop up, allowing you to edit the panel using the familiar Body textbox.
      Screenshot of how to edit the panel using the familiar Body textbox
       
    7. For photos, you can use the embed media button (a film strip with a plus sign on the body toolbar) to embed a photo from Flickr. Prepare your documents or images and then upload the image or upload the document to Drupal before going in to edit your region home page and adding the image or linking to the document there.
       
    8. Once your region home page is updated, scroll down on the Configure New custom content window to click the Finish button on the bottom left. This window will close.
      Screenshot showing once it is updated, scroll down on the Configure New custom content window to click the Finish button on the bottom left.
       
    9. Click the floppy disk Save button on the bottom bar of your region home page. It may take up to least 15 minutes for your changes to appear.
      Screenshot of the floppy disk Save button on the bottom bar of your region home page

     

    Saving a web page or news article without sending it to WebHelp to publish

    While working on a page, you can Save your progress to return to later. This is only if you don't want to send the page to be published. As long as you leave it in the Draft stat on the moderation process, Web Help will not be notified to check it for publishing.

    1. Have a page opened in the edit window, where you can make changes to the page.
    2. Scroll down to the bottom of the page. Under Revision information, make sure your page is still in Draft state but seeing that "(current)" is not to the Draft option of the dropdown menu.
      Screenshot of the Moderation State dropdown menu, which has two options.
      Draft:
      stills needs work, it’s not quite ready for revising yet
      Needs review: editor approved, now the Web Team will either publish it or send it back
      Published: done and out in the world (may take up to 10 minutes for it to appear on site)
    3. Click on the green Save button. This will save your progress and take you to a preview of your page. To continue working on your page, click the Edit Page tab from that window.
    4. If you exit completely out of Drupal and return later to work on this page, please see the directions for Edit a saved or published news article, web page or project page.

     

    Scheduling your page or news release to publish at a certain time

    If the page your working on should publish at a certain time, you can set that up in Drupal. However, it can only be on an hourly basis (10 a.m. or 11 a.m. will work, but can't publish at 10:30 a.m.). The page must also be approved before it will publish, so be sure to send it onto Needs Review after setting up the time.

    1. In the Edit page window, scroll down to the bottom.
    2. Above the green Save button and blue Preview button, you will see tabs for Menu Settings, Revision Information and Scheduling options. Click on the Scheduling options tab.
      Screenshot with arrow pointing to where the Scheduling options tab is near the bottom of the edit page window.
    3. Follow the time format below the text box on this tab (year-month-day militarytime) 
      Example: Use "2017-07-17 15:00:00" for July 17, 2017 at 3 p.m. 
    4. Follow the When your page or project page is ready to publish to send the page off for moderation. Once approved, the page will automatically post at the time you selected.

     

    When your page or project page is ready to publish 

    If you just want to save your progress and continue working before sending it off to be published, see the section on Saving. This is only for pages you want to send off to Web Help to be approved and published.
     

    1. After Finding your page and making edits, scroll down to the bottom of the edit page.
      Screenshot of the edit page screen with an arrow to remind users to scroll down to send a page in for review
       
    2. Select the Revision Information tab above the green Save button.
       
    3. Delete what is in the Moderation Notes and type in a brief description of what you fixed.
      Screenshot of the Revision log message box 3.	Delete what is in the Moderation Notes and type in a brief description of what you fixed.
       
    4. Select the correct Moderation State:
      Screenshot of the Moderation State dropdown menu, which has two options.

      Draft: stills needs work, it’s not quite ready for revising yet
      Needs review: editor approved, now the Web Team will either publish it or send it back
      Published: done and out in the world (may take up to 10 minutes for it to appear on site)
       
    5. Then hit the green Save button. With Needs review selected, this page will then be sent to the Web Team for review.
       
    6. Once you have set the Moderation State to Needs Review and hit Save, the Web Team will receive an email that something needs to be approved. We will respond as soon as possible to this request.

     

    If your page is declined by Web Help

    1. Find your page that was sent back to Draft and open it.
       
    2. A preview of your news release or page will open. Click on the Moderate tab below your headline or page title.
      Screenshot of a preview of your news release or page will open. Click on the Moderate tab below your headline or page title.
       
    3. A new window will open listing all the revision history. The most recent one (at the top) should list what is missing under the title and above the Revised by message on the left.
      A screenshot of the revision history list page.
       
    4. Now that you know what is missing, click on either of the Edit Draft buttons to return to editing your news release or page.
      Screenshot of click on either of the Edit Draft buttons to return to editing your news release or page.
       
    5. Once it has been fixed, scroll back down to the bottom of your Edit Draft window. Delete what is in the Moderation Notes and type in a brief description of what you fixed.
      Screenshot of the Revision log message box 3.	Delete what is in the Moderation Notes and type in a brief description of what you fixed.
    6. Then select Needs Review in the Moderation state dropdown menu before hitting Save to send your page to the Web Team to publish.
      Screenshot of the Moderation State dropdown menu, which has two options.
    7. The Web Team will review the news release or page again. If no other issues come up, we will publish it. If you receive an email that your news release or page was sent back to Draft state, then redo this process again until it is published. 

    Back to top

     

    Chapter 3: Creating new web pages  

     

    Create a new basic page

    1. Hover your cursor over the Content button on the top black bar on your screen. Hit the blue Add Content button, then select Basic Page from the list.
      Screenshot of the Create a basic page menu.
       
    2. You will be taken to the edit page screen, with different sections of the page for you to fill in. Textboxes with asterisks (*) beside them must be filled in before it can be saved.
       
    3. Section*: select the editorial section that will be looking at and approving the page.
       
    4. Title*:name the page something simple but descriptive such as “Contact WSDOT”
      TIP: This name is how you can find it again and act as the end of the web address (or URL).
       
    5. Body: the content that appears in the middle of the page once published.
       
    6. Hyperlinks: highlight what you want to make into a hyperlink and then hit the Link button (looks like a chain link). A new window will open with a dropdown to choose a link type.
       Screenshot of the link menu
      Internal path: Create a link pages/images/documents on our site by  searching for them by their name used to upload them to our site

      URL: for pages outside of our site or still in our old CMS system

      Link to anchor in text: Do not use this for News Articles

      E-mail: opens a new email with the email address, message subject you choose as the default
       
    7. Site Structure: This where the page will live on the site and dictates the URL structure the content is related to such as “/accountability” or “/projects.”
       
    8. Once your page is put together, hit the green Save button at the bottom left of the window. You will be taken to the preview menu to see what the final product will look like, once published. If you see something that needs to be edited, just hit the Edit Draft tab (see left) at the top.
      Screenshot of where the Edit Draft button on the content preview page
       
    9. Make your edits in the edit Basic Page window and scroll down to the bottom of window.
      Screenshot of the edit page screen with an arrow to remind users to scroll down to send a page in for review
       
    10. In the Revision log message box, delete what is already there and type in a short description of what you changed. This helps make the process of approving the page go faster as Web Help knows what to look for and check before making the page live.
      Screenshot of the Revision log message box 3.	Delete what is in the Moderation Notes and type in a brief description of what you fixed.
       
    11. Select the correct Moderation State:
      Screenshot of the Moderation State dropdown menu, which has two options.

      Draft: stills needs work, it’s not quite ready for revising yet

      Needs Review: editor approved, now the Web Team will either publish it or send it back
       
    12. Hit the green Save button to ensure your page is saved. Do not change the moderation state from Draft if you do not want it sent to the Web Team for review.
       

     

    Putting your news release online

     

    1. Hover your cursor over Content on the top black bar on your screen. Move your cursor over the blue Add Content button, then select News Article from the list.
      Screenshot of the Add News Article button on the top bar when logged into Drupal.
       
    2. You will be taken to the Create a News Article page. This is where you will create your News Article by filling in these textboxes. Anything with a red asterisk (*) near it is required before saving the page. Everything else is optional.
      Screenshot of the textboxes for content from your news release.
      Title textbox*: Copy and paste your main news release headline into this box.
      TIP: Think carefully! Whatever you type in here will be the way you can find it again and act as the end of the web address for the release.

      Section*: select News

      Optional selections: select any Highways, Organizations, Regions, Mountain Passes and/or Cities the News Article relates to in the labeled fields.

      Summary textbox*: Copy the first one or two sentences of the actual news article and paste them here.
       

    Once we know where it’s going, time to create the actual News Article:
    Screenshot of where to put the main body, starting with the contact list, of the press release.
    Body textbox*: Located below the summary textbox. This is where content that appears in the middle of the page once published goes.

    1. Copy and paste your news release from Word to keep all of the text formatting and links you already created. However, this will create spaces between lines. Click your cursor in between each of these spaces and delete them until the formatting looks correct.
    2. Delete the “Contact:” or “Contacts:” from the beginning of your contacts list and ensure they are all flush left. Remove spacing between them by putting them on the same line, then hold down shift and press Enter for a single space.
    3. Any photos must be no more than 450 px wide. 
    4. ​Any subheads within the Body should just be Bolded.
    • If you have a secondary header: Click on one end of the secondary headline in the Body Text box and drag it to select all of the secondary headline text. Remove the Italics formatting by clicking on the capital I button. 
      1. Click on one end of the secondary headline in the Body Text box and drag it to select all of the secondary headline text. Remove the Italics formatting by clicking on the capital I button.
        Screenshot of the secondary header, located between the Contact list and the dateline of the article, highlighted.
         
      2. Click on the dropdown box below the Source button on your Body Textbox toolbar.
        Screenshot of the text editing dropdown for heading sizes.
         
      3. Select Heading 3. Your secondary headline will now look different from the rest of the text. Click anywhere else in the body textbox to deselect it and continue editing your news article. 


    Check these before scrolling down to send in for Needs Review:

    • The news release headline should be in the Title field.

    • The contact information should be at the top of the Body field.

    • Remove “Contact:” before the name or list of contacts

    • Ensure you have linked the correct email with the names

    • If you have a secondary headline, it goes between the contact information and the body of the press release.

    • Ensure this secondary headline is formatted as Heading 3 (should be a bit larger than the body text and bold)

    • Any subheads within the release should be Bold.

    Once you have checked the formatting of everything else, click this dropdown box, set it to Needs Review and hit Apply. Web Help will look it over and publish it if there is nothing missing

     

    Updating your news release

    Weather or scheduling conflicts can always ruin the best laid plans of our team. In order to keep news followers up to date, it's important to follow the same concepts on your emailed news releases as the version on our website.

    If your news release is already online, it's important to update it to let readers know something has been canceled or postponed:

    1. Find your news release page on Drupal.
       
    2. In the Title field, where you put the headline, put either "Update:" or "Canceled:" in front of the headline. See the next bullet to see the difference between these two alerts to determine which one to use in this Title textbox as well as in the Body textbox of your news release page.
       
    3. In the Body field, put one of the following alerts above the contact on your news release page:
      • Update- Add "Update:" to the front of the headline if something is changed in the release from the initially posted version.
        Example: Please note the lane closures are now scheduled to begin at 9 p.m. (Then, in the body of the release/advisory, delete the old information and replace it with the new information.)
         
      • Canceled:- AddFor work canceled but not rescheduled.
        Example: The closure scheduled to begin at Time a.m./p.m. on Day, Month Date, is canceled due to XXXX. It will be rescheduled to a later date. (There is no need to change anything in the body of the release/advisory.)
         
    4. Scroll down to the bottom of the page and type in the Moderation notes that you updated info or canceled the work and send it into Needs Review. Web Help will then look it over and publish it, moving the news release to the top of our WSDOT website homepage queue as well to help get the message out.
       

     

    Create a project home page

    1. Send project information to the Web Team (webhelp@wsdot.wa.gov):
      Title:
      PIN:
      Date needed:
      Region:
      County or counties:
      Special funding? (Ex: Connecting Washington)
       
    2. The team will request ID codes for the budget information to update and create the initial page for you. Once the page is created, they will contact you.
       
    3. Before you navigate to the page, upload your maps and photos to Drupal and make sure they are the correct size:
      • Map thumbnail (185 pixels wide) to go in the Legacy Map section
      • Full size map (510 pixels wide) to go on your Project map page and a caption to go under the image.
      • Photos no more than 400 pixels wide with captions for each
         
    4. Log into Drupal. Click Content on your top black toolbar to open the main Content menu.

       
    5.  You can look for your project by filling out the search option textboxes: 
      • Title: Search for your project page by looking for its title
      • Type: Click on the drop down menu and select Project to look for only those types of documents.
      • Author: Type in your username (same as username to login into Drupal) to find everything written by you.
    6. The project you’re looking for should appear in the list below the search textboxes. Click on the blue edit link to the right of the project you want to open up the edit page. 
       
    7. A window that looks like the one below will pop up, with different sections of the page for you to fill in. Textboxes with a red * beside them must be filled in before it can be saved.
      Screenshot of the project page home page upper area
    • Title: the official name of the project. This will be how you search for the project for editing. A member of the Web Team will fill this out for you when creating the page. Once completed, add “- Completed” to the end of the title and then change its Project Status on the dropdown further down the edit page.
       
    • Section: Select projects. A member of the Web Team should select this when they create the page.
       
    • Body: Where the core information about the project goes. Think about what our Watchdogs and Travelers will be looking for or asking about this particular project.
      • Screenshot of the project page home page middle area

      • The Body section must have headers formatted as Heading 3 with this information:

        • Project News: The latest and greatest updates on this project. Not for open house information. Do not link to the contractor's business website in this area when announcing who will be working on the project.

        • Needs & Benefits: Why we are doing the work and what it will improve upon completion

        • Timeline: Bulleted list of what the project has gone through, from design to estimated project completion date.

        • Funding: The official financial table isn’t immediately available. Sometimes, the official table is not something the managers want to see. Use this space to list out where the money for this project came from in a bulleted list. This is easy to scan and ensures even those using screen readers can get that information quickly without using a table

        • Additional information must be separated under short and descriptive headers. Suggestions could be “Economic incentive,” “Partnerships,” "Open Houses" or “History.” These depend on what the project entails and will not be limited if the additions do not contradict anything in our current Content Strategy.

    • Contact: The textbox after the Body textbox is where to put the communications and engineering contacts for the project. Each of them need a name, title, phone and email (written out like Name@wsdot.wa.gov and linked) for those with questions. Keep the formatting simple, with no bullets or indenting.
       
    • Static Left Navigation: This is where all the pages associated with this project will be listed if the page was carried over from CMS. Leave it blank if brand new page.
       
    • Phase: Click on the dropdown and select where the project is in the project cycle. This changes the graphic on the top right of the page around the map.
       
    • Legacy Map: Add a small thumbnail of the map that is 185 by 185 pixels to go in the top right corner (upload your images and add them to this section.) This is also where you can add 185 by 185 px image thumbnails. Link to the map and photo pages (an explanation of links) after you create the pages.
       
    • Tags: Add wording that users may use to search for project. For example, if the road has a local nickname users may be more likely to use to search for information on the project.
       
    • Project ID: This number is produced by the CPDM office and Web Help will fill this out for you when the page is initially created.
       
    • Site Structure: This where the page will live on the site and dictates the URL structure the content is related to such as /projects/us101/5thStreetPaving.”
       
    • Funding Table: Adds a project financial table displaying funding sources and amounts. It takes several weeks for your pin to be associated with the financial information. After your page is made and time has passed, please return to your project page and under this section, click on the dropdown and find your project by name. This project selection must match what is select under Pin Report (see below) as well.
       
    • Project status: Projects still in progress should be Active.
       
    • Pin Report: This will not be possible to add on a brand new project page, so make a note to update your page in a couple weeks. This adds a project PIN report displaying budget information as a left navigation link. After a couple weeks, please return to your project home page, click on the dropdown and select your project by name. Also do this with the Funding Table (see above) by selecting the same project.
       
    • Funding Types: Optional. Should be part of project information. If your project is not one of the listed types, leave the selection blank.
       
    • Regions: Select a region or several that the project is in.
       
    • Highways: Select a highway or several that the project is on.
       
    • Organization: Do not select anything for this optional addition.
       
    • Counties: Select a county or several that the project is in. Should be filled in by the Web Team when the page is first created.
       
    • Cities: Select a city or several that the project is in. If a particular city is missing or misnamed, contact Web Help to see if we can either add or change it.
       
    • Camera URL: Old function that does not fit in with our new project template. Add the link to a camera for the project, if absolutely necessary.
       
    • Modes: Choose the modes of travel this will effect. We are still working on this feature to help our users search for projects under this method.

      Once all the areas are filled out, scroll to the bottom, click Revision history, and select Needs Review if it’s ready to be published or Draft if there is still work to be done. Click Save to save your page and either send it to Web Help or return to the page later.

    Once projects are complete, there are items you need to turn off and words to add. Please see Update a project as complete.

     

     

    Create map, photo or other pages for a project
     

    1. Before you navigate to the page, upload your maps and photos to Drupal..
       
    2. Hover your cursor over the Content button on the top black bar on your screen. Hit the blue Add Content button, then select Basic Page from the list. Do not select Project Page. This is only for your Project home page.
      Screenshot of the Create a basic page menu.
       
    3. You will now be on the Create a Basic Page page with different sections of the page for you to fill in. Textboxes with * beside them must be filled in before it can be saved:
      Section*: For all projects, regardless of region, this should be Projects. 

      Title*: The name of the page. This should match the project title (the project home Web Help made for you using the project page type) followed be a hyphen (-) and then “Project map,” “Project photos” or "Project open house".
      Example: I-90 - WB East Channel Bridge Expansion Joint Repair - Project map

      Body: the content that appears in the middle of the page once published. For a supporting project page, such as one for photos or maps, this is where you will place your photos and map information. Both photos and maps need a caption below them explaining what the map or photo shows for each one put on the page.

      Static Left Navigation: This box is for special menu additions that will appear on the left side of the page, once it is published, in addition to the links automatically populated. Leave this blank.

      Site Structure: This where the page will live on the site and dictates the URL structure the content is related to. All project pages should be under the Project section, followed by the highway it is in (such as I5 or SR14) or type if it is special (ferries) and lastly in the same option that matches your project title. The photo, map or other supporting page for a project must be in the same spot your main project page that the Web Team set up for you lives.
       
    4. Once your supporting project page is put together, hit the green Save button at the bottom left of the window.
       
    5. You will be taken to the preview menu to see what the final product will look like, once published. If you see something that needs to be edited, just hit the Edit Draft tab at the top. 
      Screenshot of where the Edit Draft button on the content preview page
       
    6. Make your edits in the edit Basic Page window, or if you are happy with the way it looks now, scroll down to the bottom of window. 
      Screenshot of the edit page screen with an arrow to remind users to scroll down to send a page in for review
       
    7. Select the correct Moderation State:
      Screenshot of the Moderation State dropdown menu, which has two options.
      • Draft: stills needs work, it’s not quite ready for revising yet
      • Needs Review: editor approved, now the Web Team will either publish it or send it back
         
    8. No need to fill in the Revision log for a brand new page. Hit the green Save button to ensure your page is saved. Do not change the moderation state from Draft if you do not want it sent to the Web Team for review.
       
    9. Once reviewed, your page will either be approved or declined.
       

     

     

     

    Update a project page as Complete

    1. Once your project is complete, return to your project page.
       
    2. Add “- Complete” followed by the month and year at the end of the page Title.
      Example: If your project was titled “I-405 - SB SE 8th St to Northup Way Vic – Paving” and it is completed in September 2014, then the new title should be  “I-405 - SB SE 8th St to Northup Way Vic - Paving - Complete September 2014.”
       
    3. At the bottom of the Body textbox add a Funding subhead in Heading 3 formatting. In a bulleted list, type out the final total cost of the project and where the funding came from, if necessary. You will be removing the auto generated Funding Table and Pin Report table, so this will replace those options.
       
    4. Scroll down until you see the Phase dropdown box (just above the Legacy Map box.) Click on the box to change the phase to “Complete.” This will change the graphic around your map on your project main page so the arrow point at Complete.
      Screenshot of the Phase dropdown box
    5. Scroll down to the Funding Table and select None. 
       
    6. Scroll down to Project status. Click on the dropdown menu and select “Completed.” This will put the page into our Completed project area of the site.
      Screenshot of the Project Status dropdown
       
    7. Click on the PIN Report dropdown menu and select None.
       
    8. Fill in the moderation notes that you are marking this project as Complete.
      Screenshot of the Revision log message box 3.	Delete what is in the Moderation Notes and type in a brief description of what you fixed.
    9. Scroll down to bottom of the Edit page window. Under the Publishing options tab, select Needs Review. Click the green save button to send the page to Web Help for review.

    Back to top

     

     

    Chapter 4: Getting images onto your page

     

    Embed an image from Flickr

    This method of adding a photo to your news article or page means you don’t have to upload it twice (to Flickr and then our server) and automatically creates a link to the rest of the album for more photos.

    1. Open a new tab or window to stay in your news article or page while navigating to Flickr.
      Screenshot of opening a new tab in your browser
       
    2. Navigate to our Flickr https://www.flickr.com/photos/wsdot/  and find the photo you want to embed onto your news article or page.
       
    3. Click on the curvy arrow near the bottom right of the screen.
      Screenshot of where the share arrow is on a Flickr page
       
    4. The Share photo menu will open. Click on the embed tab.
      Screenshot with an arrow pointing to the Embed tab of the Flickr share window
    5. In the embed tab, click on the dropdown box to set the size, which should be Small 320 x 213. Click on the code in the top text box that should start with “<a data-flickr-embed=” and copy it.
      Screenshot pointing at the correct Small size to set your image to
       
    6. Click back to the window or tab containing your news article.
      Screenshot showing where to look for the page you're editing in Drupal
       
    7. Click the Maximize button (four arrows pointing outward) on your Body textbox toolbar. Find where you want to put the photo, usually lower on the article, and click to put your cursor there. Then put in a return or press Enter to make space for the photo.
      Screenshot of the Body text with a reminder to make space for the photo
       
    8. Ensure you have a cursor link blinking in the spot where you want the photo. Then click on the Embed Media button (film reel strip with plus sign) to open the Embed Media Dialog menu. Copy and paste your Flickr share code here. Then hit the green OK button.
      Screenshot showing what the Embed Media Dialog window looks like
       
    9. You will return to your News Article Body textbox and should see an image like this:
      Image that acts as a placeholder for embedded Flickr media
       
    10.  This image acts as a placeholder until you Save the document.
       
    11. Once you Save or Preview your News Article, the picture will appear. Clicking on the image takes readers to the Flickr photo page.
       

     

    Upload an image

    • All photos should be saved for the Web using Photoshop. Select medium quality for JPEG and PNG-8 for PNGs in Photoshop. If you do not have Photoshop, please send your photos to WebHelp for processing.
    • Small images should be no larger than 20 kb, large images no larger than 60 kb. Anything larger should be posted to Flickr. Contact Web Help for WSDOT’s login information for that site.
    • Photos should not be used to simply break up text. They must add value to the content.
      Example: a photo of a semi-truck on the freeway for the Commercial Vehicles home

     

    1. Ensure the image you are about to upload has a unique and descriptive name.
       
    2. Hover your mouse cursor over Content and the menu will dropdown. Move your cursor down to File and left click on it.
      Screenshot showing where to navigate to the files area in Drupal
       
    3. The Content > Files window will open. Click on the Add file button above the Name search field.
      Screenshot of the Add file button in Drupal
       
    4. Click on the Choose File button and navigate to the image or document you want to add to the library. Make sure it’s a unique name that you can find again.
       
    5. Click the Upload button next to the name of the file you chose.
      Screenshot of the where the upload button is in Drupal
       
    6. You will be asked if you would like the image to be public (accessible to everyone) or private (only seen by those logged into our Drupal site). Always select the Public one for our external site and then hit the Next button.
       
    7. You will then have to fill in the Alt text (what screen readers read aloud when passing over image) and the title text (what pops up when you hover your mouse cursor over it. After filling these out, click the Next button.
      Screenshot of where the Save button is while uploading images
       
    8. Now your file is in the system and ready to be placed on the page.

     

     

    Add an already uploaded image to a page

    1. Find the page you want to add the image(s) to and open it.  
       
    2. In the Edit Draft or create new page window put your cursor where you want the image to go. Then click on Add media button.
      Arrow pointing to the location of the Add Media button on the text formatting toolbar
       
    3. Type in all or part of the File name in the search bar and hit apply. Click on the correct photo from the search results.
      Arrow pointing to the Apply button for searching in the Add Media button
       
    4. The image menu will open. Double-check the Alt and Title Texts. If correct, click Submit.
      Screenshot of where the Submit button is after checking the Alt and Title Textbox
       
    5. The photo will appear in your Body textbox. Click and drag the image to its correct place if it isn’t already. 
      Screenshot of the image in the Body textbox
       

     

    Edit an image on the page

    1. Once the image is on the page it will be in its default size. This is the size the file itself was when it was uploaded.
       
    2. If the image is too big, double left click on the image itself in the Body textbox.
       
    3. The Image Properties window will appear and it looks like this:
      Screenshot of the Edit Image Window in Drupal
       
    4. You can change the width or height to a smaller number to change the size of the document. Once you have the size you want, press the green ok button.
       
    5. You will be returned to the body textbox area of your Edit Page and be able to see your newly resized photo.
       
    6. If the size stills needs more editing, start back at number 2 and go back through the steps until it is correct.

       
     

     

    Replace an uploaded image

    1. Hover over Content on the top black bar and then click on Files.
      Screenshot showing where to navigate to the files area in Drupal
       
    2. The Content window will open with the Files tab selected.
       
    3. Type in part of or the full name of the file you want to replace, following our naming guidelines, in the Name textbox. Then hit the green Apply button.
       
    4. Your file should be one of the choices that appears under the Title column. When you find it, click on the blue Edit button on the row it is in.

       
    5. A new window will open called Edit image file name.file type.
      Screenshot of the Edit Image and replace area of Drupal
       
    6. Select Choose File to open up a new window. Navigate to the file you want and check to make sure the name of this new file matches the one already uploaded to the server. If it is named exactly like the already existing file, you can continue onto the next step. If it is not, right click on the new file and click Rename to change it to what the file already uploaded to Drupal is called. Once you have the correct file name, click on the file and then hit Open.
       
    7. You will see the name of the new file to the right of Choose File on the Edit window. Check the Keep file name the same checkbox so the URL and name doesn't change. Then scroll down and hit the green Save button.
      Screenshot pointing to where the Replace file area is located
       
    8. You will return to the Content window. Verify that your file has been updated if there is a green check mark with a message on what was updated at the top of the search area.
       

    If your photo does not update after replacing:

    1. Return to the edit page window
    2. Delete the link to the document or the photo itself
    3. Relink or re-insert the file using the Drupal
    4. Save your page
    5. Check the file or photo again to see if it updated.
    6. Return to the edit page, mark the page as Needs Review and Web Help will review

    Back to top

     

    Chapter 5: Getting documents onto the page

     

    Upload a document

     

    1. Ensure the document you are about to upload has a unique name.
    2. Hover your mouse cursor over Content and the menu will dropdown. Move your cursor down to File and left click on it.
      Screenshot showing where to navigate to the files area in Drupal
       
    3. The Content > Files window will open. Click on the Add file button above the Name search field.
      Screenshot of the Add file button in Drupal
    4. Click on the Choose File button and navigate to the image or document you want to add to the library. Make sure it’s a unique name that you can find again.
      Screenshot of the where the upload button is in Drupal
    5. Click the Upload button next to the name of the file you chose. Then click the blue Next button.
       
    6. You will be asked if you would like it to be public (accessible to everyone) or private (only seen by those logged into our Drupal site). Always select the Public one for our external site and then hit the Next button.
       
    7. Now your file is in the system and ready to be placed on the page. See Link to an already uploaded document to put it on a page.

       

     

    Link to an already uploaded document

    Having a document with a unique name makes it fast and easy to find the document.

    1. Always write a descriptive document label followed by document qualifiers like (type size).
      Example: WSDOT organization chart (pdf 415 mb)
      This will be the text that you will use to link to the document itself, only after uploading it to Drupal.
       
    2. Highlight the descriptive document label you just wrote, then click the Hyperlink button on the edit toolbar.
      Screenshot with arrow pointing to the Hyperlink button on the Body textbox window
       
    3. In the Link Type: Internal Path, you can begin typing in the filename and the full name should appear with a file number at the end in parenthesis. Select the file you’re looking for and hit Save.
      Screenshot with arrow pointing to the Ok button on the Link area of the site
       
    4. Your document will now be linked to in the Body textbox via a hyperlink. When visitors to your page click on that link, the document will open up for them to view or save.
       

     

    Replace an uploaded document

    1. Hover over Content on the top black bar and then click on Files.
      Screenshot showing where to navigate to the files area in Drupal
       
    2. The Content window will open with the Files tab selected.
       
    3. Type in part of or the full name of the document you want to replace, following our naming guidelines, in the Name textbox. Then hit the green Apply button.
       
    4. Your document should be one of the choices that appears under the Title column. When you find it, click on the blue Edit button on the row it is in.

       
    5. A new window will open called Edit document file name.file type.
      Screenshot of the Edit Image and replace area of Drupal
       
    6. Select Choose File to open up a new window. Navigate to the file you want and check to make sure the name of this new file matches the one already uploaded to the server. If it is named exactly like the already existing file, you can continue onto the next step. If it is not, right click on the new file and click Rename to change it to what the file already uploaded to Drupal is called. Once you have the correct file name, click on the file and then hit Open.
       
    7. You will see the name of the new file to the right of Choose File on the Edit window. Check the Keep file name the same checkbox so the URL and name doesn't change. Then scroll down and hit the green Save button.
      Screenshot pointing to where the Replace file area is located
       
    8. You will return to the Content window. Verify that your file has been updated if there is a green check mark with a message on what was updated at the top of the search area. 
    9. Return to the page where the document is linked to. Ensure there is "https" and not "http" in front of the URL of the page to check. Please wait at least 10 minutes, refresh the page, then check again.
       

    If your document does not update after replacing and waiting at least 10 minutes:

    1. Return to the edit page window
    2. Delete the link to the document or the photo itself
    3. Relink or re-insert the file using the Drupal
    4. Save your page
    5. Check the file or photo again to see if it updated.
    6. Return to the edit page, mark the page as Needs Review and Web Help will review