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

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 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.

There 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

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.


Make a Good Impression, Keep Your Content Fresh

Site visitors will be more likely to return to your website if the content is updated often. Site editors should review pages in their site for freshness at least once a month. If the site is large and time to focus on certain areas and review all content is short refrain from mentioning specific dates or months. For example don’t use phrases like “New for October 2007”, rather use more generic language that doesn’t make it obvious that the content may be out-of-date. To aid in organizing a site updating plan website author can create a frequency of update document or spreadsheet to keep track of when sections should be reviewed. Some areas may typically be updated annually or quarterly, the site editor can note these review times in their frequency of update document.

Keeping times and dates in a central calendar database is another strategy for increasing efficiency in content updating. In this method rather than having to edit every page that mentions a date they would just have to update it in one place. Content Management Systems (CMS) offer a lot of efficiency shortcuts by centralizing data and allowing it to be reused/placed in multiple areas. Some systems may also provide reminders to editors to update content after a period of time has passed. Site authors could also better manage content updates by keeping a special projects calendar with reminders. Many organizations have events that reoccur around the same times each year. These events may be added to a frequency of update project calendar.

Fresh content is key. If site author continues to provide meaningful content updated on a regular basis visitors are more likely to have a good impression of the website and the organization behind it. Conversely sites that are obviously out-of-date may leave users with a bad impression of the site’s company or organization and may influence the user’s decisions to buy, collaborate, or join the organization. For college and university websites if descriptions of academic programs or departments are out-of-date prospectives students may decide to look to enroll elsewhere. Websites are a great communications tool but they are most effective if the content is well cared for.

Begin at the beginning – Sketching out a full, extended web design process: the initial steps

Many times in redesigning websites there is pressure to jump straight into the visual design and programming phases but spending time & effort in initial planning can improve efficiency and help the later work go more smoothly. Some of the first steps of the planning phase include site content audits, website strategy plans, and card sorting exercises. A content audit takes an inventory of the website’s existing content. As the content is inventoried some problem areas may stand out to web team members. Heuristics and review of site analytics can be used to confirm problem areas (structure usability problems, audience marketing problems). Website strategy plans outline specific web-centric strategies to meet the organization’s goals & business objectives. These planning documents also include details about metrics to measure the success of the strategies and approaches. In the post I attempt to further describe these early steps in the web development process and suggest some resources and articles for learning more.

Phase 1: Planning – Conducting Site Content Audits:

One of the first things in a website redesign process that a web team should do is conduct a Site Content Audit of the existing site pages. “You have to know what you have before you can improve it”. A content audit and site inventory spreadsheet can be an important exercise in understanding what content is in the current site. As the content is inventoried in a Content Audit some problem areas may stand out to the team. These areas can be further analyzed through card-sorting exercises later in the phase 1 planning process. Heuristic knowledge of web design best practices and review of site analytics can be used to further confirm and analyze these problem areas later in the design process.

Conducting Site Content Audits resources & articles:

Content audit guide and template: this article includes information about why an organization should do a website content audit and how it should be performed.

Example content inventory spreadsheets


Phase 1: Planning – Writing Website Strategy Plans

Website Strategy Plan outlines specific web-centric strategies to address organizational goals and objectives and metrics to track the success. The website strategy document may consider and incorporate communications objectives and initiatives from the organization’s marketing department as well as business objectives from other departments. The exact scope of the strategy will depend on the client’s organization and what industry they’re in. For example a website strategy plan for higher education institutions may differ than those for commerce stores. The specific web-centric strategies to meet goals may go in-depth into technical detail as a reference to guide the web team’s work.

Metrics to measure the success of strategies can help project managers to decide if a particular approach needs improvement or is working well. Review of web analytic data on site visits may identify if approaches and strategies are working. Metrics may be more qualitative or quantitative based on the strategy statement and nature of the organization’s goals.

The Website Strategy Plan metrics definitions may describe the benchmarks for success in reaching certain target audiences. It’s good practice to define a primary audience to focus efforts on engaging. In the case of higher education institutions the primary audience may be prospective students, and organizational goals may be focused on engaging this group. The scope of work that organizations do may serve many different audiences so it’s good practice to allow think about strategies to reach secondary groups. In the case of colleges or universities secondary audiences such as alumni & donors may may identified and web-centric strategies developed to met the needs of those groups. To understand a typical person from an audience personas may be developed to sketch out their informational needs and online tasks.

