Category: Uncategorized

A lot has changed with Drupal 9, with more robust layout options, easier ways to build out a webpage and more. If you’re someone who only logs onto your website a few times a year, a whole new system is a lot to learn.

I’ve tried to highlight the most impactful changes for authors to provide a quick guide to getting started in your new Drupal 9 website.

Logging in

Let’s start with the basics and get you logged in. Adding /login to your domain name won’t work anymore.

You’ll need to use /cas or /user/login to log in.

All the action is in the Layout tab

You’re used to smacking that Edit tab when you’re logged in to update a page. We’re now using a tool called Layout Builder. You’re going to hit that Layout tab to do most of your page building. Check out the Site Building Guide to see what’s possible.

However, you’re still going to want to use the Edit tab for some tasks:

• Publish/unpublish
• Create redirects
• Hide page title
• Edit the body field (for simple pages you can still use the body field)
• Metadata
• Promote to front page

No more flushing the cache

Flushing the cache isn’t necessary for Drupal 9. I know this has been a tried and true way to troubleshoot issues, but it’s not needed anymore to display changes to your website.

So go forth and edit and know that the changes will appear right away.

Hide page title

In the Edit tab you can check the box below the title field to hide the title at the top of the page. However, you still want to have text at the top that is clearly a title, otherwise you will negatively impact your SEO. You can add a heading 1 through Layout Builder if you want to integrate your title in with other content.

Headings

In Drupal 7, we only let you select headings 3-6. Headings 1 and 2 were for the site title and the group titles.

However, now you can select headings 1-6. You’ll still want to use headings appropriately for the structure of your website. They serve as the outline for your page.

Examples of headings in Drupal 9 and how to use them

Alt text required for images

When you upload an image, you’ll need to assign it a name and add alt text.

The alt text is required. Screen readers announce the alt text so that low vision and blind users can get the same information as sighted users. This is integral to good accessibility and is a common error.

How to write good alt text

Image file size capped

Related to changes in requirements for images, the image file size is now capped at 2MB. Images should be much smaller than that for good website performance. If you’re working on campus, it’s easy not notice the performance impact of a large photo. However, our sites can load very slowly on more typical internet connections if you don’t optimize your photos for the web.

• How to optimize images
• Image size guide
• Squoosh, my favorite image resizer/compressor

No more books pages

We ditched the book system in Drupal 9. All book pages are now basic pages.

If you want a new page in your site, go to Content > Add Content > Basic Page.

Basic pages are now included in the site map

In Drupal 7, you can create a page and then not link to it anywhere else to create a pseudo “dev” webpage for stakeholders to review.

We got away with that because for years we didn’t have a site map configured for any of our websites. Site maps tells Google and other search engines what your website contains and they will crawl your site based on this map. If a page is crawled, it can then be returned in search results for anyone to find.

In Drupal 9, we now have site map configured and it includes all basic pages in it. This means that Google and other search engines can find these pages and will return them in search results.

I don’t recommend creating published pages that are drafts, as these can quickly and easily show up in search results. This may also display time-sensitive or confidential information publicly.

Alternatives:

• Take screenshots of an unpublished page for review
  • Full page screenshot add-on for Chrome
  • Firefox can take a full page screenshot just by right-clicking anywhere on the page and selecting Take Screenshot
• Add the person to the website as an authenticated user so that they can view the content

Add external links to a group menu

We ditched the book page, but that was the main mechanism that built out the group menus in Drupal 7.

We now have a different way of building group menus.

From the main page of the group, you can click on Group Menus in the list of tabs. From there, you can add a group menu if it doesn’t exist already and add or remove links from your group menu.

You can add internal and external links to your group menu. You can also have the link text differ from the page title, which gives you maximum flexibility with group menus.

(Conversely, if a page title changes, you’ll need to update the menu link text manually to keep them consistent.)

Media is for images, documents, YouTube and Kaltura

Media isn’t just for images. It handles images (JPEG, PNG, WEBP, etc.) and documents like Word, Excel, or PowerPoint.

It also handles embedding YouTube, Vimeo and Kaltura videos. (And are all responsive out of the box, a very overdue feature).

