A lot has changed with Drupal 10, 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 10 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 10. 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 10 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.
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 10. 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 10, 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 10 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.
