Website Support

Information Technology, working with Strategic Communications and the campus Drupal Team, is nearing the last phases of our Drupal upgrade project:

• Scheduling department websites for upgrade
• Training for content owners/editors
• Migration of content from Drupal 7 to Drupal 9/10

This communication includes details about these next phases, what content owners/leads can expect, and how departments will need to participate in the upgrade.

Drupal Upgrade Tasks for Departments

1. Read this communication in full.
2. Review the Draft Migration Schedule to find your proposed migration start date.
3. Talk with your web coworkers and leadership to determine if that date will work for you.
4. Reply to the Drupal Migration ticket created for you by the Web Team to confirm your availability, or to request a different migration date.
5. Access your Sandbox to explore the Drupal 9 training.
6. Drop in to a Sandbox and Migration Support Zoom session as needed.
7. Participate in the migration process (described below).

What is Drupal?

Drupal is the web content management system used by SSU schools, departments, programs, divisions, and affinity groups to build and maintain their public-facing websites. These websites are an important part of the way the University provides information and services to our students, employees, and other members of the campus community.

Why Upgrade Drupal?

SSU currently is using Drupal version 7, which was originally released in 2011. Drupal 7 is scheduled to meet its end of life in November 2023, and will no longer be developed or maintained by the Drupal development community. Drupal 9 is the latest version and offers many improvements to content owners and editors, Drupal developers, and visitors to our websites. Drupal 9 allows SSU to adopt modern development practices, better improve and control accessibility for visitors with disabilities, and increase the security of our websites.

Training for Department Content Editors

Drupal 9 has many features that will be familiar to Drupal 7 content leads and editors, but also many important differences. To prepare department web editors for using D9, Information Technology has created Sandbox sites for all department sites.

Sandboxes are for exploration and learning, not for making production content. Department content editors should delve into the sandboxes with our Drupal 9/10 Training Guide to see what’s updated and experiment with new features. Sandboxes are a safe place to try new things — nothing in a sandbox will be copied to a production site.

Sandbox Sites

A D9 Sandbox site is available for each existing D7 site. Content leads on D7 sites will have access to their department’s Sandbox sites.

Sandbox sites are based on SSU’s starter templates, and include all the content types, blocks and views available in SSU Drupal 9 standards. They do not contain any of your content migrated from existing sites.

URLs for Sandbox sites are similar to D7 sites.

• D7 site: https://sitename.sonoma.edu/
• D9 Sandbox: https://sitename.a9prd.sonoma.edu/
• D9 Sandbox login URL: https://sitename.a9prd.sonoma.edu/user

If your D7 URL is https://biology.sonoma.edu,
your D9 Sandbox URL is https://biology.a9prd.sonoma.edu
and your D9 Sandbox login URL is https://biology.a9prd.sonoma.edu/user

Logging in to Your Drupal 9 Sandbox

Drupal 9 uses SSU’s single sign-on system.

Note: Sandboxes have an additional level of HTTP authentication to prevent search engines and other unauthorized access. This won’t be required once your migrated department site is launched.

1. Go to your Sandbox URL. Be sure you are using https and not http.
2. HTTP authentication dialog will be presented.  If you don't know this shared username and password, please consult the email sent to you via Drupal-Announce or the Drupal Migration ticket sent to you by the IT help desk. (Note: You will not receive this email until a slot has been scheduled for your site's migration.)
3. Go to the Drupal login URL by adding “/user” to the URL in the browser.
4. Click SSU Single Sign-on.
5. Authenticate with SSU’s single sign-on system.
6. You are returned to the Drupal Sandbox and logged in as a content editor.

If a user doesn’t already have a Drupal account on the specific Sandbox site, one will be automatically created by logging in.

Migration Process

Drupal 7 and 9 are very different applications, and the migration path is complex. The Drupal Team has developed a process to export content and files from a Drupal 7 department site, and import it into SSU’s Drupal 9 platform and standardized content types. Parts of the process are automated, but other parts require human review and code development by the Drupal Team, and other parts require human review on the part of the website owner/editor.

Note: During a department’s migration, Drupal 7 site edits will be disabled to prevent Drupal 7 and Drupal 9 from getting out of sync. It will be important for all parties to complete their tasks as quickly as possible. Drupal 7 sites will still be accessible to all viewers until the migration is complete and the Drupal 9 site is launched.

Here is an overview of the process:

Migration Schedule

SSU has 144 Drupal 7 sites. The migration process allows us to run the export and import for 1 site at a time. The Drupal Team estimates that we will be able to start one department migration a day beginning in April.

Because department content editors and owners must be part of the process, we have made a preliminary schedule that begins April 26, 2023.

The schedule order is based upon the complexity of the site, whether the site is primarily student-facing (an academic department or school) or administrative. Simple sites are scheduled ahead of complex sites so we can identify and fix as many bugs as possible early in the migration process. This will make it easier to migrate complex sites later in the schedule, and reduce the number of issues complex site owners will encounter.

Draft Migration Schedule

Fifteen simple sites have been identified for early migration testing starting April 7 through April 25. These are labeled Group 0. The migration process for those is slightly different, requiring less review and staging work by the departments. The Drupal Team will work with the content editors and owners to ensure the sites are ready and approved before launch, then move to prioritizing and migration the rest of the sonoma.edu sites.

Confirm or Change Your Department’s Migration Slot

The Drupal Team will use a Drupal Migration help desk ticket to send and manage invites for migration work and due dates. Invitations will be sent approximately 2 weeks before the migration window begins.

If your department’s content editors and owners are not available in that timeframe, please let the Drupal Team know immediately by responding to the Drupal Migration email and suggesting a timeframe when your team will be available.

Migration and Sandbox Drop-in Support Hours

The Web Office is offering drop-in support hours via Zoom for D9 migration and sandbox use.

Mondays, 2:00-3:00 pm
April 10 - October 16, 2023

Join Zoom Meeting:
https://SonomaState.zoom.us/j/82781852057?pwd=cUpCRDRFdVRxcnExZnU5VGh6RGlYZz09

Yes, here are the currently available options for SSU faculty.

Department Drupal website, Faculty profile page

Who can see the site: public facing
Who can edit the site: updated by department content lead
Good for: This is a good option if the department website is on SSU Drupal, and the desired faculty website is minimal, similar to a CV.
How to get this: Talk with your department Drupal content lead.
Examples:  Biology Faculty & Staff (each person listed has a Faculty/Staff profile page)

Google Sites in SSU’s Google Workspace (formerly Google Apps)

