Websites

Fixing a broken skip nav accessibility error

by

The Ohio State navbar contains a hidden skip nav link that jumps to an anchor called “page-content”.  This skip link is hidden visually (through CSS) but available for those using screen readers to use to skip the other Ohio State navbar links and go straight to a page’s content.  A review by the WAVE tool will report if the skip nav anchor is missing from a page. To correct a broken skip nav link, add an anchor near the start of your page’s main content. Here are some examples of possible anchors:

  • <a name=”page-content” id=”page-content”> – The ‘name’ attribute works in HTML 4 and the ‘id’ attribute in HTML 5.
  • <div id=”page-content”>  – In HTML 5 the ‘id’ attribute can be placed in a lot of different elements, such as a <div> or <main>.

Some more information about using anchors in HTML is available from W3 Schools. See the info about the HTML <a> name Attribute.

The WebAIM organization has some more information about “Skip Navigation” Links in their site.

Video tutorials related to managing media with Drupal 8.6+

by

Drupal 8 Media Entity File Browser Widget 9:43 – 3/8/16 – video tutorial showing how to add an Entity Browser to a Gallery Content Type for browsing for gallery images. 

  • The presenter went to: ‘Manage Fields > Manage Form Display’ in the Gallery Content Type.
  • Then changed the Gallery Images field type to ‘File Browser’.
  • Then he chose the ‘Browse for Images’ option. The drag and drop functionally is powered by Dropzone JS.
  • Alternately, choosing ‘Browse for Files (modal)’ will have the File Browser pop up in an overlay.

Adding a node ID as class to the tag in Drupal 8

by

One thing I discovered recently in my college’s Drupal 8 site was that the node number CSS class that used to be applied to the <body> tag was missing. In Drupal 7 there was a unique node ID class and it looked sort of like this:

<body class=”html not-front not-logged-in no-sidebars page-node page-node- page-node-8471 node-type-article news-newsreleases context-news”>

Having this unique node number CSS class was useful for cases when specific pages needed custom styles applied.

By default, Drupal 8 seems to add no such class to pages. To get them back I added a snippet of code I found on a Drupal.org post. I found it was easiest to use:

 /**
* Implements hook_preprocess_html().
*/
function themename_preprocess_html(&$variables) {
if ($node = \Drupal::request()->attributes->get(‘node’)) {
$variables[‘attributes’][‘class’][] = ‘page-node-‘ . $node->id();
}
}

in my theme’s sitetheme.theme file.

This is also a Node Class module that might help accomplish the same objective, adding unique CSS classes to a page. It’s a simple module that allows users to add custom CSS classes to any node through the node/add interface.

After adding the snippet of code above to my sitetheme.theme file I was able to target a faculty profile page that needed custom styling. Previously, without a unique CSS class, there no way to target that specific page.

Ohio State Drupal Users Group Meeting – March 22, 2018

by

The Ohio State Drupal Users Group is having its March 2018 meeting in 141 Sullivant Hall (the Collaboratory) on Thursday, March 22, 2018, 3:00 pm to 5:00 pm. One of the topics of discussion with be Drupal site hosting, which will probably get into hosting on cloud platforms like Pantheon or Acquia. The university also runs a hosting service that’s available for Ohio State Colleges and Departments to use. The OCIO hosting service offers some Drupal-specific information about installing, backing up, and restoring Drupal 7 and Drupal 8 websites. In Drupal 8, drush commands can be used to create backups and migrate a site from a development account to a production account. Cloud hosting services, like Pantheon or Acquia, also offer DEv, Test, and Live (production) environments and methods to move (deploy) site data between them.

 

There is a Sullivant Hall Collaboratory and Rotunda Reservation Request form available that other groups from the university can use to reserve that space.

 

Ohio State Drupal training resources from the College of Arts & Sciences

by
Updated:
New 2016-2017 ASC Drupal CMS training articles and resources:
How to Use Images on Drupal – Preparing an Image for a Drupal (or any) Web page.
Creating an ‘Accessible’ Website – Resources to making your websites accessible.
ASC Drupal training videos on YouTube – easy video training for ASC Drupal instances.