In the editor, you’ll want to hit the button that looks like a photo to add an image or document or embed a video. There is also an option to bulk upload documents.

To see a list of all the media in your site, go to Content > Media. From there you can filter by type of media as needed.

This replaces going to Content > Files in Drupal 7.

Built-in accessibility checker

When you’re logged in and viewing a page in your website, there is now a circle in the lower right hand corner that will either have a check mark or a number in it. This is the built-in accessibility checker

The check mark means that there are no accessibility errors. This doesn’t mean that your webpage is 100% compliant. There are some scenarios that require a human to determine whether or not there are accessibility errors.

A yellow number means that there are potential issues to review.

A red number means you have definite errors that need fixing to be compliant.

You can view a demo website to get the hang of what the accessibility checker, Editoria11y does. They also provide a page with many errors that shows commons errors with explanations of how to fix them.

Website accessibility is a big topic and beyond the scope of this blog post, but head on over to the central web accessibility website to learn more.

---

There are a lot more changes that come with Drupal 9 with much to learn. It can be pretty overwhelming!

However, start small with these tips and you’ll be well on your way. Log into your dev site and make a few small changes to get a hang of things. Or come to Open Lab on Mondays for support from central folks and we’ll walk you through it.

Layout Builder will replace Paragraph Bundles as the tool for building out webpages in OSU Drupal 9. We have also added the additional functionality of Bootstrap Layout Builder. This module gives us a lot more options than our paragraph bundles in Drupal 7 did. Hello 4 column layouts and much more!

Creating Layouts

My thought process for creating layouts to get what I want is to try the following methods in this order.

1. Use the pre-built options provided by Layout Builder by using their column system and adding blocks.
   • You can divide up the page up to 6 columns
2. If I can’t use the pre-built options or something from the Layout Builder Library, I then ask myself if I can use them, but just slightly tweak them.
3. As a last resort, create something from scratch.
   • For a quick container to work in use the following settings:
     • 1 column layout
     • no gutters
     • no margin or padding on the block

This post will cover the second and third options and how to leverage Bootstrap to augment layout builder options to get the layout you’re looking for.

This is intended for folks who have a solid understanding of CSS and have created custom layouts, content types, and views in Drupal. If you can’t find what you need in the Layout Builder Library or using the pre-built options, then these classes can help you build your own layouts.

What is Bootstrap?

Bootstrap is library of code that is added to all of our websites. It includes a lot of styling and functionality that you can use instead of writing the CSS and/or JavaScript yourself.

I consult Bootstrap’s documentation when looking for something that I need. They have a robust search function and excellent navigation to find thing easily. We will continue to update our version of Bootstrap so we can leverage the new features that they roll out. As of the time of this writing, we are on 5.3.

Most of the classes I have been reaching for aren’t anything snazzy or exciting. I have used d-flex I don’t know how many times, but it’s just dead useful to be able to throw that class onto something and it gets me where I need to go.

I highly recommend reviewing how Bootstrap container and grid works to leverage this system to your advantage.

Helpful Classes

Here are my favorite classes that I have been reaching for:

• Display
  • using d-grid is limited, since Bootstrap doesn’t have many classes for the properties of grid. But, it at least gets you started. I’ve had to write my own CSS for grid-template-columns and rows, which are the grid properties I use the most.
• Flex (and oh look at that, it has classes for auto margins!)
  • I’ve mostly used this for…
    • centering easily (justify-content-center align-items-center)
    • putting multiple blocks into a 1 column and using flex to get the exact layout I’m looking for.
• Spacing
  • Margins and padding and you can set different sizes for each breakpoint (sm, md, lg, xl, xxl). While you can set both of these properties on sections and blocks via the Layout Builder GUI, there are limitations since you can’t specify at what size you want them. I’ve found that if I am setting these more than 2rem (32 pixels) for desktop, I’ll want to set a different size for mobile.
  • You set the margin and padding by a number after the property you want to assign. It assigns a certain number of rems (reference chart for our spacing values). Using consistent spacing values allows you to make design decision quicker and provides a more polished look with consistent sizing, rather than using arbitrary values for each project or page.