Who can see the site: public facing, or can be shared to limited users
Who can edit the site: faculty member, or can be shared to limited editors
Good for: This is a good option if the faculty member wants to "do their own thing," and not necessarily use a Drupal site.  This should not be used for a course website or course materials (use Canvas instead).  Best for a personal interest site, or to share research.  If the site is used for a class project, it will need to comply with accessibility standards.
How to get this: Login to your SSU Google account, then click the Google Apps menu icon (

Drupal Faculty Lab/Research pages 

Who can see the site: public facing
Who can edit the site: faculty member, department Drupal content leads
Good for: If the Department wishes, the Web Office can add the Faculty Lab/Research content type to the department Drupal site.  Faculty can be given a Faculty role, and create/edit their own pages within the department site.  This should only be used for their SSU professional/research work.  It should not be used for a course website. Faculty will have to complete the Drupal training in Canvas.  Site will need to comply with accessibility standards.  Faculty Lab/Research pages are not offered to Emeritus faculty.  These are not intended to function like a blog.  Note:  the department should have multiple faculty who want Faculty Lab/Research pages, and the department's web editors will need to be able to provide some support for the faculty creating these pages.  This is not a good option if the faculty member wants their grad students to edit the Faculty Lab pages.
How to get this: Talk first with your department Drupal content lead to find out if there is interest in adding this content type.  Then you and your Department content lead should contact the Web Office to request the content type be added to your department's Drupal site.
Example:  Biology Faculty Labs

Canvas

Who can see the site: private - instructor, enrolled students, other enrolled members
Who can edit the site: faculty member, other teachers in the course
Good for: This should be used for course websites and materials.
How to get this: All university courses are added to Canvas automatically.  Login to check Canvas for your site.  If you don't find it, contact CTET.

Off-Campus Hosting

Who can see the site: private or public facing
Who can edit the site: faculty member, and anyone the faculty member gives access to
Good for: Faculty may choose to host their content with an off-campus provider. This option should not be used for official university sites or any use that would be considered required for SSU courses or other SSU business. This type of site is not supported by IT & Web Office. IT does not redirect web.sonoma.edu or Drupal site URLs to off-campus sites.
How to get this: The IT Web Office doesn't recommend or endorse any off-campus hosting providers.  There are many website hosting providers available.  Some are free, others cost money.  Try searching for "website hosting" and other terms important to you.  If the site will be used for SSU students, or if you're working with a government agency, or using government funds (including grants), you may be required to meet accessibility standards, so look for a provider that can provide WCAG 2.1 AA compliant templates.

Department Legacy website (web.sonoma.edu), Faculty profile page

Who can see the site: public facing
Who can edit the site: updated by department web editor
Good for: This is a good option if the department website is on web.sonoma.edu, and the desired faculty website is minimal, similar to a CV.
How to get this: Talk with your department web person. Effective June 2021, all department sites have migrated to Drupal, and are no longer available on the legacy web server.
Effective January 12, 2022: Legacy website user directories will be deleted as part of a project to retire the legacy web server.  The Web Office will contact all user directory owners in Fall 2021 about options for backups or moving content elsewhere.

User Sites on web.sonoma.edu/user/...

IT no longer provides individual user accounts and directories on web.sonoma.edu, and IT Web Services has been working to identify old/abandoned sites for removal.  While no end-of-life date has been set for the server web.sonoma.edu, a deadline for backing up or moving content in web.sonoma.edu/user sites has been scheduled: Noon on January 12, 2022. After that, all /user sites will be deleted.  Faculty and staff who already have sites with URLs beginning web.sonoma.edu/user/ should consider the options listed above, and move their content to the site that best meets their needs. 

Questions?

Please contact the Web Office if you have questions about any of these options.

Note: As of fall 2018, the IT Web Office no longer creates user directories on our legacy web server, web.sonoma.edu.  Eventually, all web.sonoma.edu/user directories will be removed, as part of our long-term web publishing platform changes.

As of September 2018, the Web Office is no longer creating new department sites on web.sonoma.edu, SSU's legacy web publishing platform.

Requests for new websites will be built on Drupal, SSU's new publishing platform.

This is a sample of a content page with the Acalog Courses Widget, which dynamically pulls the list of courses from the Catalog's Courses page. This example shows the CHEM courses.  For instructions, see Drupal - Embedding Catalog Information Using the Acalog Widget.

Chemistry Courses

• Loading...

This is a sample of a content page with the Acalog Program Widget, which dynamically pulls the content from the Catalog's program page. This example shows the Chemistry, B.S. program description. For instructions, see Drupal - Embedding Catalog Information Using the Acalog Widget.

Academic Departments can use the Acalog Widget to embed the Catalog's program and course content in their Drupal sites. This allows Departments to include up-to-date information in their websites without making frequent edits to remain in sync with the official catalog. See these examples:

• Acalog Program Widget Example - Chemistry
• Acalog Courses Widget Example - Chemistry

Instructions

1. Copy one of the code snippets below.
2. In a separate tab or window, login to your Drupal site, navigate to the page you wish to add the widget to and click New Draft. Or, if you want to add the widget to a new page, go to Manage > Content > Add Content, and select the type of page you want to add. A Basic Page is probably the best choice.
   Note: At this time, the Acalog Widget does not function properly on Drupal 7 Landing Pages. Please use a Basic Page for your Acalog Widget content.
3. In the HTML text editor, click the "Source" button to show the HTML view and paste the code you copied in step 2. If there is other text already in the page, be careful to insert the code into the correct place in the page.
4. Edit the script to use the appropriate Program name or Course prefix.
   • For the Program widget, edit the data-acalog-program-name value. Replace PROGRAM-NAME with the exact name of the program from the catalog. You can find the exact name of your program on the Catalog's Program by Department page.
   • For the Courses widget, edit the data-acalog-course-type value.  Replace COURSE-PREFIX with the exact prefix of the courses.
   • If you turn off the Source view, be careful not to modify the section you just pasted.
5. Save and Publish. 

Code Snippets

Program widget

This will insert the text from the Catalog Program Description page. The program name must appear exactly as it is in the Catalog.

Courses widget

This will display a list of courses within a department. Each course title links to the course description in the current catalog.

•     
• Loading...

To request an account on any Drupal site, submit a Drupal/Website ticket in Freshservice. Seawolf ID is required.

Drupal website editors must complete the training course on Canvas, Drupal Training for Content Editors and Leads.  If you have not completed that training, the Web Office will give you access to the course before enabling your Drupal account.

In a Drupal Faculty & Staff profile, you can add a Zoom link in the Office Hours' Comment field.  You can also use this method to link to a signup sheet on Calendly, Google Drive, or other sites.

1. Login to your Drupal site.
2. Find the profile page and click New Draft, or find the page in the Content list and click edit.
3. Scroll to the Office Hours section, and select hours for the relevant day(s).
4. In the Comments field for that day, you'll type or paste in HTML for the <a> tag (link).
   Here's the format:
   <a href="https://SonomaState.zoom.us/j/zoomsessionnumber">Name's Zoom Link</a>
   
   The actual HTML would look like this:
   <a href="https://SonomaState.zoom.us/j/1234567890">Lobo's Zoom Link</a>
   
   Here's a screenshot of what that looks like:
   
   
5. Save and publish the page.
6. The Office Hours with Zoom link will be displayed on the Faculty member's profile page, and also on the department's Office Hours page.

Please Note: Global Message is a new content type.  It has not yet been added to all SSU Drupal sites.  The Web Office is currently working on this, and should be complete by April 10. 

Global Messages are good to use when:

• There is a campus emergency such as pandemic, fires or wide-spread electrical outages.
• Your Department has a sudden change of services that is important for all visitors to know.
• You want to communicate an important impending change.

Adding a Global Message

1. To create a new Global Message, either go to 
   Manage > Content > Add Content > Global Message.
   OR, edit the existing Global Message by going to 
   Manage > Content > filter by Type: Global Message > Click Notice > New Draft.
2. The Global Message requires:
   • Title - keep it short.
   • Body - keep it short.  If you need more than 2 sentences, make some other page with the full content, then link to that page in the body of the GM Body.
   • Background Color - choose one of SSU’s brand colors.  If you don’t choose a color, the text will be black and the background will be white.
3. Save and Publish.

Only one Global Message will be displayed on the site.  If you have 2 or more Global Messages in your Content List, Drupal will display the message that is published and posted most recently.

Removing a Global Message from Display

1. To remove all Global Messages from display go to
   Manage > Content > filter by Type: Global Message > Apply.
2. In the resulting content list, check the box next to each Global Message.
3. Pull down the Operations menu, select Unpublish, and click Apply.

Tips for Tracking and Reusing Global Messages

Like other content types, each Global Message can be edited and has a revision history available by clicking the Moderate tab.

The same Global Message node could be reused, edited, published and unpublished as needed.  Department Content Leads can use the revision history to track changes to the message over time.

Multiple Global Messages could be created for different types of communications and situations, especially those that are recurring.  For example:

• If your department has a seasonal change of service hours.
• If there is a recurring and important deadline for a scholarship, grant, application or similar program or service.
• If your department wants to welcome back all students and remind them to do something.

These multiple Global Messages can exist simultaneously in your site's Content List, but only the most recently posted, published item will be displayed.

Pages Where the Global Message is Not Displayed

The Global Message is not displayed on the following pages.

• /user
• /user/*
• /users/*
• /ssu-search
• /ssu-search/*

If there are other pages on your site that should omit the Global Message, please submit a Drupal/Website Change Request. Include the URLs of the pages where the message should not be displayed.

Here are two ways to insert video into a Drupal page or other content area that uses the HTML editor.

Note:  All videos used on SSU websites must be appropriately captioned.  

Use the HTML Editor's Add Media button.

This is currently the preferred method to add video to a Drupal page.  This works best with YouTube videos.  This method inserts an HTML 5 video player that will resize for mobile resolutions.  It also adds all the player code required for accessibility compliance (it should still be captioned, though).  

Note: This method used to have a bug.  That has now been fixed, so using this method is recommended.

1. Open a web browser tab, locate the YouTube or Vimeo video, and copy the URL.
2. In a separate browser tab, login to your Drupal site, open the desired page and start a new draft.
3. Click in the Body where you want to add the video. You should add it on a blank line.
4. Click the Add Media button.
5. Click Web. If you don't see a "Web" tab, submit a Drupal/Website ticket and create a Change Request that your page's configuration be updated to include the Web option.
6. In the field labeled "File URL or media resource" paste the URL of the YouTube or Vimeo video.
7. Click Next.
8. Click Submit.
9. Save and Publish the page.

Use the Share > Embed method.

This is another way to embed video.  However, the video player will have a fixed width and will not resize for mobile displays.  This could cause the page layout to look broken on some pages and mobile devices.

1. Go to your video on YouTube, Google Drive or Vimeo. 
   • Note: If using Google Drive, use these instructions to get the Embed code, then skip to step 5.
2. Click Share.​
3. Click Embed.
4. Click Copy. 
5. Go to your Drupal page where you want to embed the video. Make sure you're logged in and can edit.
6. Click New Draft.
7. Find the place in your content where you want to insert the video. Insert a blank paragraph.
8. Take note of the content above and below - this will help you identify the place to insert the embed code in the next step.
9. Click the Source button - now you'll see the HTML for your page content.
10. Find the blank paragraph you inserted - it will look like this:  <p>&nbsp;</p>
11. Select that blank paragraph code and give the Paste command to replace the blank paragraph with your video code.
12. Click the Source button again to return to the design view.
13. Where you inserted the video you will now see a rectangular block with the word IFRAME. 
14. Double-click on the IFRAME block.  This opens a dialog box.
15. In the Advisory Title field, type (or copy and paste from the video page on Youtube, Google Drive or Vimeo) the title of the video, and click OK.
16. Save and review.
17. If the video displays on the page correctly, publish.

What is caching?

Caching is the process that stores copies of web pages and files in a temporary storage location (not the actual web server). Caching helps to improve the page performance and the time it takes to download and render a page for users. Drupal websites have three levels of caching.

• The user’s web browser will cache pages so the next time the user wants to view the same page, it can be quickly retrieved from the browser cache, instead of downloaded anew from the web server.
• The Drupal application will cache pages for a set amount of time, usually up to 6 hours. Note: Do not change this setting. Changing this setting will negatively impact the site's performance.
• Varnish, a caching system in between Drupal and the network, will cache pages for some set amount of time, usually up to 6 hours. If a requested page is in Varnish, that is the version of the page delivered to the browser. Varnish only caches content for use via Anonymous SSL (see below).

Whenever a user requests a page, if the page exists in one of these caches, that is the version of the page that is sent to the user's web browser. If the page is not cached, Drupal sends the page to the user's browser and keeps a copy in Drupal's cache and in Varnish. 

Varnish and Acquia Purge

Acquia Cloud, our Drupal hosting platform, uses a module called Acquia Purge to watch for certain changes. When a node is changed and published, Acquia Purge adds the node to a queue for clearing from Varnish. The purging process runs hourly. However, cache rules can be somewhat complex, and other settings may prevent a specific item from being purged from Varnish when expected.

Content in a View

Some content is displayed both as a Node and a View.

• A node is sometimes thought of as the page you create when you Add a new piece of content with a Content Type (like a Basic Page, Landing Page, Article or Faculty/Staff Profile).
• A view is a dynamically generated list of nodes, usually of a specific content type. The lists can be all nodes, or even just the most recent 1 item. Views are usually inserted into nodes (like a Basic Page or Landing page) in addition to the node's "Body" content. Common views on SSU sites are a list of Faculty and Staff in a department, a list of News Articles, a list of Events, the Homepage Top Notice, Forms & Resource Links, and Lecture Series).  

Both nodes and views can be cached in Varnish. Sometimes, when a node is updated, a related view might not be immediately cleared from the Drupal and Varnish caches.

What do caching issues look like?

Sometimes, when you edit and publish content, and then go look at the page, you won’t immediately see the change you made.

Sometimes you might update a node, but the related view that includes the node's content doesn't immediately update. 

This is usually because the content is cached in Drupal and/or Varnish.

Don't panic, caching is a good thing for your site's performance.

However, if you can't wait for the change to take effect for all site visitors, here are some things to try.

First, try this:

1. Clear your browser cache and reload the page.
2. Try visiting the page using Incognito mode, or a use different browser (Chrome, Firefox, Safari, Edge, etc.).
3. Clear the Drupal cache (Drupal menu > Shortcuts > Clear Cache > Click the Clear Cache button).
4. Wait for that to process, then clear your browser cache and reload the page.

If the content that is not updating is in a View, try this:

1. While logged into Drupal, visit the node you changed to verify that the change was published.
2. Visit the page with the view, clear your browser cache and reload the page.
3. Copy the path of the page (everything after "sonoma.edu/") with the view, and manually purge it.
   1. Drupal menu > Shortcuts > Clear Cache > Manual Purge
   2. Paste the path into the Paths to be purged field.
   3. Click Queue.

Note: Do not change any of the settings on the Performance pages.  This will negatively impact the performance of your site. Please contact the Web Office if you think a change needs to be made.

What about the Clear Acquia Purge queue button?

There is a new button "Clear Acquia Purge queue" on the Performance page, next to the Clear all caches button.  Clicking this will erase the list of pages currently in the Acquia Purge queue.  Usually, you should not push that button.

How to report a Website Caching Issue to the Web Office

1. Go to the Drupal/Website request form and select "Problem/Issue with Live Site."
2. In the ticket, include:
3. • Screenshots that include the URL in your browser bar of the content on the page that is changed but not displayed (so we can verify where the problem is and when it is fixed)
   • The reason why the page must be cleared on an urgent basis instead of waiting for Drupal and Varnish to clear automatically.

Allow 4 hours for a response to urgent issues during normal business hours. For all other issues, allow 24-48 hours for a response.

Please note, urgent issues are defined as those that convey critical information to the campus community such as emergency notifications or significant system or building outages. Due to the workload demands, we ask that non-urgent issues observe the 6 hour cache purging processes. 

General Advice When Sharing URLs

• After making a change, use your browser's Incognito mode, without logging into Drupal, to test that the change is visible, or use a different browser to test the page.
• Before sharing the URL, wait an hour after saving the change for the page to be automatically cleared from Varnish. Test the URL (not logged into Drupal), and then share it.

Yes, we have posted a copy of all the lesson content from the course, Drupal Training for Content Editors and Leads, on Google Drive as a single Google Doc. You must be logged into your Seawolf Google Drive account to view this file.

View Course Content

Please note: reviewing the training content here is not a substitute for completing the course in Canvas. SSU employees who need access to edit an SSU Drupal site must complete the Drupal Training for Content Editors and Leads in Canvas. After submitting your Drupal/Website ticket, the Web Office will contact you to enroll you in the course.

The text and location of a menu item can be changed in two places.

Note: for some content types, changing a page's menu location may change the URL path of the page. Take note of the URL path before and after making the change.  If you need to manually adjust the URL path, use the URL path settings tab, disable "Generate automatic URL alias" and edit the URL alias field.

Make a New Draft to change a single page's menu location

1. Make a New Draft of the page.
2. Click Menu settings.
3. Edit the Menu link title to change the link text of the menu item.
4. Select a different Parent item to move the page from one section of the site to another, or to move the link up or down a level (first, second or third level link).
5. Change the Weight of the item to move the link up or down within that menu section.  Generally, negative values move the item up the menu, positive numbers move the item down the menu.
6. Save and Publish.

Directly Edit the Menu

If you have the Content Lead role on the site, you can directly edit the menu to change the order of menu links, link titles and paths.  Be careful with this method, as it’s easy to break your site, and there’s no un-do button.  Also, you should probably not change the Path of any item.

1. Click Manage > Structure > Menus. 
   This displays the list of menus your Drupal site uses.  Please only make changes to the Department Menu.  Do NOT make changes to any of the other menus.  This can break your site.
2. In the Department Menu row, click List Links.
   This displays the list of links in the Department Menu.

• To reorder items:
  • Click+drag the handle of an item up or down to a new location. 
  • Dragging left or right will move the item up or down a level (first, second or third level link). 
  • Alternately, click the Show Row Weights link at the top right of the list to display and adjust the values of weight fields.
  • Click Save at the bottom of the screen.
• To change a link title, click the menu items Edit link, change the Menu link title and click Save.

In SSU Drupal, Landing Pages and Basic Pages include an easy-to-use option for embedding a slideshow in the Body Content.  Follow these steps.

1. Add or Edit and Landing Page or Basic Page.
2. Give the page a title and body content as usual.
3. Below the Body field, look for the Embed Slideshow option, and click Browse to attach media.
4. Add images to the slideshow.  You can either upload images or click Library and select images that have already been uploaded. 
5. Click the Edit button next to each image to make the following changes, then Save the image.
   • Make sure the Alt text appropriately describes the image.  This is for accessibility.
   • If you want a caption displayed below the image, enter that text in the Title text field.
   • Images will be cropped to fit the slideshow.  Use the Focal Point cross hairs to indicate the most important part of the image.  This will not be cropped. 
6. Under the Embed Slideshow heading, find, select and copy the snippet of code:
   
   
7. In the Body, click the Source button, and paste the snippet where you want the slideshow.
8. Save and Publish.

See a Sample Page with an Embedded Slideshow.

Faculty Site Page Instructions

The Faculty Site Page is a content type on some SSU Drupal sites.  It is intended for department faculty to create micro-sites within the department’s Drupal site.    Please contact your department web content lead to find out if the Faculty Site Page content is available on your department site.

Faculty should use this content type to post content related to their research, labs, or other professional activities. This content type should not be used to post course materials. That content should be posted in Canvas or other Learning Management Systems that are used with SSU courses. Course materials have their own functional requirements that SSU Drupal cannot support.

NOTE: If you post course materials on SSU Drupal, and it comes to the attention of Web Services, you will be asked to remove that content, or Web Services will remove it for you.

Drupal FAQ

Many elements of our Drupal platform are described in the IT Website Support FAQ.  Please check that if you have any questions.

Accessibility Requirements

The CSU and SSU are required to make all content on our websites accessible to people with and without disabilities.  The set of standards we follow is known as Web Content Content Accessibility Guidelines - WCAG 2.1, level AA.  All content you add via a Faculty Site Page must meet those standards.  SSU has some basic training for accessibility in our Canvas course - Drupal Training for Content Editors and Leads.  This training is not required for faculty who want to post Faculty Site Pages, but it is a good idea to take the training anyway. Submit a General type Drupal/Website ticket to request access to the course.

SSU also utilizes Siteimprove to scan your site and make suggestions about changes you can make to improve accessibility. Use the Siteimrpove Request form to ask for access to this powerful tool.

You may also use other free web-based services to scan your page as long as they don’t require you to sign/approve terms and conditions. Here are a few we have used:

• WebAIM WAVE
• Accessibility Checker
• In Chrome, Developer Tools has a Lighthouse tab with a button to generate an accessibility report.

Instructions

1. Login to your department’s Drupal site to create your Drupal account, using your Seawolf ID and password.  The login URL is always in this format:
   https://department.sonoma.edu/user
   Where “department” is the hostname used on your department’s site.  Examples:
   • https://english.sonoma.edu/user
   • https://ccjs.sonoma.edu/user
   • https://math.sonoma.edu/user
   • https://modlang.sonoma.edu/user
2. Send an email to jaime.russell@sonoma.edu to let her know you’re ready for your account setup. Your account will then be configured, and you will be sent a copy of the instructions for adding content to the site. This may take up to 2 business days.
3. Once you have content ready to post on the site, login to your department’s Drupal site.
4. In the Drupal menu, click Manage > Content > Add content > Faculty Site Page.  This will take you to an editing screen where you can create your first Faculty Site Page, and you will see the following fields. 
   1. Title: Add your page title. 
      For your first page, use your First and Last name for the title. For subsequent/child pages, the title should reflect the topic of the page.
   2. Body: This uses an HTML editor.  Enter the content you want on the page.  Use headings, lists, paragraphs, data tables to add structured content.  You can also use the Templates button to insert pre-formatted elements and placeholder content you can edit.
   3. Embed Slideshow: If you want to embed a slideshow within the Body content area, follow the on-screen instructions for attaching media (images) and inserting the slideshow where desired.
   4. Menu Settings tab:
      • Check Provide a menu link.  
        By default, the Menu link title will be the same as your page title.  For your first page, this should be your First and Last name.
      • On your first page, set the Parent item to Faculty Lab Research Sites. On subsequent/child pages, set the Parent item to the page with your First and Last name.
   5. Header tab (optional):
      • If you would like a banner image at the top of your page, click Header, then click Add new paragraph under Header Slideshow - Standard (thin banner), or under Header Slideshow - Full (bigger banner).  See our Banner Images FAQ or How to make a Banner Slider for more information.
      • Browse to upload an image, or select an image from the library.
      • For the title, use your department's name, for example: “Chemistry Department” (this is part of your department’s standard)
      • For the text, use your school's name, for example:“School of Science & Technology” (this is part of your school’s and department’s standard)
      • Avoid using the other fields in the Header section. Please submit a Drupal/Website ticket and select the General type to ask your questions.
   6. Publishing options tab: Under Moderation state, select Needs Review.
   7. Save.  A preview version of your page will be displayed.
      Note: the preview is not an exact representation of the page as published, but it will give you an idea of what the content of your page will look like.  The Header banner may not be displayed when you first preview a new page.  
      • If it looks ok, set the moderation state to Published and click Apply.
      • If you want to make further changes, click the Edit draft tab, make your edits and review it again.

Child Pages

Use the same process to add a child page.  The only differences are:

Page Title

This should be related to the topic of the page.  Examples:

• My Research
• Grad Students 
• Rock Collection
• Sample Research Projects
• Get a Letter of Recommendation

Menu settings

Menu title - This should be related to the topic.  By default it will match the page title, but you can edit this to make a shorter menu link title, if desired.

Menu parents - On child pages, this should use your first page, which should be using First and Last name. Choosing that First and Last name page will ensure your child page menu items are nested under your first page.

Weight - You can change the order of child pages in the menu by assigning a menu weight.  By default, the weight is 0, and pages are sorted alphabetically by menu link title.  Assigning numbers to the child page menu weight changes the sort.  The lower the weight, the earlier it appears in the sort.  Think of balloons - the less they weigh, the higher they float.

Screenshot of Faculty Site Page editing screen

Sometimes files, like images, PDFs and Word DOCXs go out of date.  You can always upload a new file and update your link to the file, but that often changes the URL of the file.  If you don't want the file's URL to change, use this procedure.  Note: Using this option will overwrite the original image or document on Drupal.

1. Login to your Drupal site.
2. Go to Manage > Content > Files.
3. Find the relevant file in the table list of files, and click the "edit" at the end of the row.
4. In the Edit Image or Edit Document page, in the Replace File field, click the Choose button to find and select the new file on your computer.
5. Check the box Keep Original Filename.
6. Click the Save button.

It may take several minutes for the various caches to clear (on Drupal, on your browser, and the Varnish cache).  You can try clearing the cache.

Faculty/Staff Profile is one of the content types available in all SSU Drupal sites.  It includes a variety of fields that may be used to create profile pages for department faculty, staff, emeritus and others.

To add a new profile:

1. Login to the Drupal site.
2. Click Manage.
3. Click Content.
4. Click Add Content.
5. Click Faculty/Staff Profile.
6. Fill out the fields you want to use for the profile.  In most cases, empty fields are omitted from the saved page display.
   • Picture - browse to upload or select an image.
   • Employee Type (required)
   • First Name
   • Last Name (this is used to influence sorting, see below)
   • Full Name as it should be displayed at the top of the page (required)
   • Professional Title
   • Contact info - phone, email office location
   • Office hours
   • Personal website title and link
   • free text areas for General State, About, Biography, Education, Academic Interests, Concentrations, Selected Publications
   • for sites that list all classes and course, the courses taught may be selected.
   • Menu Settings - On most sites, click Provide a menu link, and select the default Parent item.  This should be something like Faculty & Staff (disabled).  If this option is not available, uncheck Provide a menu link.
7. Publishing options - select Needs Review, then Save.
8. Preview the page, and select Publish and click Apply.

The new profile page has been added to the site. 

On most sites, the page that contains a view of all faculty and/or staff will also include the new profile's image, contact details, and a link to the full profile page.

See example profile pages and views on the Music and Human Development department sites.

Sorting Faculty/Staff Profiles in the View

You can enter any alphabetic characters in that field to influence the sort order of Faculty/Staff profiles in the view.  The Last Name field is only used to determine sorting - it is not displayed on the page or in the view.  

For example, if you want a specific Faculty or Staff member to be displayed at the beginning of the view's list, enter "A" in the Last Name field.  If you want someone to show up at the end of the list, enter "Z" in the Last Name field.

On SSU Drupal sites, Logo Carousel is a Sub Content paragraph bundle that can be added to a Landing Page.  

Not all SSU Drupal sites have the Logo Carousel. Submit a Drupal/Website ticket Change Request to have the Logo Carousel option added to your

The Logo Carousel allows you to add a responsive Sub Content block with:

• Heading (recommended)
• Summary/Long Text (optional)
• One or more images - they don't have to be logos (required)
• The images can link to other pages, files or sites (optional)
• Background color (SSU brand colors)

Examples

• Career Center
• Library
• School of Arts & Humanities

Desktop screenshot

Mobile Screenshot

Instructions

1. Create a Landing Page, or make a New Draft of an existing Landing Page.
   1. If it’s a new page, add a title and body text, and add to the menu appropriately.
2. Click the Sub Content tab.
3. Click Logo Carousel.
4. Title - Give the Logo Carousel a Title - this will be a heading for the block (Recommended)
5. Text - If you want some introductory or descriptive text, add that to the Text field. You can also add links, other images, or any other HTML that may be appropriate.  This will be displayed above the carousel.
6. Click Add Logo.
7. Click Browse - either upload an image, or click Library to select an image that has already been uploaded.
   Note: Keep in mind that the image will be scaled and cropped to 368x368 pixels.  Do not upload huge files - resize in Photoshop to about 400px first for the best outcome.
8. Provide Alternate text for the image (required)
9. Provide Title text for the image - this will be displayed as a tooltip when the user hovers their mouse over the image.
10. If you want the image to link to another page, file or website, fill out the following:
    1. Logo Link title - the name of the page, file or website.
    2. Logo Link URL - this is the URL of the page, file or website.
       Note: if you are linking to content on the same site, click the Search button to search for the page or file.  This will create a relative link to the content that will be automatically updated if the URL of that content is changed in Drupal.  This is considered a Best Practice for SSU Drupal sites.
11. Repeat 6-10 to add more Logos to the carousel,
12. Save.
13. Publish.

Some SSU department Drupal sites use the Announcement content type and block to display a list of very brief announcements on their homepage.  The Announcements block displays up to 10 of the most recent published Announcement nodes.  If there are too many items to fit in the block, a scroll bar will allow users to scroll though the Announcements.

To Add an Announcement

1. Login to your Drupal site.
2. In the Drupal menu, go to Manage > Content > Add content > and click Announcement.
3. In the Title field, enter a title.  This will be displayed in bold font in the Announcement block.
4. In the Body field, enter a brief announcement.  The announcement text shouldn't be longer than 300 characters.  (Some sites may have a higher limit.)
5. You may add an image in the Image field.  This will be scaled and cropped to fit in the Announcement block.  The image will float left, allowing the Title and Body text to wrap around the right side of the image.
6. Save and Publish.

To Edit an Announcement

1. Login to your Drupal site.
2. In the Drupal menu, go to Manage > Content, then use the filter to view Announcements.  
3. Click the edit link for the Announcement you wish to edit.
4. Update the Title, Body and/or Image fields.
5. Save and Publish.

To Remove an Announcement

1. Login to your Drupal site.
2. In the Drupal menu, go to Manage > Content, then use the filter to view Announcements.  
3. Click the checkbox for the Announcement you wish to remove.
4. Pull down the Operations menu and select Unpublish.
5. Click Execute.

To Change the Order of Announcements in the Announcements Block

Items in the Announcements block are sorted by publication date.  If you adjust the publication date of one or more Announcement nodes, you can influence the sort order.  The item with the most recent Authored on date will be at the top of the list.  

1. Login to your Drupal site.
2. In the Drupal menu, go to Manage > Content, then use the filter to view Announcements.  
3. Click the edit link for the Announcement you wish to edit.
4. Click on the Authoring Information tab near the bottom of the page.
5. Update the value of the Authored on field.  Be sure to follow the format for date, time and timezone as described below the field.
6. Save and Publish.

Sonoma State's central website publishing platform, Drupal, is available for all official departments - e.g. Divisions, Schools, and Departments.  SSU Drupal is intended to build sites that are primarily public-facing, though there are tools to limit access to content to Seawolf account holders (students, employees, and some contractors with LDAP credentials).

Most SSU departments already have a Drupal website.

New departments may request an SSU Drupal site by submitting a Drupal/Website request. In the "Details" section, please include:

• the official name of the department
• the purpose of the website
• the SSU employees who will help to build, edit and maintain the site

Requests for sites that are not for official departments are not automatically granted.  Usually, pages or mini-sites for specific projects or events should be built as part of the sponsoring department's site.

The Web Office will respond with any follow-up questions needed to establish the site.

Landing pages have banners (aka Header Slideshow).  If you add multiple banners, they will be displayed as a slideshow, with forward and back buttons that allow website visitors to move from image to image.  This works best with the Full Header Slideshow size.

You can see an example of this on the Makerspace website.

Instructions

1. Login to your Drupal site.
2. Navigate to an existing Landing Page and click New Draft, or create a new Landing page (Manage > Content > Add content > Landing page).
3. Edit your page content as needed, then scroll towards the bottom of the editing page to the vertical tabs.
4. In the Header tab, you'll see buttons for three sizes of Header Slideshow - Standard (smallest), Full (hero image), and Homepage.  Under Header Slideshow Full, click Add a new paragraph.  If your page already has a full banner, click Add another paragraph.
5. In the Slide Image field, click Browse.  Either upload an image, or select an image from the Library.
6. Make sure the image you select has Alternative Text.
7. Enter Title text.  For most sites, this will be the name of your department.  You can check other landing pages on your site to see what your site uses.
   Note: if the page already has a banner, make sure this new banner uses exactly the same text.  There is a bug in some older browsers that will not display text properly if the same text is not used in each banner slide.
8. In the Text field, enter a tagline, or the name of the School or Division your department is part of.  
9. If you want an additional banner image, repeat steps 4-8. 
10. Once you've added all the slides, click the Publishing options tab, set the moderation state to Needs Review, then click Save.
11. In the Review, you will not see your new banner images.  Publish the page.
12. Now you should see the page with the first banner image, and forward/back buttons to page through all the slides.

Keep in mind, the more banner images you add, the longer it will take users to load your page. Please limit the number of banners to 4 or 5 at most.

Replacing Banner Images

If you want to replace an existing banner image with a new image, use the Remove button, then click Browse to upload a new image or select an image from the Library.

1. Login to your Drupal site.
2. Navigate to an existing Landing Page and click New Draft.
3. Scroll towards the bottom of the editing page to the vertical tabs.
4. In the Header tab, locate the banner image you want to replace.  Click Remove.
5. Click Browse (smallest), Full (hero image), and Homepage.  Under Header Slideshow Full, click Add a new paragraph.  If your page already has a full banner, click Add another paragraph.
6. In the Slide Image field, click Browse.  Either upload an image, or select an image from the Library.
7. Set the moderation state to Needs Review, then click Save.
8. In the Review, you may not see your new banner image.  Publish the page.
9. Now you should see the page with the new banner image.

There are multiple types of links, and different methods for making them.

 Linking to pages or files on the same Drupal site

When linking to your own content, it is best to use the Link to Content button in the HTML editor.  This method links to the content's ID number.  Drupal will rewrite the link using the node's URL path setting.  If the page's URL changes, Drupal will update the link to use the page's current URL.

1. In the content, select the text that will be the link.
2. Click Link to content.
3. In the Search for content field, type in a word or two from the page title, or filename. A list of matching pages and files will be displayed.
4. Select the desired page or file.  A URL path will be inserted in the Link URL field.
5.  Click Insert Link.

Linking to pages or files on other websites

When linking to other websites, it is best to use the Link button in the HTML editor.

1. Verify the URL of the webpage by visiting the page in a separate browser tab or window.
2. Copy the URL from the browser's URL field.
3. Return to the Drupal page's New Draft.
4. In the content, select the text that will be the link.
5. Click the Link button.
6. Click in the URL field and paste the copied URL (using your keyboard command or the browser's Edit>Paste menu command).  Note: Drupal will automatically update the protocol field based on the URL you paste.
7. Click OK.

Mailto Links (Email Addresses)

A mailto link is one that will open the user's default client, and begin to compose email to the specified email address.  While it is technically possible to use any text for a mailto link, on SSU Drupal sites, it is best practice to use the actual email address as link text.   This will allow visitors  to see and copy the email link if they are using a computer that is not configured with their default email client, such as a student using a computer lab.

Good: web.support@sonoma.edu
Not as good: Web Support

1. Type the email address.
2. Save and publish the page. Drupal automatically converts text in the form of an email address to a mailto link.  

Pre-filled subject or message body

You can make a mailto link compose a message with the subject or message body.

1. Insert your cursor where you want the link.
2. Click the Link button.
3. Click the Link Type select button, and choose E-mail.
   • In the E-mail Address field, type the address.
   • In the Message Subject field, type the subject.
   • In the Message Body field, type the message.
4. Click OK.

Lightbox is a method of displaying an image or other web page content.  Usually, clicking the image will zoom the image to full screen, and dim the content of the page behind the image.

Here's an example:

Instructions

These are the steps for adding a lightbox image in the HTML editor, without having to view and edit HTML source.  These instructions assume you have already uploaded the image to your Drupal site.

1. In the HTML editor, click to insert the cursor in the middle of the link text.
2. Click the Image button in the HTML editor toolbar.
3. In the Image Properties dialog box, click Browse server.
4. Find and select the image you want to display in the page.  This may be the same image you selected before, or a smaller version of the same image, or a completely different image.
5. Click Insert file.
6. In the Image Properties dialog box, enter the height or width in pixels that the image should use in the page.  Drupal will automatically adjust the second dimension proportionally.
7. Add appropriate Alternative text for the image link.  Remember, because this image is going to be a link to a larger image, it must have alt text.
8. Click OK.
9. In the HTML editor, click once on the image to select it, then click the Link button  (not the Link to content button).
10. In the Link dialog box, click Browse server.
11. Find and select the image you want to open in the lightbox.
12. Click Insert file.
13. Back in the Link dialog box, click the Advanced tab.
14. In the Stylesheet classes field, type:  colorbox
15. In the Advisory Title field, type a brief title for the image.  This will be displayed in two places:
    • In the page, when the user hovers the mouse on the image
    • In the lightbox, at the bottom of the zoomed image
16. Click OK.
17. Save and publish the page.
18. Test your image link - it should open in a lightbox.

To request new feature or style changes for your department SSU Drupal site, please submit a Drupal/Website ticket of the Change Request type.

When content is no longer accurate or applicable, you may need remove it from your Drupal site.  While it may be possible to delete the content, the recommended method is to unpublish the content.  This removes the content from the view of most users (Anonymous users, or non-editing SSU employees or students who have authenticated to the site), but leaves the content in Drupal available to content editors and content leads.  Unpublished content can be edited and republished at a later date.

1. Login to the Drupal site.
2. Click Manage.
3. Click Content.
4. Find the item in the Content list and click the checkbox to the left of its title.
5. In the Operations menu, select Unpublish.
6. Click Execute. 

A progress bar displays while Drupal processes the command. When you are returned to the Content list, the item will be listed as Unpublished.

A common task when creating and editing pages in Drupal is adding a link to a PDF, DOC or other file within the content body.  

Inline Link to File

These steps let you make an inline link to a file.  For example, this is an inline link to ARR Report Instructions (DOC).

1. Go to the page and start a New Draft.
2. Type and then select the text that should link to the file.  Note: when linking to a different type of file, it's a good practice to include the type of file in the link text.  Example: "Organization Chart (PDF)"  or "Curriculum Worksheet (DOC)"
   • If you have already uploaded the file to Drupal, click Link to Content, then search for the file's name, select the file and click Insert Link.
   • If you have not yet uploaded the file to Drupal, click Link > Browse Server > Upload > Choose file.  Then select and upload the file from your computer.  Then click Insert File >  OK.
3. Save and Publish the page.

Bulk Upload Files

If you have many files you'll want to link to, it's sometimes easier to upload them in bulk, before editing the page.  Here are the steps for that process.

1. Click Manage > Content > Files > Add File.
2. Drag and drop one or more PDF, DOC or other types of files to the area marked “drag files here.”
3. Click Start upload.
4. Click Next.  
5. Click Next
6. Edit Multiple Files page asks for the names for each file.  This is where you type the Human Readable title. 
7. Click Save.

Now you can edit the page and add a link to the file(s) as described above.

SSU's Drupal Theme offers 3 sizes of banners for Landing Pages.

Images that are larger or smaller than this will be scaled and cropped to those dimensions.

Be careful when selecting images for the banner.  Please consider the following.

• Images that are much smaller will lose image quality when displayed at a larger size.  Up-scaling a little bit might be acceptable, but up-scaling a lot will look bad.
• SSU's Drupal Theme includes a blue stripe at the top of the page.  This overlays the banner image.  When selecting an image, make sure the composition of the image will fit within the visible area.  The top blue stripe's height is 89 pixels on most desktop/laptop screens. 
• SSU's Drupal Theme adds a block for Banner title and text.  This is a solid blue block in the lower left corner on Full and Standard banners.  On the SSU Homepage size banner, and a dark transparent overlay on the left side, roughly center height.  This dark area improves the color contrast between banner text and image, ensuring accessibility.
• All banners have a stripe image overlay at the bottom.  On Full and Standard banners, the stripe is light blue, 28px height. On SSU Homepage banners it is dark blue and has a 78px height.
• Standard banners don't display the entire height of the image.  As the browser window is resized, the image stretches to fill the width of the window, changing the total amount of the height of the image that is displayed, and how much of the top of the image is covered by the top blue stripe.
• In most cases, images of text don't work well. On most banners, a department title and tagline are displayed overlaying the banner image.  If the image is of text, it's likely the title and tagline will overlay and obstruct the image text.  Also, banner images resize and parts of the image may be obscured at different browser window sizes.
• The image will fill the full width of the banner image region.  If a user's browser window is stretched wider than 1440, the image will fill the new width.  The bottom portion of the image may not display at wide widths.  It the user's browser is narrower that 1440, or on a mobile device, the image will shrink, or the left and right sides of the image will be hidden.

SSU Drupal 7 sites offer some pre-built and styled blocks known as Paragraph Bundles.  These are mostly available on Landing Pages, but some can also be used with Basic Pages.  To add them to your page, login to your site, select a page to edit, then scroll to the bottom of the editing screen and click on Sub-Content.  You'll see buttons for the various Paragraph Bundles. 

Below are screenshots and descriptions of the various Paragraph Bundles that can be applied to Landing Pages in Drupal. Click the images below to zoom.

Basic Block with Background Color

Uses the What You See Is What You Get editor for the Body. Works for an unlimited number of lines of text, and can be used with images, videos and Content Templates. SSU brand colors may be selected for the block's background color. Font colors (either black or white) are automatically selected for accessibility with the chosen background color. 

Simple Paragraph

Uses the WYSIWYG editor for the Body. Works for up to about 10 lines of text. Can include images or other media. 

Paragraph with Menu

Similar to the Simple Paragraph, but with additional fields to add a short menu of links on the right side.

Testimonial Carousel

Multiple testimonial items including an image, quote and attribution. Displayed as a carousel.

Links and Map

Up to 9 button-like links, and the department's location information with a Google map.

Two Row Paragraphs

2 paragraph blocks, each with heading, brief text, and multiple button-like links. The first paragraph has a background image with a color overlay (SSU brand color Field dark). The second paragraph uses SSU brand color Field light for the background and can include an image aligned to the left.

Three Column CTA (Call To Action)

Three equal size images, with places for category text, title and link.

Image Grid

Heading and 3 or 6 images that link to other pages, plus an optional button-style link at the bottom.

Accordion

Insert and stack content into multiple collapsible accordion items.

Stats Carousel

Multiple brief items, like promotional stats, are displayed in a carousel against a background image.

Tabbed Paragraph

A set of 2-5 tabs, each containing content in a variety of formats. The Tabbed Paragraph has a Title and Body, and then Individual Tab Items. Those can include some nested Paragraph Bundle types, like Grid Items or Accordions.

Logo Carousel

This paragraph bundle is available by request only.  Please submit a Drupal/Website Change Request ticket to request the Logo Carousel for your department Drupal site.

Logo Carousel includes a heading, and uses the WYSIWYG editor for the Body. At the bottom of the block is a carousel that can be used for images that can link to other pages or sites.  The background color can use any SSU brand color.

If you have a very high resolution image that you want to display at a smaller size, it is best to resize the image closer to the actual desired display size.  This will help to make the load time for your page faster.

For example, here is an image that is high resolution, but displayed at a smaller size.  You can right-click on the image, and open it in a new tab to see the actual size.

Instead, when inserting an image, you can use Drupal's Resize command to make a smaller version of the image.

1. Make a new draft of the page.
2. Click in the content where you want to insert an image and click the Image button in the HTML editor toolbar.
3. If the image is already in the page, right-click on it and select image properties.
4. Click Browse Server.
5. Find and select your image.  You will be able to see the size in pixels and KB in the file selection window.
6. Click Resize.
7. Enter a desired width or height in number of pixels.  Click into the other dimension field and Drupal will automatically insert the appropriate scaled size.
8. Make sure Create a new image is checked.
9. Click the Resize button.
10. A new version of your image will appear.  Usually, it will use the same filename, but with an "_0" at the end.
11. Click Insert.
12. Add alt text.
13. Click OK.

Here's an example of the same keyboard image after resizing. If desired, you can resize the image to be a little bigger than the intended display size, and adjust or fine tune the display size in the image properties.

You can also use this method when making an image open in a lightbox.  Use the smaller version of the image in the page, and link to the larger version of the image with the lightbox link.  Here's a screenshot of what that looks like.  Click to zoom in:

The Web Office and Drupal Team offer two kinds of Drupal training:

Drupal Training for Content Editors and Leads

This is a self-paced, online Canvas course that covers some basic topics related to website building and maintenance at SSU. This includes web accessibility concepts, videos that demonstrate various aspects of SSU's Drupal environment, and SSU style standards. This is mandatory training for anyone who will have access to edit SSU Drupal sites.  

Employees who need training for a site that has already migrated to Drupal should fill out a General-type Drupal/Website Request.

Hands-on Drupal Orientation

When a new department site is ready for content editors to add their content, the Drupal Team schedules a hands-on orientation for department web staff. During this session, the department web staff log in to their sites and are shown how to perform specific content-editing tasks.

Other Options?

• YouTube - there are lots of Drupal training videos on YouTube.  Most of these are meant for Drupal admins and site builders.  If you search for videos, look for ones that cover using CKEditor, or adding and editing images.
• If you have questions about how to edit content, submit a General-type Drupal/Website Request and the Web Office will follow up with you.

On SSU Drupal sites there are several types of pages and content you can create. Here is the list of standard options.  Some sites have additional custom options that have been built by request.

Content Types

Content types are used to build nodes, often thought of as pages.  Most nodes are displayed as a page with its own URL, but some nodes may only be displayed as part of another page.

Blocks

Blocks are chunks of content that can be reused on multiple pages.  Content Leads can create Simple Blocks, but a Drupal admin needs to insert the block in a region, and configure which pages will have the block.  If you want to create a new block for your Drupal site, talk with the Drupal team first.

Common blocks on SSU Drupal sites include:

• Social Media Links block.
• Left sidebar's Department Navigation
• Logo block
• Contact Info block
• Facebook or Twitter Timeline block

Paragraph Bundles

Paragraph bundles are groups of predefined fields that allow content creators to add pre-built and styled blocks of content on a Landing Page or Basic Page.  On Landing pages, these are displayed in the Sub Content region (below the Content and Left sidebar regions).  On Basic pages, they are displayed below the Body field in the Content region.

For more information, see Drupal - Paragraph Bundle Examples - New SSU Theme.

Views

Views are lists of nodes or other entities.  Views pull data from content type fields, and display them in a formatted list.  Views are then displayed as a page, inserted into pages as a block (placed in a region by a Drupal admin), or inserted into a Basic Page or Landing Page using the View Reference field.

Many views have multiple versions that will include different fields, or filter the results to include only nodes using a specific taxonomy term, or date range other option.

SSU Drupal sites have access to a variety of views, and custom views may be requested by submitting a Drupal Change Request. Views can only be build or edited by a Drupal admin.

Examples of commonly used views on SSU Drupal sites:

• Faculty & Staff - displays list of, and links to, Faculty/Staff Profile nodes.
• Article & News - displays a list of Article or News nodes
  • recent news view block as a Quicktab
• Events - displays a list of upcoming events
  • upcoming events view block as a Quicktab
• Announcement block - displays up to 10 recent Announcements in a scrolling block.
• Global Message block - displays the most recently published Global Message as a block above the content on every page in a site.
• Homepage Top Notice block - displays the most recently published Homepage Top Notice at the top of the site's homepage.
• Office Hours - displays a list of faculty, their office hours and contact details, pulled from the Faculty/Staff Profile nodes.

SSU Drupal has a variety of built in content templates that can be used with Body content.  These are available in any content type that uses the HTML Editor and with Full HTML text format.  

Follow these steps to add a template to a page.

1. Add a new page, or create a new draft for an existing page.
2. Click your cursor in the Body field where you want to insert a content template.  We recommend adding a few blank paragraphs so you can make sure you're not inserting the template into some other section or element of the page.  Make sure the Tag Selector area shows "body p".
3. Click the Templates button in the HTML editor.  It's the last button on the right in the top row.
4. In the Content Templates dialog box, make sure the checkbox "Replace actual contents" is unchecked.  Checking this option will replace all the content in the HTML editor with the template code and placeholder text.
5. Click the template you wish to insert.
6. In the HTML editor, there will now be template code and placeholder text.  Carefully select that text and type or paste your text.  If you selected a template with an image, right click the placeholder image, and use Image Properties to browse for and select an image.
7. Save and Publish.

Content Template Examples

The following samples use placeholder text and images.

Page Content

Table of Contents

See this in use at the top of this page.

Floating Image Left

Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Floating Image Right

Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Two Columns

Three Columns

Four Columns

Image with a Caption

Caption: Suspendisse nisl elit, rhoncus eget, elementum ac. Phasellus leo dolor

Pull Quote Left

Pull Quote Right

Topic 70-30-Left

Topic 70-30-Right

Topic Heading

Heading 2 Text

Callout

Sometimes, when you edit your Drupal site, you may see a message like this one:

This is a warning from Drupal that a security update has been released and must be installed.

IT monitors all Drupal security update releases, and manages software updates centrally.  When an update is released, IT downloads and tests it, then applies it to all SSU Drupal sites, usually within 1-3 business days.  In most cases there is no noticeable downtime, and nothing department content owners and editors need to do about the update.

There are hundreds of specific permissions, but here are the main points.

Generally, a Content Editor can add and edit content, but can only save as Draft or Needs Review.  A Content Lead must review and Publish the content.

As SSU works through the upgrade to Drupal 9, department content editors will need to login to  D9 sites in our sandbox, stage and pre-production environments.  

Login URLs

Sandbox Sites

Sites for exploring D9 and learning how to build content:

• format - https://[sitename].a9prd.sonoma.edu/user
• example - https://it.a9prd.sonoma.edu/user

Stage Sites

Sites for performing migration QA and staging:

• format - https://[sitename].a9stg.sonoma.edu/user
• example - https://it.a9stg.sonoma.edu/user

Pre-Production Sites

Replaces the Sandbox, and is used for final review and approval:

• format - https://[sitename].a9prd.sonoma.edu/user
• example - https://it.a9prd.sonoma.edu/user

Production Sites

After a site migration and upgrade has been completed and the site is live.

• format - https://[sitename].sonoma.edu/user
• example - /user

How to Login

Drupal 9 uses SSU’s single sign-on system.

Note: Sandboxes, Stage and Pre-Production sites have an additional level of HTTP authentication to prevent search engines and other unauthorized access. This won’t be required once your migrated department site is launched.

1. Go to your site's login URL. Be sure you are using https and not http.
2. HTTP authentication dialog will be presented.  If you don't know this shared username and password, please consult the email sent to you via Drupal-Announce, or contact drupal@sonoma.edu.
3. Click SSU Single Sign-on.
4. Authenticate with SSU’s single sign-on system, including multi-factor authentication.
5. You are returned to the Drupal Sandbox and logged in as a content editor.

Google has ended support for Google Classic Sites, a feature available in SSU's Google Workplace application.  If you have a Google Classic site, you won’t be able to edit it starting December 1, 2021. Starting January 1, 2022,  Google Classic Sites will no longer be viewable.

What do I need to know?

In 2017, Google announced that they are replacing Classic Sites with a new Google Sites product. New Google Sites is available to all SSU students and employees, via Google Drive.  To create a New Google Site, login to Google Drive, and in the menu click New > More > Google Sites.  Support for creating New Google Sites is available.

Can I convert my Google Classic Site to a New Google Site?

Yes.  If you have a Classic site with multiple pages of content, you can submit a Help Desk ticket to request conversion of your Google Classic Site, before December 15, 2021. Include your full name, your @sonoma.edu email address, and the URL of your Google Classic Site.  An IT Google Workplace Administrator will convert your site.

Please note, if your site does not contain actual content, IT will not convert your site.  If your site contains only a page or two of content, it will be easier for you to copy and paste your content to a new site yourself.

Do I need to do anything if I don't want to convert my Google Classic Site?

No.  If you do not want to convert your site, do nothing.  Your Google Classic Site will be automatically deleted on January 1, 2022, or shortly thereafter.

If I put up a page today, how soon will it show up in search engines?

Search engines are constantly crawling SSU's websites.  Assuming the search engine can find your page, it should update the index for your modified page within a 1-7 days.  If your site is not showing up in search results, or if old versions of your page are showing up in results, contact the IT Web Office.

If I delete a page, how long until it is removed from the search index?

If a deleted page is still showing up in search results, make sure you have unpublished the page on Drupal. If there is still a problem, call the Web Office. Some search engines provide a cached version of pages after they have been deleted from the web server, so even after your old page is gone, it may live on in search results for several weeks.  It can be helpful to make sure your site no longer links to the old page.

There are several things you can do to make sure your pages show up in search results, or show up nearer the top.

Make sure your pages have meaningful titles. 

It's very important to give your pages meaningful titles, using words and phrases describing the topic of your page.  In Drupal, page titles are displayed as a Heading 1 <h1> above the main content.  It is also used in the <title> tag - this is the text users will see in their browser tab, and search engines will use it as the link text in search results.  Pages with the search terms in the title will be ranked higher than they would with the search terms in the body of the page. Try to make the title short and specific. Front-load the most important words - that's best for usability, accessibility, and search engine optimization (SEO).

Use heading tags to define the headings in your pages. 

If you've been using font size tags to make larger text for headings, your page isn't getting the rank it should have. For example, <h1>English Department</h1> will get a much higher ranking than <font size="+3">English Department</font>. 

Use logical heading structure in your content. 

Don't skip heading levels. Don't use headings for any images or text that is not supposed to function as a heading for the following content.  Don't use headings to make big links.  Make sure your content starts with an h1, followed by an h2.  Headings after the h2 should proceed logically according to the page structure without skipping levels.

Use meaningful and descriptive text in your headings. 

Make sure the heading text describes the content of your page.  Use the important key phrases in your headings. Avoid using vague, unclear or gimmicky heading text.

Use meaningful link text.

When making links, make sure the link text uses relevant, meaningful words and phrases that describe where the link goes.  Don't use "Click here" or other vague words and phrases.  If you must use "Read more" or Learn more" add text to make it meaningful - like "Learn more about the alignment of accessibility and SEO."

Get linked.

Search engines will find your site if they can get to it by crawling other known sites.  Make sure your page is appropriately linked in the menu of your site. Contact the Web Office to have your department or program site linked on the SSU A-Z index or an appropriate resource page, like Students, or Faculty & Staff. 

If after doing all of the above, your pages still don't show up, or show up high enough in search engine results, contact the IT Web Office and request a consultation.

FASD is a searchable directory of all current SSU employees.  Employees are responsible for keeping their entries up to date.

Updating your entry is easy.

1. Go to https://ldaps.sonoma.edu/fasd/
   You can also use the URL people.sonoma.edu as a shortcut, or you can use the link in the menu on most SSU websites - click the "hamburger" menu button, then click Directory.
2. Click Update your information.
3. Login via Online Services.  
   If you are already authenticated, this step will be skipped.
4. A new page will be displayed, with a form labeled "Edit Your Existing Directory Entries."
   Some information is locked and cannot be updated directly. If this information is incorrect, please contact the IT Help Desk for assistance. If you wish a preferred name be displayed, contact Human Resources or Faculty Affairs.
5. You can update your Phone number, Building Name, Room number, and URL.  
   • For phone numbers, use the full number, not just the extension. The desired format is area code, prefix and number
     Example: (707) 664-0000 
   • If you have an employee profile on your SSU department website, you can add that in the URL field.  Make sure the URL is complete, and includes the https:// or https:// at the beginning.
6. Display entry? Yes or No.  If you select Yes, it will be displayed in the FASD.  If you select no, then only the IT Help Desk and a few other departments can access the data.
7. Click Update This Entry.

SSU's Siteimprove service is scheduled to send monthly automated accessibility reports to Drupal website Content Leads.  The email contains a link to the report for your site. 

The report provides an overall accessibility status for the chosen site:

• Number of issues by conformance level (A, AA, AAA) in total and as a history graph
• Complete list of issues on the website by severity level (‘Errors,’ ‘Warnings,’ and ‘Reviews’)
• 10 top level / most viewed pages with accessibility issues.
• 10 PDFs with accessibility issues.

The report links to detailed Issue, Page and PDF reports in Siteimprove, where Drupal Content Leads can get more information about specific accessibility issues and how to repair them.

View a sample report for IT's website.

Other Types of Reports

Siteimprove can also send automated one-time reports for site quality (broken links, misspellings, etc.) and SEO.  Content Leads can send Dashboard reports directly from their Siteimprove account.  For more information, see "How do I email a dashboard report?" on Siteimprove's support site or use the Siteimprove Issue/Request form for support.

SSU employees (faculty, staff, student assistants) have access to a large collection of training materials and courses in Siteimprove's Academy.  Some of the courses are free to anyone with a Siteimprove account.  Others require that the user be enrolled in a course or series by the Siteimprove Administrator.

To access Siteimprove's free courses:

1. Login to Siteimprove with your Seawolf account.
   This creates your account.
   Any SSU employee or student assistant can login to Siteimprove. 
2. Once in Siteimprove, click the Help Center and Academy link at the top of the page, and select Academy.
3. View the Course Library, and use the Tags field to search for "free_course."

If you would like access to any of the courses that are not free, please use the Siteimprove Issue/Request form to request access.

This page links to Siteimprove Tutorials, widgets that guide you through pages in Siteimprove step by step.  Before following the tutorial links, login to your Siteimprove account with your Seawolf ID.

Once you have your account and group membership established, you will be able to see reports for your site via Siteimprove’s Dashboards. 

Note: If you don’t yet have an account or group membership on Siteimprove, see our FAQ “Siteimprove - How do I gain access for my SSU website?”

The default is the DCI Dashboard.  This includes scores for Digital Certainty Index (DCI), Quality Assurance, Accessibility and SEO.  The DCI score combines the scores for QA, Accessibility and SEO. Each of those links to an overview report for that area.

• Siteimprove Tutorial: How to Navigate the DCI Score Dashboard

Because SSU is required to make all our public-facing sites accessible by meeting WCAG 2 A and AA standards, website editors should focus on the accessibility reports.  

• Siteimprove Tutorial: Accessibility Overview
• Siteimprove FAQ: Where to start with accessibility issues

Second priority for SSU web editors should be the Quality Assurance section. QA reports will help you identify pages with misspellings, broken links, links to unsafe domains, and other issues affecting the quality and usability of your site.

• Siteimprove Tutorial: Quality Assurance Overview

For a full list of FAQs, guides and user community, see Siteimprove's Help Center.

Recommended Dashboards

Click on the DCI Dashboard heading to expand the list of available dashboards.

• Editor Dashboard (Accessibility) includes information helpful to website content editors about a specific site:
  • Overall progress bar
  • List of WCAG A and AA issues to fix.  These link to Issue pages that explain the issue and list/link to pages with that issue.
  • Accessibility-test PDFs
• Accessibility Report is similar to the Editor Dashboard, but includes all the sites groups the user is a member of.
• Editor Dashboard (QA) shows information about Broken links, misspellings, words to review, and links to issues to correct.  It also includes a Priority Pages list, that prioritizes issues to fix based on the number of times people have viewed that page or document.

Setting up your access to Siteimprove is a 2 step process.

1. Log in to Siteimprove with your Seawolf account. This creates your account. Any SSU employee or student assistant can log in to Siteimprove. 
2. Submit a Siteimprove request to be added to your department’s Siteimprove group. The Web Services team will grant you permission to view reports for your department site.

Group membership will be assigned to:

• People who are content leads or content editors on an SSU Drupal site.
• Appropriate administrators, Deans, Department Chairs or others who have content ownership responsibilities for an SSU Drupal site.
  Please note: only people with Content Lead or Content Editor access to their department website will be able to make changes to their site.

If you work on some other sonoma.edu website that is not on SSU Drupal, please submit a Siteimprove request asking to discuss the use of Siteimprove with your non-Drupal SSU website.

Bookmark the Siteimprove Login URL

For future login purposes, you should bookmark the login URL:

https://my2.siteimprove.com/Auth/Saml2/66356729
 

SSU's Drupal platform has Test, Stage and Production servers which allow the Drupal team and content leads to build and test Drupal sites before going live.  Unfortunately, sometimes content authors create links to Drupal pages and files using absolute URLs instead of relative URLs.  

This leads to Stage site URLs being used on live production sites.  These links are found and crawled by search engines, leading to bad and incorrect links in search results.

Links to the stage server always include "dstg0" in the URL.  

Effective June 5, 2022, our old local stage server has been decommissioned.  All links with URLs containing "dstg0.sonoma.edu" are now broken.

Siteimprove uses the Policy feature that scans SSU websites and looks for links that point to the stage and test sites.  SSU content authors should use the policy "HTML source match dstg0.sonoma.edu →" to find and correct these links.

Note: You should also look for the policy links for our legacy webserver, and links using "drupal-vip" in the URLs. These should also be repaired.

• Links to SSU's Legacy Webserver - Needs to be updated 
• HTML source match drupal-vip.sonoma.edu

Instructions

1. Login to your Drupal site.
2. In a new tab, login to Siteimprove.
3. Pull down the Groups select menu and choose your site.
4. Make sure you are in the Dashboard "Accessibility and Quality Assurance".
5. Scroll toward the bottom, and find the widget labeled "Policies with the most matches".
6. Click on "HTML source match dstg0.sonoma.edu →"
   • If you don't see that policy listed, click "View whole list of your policies" and then look for the link.
7. On the Policy Details page, you'll see a chart showing the number of matches found over last 6 months, and a table listing all the pages that have links to URLs using dstg0. Click on a page in the list. This opens the page report in the Policy view.  The Policy view cannot identify and outline the relevant portion of the page in the Content view.
8. Click the Show HTML button.
9. The relevant link in the HTML will be highlighted and underlined.  Read the full URL and nearby text to identify the content and link that must be updated.
   • Note: some pages will have more than one occurrence of a dstg0 URL.  Look for the Occurrences button in the upper right area of the HTML view to switch to other occurrences.
10. Click the page's link at the top of the Siteimprove page report to go to the page in Drupal to make repairs.
11. Click New Draft.
12. In the HTML editor, find the link that needs to be fixed.
13. Click the a tag in the tag selector area.
14. Click Remove Link.
15. Following the instructions "Drupal - How to Make a Link", create a correct link to the page or file.
    • If the link is to something on the same Drupal site, using the Link to Content button This will make a relative link using the resources Drupal ID number.  Drupal automatically converts this to a human-friendly URL.  Added benefit: if the page's path ever changes (if the page is moved in the menu or renamed), Drupal will update the human-friendly URL, preventing the link from breaking.
    • If the link is to something on a different site, find the production version of that site and resource, and copy the link from the browser.  Then use the Link button to make the link.
    • If the dstg0 URL is being used for an image, click the Add image button to select the image.  If the image doesn't exist on your production Drupal site, you will need to upload the image from your computer, or replace the image with a different one.

SSU's legacy web platform (web.sonoma.edu) has been decommissioned, effective June 5, 2022. All links that point to URLs starting https://web.sonoma.edu or https://web.sonoma.edu are broken, and we recommend that content authors update them as soon as possible. Broken links negatively affect our site visitors, as well as our sites' Google search results - the more broken links your site has, the lower Google ranks all of your pages.

Content authors can use Siteimprove to identify where these links are so they can be corrected.  If you don't have access to Siteimprove, see Siteimprove - How do I gain access for my website?

Note: These instructions are specific to SSU Drupal sites, but a similar process can be used for other sonoma.edu sites that are on other content management systems.  If you have questions, contact the IT Help Desk.

Instructions

1. Login to your Drupal site.
2. In a new tab, login to Siteimprove. Use the SSO login screen with your Seawolf username and password.
3. Pull down the Groups select menu and choose your site.
4. Make sure you are in the Dashboard "Accessibility and Quality Assurance".
5. Scroll toward the bottom, and find the widget labeled "Policies with the most matches".
6. Click on "Links to SSU's Legacy Webserver - Needs to be updated"
   • If you don't see that policy listed, click "View whole list of your policies" and then look for the link.
7. On the Policy Details page, you'll see a chart showing the number of matches found over last 6 months, and a table listing all the pages that have links to URLs using web.sonoma.edu. Click on a page in the list. This opens the page report in the Policy view.  The Policy view cannot identify and outline the relevant portion of the page in the Content view.
8. Click the Show HTML button.
9. The relevant link in the HTML will be highlighted and underlined.  Read the full URL and nearby text to identify the content and link that must be updated.
   • Note: some pages will have more than one occurrence of a web.sonoma.edu URL.  Look for the Occurrences button in the upper right area of the HTML view to switch to other occurrences.
10. Click the page's link at the top of the Siteimprove page report to go to the page in Drupal to make repairs.
11. Click New Draft.
12. In the HTML editor, find the link that needs to be fixed.
13. Click the a tag in the tag selector area.
14. Click Remove Link.
15. Following the instructions "Drupal - How to Make a Link", create a correct link to the page or file.
    • If the link is to something on the same Drupal site, use the Link to Content button. This will make a relative link using the resource's Drupal ID number.  Drupal automatically converts this to a human-friendly URL.  Added benefit: if the page's path ever changes (if the page is moved in the menu or renamed), Drupal will update the human-friendly URL, preventing the link from breaking.
    • If the link is to a different site, find the live site and resource, and copy the link from the browser's URL field.  Then use the Link button to make the link.
    • If the web.sonoma.edu URL is being used for an image, click the Add image button to select the image.  If the image doesn't exist on your production Drupal site, you will need to upload the image from your computer, or replace the image with a different one.

Questions?

Contact IT Help Desk,  or submit a Drupal/Website service request ticket.

Siteimprove Issue:

Element IDs are not unique
Two or more elements on this page have the same id value. These should be unique.

This means there are multiple HTML tags on the page that use the ID attribute with the same value.  Here's an example:

<p id="some-string-1234">Here's a paragraph.</p>

<p id="some-string-1234">Here's a different paragraph with the same ID.</p>

Why This Is Important

IDs must be unique - the same ID should not be used more than once in the same page. Otherwise, they can interfere with the user agent's (e.g. web browser, assistive technology, search engine) ability to properly parse and interpret the page.  Depending on how the IDs are used, this could prevent users with disabilities from being able to access and operate the web page properly.

Where These IDs Come From

Most often, we see these duplicate IDs when content is copied and pasted from Google Docs.  They may be necessary for content in Google Docs, but could cause problems outside of Google Docs.

How to Fix the Issue in Drupal

Usually, these IDs are not necessary as part of your Drupal content.  Removing the IDs fixes the issue.

1. Login to your Drupal site.
2. Go to the page with the issue.
3. Make a new draft.
4. In the HTML editor, select the content that has the ID - the Siteimprove page report shows you which parts of the content have the issue.
   
5. Click the Remove Format button.
6. Repeat steps 4 and 5 for each area with the duplicated ID.
7. Save and publish.

The Remove Format button may also remove some formatting you want, like bold and italics,  so you may also need to select some parts of text to reapply those formats.  

BONUS: Usually, reapplying the <strong> and <em> elements to your content will fix another issue with Google docs content.  Google uses the <b> and <i> tags for bold and italics. These are not accessible.  Drupal's HTML editor will use <strong> (B button) and <em> (I button), which are accessible.

How to Avoid This Issue

Whenever you copy and paste content from Google Docs into Drupal's HTML editor, immediately select the pasted text and click Remove Format.  Then apply the formatting options you want using the HTML editor's buttons.

Siteimprove Issue:

Empty Headings
This page contains one or more "empty" headings (heading tags with no text content).

This usually means there are HTML heading tags in the Body field that have no content  Here are some examples:

<h1> </h1>

<h2> </h2>

Why This Is Important

Headings help to break up content and make it easier for visitors to scan a page for information. They need to be set up correctly so that visitors using screen readers can use them in this way.

A heading is considered "empty" if there is no text for a screen reader to relay to the user. Image headings are considered empty if no text alternative is available.

Where Empty Headings Come From

These empty headings might be due to:

• The content owner added a heading to add more whitespace between elements on the page.
• The content owner copied and pasted an empty heading from an original document.
• The content owner deleted the contents of a heading, but didn't delete the heading tags.

How to Fix the Issue in Drupal

1. Login to your Drupal site.
2. Go to the page with the issue.
3. Make a new draft.
4. In the HTML editor, click in the area that has the empty heading - the Siteimprove page report shows you which parts of the content have empty headings.
5. Click the Paragraph Format button (it will show the heading level), and then select Normal. This converts the heading to a paragraph (<p>) and will keep a little white space, but won't cause Siteimprove to flag the page.
   TIP: Don't select Normal (DIV).
6. Repeat steps 4 and 5 for each area with an empty heading.
7. Save and publish.

How to Avoid This Issue

When copying and pasting content into the HTML editor, do a quick review for any extra space between paragraphs, after tables, or at the end of the content.  Click your cursor into any suspicious spaces, and check the Paragraph Format button (top left of HTML editor) and Tag Selector area (bottom right of HTML editor.  These will indicate the HTML tag being used.  Adjust any empty headings before saving and publishing.

Siteimprove Issue:

Headings Are Not Structured
One or more heading levels have been skipped.

Why This Is Important

Heading tags help assistive technology users to understand how content is structured. They're also used for in-page screen reader navigation.

When adding heading tags, you should ensure that they follow a nested structure. h1 is used for the primary heading, followed by h2 for subheadings, and so on to h6.

Correcting your heading structure may also help to improve your site's SEO.

Where Incorrect Heading Levels Come From

On most Drupal pages, the content title is displayed as an h1. In the screenshot above, "On Campus Rates & Installments" is the h1.

The first heading inside the content's Body field should be an h2. In the screenshot above, "Rates" is using h3, when it should be using h2.

Headings after that first h2 should be either another h2 (if it's not a subheading), or an h3 (if it is a subheading). Further levels of sub-subheadings would use h4, then h5, then h6.  Most content on SSU's sites never needs to go beyond h4. 

Siteimprove can see when headings are skipped, but can't tell if any subsequent headings are at the correct level. In the screenshot above, "Installment Schedule" is an h3.  This is fine if "Installment Schedule" is a subheading in the Rates topic.  However, it's more likely that "Installment Schedule" is separate from "Rates", so it should also be changed to use h2. 

Headings should not be used for text or images of text that do not actually function as a heading.  They should not be used for making "fine print" below tables or for image captions - those should just use paragraph tags.

Incorrect heading levels might be due to:

• The content owner chose the wrong heading level by accident.
• The content owner chose a heading level that has a size they like (because they think a heading looks too big or small).
• The content owner used a small heading to make image captions or fine print below a table.
• The content owner copied and pasted an incorrect heading level from an original document.

Note: Sometimes headings are created dynamically by a Drupal View in a way that cannot be changed.  For example, if your site uses the Faculty & Staff Profiles to display a list of employees sorted by employee type taxonomy (like we do on our IT Department Staff page), Drupal makes those category headings an h3, which cannot be changed.  If you're not sure about headings on one or more of your pages, use the Siteimprove Issue/Request form to ask for specific for support.

How to Fix the Issue in Drupal

1. Login to your Drupal site.
2. Go to the page with the issue.
3. Make a new draft.
4. In the HTML editor, click in the area that has the incorrect heading.
5. Click the Paragraph Format button (it will show the heading level), and then select the correct heading level. If the heading should be converted to a paragraph, select Normal.
   TIP: Don't select Normal (DIV).
6. Repeat steps 4 and 5 for each area with an incorrect heading level.
7. Save and publish.

How to Avoid This Issue

• When copying and pasting content into the HTML editor, do a quick review to make sure all headings are at the correct level.  Make sure no headings are skipping a level.
• Use a browser extension like WebAIM toolbar or Web Developer Toolbar to get an outline of the page's heading structure.

Siteimprove Issue:

Inline frame without a text alternative
Every inline frame (iframe) should have a text alternative that summarizes its content or purpose.

This usually means the page has embedded content, usually from another site, but is missing a title.

Why this is important

Inline frames (iframes) are used to insert content from other parts of the web.

A title that summarizes the visual content will help screen reader users to understand the iframe's purpose on the page.

Where Iframes with Missing Titles Come From

Most often, these iframes are copied from YouTube, Vimeo, Google Apps, Yuja, and other applications that allow embedding (sometimes labeled "Share") of their content on other sites.  Usually, you click a Share link, and are provided HTML code to copy to your Drupal site.  Unfortunately, this share code is not always completely accessible, and very often does not include the title attribute or ARIA label required for accessibility.

Example Code from YouTube:

<iframe width="560" height="315" src="https://www.youtube.com/embed/KyqVDewZ2kU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

To be accessible, that code should include the title attribute, with the title of the video or a very short description or summary, like this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/KyqVDewZ2kU" title="Sacred Tibetan Sand Mandala"> frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Here's an example of a YouTube video iframe with the title attribute.  Use your browser's View Source command to see what the code looks like.

How to Fix Iframe's Missing Title Text in Drupal

1. Login to your Drupal site.
2. Go to the page with the iframe missing title text - Siteimprove's dashboard can direct you to these pages.
3. Click New Draft.
4. In the Body field (HTML editor), locate the iframe and double-click it.
5. In the Advisory Title field, type the title of the embedded content, or a very short summary of what it is.
6. Click OK.
7. Save and publish.

Note:  Some applications will provide default title text, such as "Youtube Video Player" - this is not adequate to meet accessibility requirements.  Also, if you have multiple iframes on the same page all using the same title text, this will create another accessibility issue.  The title text must be unique, meaningful and related to the embedded content.

Iframes Generated by Javascripts

Some applications provide a javascript instead of iframe code.  The javascript is inserted into your page, and that generates the iframe when the page is displayed.  Unfortunately, we cannot edit a third-party javascript, and cannot add the required title or ARIA label.

How to Avoid the Problem

Follow our instructions for Adding Video to a Page - there are 2 methods.  Use the HTML editor's Add Media button for YouTube (this will automatically add the title), and the Share > Embed method for other applications.

For non-video content, you can usually use the same Share > Embed method.

Siteimprove’s support site contains many tutorials, webinars and FAQs to help website content editors learn about accessibility and how to use Siteimprove. Some of the support content is only available to Siteimprove users.  Login to your Siteimprove account, then click the Help Center & Academy menu to make a selection.

Tutorials are interactive step-by-step guides that provide an overview of Siteimprove features.  These work best if you first login to your Siteimprove account.

• Complete List of Interactive Tutorials

Siteimprove is cloud-based Digital Presence Optimization (DPO) software. It includes dashboards to assist in optimizing quality assurance, accessibility, and search engine optimization (SEO). SSU utilizes this software primarily to address and improve website accessibility.

All SSU Drupal websites are scanned by Siteimprove.  Content Leads are given access to Siteimprove reports for their sites.

Siteimprove may be available for other sonoma.edu sites. Contact the Web Office for more information.

IT Web Services has developed and maintains a set of template files that may be used for official University sites that are not hosted on SSU Drupal.  These may be shared with vendors or contractors who are building sites for SSU departments, programs, and services.

The template files are available on SSU IT's Gitlab site. Please submit a general-type Drupal/Website ticket to request access.

Web accessibility is the practice of applying design principles to make web sites, web applications and web content accessible to persons with disabilities who may be using assistive technologies to access the site.

It is the policy of the CSU system to make information technology resources, including web sites, web applications and web content, accessible to all CSU students, staff, faculty and the general public regardless of disability.

SSU web sites must conform to Section 508 of the Rehabilitation Act of 1973. The University has appointed a steering committee to develop plans for ensuring the University meets the requirements of the CSU Accessible Technology Initiative. See SSU's Accessibility site for more information.

Is Your Web Site Accessible?

The Web Office can evaluate department sites for accessibility compliance.

Automated Scan with Siteimprove

Siteimprove is an application that can crawl a website, checking for potential accessibility and quality issues.  

Manual Evaluation

Some accessibility requirements require a human to validate.  The Web Office can use the manual evaluation process developed by the CSU ATI Web group to identify accessibility problems and possible solutions. Submit a "Problem/Issue with Live Site" Drupal/Website ticket.

Sonoma State University Web Policy provides rules and guidelines for SSU websites.

See Web Policy on the University Policies site for more information.

New Brand

Effective March 25, 2021.

Here are samples of SSU brand colors for SSU websites.  These are available on Drupal sites using the new SSUedu Child theme.