Writing Website Strategy Plans resources & articles:

– Web Design for ROI:  The book has a website strategy example and template here:

– A web strategy in 10 quite simple steps: This blog post includes information about engaging stakeholder from all levels of the client’s organization.


Phase 1: Planning – Running Card Sorting Exercises

Card sorting exercises are used to test a verify the web team’s assumptions about the website’s information architecture, the site structure. As the content is inventoried in a Content Audit some problem areas may stand out to the team. Heuristics (web design best practices) and review of site analytics can be used to confirm usability & audience marketing problem areas in the site’s structure. For example if the analytics say that a certain area of the site is getting a high-bounce rate that may indicate that the section is confusing and site visitors are leaving. Once a problem area or section of the site is identified a Card Sorting Exercise is justified to help redevelop the structure of the section.


There are two forms of card sorting: open & closed. Open card sorting is for brainstorming when creating a new website from scratch or used if the whole structure of an existing site is deemed to be confusing to site visitors. Closed card sorting is used if the the site’s top-level categories are well agree upon and if the team just wants to test certain problem areas of the site. The higher-level categories are used as buckets to sort sub-page content below.


To confirm that top-level categories fit within norms for the client’s industry it can be useful to perform a competitive analysis of the website’s of other organizations. By comparing the competitor’s top-level categories in a competitive review spreadsheet the client & web team may grasp a better under standing of website navigation norms and section naming for that industry. Seeing top-level navigation schemes compared side by side may reveal common trends and good ideas in section naming. The results of a competitive review can inform the decide on whether to do open or closed card sorting. Site visitors may have certain expectations for using websites from a certain industry. For example, prospective students applying to a graduate program may have expectations on how they should be able apply online and what information about the school should be presented. Competitive reviews of college & university websites can help the web team get a handle on what is normal for an application process to higher education programs. Divergent areas that stand out, as compared to competitors, may be an indication that something is wrong with the existing site’s structure and justify card sorting in that area.


There are pros and cons to using traditional card sorting vs. software-facilitated sorting. if a sitemap outline can be automatically generated (from an outline) that’s more efficient than drawing one in Adobe Illustrator. If a spreadsheet of the website’s structure could be output from the CMS (content management system) that would help speed up a content audit.


Running Card Sorting Exercises resources & articles:

Card Sorting: Getting the right results: this article describes old card sorting methods vs. newer digital methods (synchronous facilitated or asynchronous).

– Using Card Sorting To Test Information Architecture: This article describes when to perform card sorting exercises and how they can be used to test the web team’s assumptions about a site’s information architecture, the structure.

Best online HTML editors?

I’m working on compiling and list of reasonable online HTML editors that may be used when one doesn’t have access to their favorite IDE, text editor, or web design program.

1) QuakIt Online HTML Editor – Full:

Good features:
– Has lot of options, a predefined styles list, and pre-populated list of fonts.
– Has HTML tag and CSS properties reference lists.
– Looks like the WYSIWYG editor used by WordPress.
– Adds in the <html>, <head>, <title>, and <body> tags.

2) ContentBuilder.js Online Editor:
This WYSIWYG HTML Editor has the most modern look of the online editors I reviewed. It allows web builders with less experienece with HTML to create more sophisicated layouts.

Here are some interesting features of the ContentBuilder.js Online Editor:
– Allows you to build page layouts by dragging blocks from the right side
– The menu at the top allows you to sort by the type of block.
– Right-clicking brings up formatting tools and a <> button that can show the HTML code of a block.

Articles about Online HTML Editors:

More articles Online WYSIWYG HTML Editors:
Top 10 Online HTML Editors

Top 13 Online HTML and CSS Editors – Free to Use:

10 HTML & CSS Online Code Editors for Web Developers:
Kodingen is an Online Development Environment including Code Editor, Cloud Hosting, Database Administration, Collaboration, Web-based access

5 Free Online HTML editors for Web Developers:

Content Inventories

A content inventory is a deliverable used in the planning phase of a web design process. It’s a spreadsheet listing pages in the website by section or category. Details to inform the web team regarding frequency of updates may be included. For example if a page should be updated annually it’s noted in the entry about that page. One could consider a content inventory as a sitemap in outline format with more detail about each page. The outline may be organized by the hierarchical categories used in a website. Notes and color coding may be included to indicate the status of certain pages; whether they need improvements or updating.