• I have the breakpoints printed out and sitting on my desk for quick reference, which I have found helpful. These breakpoints can be added to most of their utilities, which has made it much easier to get the exact layout I’m looking for.
  • For example, if you want a section to only have d-flex at larger sizes you’d add the class d-lg-flex.
• I’ve found the sizing classes to be limited in their use, since they’re one of the few classes you can’t tack a breakpoint size onto. If you set the max-width to 80% for desktop, that generally has been too small for mobile. The one sizing class I have found helpful is w-100, as that (usually) forces something to fill the space it’s in.

Adding Classes to Layout Builder Sections

You can add classes to either a section, row or column of a section or a block. Where you add the class completely hinges on what you are trying to accomplish.

To add a class to a section or column, click on Configure Section #. From the 3 tabs in the off canvas editing menu, you want to click on the cog. From there, you can add to the section (it’s called the container), the row, or column.

Section (Container)

This is good for adding responsive spacing around the entire section or if you know there is a style that you’ll need for everything within that section. Rather than creating classes or on-off styles, I’ve been creating class names that reflect their functionality to allow me to re-use them for other sections.

Row

This div houses each column that you have specified for your layout. (It doesn’t necessarily have the row class on it.) I haven’t found a need to add classes on here as the Bootstrap layout system works well here. The only time I have added a class is I add the “row” class to this when it doesn’t otherwise to get some of the benefits for the children of row.

Column

This is where you can target a specific column of your layout, which can be powerful. I’ve added flexbox, grid, gap, margins and padding here, to just name a few. It’s great for when you want to add padding or margins on the sides when you have multiple blocks in one column and don’t want to set them for each individual block.

Adding Classes to Inline Blocks

First off, inline blocks in Layout Builder are different than the site wide custom blocks you can place via Structure > Block Layout. They are one off use blocks that you can’t clone or place on another page. Think of them as the smallest building block in this system that’s for a single page.

Adding classes to inline blocks are fantastic for applying styles to just one specific section of content. For inline blocks you can apply them at multiple levels: block, block title, and block contents.

You can add them by clicking on the Manage Attributes options in the contextual menu when you click on the pencil to edit the block.

Block

I’ve used this one the most as it is on the wrapper for the entire block, so it’s a great, quick easy way to target everything inside the block.

Block Title

You can choose to show or hide the block title, which can be a quick and easy way to structure your content. Block titles will always spit out as an Heading 2. A common way I see using this is to align the title according to my needs.

Block Content

I haven’t found much of a use for this one yet, as it is still not yet the direct parent of the code of your content, so flexbox and grid aren’t much use here. There are still 2 layers of HTML before you are at the content.

---

While there are some limitations to using Bootstrap classes, it is still an incredibly powerful library to lean on. It can expand the possibilities for layouts and appearance. It can also reduce having to write the same layouts from scratch repeatedly, which was common in Drupal 7 with its HTML structure.

Keep in mind that there are some Bootstrap options that require certain dependencies that the central distribution hasn’t enabled, usually due to performance as recommended by Bootstrap. If you run into that edge case, come on over to Open Lab and we can help you get started.

A sitemap is instructions to a search engine telling it where to crawl your website. This will ensure that search engines will find all the relevant content of your site an display it in search results. Check out Google’s guide of how Google Search works to learn exactly how crawling works.

If you create a page or piece of content that isn’t linked anywhere, it’s unlikely that a search engine will find it. When you link to a page on another page of your website, search engines can find it.

Sitemap basics

For the central distribution Druapl here of Oregon State University, you can find your sitemap at sitename.oregonstate.edu/sitemap.xml.

This will show every piece of content included in your sitemap.

To configure your sitemap, first log into your website. You need to be an architect to configure it.

Go to Configuration > Search and Metadata > XML Sitemap

Drupal 7 sitemap configuration

The sitemap includes little by default. However, if you’ve linked to your relevant content, then don’t panic, search engines have probably found it.

There are 4 sections to configure. In each of these sections, you’ll see a list of the things you can include or exclude from your sitemap. It will also tell you which content has been indexed.

