Home / D8 Modules: Responsive and off-canvas menu, Display Suite, Media Entity

D8 Modules: Responsive and off-canvas menu, Display Suite, Media Entity

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?

Responsive and off-canvas menu

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.

Check out the full Responsive and off-canvas menu profile in the Acquia Developer Center blog

Display Suite

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.

Check out the full Display Suite profile on the Acquia Developer Center blog

Media Entity

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

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.

Check out the full Media Entity profile on the Acquia Developer Center blog

Is there a Drupal 8 module you’d like to see profiled? Let us know in the comments!

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Filtered HTML

  • Use [acphone_sales], [acphone_sales_text], [acphone_support], [acphone_international], [acphone_devcloud], [acphone_extra1] and [acphone_extra2] as placeholders for Acquia phone numbers. Add class "acquia-phones-link" to wrapper element to make number a link.
  • To post pieces of code, surround them with <code>...</code> tags. For PHP code, you can use <?php ... ?>, which will also colour it based on syntax.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <h4> <h5> <h2> <img>
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.