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

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.

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:
http://www.quackit.com/html/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:
http://online-html-editor.org/
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
http://wearepropeople.com/blog/top-10-online-html-editors

Top 13 Online HTML and CSS Editors – Free to Use:
http://www.scratchinginfo.net/top-13-online-html-and-css-editors/

10 HTML & CSS Online Code Editors for Web Developers:
http://www.awwwards.com/10-html-css-online-code-editors-for-web-developers.html
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:
http://blog.cometdocs.com/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.