To

Frontpage

The configuration includes the front page by default and sets it at the highest priority. No need to make changes here! We’re good to go.

Menu Link

This is any link created by a menu in your website. You can include the menu items that are being used in your website, but they are probably already indexed. Again, remember that search engines can find links that are on your website that are linked from other content. Since menus usually display on multiple pages, search engines can find them easily.

How to add a menu to the sitemap

• You need to go to Structure > Menus
• Click Edit menu link to the right of the menu you want to include
• Expand the XML sitemap section
• Change the Inclusion from Excluded to Included
• Click Save

Be sure to never include the Management menu. That is the administrative menu for Drupal.

Content

By default, the configuration adds no content to the sitemap. However, don’t panic. If you’re been linking to your important content, the search engines can find it.

Recommend to include:

• Book page
• Basic page
• Webforms
• any default content type that you use
• any custom content type that you have created
  • Keep in mind that this will include the node view of your content type. If you haven’t styled it and only expose certain fields in a view, then you don’t want include your content type.

How to add content to your sitemap

1. Click on the content type name you’d like to add
   • This takes you to the content type editing screen
2. Click on the XML sitemap tab at the bottom of the page.
3. Change the Inclusion from Excluded to Included
4. Click Save content type
5. This will then take you back to the sitemap configuration page

Repeat these steps for any content type you want to include.

User

This is anyone you have added to your website. Oftentimes, these are the people in your department or unit to display in the directory. But some people only edit the website and aren’t in your department or unit.

You can exclude or include any individual by editing their profile. First look at the Account section of their profile, and then find the section on that configuration page for XML Sitemap.

Drupal 9 sitemap configuration

For Drupal 9, we have included the default content types (profile, basic page, and story) and groups.

If you create any custom content type, add it to the sitemap when you create it.

If you use taxonomy term pages in your website and want them to show up in search results, you can add them. You can add them under Sitemap Entities. This is also where you can add other entities of your site, as you see fit.

Pages produced by a view

Pages produced by a view are unique and need to be manually added to the sitemap under Custom links in the sitemap configuration.

Submit the sitemap

The sitemap module will submit your sitemap on your behalf automatically after initial configuration.

Click on the Search Engines tab in the XML sitemap menu.

Here are the configurations that you want to set:

1. Submit to both Bing and Google
2. Do not submit more often than every 1 week
3. Leave the box checked next to “Only submit if the sitemap has been updated since the last submission”

Click Save Configuration.

If you have Google Search Console turned on, you can double check that it’s being submitted to Google via the Sitemaps report. Learn how to manage your sitemaps in Google Search Console.

General References

Mozilla Developer Network (MDN) has a great reference for CSS. Any property you want to know, it’s there. I use this for

HTML Dog has a CSS reference. I like how they explain shorthand properties, such as background. I find their layout for those more complex properties more readable.

The CSS Cascade is a beautiful website that explains how inheritance works in CSS. This concept is absolutely essential to understand how CSS works. It’s also important to know the cascade works especially if you are trying to override something in the Drupal theme.

Flexbox

Flexbox Zombies game is a great way to learn flexbox. It’s entertaining and has practical examples.

Josh Comeau has written a a great interactive introduction to flexbox. There’s kebabs, Clippy, and cocktail wieners. Very thorough and delightful.

Flexbox.help or the flexbox properties codepen is quick and visual way to see the effects of changing the different properties on your layout.

Complete Guide to Flexbox from CSS Tricks is great for a reference after you’ve learned it. You can read their collapsed sections at the top about the Background and Basics and terminology. But I’ve found that those concepts are more approachable learning from videos and practicing on your own.

Grid

Jen Simmons has some examples of grid and when to use grid vs flexbox. She does some conceptual work on how to think about layout, which I have found useful.

Rachel Andrew has Grid by Example, where she walks you through examples in her grid video series.

The Best Thing to Do

You can watch all the videos and read a hundred Stack Overflow threads, but the best thing to do is practice. Get a CodePen account and start creating something! Practice! Practice! Practice!

