D8 Modules: Responsive and off-canvas menu, Display Suite, Media Entity
by Reena Leone
Drupal 8 continues to gain momentum; in fact, Drupal 8.1 is already available! More and more modules continue to be migrated over from Drupal 7 and we’ve been chronicling them — along with other Drupal 8 news — on the Acquia Developer Center blog. Let’s take a look at Responsive and off-canvas menu, Display Suite, and Media Entity.
Responsive and off-canvas menu
Maintainers: Tancredi D’Onofrio, aka tanc on Drupal.org, is Senior Developer and Technical Lead at the UK-based Agile Collective Ltd. co-operative company, which specializes in Drupal and open source solutions for clients in the public sector, charities, and social enterprises.
What Does Responsive and off-canvas menu Do?
On mobile devices, the module provides an off-canvas menu triggered by swipe gestures or a ‘burger’ icon; on desktop-width displays, it provides a horizontal menu with drop-downs. Tancredi explains how this enhances Drupal 8: “Out-of-the-box, D8 provides a method of rendering your chosen menu in a block. It’s up to you and your theme to make it function, respond and look how you want. This module also provides a block to render your menu in but only down to a specified breakpoint. Below that breakpoint, this module renders your menu as an off-canvas slide-out panel that is activated by a triggering ‘burger’ icon.”
Why Does It Matter?
This module gives site builders a fairly simple solution to the mobile menu problem while not dictating or limiting too much how you have to present your desktop-sized menu. Given that it is quick and easy to implement — and it looks pretty good — it should reduce the cost of producing a custom mobile menu. Simply install the module and configure its settings. The only caveat here, according to Tancredi, is that, “The module requires a small amount of CSS theming knowledge. In particular, the horizontal menu will need colors applied to it to fit the site theme."
One nice “bonus” feature is that on a site with multiple menus, the mobile menu can be comprised of multiple Drupal menus combined together. So if you have a ‘main menu’ and a ‘utility menu’ at desktop size, these two menus are then merged to be displayed in a single off-canvas mobile menu.
Maintainers: Kristof De Jaeger and Bram Goffings (swentel and aspilicious on Drupal.org). Bram actually got his start in Drupal working as an intern under Kristof on Display Suite. Nowadays, Bram is the technical lead at Belgian agency Nascom and Kristof is a Drupal core developer and co-owner of a small digital agency in Belgium called eps & kaas.
What Does Display Suite Do?
Display Suite (“DS”) gives you the power to control how your site content is displayed using a drag and drop admin interface — without any of the coding or deep Drupal-technical knowledge of theme template files you’d need otherwise. With Display Suite, you don’t need to ask your developer colleague, Drupal service provider, or geek friend for help arranging your nodes, views, teaser lists, search results, comments, user data, etc. You can just get on with arranging how your content is displayed.
Kristof explains that "DS simply works out-of-the-box (as soon as you have entities on your site), “It allows you to swap out layouts for every entity and for every view mode available on your site using the Field UI.” Even better, “It also allows you to access and rearrange display fields in the Field UI that are otherwise (without Display Suite) unavailable to you.”
Why Does it Matter?
“One of the reasons I wrote Display Suite all those years ago was to give power to front-end people so they could easily configure entities and view modes. They can do all this without me or other developers having to create template files for them because they didn't know all the internals of render arrays, or nodes.” Here we get a clue about his deeper motivation, “So in some ways, it relieves the burden a bit for developers to focus on what they love more, and front-end developers don't have to bother developers.”
This happy arrangement has led to DS’s popularity: Drupal.org reports back almost 160,000 installations. And there are almost certainly more in the wild, given that not every site reports back its module usage.
Maintainer: Janez Urevc, aka slashrsm, who comes from the tiny and beautiful European country of Slovenia. He was one of the initial founders and leads of the Drupal 8 media initiative. At Zürich-based MD Systems — themselves heavy contributors to Drupal 8 — Janez is a senior engineer and team lead.
What Does Media Entity Do?
Media Entity — installed on roughly 1500 websites as of mid-2016 — is new to Drupal 8. It provides a storage component for media, “a very lean and lightweight entity,” according to Janez, which can reference any media resources. Media Entity creates a relationship between a Drupal installation and a given media resource, for example local files, YouTube videos, Tweets, Instagram photos, and so on.
Thanks to its pluggable architecture, it also handles business logic related to specific media resources. Janez explains, “We are currently able to automatically provide default thumbnails and deliver remote metadata about media resources, as well as easily mapping remote metadata to Drupal fields. We will be adding more logic like that in the future.”
As of the writing of this post, there are plugin modules supporting the following media types:
Why Does it Matter?
Media Entity gives developers a set of standard code-tools to deal with with media. By developing media-type plugins, they can interact with their media resources and provide additional business logic for them. By exclusively using standard Drupal tools and APIs (Fields, Entities, Views, etc.), you can make your media-related code play nice with others. It lets you integrate with and benefit from other Drupal 8 systems and modules.
This module helps site owners in at least two ways. Important information — metadata — about individual media items that used to be hard to obtain can now be easily made part of rich media libraries. It also allows them to use whatever standard tools they are already familiar with to manipulate their media, making integration with other systems and other parts of their websites much easier.