In an ideal world, every page on your website would have perfect metadata to feed the algorithms.

Since most of us are operating on limited time and resources, we need to be strategic about giving the royal treatment to pages based on how much they contribute to your website’s key strategies or if it will be promoted via social media. You can manually configure some settings while building the page to ensure that your webpage looks great when shared and ranks well in searches.

What is Metadata?

Metadata is code in the head of your webpage that tells search engines what your page contains. Metadata doesn’t show up on the visual webpage to regular visitors. It affects how your webpage looks when shared as a link on social media posts. Metadata also contributes to how high your website ranks when people search for your content on Google.

Key Metadata Attributes

1. Title
2. Image
3. Description

There are others, but the Drupal defaults ensure that we follow best practices.

Note: It can take time for your changes to your metadata settings to show up in social media previews. This is because of the caching of OSU websites and the social media platform can sometimes take time to detect those changes. Be sure to flush the cache after you make a change and wait a few minutes. There are multiple systems that this information is flowing through and it isn’t always immediate. Twitter seems to take the longest to get the updated metadata.

Title

The title should be the page title, which should accurately reflect the contents of the page.

Most of the time you don’t have to worry about the title. The OSU Drupal defaults will automatically populate and update the metadata title for basic pageand book pages.

One exception for OSU Drupal 7 is that a top level page for an organic group is missing this metadata title. You need to go fill it out yourself and update it if you change the title of the page.

This is due to some limitations related to the functionality of our version of organic groups. This won’t be an issue in OSU Drupal 9.

You can check to see if the title metadata is correct by looking at the tab in your browser. If it has your page title, you’re good to go.

If it starts with a |Site Name, then you need to add the title manually.

Image

Facebook

Facebook images should be at least 1200×630 pixels. This will produce a large image with the title and description below. If it is smaller than 600×315 pixels, then it will display a much smaller photo. Facebook has written up a complete guide to their images in link shares that includes more information about how their images work and how to pre-cache them.

How to set the Facebook photo

When editing a Drupal page, scroll to the bottom and there is a vertical tab list. Click on the Meta Tags option.

There are a lot of fields in this section, so it’s easy to get overwhelmed. However, there is a lot that you can ignore. Let’s focus on just the images for now.

The OpenGraph section feeds what will display on Facebook.

You want to fill out the Image field under that OpenGraph section. You need the URL of the image.

If you are using a photo specifically sized for Facebook, you can get the URL with these steps:

1. Go to the Admin menu > Content > Files
2. Find the photo that you want to use and click on the title link
   • This will display the image on its own page
3. Right click on the image and select Copy Image URL

Preview Facebook posts

To test that your image is working you can use the Facebook’s Sharing Debugger. You need to log in with a Facebook account to use it.

It will give you a preview of your website when it is shared as a link on Facebook. It will also give you any errors or recommendations for fixes. Generally, a Google search of the exact error will provide you with a fix. You can always ignore the error for fb:app_id. It doesn’t do anything and isn’t necessary.

Twitter

Twitter’s image size depends on the type of card that you select. There is either the Summary Card or Summary Card with Large Image.

Summary Card

The Summary Card will support a small square image, at least 144 x 144 pixels. Given how image and video heavy the internet has become, I don’t recommend using this option.

Summary Card with Large Image

The Summary Card with Large Image supports a larger photo with an aspect ratio of 2:1. The minimum size is 300×157 pixels, but I recommend using 1024×512. I recommend using this card style because it shows a larger picture, which may grab people’s attention more than small photo.

How to set a Twitter Photo

In the Twitter card section of the Meta Tag tab at the bottom of your page, there is a field for Image URL. You can copy and paste the image URL into this field to ensure that your Tweet looks great.

You can use the same images for Facebook and Twitter. However, it is best practice to size the photo for each platform to ensure they look their best and no critical part of the photo gets cut off.

Preview Tweet

To test how your website will look when shared on Twitter, you need to log into your account and draft a message. It will show you a preview of what your shared link will look like:

There is the Twitter Card Validator tool too, but that no longer renders a visual preview. It can be helpful to look at the logs to see what Twitter is able to read from your metadata.

Description

The meta description is the short amount of text that shows up below the title in social media posts and on search results.

The description is your elevator pitch to search engines and your potential site visitors. It has to quick, snappy, and engaging. Moz has a great long form article on how to write meta descriptions.

Cheat Sheet

• ~155-160 characters
  • There isn’t a hard and fast cut off. Depending on the device, browser and user settings, there is no way to know exactly how many characters will show
• front load the most important points to ensure visibility
• succinctly describe what your page is about
  • Bonus points for looking at Search Console to see what search terms people use to find your page adding those to your description

Drupal Defaults

Drupal automatically fill out the meta description field based on the content of the page. First, it looks at the summary field, which is attached to the body field. It is hidden by default.

If there is nothing in the summary field, it will look at the body field and take the first characters from there and put it in the meta description.

However, a lot of us build our webpages with paragraph bundles. There isn’t an option to tell Drupal “go look and find paragraph bundles, find the first one with text, and put that in the meta description.”

That doesn’t mean all is lost. I built the Paragraph page that I have been using as an example with paragraphs. In the search results screenshot above, there is a description for it. Search engines will look at the rest of the page to find information about it if there isn’t something in the meta description.

Note:

You can write a meta description and search engines can decide they don’t like it and will put what it thinks is more useful. That’s a good time to re-write your meta description.

How to add a Meta Description

Add your meta description by placing it in the Summary field attached to the Body field.

Click on Edit Summary to expand the field and then add your description.

The description will now populate in a Facebook post:

There is more to metadata, but these are the key aspects that can help your webpage the most.

There are 1,0001 newsletters out there for front-end web work. It can get overwhelming to not only choose, but if you subscribe to those 1,001 newsletters, your inbox will get even more overwhelming than it already is.

• Nielsen Norman Group
  • All things UX and design, no technical bits.
• Smashing Magazine
  • Smattering of all things front-end, a real variety pack. It’s a great way to round out your knowledge set.
• Kevin Powell
  • Calls himself a “CSS Evangelist.” He covers everything you need to know with CSS with his YouTube videos.
• Moz Top 10
  • All SEO and Digital Marketing

Honorable Mentions

I don’t subscribe to these, but have in the past. It isn’t because these are “bad.” My focus changed and my inbox got full.

• CodePen
  • Includes snippets of code made by the CodePen community. Ends with “Chris’ corner” by Chris Coyier, founder of CSS-Tricks.
• CSS-Tricks
  • I’m not entirely certain they’re running this anymore. Last publication was December 2022. However, the archives are definitely worth a read.

Most of these keyboard shortcuts can be used in other programs. However, these ones are what I reach to every day to make my Drupal life just a little bit easier.

Home/End

Jump to bottom or top of page or the beginning or end of a text line.

The save button is at the bottom of the page in Drupal 7. It’s nice to save yourself and your wrists a bit of scrolling if you have a long page.

Just to keep you on your toes, in Drupal 9, the save button will be at the top of the page.

As I understand it, Apple keyboards don’t have these keys.

Equivalents for Mac

Home: Fn + Left Arrow

End: Fn + Right Arrow

Page Up/Page Down

This is probably a “me” thing. I don’t like to scroll a bunch as it is a highly repetitive and hard on my wrists.

Control + shift + arrow

Select a word or if you keep pressing the arrow key, multiple words.

If you keep pressing the arrow key you’ll select more and more words. Great way to do quick formatting like adding bold or adding a link.

Control or Command + L

Add a link to selected text

The standard everywhere else is to do control/command + K. In Drupal 7, it just loves to be different.

For longer paragraph bundle content this is helpful to skip scrolling back up to that editing bar just to add a link.

Shift + Enter

Add a link break

This will add a link break, rather than start a whole new paragraph. It’s great for contact information where you don’t want a lot of spacing between the lines.

For example:

Sherlock Holmes
221B Baker Street, Marylebone
London, NW1 6XE

Other Keyboard Shortcuts

• CKEditor keyboard shortcuts
• Windows keyboard shortcuts
• Mac keyboard shortcuts