May 19 2019
May 19

While upgrading to the latest version is always part of the best practice, the process can be staggering.

Drupal 8.7 is already here and 9 will be released in a year, in June 2020.

Although a lot of discussion is happening around the upgrade and possibilities it brings along, the final product can only be as good as the process itself.

The good and important news is that moving from Drupal 8 to Drupal 9 should be really easy — radically easier than migrating from Drupal 7 to Drupal 8.

As a site owner, here’s what you need to know about the new release and what to take care of to make the process easier without many glitches.

The Drupal 9 Release and Timeline

The goal of Drupal 9 is to make it an easy upgrade as much as feasible from Drupal 8. Unlike most of the previous upgrades, D9 will be different in terms of:

  • Updates of dependencies to versions that stay supported.
  • Removal of our own code that we deprecated with removal before Drupal 9's release.

The new release will be a cleaned-up version of Drupal 8. Built on the same code base with deprecated code removed and third-party dependencies updated, Drupal 9 is not a reinvention of Drupal.

a horizontol table with Drupal versions

The next question is what happens to Drupal 7 and 8, then?

One of the major dependencies of Drupal 8 is on Symfony 3. Since Symfony 3 enters the end of life in November 2021, Drupal 8 support will be lifted around the same time. A long-term-support (LTS) minor release of Drupal 8 will be released alongside Drupal 9 and supported until November 2021.

No new features will be added to Drupal 8 and no new minor releases will be made available of Drupal 8. It will only receive patch releases after which.

Drupal 7 will also stop receiving community support after November 2021.

Data migration features in Drupal core to move from Drupal 7 to Drupal 9 will be active until then since they are required for a stable migration. 

The Upgrade and The Tips

The only caveat is that you need to manage is the "deprecated code". Here’s what you need to take note of, for an easiest upgrade experience to Drupal 9:

Text on left with a blue table in centre and left

  1. Keep Core Up-to-Date: As mentioned above, Drupal 9 is Drupal 8.9 - deprecated parts plus dependencies updated.

    If your site doesn't use deprecated code that is scheduled for removal in Drupal 9, your upgrade to Drupal 9 will be easy. In fact, it should be as easy as a minor version upgrade (like upgrading from Drupal 8.6 to Drupal 8.7).

  2. Keep Modules Up-to-Date: Although Drupal 9 will not have new features (other than those provided by updated dependencies). While most modules will improve Drupal 9 compatibility, to ensure you don’t lose them in the upgrade, keep them updated.

    The key benefit of Drupal 9 over previous versions is that the platform will be supported with security fixes much later after support is lifted from 8. For contributed modules, the pace of Drupal 9 updates will depend on the module maintainers.

  3. Check Custom Codes for Deprecation: In case of any custom code on the site, you can use the deprecation checking and correction tools and fix issues locally. Tools you can use to check code depreciation:
    1. Drupal Check (read more her about PHP version compatibility check
    2. Rector (Read more about Rector here)

      Further, you can also use an IDE or code editor that understands deprecations (@deprecated annotations particularly) or Drupal 8’s branch of Upgrade Status for full site reporting.

What is Deprecated Code?

Deprecated code is referred to as the functions and API’s which are being replaced with new and better versions. In the journey from Drupal 8 from Drupal 9, you will experience API changes, with the new implementation is already present in core along with older one. We have to replace older code/API usage with the new.

Here is an example of the deprecated function:

* @deprecated in Drupal 8.5.0 and will be removed before Drupal 9.0.0. * Use \Drupal\Core\Messenger\MessengerInterface::addMessage() instead. */ function drupal_set_message($message = NULL, $type = 'status', $repeat = FALSE) { @trigger_error('drupal_set_message() is deprecated in Drupal 8.5.0 and will be removed before Drupal 9.0.0. Use \Drupal\Core\Messenger\MessengerInterface::addMessage() instead. See https://www.drupal.org/node/2774931', E_USER_DEPRECATED); $messenger = \Drupal::messenger(); if (isset($message)) { $messenger->addMessage($message, $type, $repeat); } return $messenger->all(); }

In above example the function drupal_set_message is deprecated and has to be replaced with:

\Drupal\Core\Messenger\MessengerInterface::addMessage()

Ways to Find and Fix Deprecated Code in your Drupal Project

As mentioned above , you can find and fix your deprecated code in the following ways:

  1. Drupal Check: It's a library developed by Matt Glaman. Check the git code here. For installation and usage, you can refer to the readme. 
    In case you want to install using Composer, prepare using composer global require mglaman/drupal-check. You can also read more about the composer check
    1. Get into your project/Drupal root directory
    2. Choose the module you want to check for deprecations
    3. Run drupal-check --help for help items. Here, I am using watchdog_prune module for demonstration.
      run : drupal-check -d watchdog_prune
      The output will be something similar to the image shared below:

      deprecated-code-1-srijan

    4. You will, now, have the report of deprecated code to fix.
    5. Let say it is giving us File src/Form/WatchdogPruneSettings.php containing issue : Call to deprecated function drupal_set_message(). In this case just navigate to the body of function as in this case drupal_set_message()

      You will notice that the the documentation under red box reads that the function is deprecated and what we need to do instead
       
       

      Now replace the current code with the recommendation and you are done.

  2. Drupal Upgrade Status Module: This module checks the list of projects you have installed and shows their availability for newer versions of Drupal core.
    1. Use the Upgrade Status module form
    2. Download and install module using composer: composer require drupal/upgrade_status
    3. Install the module and navigate to URL using admin user: /admin/reports/upgrade
    4. You can run a complete project/ individual module scan
    5. Fix the deprecated code in the same way as mentioned above.

Wrapping Up

Because Drupal 9 is an extended version of Drupal 8, for site owners, this means that it should be much easier to upgrade. But keeping custom codes and module updated needs to be meticulously planned.

Have questions around Drupal 9 upgrade and how it might impact your site? Experts at Srijan are all ears, connect with us to chalk out the right course to Drupal 9.

May 16 2019
May 16

One of the best things about Drupal’s open-source ecosystem is that it empowers you to be open-minded. Given the vast array of solutions and modules available, users can customize their site to their whims. Alternatively, if you think up and code something new, your contributions can be shared online with other users. With all of the customization available, Drupal is a conducive platform for outside-the-box thinking.

federated search

Decoupling is a recent example of this philosophy. Where a standard Drupal website would feature a Drupal-powered front and backend, decoupling opens the door for a variety of possibilities. A decoupled site can utilize different platforms and technologies for both the front and backend. For example, a decoupled site could utilize Drupal’s backend CMS while running a React-powered frontend. Such is Drupal’s flexibility that it can power scores of different, user-facing channels from a single backend, including other sites, native apps, Internet of Things (IoT), and more.

This decoupled or “headless” concept has more applications than just for site design, though. The search function of a website, for one, can benefit from components that utilize this headless approach – and not a moment too soon. As Google has begun to sunset its Google Search Appliance offering, there is now a need for an open and flexible search tool with enterprise-level capabilities.

At this year’s Midwest Drupal Camp, the team from Palantir demonstrated that a decoupled approach to site search was viable. This solution, federated search, allows for indexing and searching across multiple sites. For organizations with a large web portfolio across different platforms, this open federated search solution can fill the gap left by Google.

Decoupled Drupal Facts & Myths

Understanding why federated search for Drupal is important requires an understanding of how regular site search functions operate. At the core, the search feature is built from three different components: the source, index and results. The source simply refers to all of the searchable content on a given site, from blogs to landing pages. The index is a compilation of metadata that makes the content form the source easier to parse. At Duo, we often use Apache Solr, a platform-agnostic, open source solution for indexing, as it provides speed, power and its own server capabilities. Finally, the results refers to the front-end experience that compiles and delivers the search results to the user.

The above setup will work fine for most simple websites, but larger organizations often require a more robust solution. With federated search, users can query across multiple sites across different platforms without placing much strain on Drupal, since Apache Solr is handling generating the index and providing results. This is accomplished through some tweaking of the basic site search formula.

Part of what makes this search so powerful is that it takes advantage of Drupal’s backend without relying on its frontend. For that, Apache Solr’s dedicated servers empower this new search solution by shouldering the burden of indexing and providing the results. Before it can work, though, some configuration is needed. Based on this configuration, Apache Solr can encompass searches across different sites – including sites that aren’t built with Drupal. Creating this custom solution, in conjunction with the Search API and Search API Solr modules, will ensure that the different data types being indexed will be standardized.  

As for the results section, the best approach is a decoupled one. Building out the front-end component in the React JavaScript library allows for robust searches without slowing down the rest of the site. By using Drupal’s CMS, Apache Solr and React’s power in coordination, any organization can create a search feature that quickly indexes vast ranges of data and delivers it in an easily digestible manner. For a deeper dive, Palantir has made their demo of federated search available.

This powerful and streamlined take on site search has a variety of applications. Before releasing the solution, Palantir originally developed federated search for the University of Michigan, as each department ran their own sites on different platforms. Federated search now allows users to seamlessly search for information across the entire school’s network, regardless of the technology used to deliver the content. Beyond university ecosystems, federated search also presents an opportunity for eCommerce. Using this solution, products from different vendors can be consolidated into a simple search.

Thanks to Drupal being open source, organizations can utilize federated search and any other contributed solution at any time. This level of openness is what makes Duo such champions of the Drupal platform. At Duo, we’re committed to exploring new features like this and helping each of our partners think outside the box. If you’re ready to start rethinking your website or sites, we’re just a click away.

Explore Duo

May 16 2019
May 16

“..an inclusive community, we are committed to making sure that Drupal is an accessible tool for building websites that can also be accessed by people with disabilities.”

Calling accessibility as one of Drupal's core values and principles, the Drupal community has always stood to comply with web accessibility standards. Although with an absence of hard and fast rules to adhere to, the community has faced backlash in recent times.

First, with adopting Gutenberg (editor) and second with the release of Layout Builder, there have been some important questions and concerns about accessibility in the community.

This Global Accessibility Awareness Day, an awareness day to focus on digital access and inclusion for the more than one billion people with disabilities and impairments, let's take a look at how close is Drupal to its commitment towards web accessibility.

The Accessibility Controversy

a black and white design with G written in centreIn 2018, with WordPress 5.0 prepared to be released, the Gutenberg editor, a decoupled React based editing experience, was out for testing. Among other concerns like inconsistent user interface behaviour, difficulties with keyboard navigation through blocks ( far too heavily reliant on hover-based functionality), complexity to use it, the assessors were quick to call it inaccessible.

Drupal’s adoption of Gutenberg, got it in the fallout.

In another instance, when Drupal 8.5 released Layout Builder, the lack of accessibility in the feature brought the community into the topic of debate - how strongly does Drupal commit to accessibility?

How Does Drupal Ensure Web Accessibility?

Accessibility is about promoting inclusion than benefitting a small set of people with disabilities. It is about ensuring equal and inclusive access to the web resources, for the widest possible audience, without any bias.

And this has been reiterated in the Web Content Accessibility Guidelines (WCAG), that explains how web content can be made more accessible to people.

Drupal, in its Values and Principles, effectively lays down their commitment towards creating software which conforms to the accessibility guidelines. It conforms to the World Wide Web Consortium (W3C) guidelines which address:

  • Authoring tools, as part of the Authoring Tool Accessibility Guidelines (ATAG 2.0)
  • Web content, as part of the Web Content Accessibility Guidelines (WCAG 2.0)

As a result, it can be used both by developers as well as the site visitors.

Drupal has its own accessibility team, which helps identify the barriers occurring at the code level and the awareness level, and also resolves them. A number of such issues in the core have been identified and resolved, while also creating awareness within the community.

Some of these improvements included: Search engine form and presentation, drag and drop, color contrast, image handling, form labelling and so on.

Accessibility for developers is another added feature in Drupal, and through D7AX, it is an easy job to find contributed modules and themes which also support the development of accessible websites.

Let’s take a deeper dive into the key modules and features of Drupal that help overcome web compatibility issues, and ensure easier web accessibility:

Key Modules

Automatic Alt text It automatically generates an alternative text for images when no alt text has been provided by the user.  Block ARIA Landmark Roles  It adds additional elements to the block configuration forms that allow users to assign an ARIA landmark role to a block.  CKEditor Abbreviation  It adds a button to CKEditor which helps in inserting and editing abbreviations in a given text.  CKEditor Accessibility Checker  It enables the Accessibility Checker plugin in your WYSIWYG editor, which then helps inspect the content accessibility level; and solve them.  High Contrast  It allows the user to quickly switch between the active theme and a high contrast version of it.  htmLawed  It utilizes the htmLawed PHP library to limit and filter HTML for consistency with site administrator policy and standards and for security.  Style Switcher  Themers can provide a theme with alternate stylesheets. Allowing special styling for some part of the site, the module presents all those styles as a block with links. So any site user is able to choose the style of the site he/she prefers.  Text Resize  It provides the end-users with a block for changing the font size of text on your Drupal site.  Accessibility  It gives a list of available Accessibility tests, aligned to guidelines like WCAG 2.0 or Section 508.


Key Features:

  1. Semantics in the Core

Drupal has been built to encourage and support the proper use of semantic markup. Thus composing semantically correct HTML informs the browser and the assistive technology about the type of content it is managing with, and how this relates to other content.

This helps the assistive technologies carry out its activity effortlessly since they now have a structure to work with.

 2. Aural Alerts

Drupal provides a method called “Drupal.announce()” which helps make page updates obvious, in a non-visual manner. This method creates an aria-live element on the page.

 3. Controlled Tab Order

Drupal’s TabbingManager is an awesome medium to direct both non-visual and non-mouse users on the page, to access the prime elements in a logical order. And thus permits more control while exploring complex UIs.

 4. Accessible Inline Form Errors

Drupal forms are now more open to the expansion of available inline form errors. So now, it is easier for everyone to identify what errors made while filling in a web form.

 5. Fieldsets

Fieldset labels are utilized as systems for gathering related segments of forms. When effectively implemented, these labels give visual diagrams around the shape field gathering.

Presently, Drupal uses fieldsets for radios & checkboxes in the Form API. This helps towards additionally upgrading forms in Drupal.

What was the Outcome of the Controversy?

As always, the community has stood by accessibility as one of the core tenets. In a blog, Drupal's commitment to accessibility, Dries Buytaert - Drupal Founder - writes on the issue and how seriously the community takes the commitment to accessibility.

With that said, he announced that the Layout Builder functionality would be in a "stable" state for production use after ensuring that it passes the accessibility gate (Level AA conformance with WCAG and ATAG). This holds for both the authoring tool itself, as well as the markup that it generates.

With accessibility maintaining team, it has been jointly agreed that:

  • The first priority is WCAG 2.0 AA conformance. This means that in order to be released as a stable system, the Layout Builder must reach Level AA conformance with WCAG. Without WCAG 2.0 AA conformance, a stable version of Layout Builder won’t be released. This happened with a stable release of Layout Builder in 8.7.
  • The next priority is WCAG 2.1 AA conformance. Because these guidelines are still new (formally approved in June 2018), the stable version of Layout Builder won’t be held on them but are committed to implementing them as quickly as possible, even if some of the items are after the initial release.
  • While WCAG AAA conformance is not something currently being pursued, there are aspects of AAA that we are discussing adopting in the future. For example, the new 2.1 AAA "Animations from Interactions", which can be framed as an achievable design constraint: anywhere an animation is used, it will be ensured that the designs are understandable/operable for those who cannot or choose not to use animations.

The commitment to this ideal, by the leadership at Drupal and by the larger community, has remained steadfast despite challenges. The announcement and commitment to conform to AA level has reinstated the faith in the community towards its values.  

Ready to build digital experiences that are truly great for your customers - frictionless, accessible, and inclusive? Drop us a line, and our Drupal experts will be in touch.

May 14 2019
May 14

When every business has a website, how do you stand out? Because customers expect so much more from digital brands, utilizing a marketing platform is essential. Marketing automation software enables businesses to deliver personalized engagement, strengthening customer bonds and driving new business.

acquia acquires mautic open marketing platform

Until recently, businesses have, by-and-large, had to rely on proprietary solutions like Marketo and Salesforce Marketing Cloud to handle their needs. Now, Acquia is looking to disrupt the marketplace. The Drupal SaaS giant has just acquired Mautic, an open-source marketing automation and campaign management platform. Now, Drupal users will have an open alternative to manage their customer experience needs.

This is the latest step Acquia has taken toward their vision for an Open Digital Experience Platform. The company has been working in the content management space for years and is now turning toward a data-driven, experience management approach. With their “API-first” philosophy, Acquia hopes to offer Drupal users maximum flexibility and the ability to meet any organizational needs that may arise. This level of freedom gives marketers the chance to customize every step of the customer cycle across channels.

While still a relatively young company, Mautic is a perfect fit for Acquia’s portfolio. While Acquia specializes in content management, personalization and commerce, Mautic will complement their offerings with their specialties in multichannel delivery, campaign management and journey orchestration. And with both Drupal and Mautic built on Symfony and PHP, collaboration and integration will be made easier. With 200,000 installations already, Mautic has already won over many marketers and, with Acquia’s expanded reach, will likely reach many more. Because of Mautic’s API-friendly build, our team at Duo can easily integrate the platform with a site.

Open Marketing (YouTube)

On a more philosophical level, Mautic echoes Acquia’s (and the Drupal community’s) open-source ethos. Currently, Mautic is the only open source alternative to the aforementioned legacy marketing cloud ecosystems. This openness makes it easier for the development community to create marketing platforms built for a company’s specific needs. This ease of use extends to the marketing side, too. Where many proprietary marketing automation software have steep learning curves and are bundled with countless other products in their respective clouds, Mautic’s platform benefits from its ease-of-use and its modern, streamlined design - allowing anyone on a team to get their organization’s message out faster than ever. To take a look at the platform in action, watch the demo embedded below.

[embedded content]

In addition to Mautic’s open offerings, the company also offers several commercial solutions. The first, Mautic Cloud is a fully managed SaaS version of the platform that includes some premium features not openly available. For enterprise clients, Mautic has Maestro. This product allows multinational organizations the ability to segment their marketing efforts by territory, while still allowing for sharing between regions. Campaigns can also be copied and repeated in different territories. These features will remain separate from Acquia Lift, though Duo can handle integrations with either service if needed.

So what does all of this mean for businesses using Drupal? This being an open-source community, it means more freedom! Rather than being locked into whatever is offered by legacy martech vendors, Drupal allows you to leverage best-of-breed services and solutions. At Duo, we’re always striving for more openness. Your solution should match your exact needs and the Drupal environment provides a vast range of solutions to make it your new site a reality. Now, Mautic joins those ranks, and can be used in conjunction with whatever other modules you opt to use. The open source ecosystem that makes Drupal so robust also gives Mautic more flexibility than other marketing automation platforms, and for a cheaper price tag, as well. Finally,

By 2023, spending on global marketing automation is expected to reach $25 billion. This software isn’t going anywhere, so why would you pay for a stale and outdated marketing suite that you may not be able to use to its full potential? With the acquisition of Mautic, Acquia has given marketers a whole new option when it comes to managing customer engagement. Duo can help you navigate the various marketing paths available while ensuring that whatever choice you make will exceed your expectations.

Explore Duo

May 01 2019
May 01

At this year’s DrupalCon, held earlier in April in Seattle, Drupal founder Dries Buytaert gave attendees a preview of the newest version of Drupal: 8.7. Now, the wait is over. Drupal 8.7 is launching today, May 1, adding a new suite of features and fixes that will improve the Drupal experience for everyone with an up-to-date platform.

drupal 8.7 was released on may 1

In his keynote, or “Driesnote,” Dries laid out what made this new release so special. Speaking to the Drupal community at large, Dries shared that the Drupal team had several core objectives when developing Drupal 8.7:

  • Make Drupal easy for content creators and site builders
  • Make Drupal easy to evaluate and adopt
  • Keep Drupal impactful and relevant
  • Reduce total cost of ownership for developers and site owners

Each one of these goals represented a major challenge, but the newest version has delivered a variety of updates that each make Drupal a more robust platform.

Empowering content creators

One of the biggest features in Drupal 8.7 is the newly stable Layout Builder tool. The product of the efforts of 123 contributors and 68 supporting organizations, Layout Builder makes designing pages more user-friendly. As the name implies, the Layout Builder tool enables editors to manually adjust the design and format of a page. With this tool, editors can make changes to the layout without having to involve developers every time. Dries displayed a demo of the Layout Builder tool during the Driesnote, which can be found below.

Along with layout builder, the other major content improvement ushered in by Drupal 8.7 is the updated media module. As of this most recent update, reusable media, images, video and drag-and-drop features for the media module are all stable, with the media library currently in the “experimental” state. Combined with layout builder, these updates make Drupal 8.7 a great update for content editors.

Out of the box functionality

While Drupal 8.7 certainly makes life easier for editors, it doesn’t stop there. New out of the box features make Drupal easier to adopt than ever. New to the Umami theme in Drupal 8.7  are demo articles containing Spanish translations by default and improved accessibility throughout the theme, with new labels and focus styles highlighted. This helps to show Drupal 8.7’s capabilities in terms of both multilingual and accessibility right out of the box. Additionally, the “Welcome tour” feature makes it easier for agencies to demo the platform. All of these features are included with the new update automatically.

Staying relevant

To remain a driving force in the market, Drupal needs to keep up with the times. The biggest breath of fresh air Drupal 8.7 brings to the platform is the addition of the JSON:API to the core. This development extends Drupal’s “API-first” philosophy, enabling decoupled and headless solutions. If this type of buildout is what your organization needs, the Drupal 8.7 update makes developing these popular solutions much easier.

Lowered costs

Because Drupal 9 (D9) is built on the same codebase as D8, the eventual upgrade process will be much easier than a conventional website upgrade. Previously, upgrades were major undertakings that required a lot of development effort. Now, as long as a site is not using any deprecated code, upgrading to D9 will be very straightforward. A tool called drupal-check is already available to check for deprecated code, so it’s already possible to start getting a site ready for D9. In the meantime, Drupal 8.7 offers a number of new features and enhancements and is another step toward the eventual D9 upgrade..

There’s certainly plenty to enjoy with this new release, but the updates don’t stop here. With Drupal on a six-month release cycle, there will be a new version of Drupal on November 1. Drupal 8.8 promises an updated WYSIWYG editor along with a potentially updated Admin UI, an ongoing project for the Drupal team. Beyond that is D9, the latest edition of the platform.

Duo can help you make the most out of Drupal 8.7’s newest features while also planning your roadmap for upgrading. If you’re ready to see what the future of Drupal has to offer, reach out to us today.

Explore Duo

May 01 2019
May 01

Web development has moved forward from writing websites by developing codes to a place where people can assemble the websites. And that is where the Drupal community is focusing on to advance - building assembled web experiences.

Drupal 8.7 releases today, on 1 May. It is in sync with that same roadmap (building assembled websites) providing enhanced customization, stable features, better UI and what not?

Here’s a quick and comprehensive guide for you to track what’s new in version 8.7 and how it paves the way for Drupal 9.

Drupal 8.7 Features and Updates

This is a significant update. It brings with it a stable Layout builder and Media Library, JSON API at the core, tour integration, seamless working of Content Moderation and Workspaces together, and a continued stabilized migration path.

Drupal 8.7 update retains the relevance in the emerging world of web technologies and competition. Riding on its API capabilities, new changes are aimed to be user-friendly.

Here’s a look at the host of features it brings along.

  • JSON:API at Core

    The update brings with it JSON:API at the core, marking another milestone towards making Drupal API-first. API-first means using the flexibility of Drupal to integrate it with other systems and be able to use content anywhere, display as you please.

    Content creators can, now, create their content models without having to write a single line of code.



    JSON:API module for Drupal 8 in action

    The JSON:API module is meant for creating high-performance APIs to expose Drupal data in JSON. It works by creating API endpoints and requires no configuration and the module instantly accesses all Drupal entities.

    Developers and content creators, now, can create their content models without having to write a single line of code. It not only provides a great authoring experience but also a powerful, standards-compliant, web service API to pull that content into JavaScript applications, digital kiosks, chatbots, voice assistants and more.

    This makes it easier for Drupal’s core ecosystem, of web services responsible for third-party content and application, to integrate.

  • Stable Layout Builder

    Released in 8.6 as an experimental module, Layout Builder is stabilized in Drupal 8.7 update. The module allows you to build layouts with ready-to-use multi-column layouts and Drupal blocks without the intervention of a developer.

    It is unique since it can support multiple and different use cases from templated layouts applied to dozens of pieces of structured content, to designing custom one-off pages with unstructured content.

    [embedded content]


    Drupal Layout Builder in action

    Here’s how it can be used in three different use cases:

    • Layouts for templated content: The creation of ‘layout templates’ can be used for a specific content type. Example, blog posts.
    • Customizations to templated layouts: Can customize the layout templates on a case-by-case basis. Example, to override the layout of a standardized product page.
    • Custom pages: The creation of custom landing pages which are not in sync to any particular content type or structured content. Example, a single ‘About us’ page.

      The Layout Builder is more powerful when used with Drupal's other out-of-the-box features such as revisioning, content moderation, and translations.

  • Workflow

    The workflow module enables you to create arbitrary workflows in Drupal and associate them with entities.

    The support for more revisionable properties would allow the staging of both content and associated properties

    However, taxonomy terms were not revisionable.

    The main issue with non-revisionable terms is site-wide previews of not yet published content (nodes, media items, taxonomy terms, menu links, etc.), through the Workspaces module.

    Taxonomy terms are now revisionable using the new API. This comes as part of the Entity system that helps retrieve an entity for converting the schema of a content entity type from non-revisionable/ non-translatable to revisional/translatable.

    This works well with other pre-existing data for the entity type whose schema has been changed and comes handy with content revisioning. The support for more revisionable properties would allow the staging of both content and associated properties.

    EntityDefinitionUpdateManage is now deprecated with no replacement.

    At the moment core only supports sequential revisioning, parallel revisioning support will be added in 8.8.

  • Media Library

    Shipped as an experimental module in 8.6, Media library is now stabilized and good to use.

    It provides a visually appealing interface for browsing through all the media items in your site. With the new version, multimedia properties can be added to content either by selecting from existing media or by uploading new media through bulk upload support. Once uploaded, users can remove or reorder any images ready for import.

    [embedded content]


    Media Library in Drupal 8.7

    It provides an easy way to upload several media assets in your Drupal website quickly. Let’s you add alt-text, check the images before uploading.

    Powered by Views, it allows site builders to customize the display, sorting, and filtering options.

  • Configuration Management

    The configuration management system in Drupal 8 is quite decent and allows configuration to be synced between installations of the same site in different environments. Configuration Management is part of the Configuration Management 2.0 Initiative which aims to include core support for extended workflows.

    The current workflow presumes that the configuration will be exactly the same in different environments. Developers have to edit the configuration when it is not present.

    The idea behind CM 2.0 is to the use case of sharing reusable packages of configuration among multiple sites

    The major drawback which comes as an API for both the DX and API architecture is:

    It allows modifying the sync storage as it is manipulated but since it has no concept of intent, the developer has to know which methods are called in which order of both the import and export process to correctly interact with it.

    Configuration Management 2.0 in version 8.7 allows the altering and importing the configuration. The idea is to the use case of sharing reusable packages of configuration among multiple sites is on (at least!) a fully equal footing with that of staging configuration on a single site.

    This allows the site administrator to review and safely import available configuration updates from installed modules, themes, and the install profile without overriding customizations made on the site. With 8.7 it can add the ability to select and use an existing configuration directory or storage at install time.

    Configuration Transformer API as the fundamental cornerstone has been added to bulk update configuration. It makes it easier for configuration on dev to be different from production

    New/expanded configuration management UIs for the issues (mentioned above) added to par with a new-to-Drupal site maintainer persona in mind. Experimental module for allowing environment-specific configuration has been introduced in 8.7.
    D8.7 INFOGRAPHIC (1)

And Drupal 9 readiness...

In order to give people reasonable upgrade time from Drupal 8 to Drupal 9, Drupal 9 will be released no later than a year before Drupal 8 goes end of life, that is in 2020.

Also, Drupal 9.0 is skipped, as it's intended to be only deprecated code removals, no new capabilities.

Other Important Information

Some other important information to take note of, are:

  1. Removed support for PHP 5

    Drupal 8.7 would no longer support the obsolete versions of PHP. Version 5.5 reached the end of life in 2016 and 5.6 in December 2018 meaning it no longer receives bugfixes, even for very serious bugs that (might) impact Drupal development. Moving forward Drupal encourages to use PHP V.7 or above.

    Since Drupal 8's automated tests require the PHPUnit library, continued use of obsolete version can put security at risk.

  2. End of support for Internet Explorer 9

    Due to a limit of 31 style sheets per page, Drupal dropped support for Internet Explorer 9 and 10 in 8.4. Since Drupal 8.5 and 8.6 retained a workaround to allow 32 or more stylesheets, this workaround has been removed in 8.7.

    Sites dependent on Internet Explorer 9 support should enable CSS aggregation (preferred) or install the IE9 Compatibility contributed module.

  3. Better Symfony 4 and 5 compatibility

    Drupal 8.7 will provide better compatibility with both Symfony 5 and Symfony 4 for faster web development, since Symphony 3 enters the end of life in November 2021. This includes changes in the Container and Translator Interface Symfony components, as well as resolving critical compatibility issues.

    Additionally, numerous critical Symfony 4 and 5 compatibility issues are resolved in this release.

What to Expect from Drupal 8.8?

Here’s what you need to look forward to in Drupal 8.8.

  • The Welcome Tour
    Adding Tour content for those unfamiliar with Drupal. This would help to teach people Drupal with hands-on experience, explaining backend/frontend choices made to build Umami.
  • Composer Support in Core
    Involves making an official method for starting a Drupal site with the composer kickstart template.
  • Admin UI and Javascript Modernization
    The new admin theme is part of the Admin UI and JS modernization initiative and will be released with Drupal 8.8.

    The goal is to create and update the admin look, that defines a complete set of principles while also consisting of visual and behavioural components to combine into a user-friendly interface.

    This will be based mostly on Seven’s styles theme.
    drupal-theme-layout
    menu-theme-layout

    The navigation pages on the admin UI has been designed with an emphasis on readability, and reusability of existing styles from other components.

    language-theme-layout
    Mockup of the interface with text written using the Devanagari writing system

    This would come with various benefits, including improved performance and better support for various writing systems. Using system fonts will also make the UI feel more familiar to the user since it will be closer to the users' environment.

    Drupal 8.8 Feature Freezes: October 2019
    Drupal 8.8 Releases: December 2019

    With Drupal’s commitment to reinventing itself to enable ambitious digital experiences, the community is getting ready for the launch of Drupal 9, and current updates are well in sync with it.

    Have questions about Drupal 8 features or 9 and how it might impact you? Already chalking out an upgrade plan? Our team of Drupal experts and range of Drupal development services are ready to help.

    Drop us a line at [email protected], and get the conversation started.

    Srijan is Signature Supporting Partner to the Drupal Association. With 140+ seasoned Drupalers of which 56+ are Acquia Certified, Srijan has the largest team of Drupal experts in Asia. 

Apr 25 2019
Apr 25

Every year, the Drupal community gathers in a new city for the annual DrupalCon show. More expansive than regional camps, DrupalCon gives attendees from all around the world the chance to collaborate and learn from each other face-to-face.

driesnote confirms drupal 7 support until 2021 

The expansive audience of the convention makes it an ideal venue for Drupal creator Dries Buytaert to address the community. In his “Driesnote,” Dries usually focuses on highlights from the past year and upcoming developments for the platform. As such, the upcoming Drupal 8.7 update got a lot of spotlight, as did the efforts of star contributors working to make Drupal so robust. And with Drupal 9 coming in the not-so-distant future, Dries’ address this year demonstrated the advances being made at the cutting edge of Drupal.

While Dries focused on the present and future benefits of Drupal 8, he didn’t neglect users still on Drupal 7. First launched in 2011, Drupal 7 remains the most widely deployed version of the platform, even though Drupal 8 was released in 2015. The reasons for the relatively slow adoption of Drupal 8 are numerous, ranging from incompatible modules to the standard costs of a redesign. Dries understands that, and in this year’s Driesnote, offered words of support to those who have not made the change.

“There’s no need to panic,” Dries said. Indeed, he said that Drupal 7 will continue to be officially supported for over two-and-a-half years, until November 2021. At that point, Drupal 7 will reach its end of life.

What happens in November 2021, you might ask? We’ve covered the upcoming Drupal release pipeline in an earlier blog post, but the major driving force behind this date is Symfony 3. A major dependency for Drupal 7 and 8, when Symfony 3 is sunset in November 2021, it will expose sites running on D7 and D8 to security threats. Because Symfony 3 is also a major dependency for Drupal 8, most Drupal users will need to upgrade to Drupal 9 before November 2021.

As Dries said, though, there’s no need to panic if you’re on Drupal 7. This end-of-life date is still over two years away, giving you plenty of time to consider your options and decide how to move forward. In the meantime, Drupal 7 will continue to be supported by both the open-source community and agencies like Duo. 

If you’re running Drupal 7 and want to get a head-start, there are a few options. Upgrading to Drupal 8 is the most logical route, as it the direct successor to D7. The Driesnote also noted that more and more modules that D7 users are accustomed to using are now functional in D8, which will make the transition smoother. The big draw of this path, however, is the ease with which you’ll be able to upgrade to Drupal 9. Drupal 8 is built on the same codebase as D9, which means that an upgrade between those two systems will not require a major design or development overhaul.

Another option for D7 users is to bypass D8 altogether. Jumping from Drupal 7 to Drupal 9 would be more akin to a traditional redesign, both in terms of the work involved and the cost. That being said, even though moving from D8 to D9 will be relatively easy, it will still require some effort. Going from D7 to D9 streamlines the process, requiring only one comprehensive upgrade.

Whichever path you take, rest assured that there is time. Dries acknowledges that there are still many users who enjoy the benefits of Drupal 7, and this year’s Driesnote signifies that this crowd hasn’t been forgotten. While ever Drupal 7 site will eventually need an upgrade, users can rest easy knowing that they have plenty of time.

When the time comes to make a decision about upgrading, Duo can help you chart your journey ahead. Whether you want to stay on Drupal 7 or can’t wait for Drupal 9, we’re committed to delivering the best possible version of your site.

Explore Duo

Apr 22 2019
Apr 22

On the evolution of web content approaches and technology perspectives

Change is in the air!

In more ways than one, our world is in the throes of change. We live in an era where politics and governance, economy and international relations as also business and technology are all careening through an edge-of-the-seat roller coaster ride, from one ‘cutting edge’ to another.

Ideas, values, systems, processes, frameworks - what held good yesterday is today up in the air. We see this in our lives - professional and personal. We seek the new constantly, be it a new Mar-Tech platform every few months for our businesses, or a new Soc-Med channel to post our holiday pictures on, discarding the one that was ‘trusted’ till yesterday.

Not surprisingly, this affects both organizations and individuals - the changes in our experience of institutional frameworks, business models, corporate ethics, interpersonal relationships, the way we shop, eat, dress, travel, even our experiences of climate change.

The bit about climate change brings me to my own experience within a year, at two successive DrupalCamp events.

The first weekend of March 2018 caught me in the middle of the ‘Beast from the East’ cold snap at City University, the traditional venue for DC London. Trudging from Angel tube station down a snow-laden Goswell Road to the venue, in the lowest temperatures I have ever experienced in London.

In contrast, London saw unseasonal, unusually warm weather during DrupalCamp 2019. The weather was almost tending to summer-hood, the very same week exactly a year on. The odd tree on Goswell Road, standing like a leafless sentinel in front of a corner townhouse, provided an isolated reminder that it was officially still winter.

Almost like climate change in reverse (is ‘Brexit in reverse’ possible? Let’s leave that topic for some other day)

Engaging People, Evolving Paradigms, Enlightening Perspectives

DrupalCamps are largely meant to be developer-centric affairs… but DC London goes the extra mile to make it relevant to the business-minded as well. The DC London CXO Day is especially geared to deliver topics of relevance to business owners, managers, and of course CXOs.

group of people looking ahead to the speaker and the presentation

This year’s CXO Day was no different, and it went on to address the challenge of ‘change’ enveloping all of us. Three very lively and insightful presentations caught my attention -

  1. Prof. Costas Andriopoulos’ (CASS Business School) talk on ‘Leadership and innovation in scaling enterprises’ - dwelt upon the challenges of size.
    • initial success breeds complacency and arrogance
    • an ageing leadership is unable to embrace technology shifts
    • bureaucracy and set structures tend to be risk-averse

      Creativity and innovation are the victims of this inability to change, in the face of change.

      The professor emphasized that change can be harnessed via ‘breakthrough innovation’ -

      • empower people to break rules - those at the fringes bring in outside perspective
      • enable ‘project labs’ - to foster innovation initiatives
      • encourage ambidexterity - simultaneously exploit current competencies and explore new domains
  2. Michel Van Velde (Director, One Shoe) - on ‘Radically Candid’, the modern psychology that leads to effective leadership.

    Michel drew from the concepts of Eric Berne’s Transactional Analysis, and Thomas Antony Harris’ book ‘I’m Ok, You’re Ok’ - to give a contemporary and germane take on modern technology to effectively lead and bring about change - Radically Candid.

    He explained beautifully how the Drama Triangle traps us into responding in set ways to situations. This, in turn, prompts others to be unyielding in their stance, and the interaction hits a cul-de-sac.

    The conflicting parties are trapped in the rigidity of their responses, rendering any resolution impossible.

    Recognizing we are trapped in the Drama Triangle opens up our minds to deviating from our set position, enabling others to react differently, and Change becomes possible.

  3. Melissa Van Der Hecht (CTO, Mulesoft) - ‘We all have Superpowers’ gave a hugely engaging talk on why we need to be more open about diversity in technology.

    She shared insights on how we tend to think of ‘diversity’ in very uni-dimensional ways - gender for example - but it actually covers several aspects. Age, background, education, experience, race, nationality, disability are all elements of diversity - but it's what makes one stand out ahead that counts.

    Melissa illustrated how diversity is a key driver to innovation and change - and cited studies and statistics to show -

    • companies with more diverse teams report ~19% higher revenues
    • why diversity - better culture, higher performance, better customer engagement
    • coaching employees to harness their strengths encourages inclusion 

Content - Context less and channel-agnostic

Some very interesting and instructive developer sessions over the next two days that showcased how content technology is maturing with ever-evolving market contexts. I missed out quite a few, but the ones that caught my eye -
  • NLP and Drupal8, by iampritish - Leveraging NLP for content tagging makes it easier to showcase, focused, summarised content
  • Browser Wars 2019 - Implementing a Content Security Policy, by iAugur - The security of web content is live threat globally - security headers are easy to implement and add an extra layer of security against malicious attacks
  • The Front-end CSS battle - Flexbox Vs Grid, by surbhig - The choice of a ‘layout-first’ versus ‘content-first’ helps create responsive designs that render content across multiple devices and platforms
  • Reusing Components between Angular, React, Vue and Web-Components - by tkssharma - Reusing components between frameworks helps drive consistent user experiences across a plethora of applications or channels
  • How to make Drupal editor-friendly - by jaro.2801 - Drupal8 offers a highly enhanced UX for content editors; this presentation shows how to make the most of it
Finally, Preston So’s Sunday morning keynote was a pleasure to listen to. Speaking on ‘decoupled Drupal and context-less content’, he expounded on how rising expectations from developers, editors and marketers could put Drupal at risk of a credibility chasm.

This may start to happen when Drupal content is served to multiple channels beyond just the website. The multitude of devices, screens, wearables and apps that push content to us in myriad ways - audio, video, text, AR/VR as well as interactive, streaming or static.

This is the ‘Change’ digital technology is going through - an explosion of channels, along with rapidly evolving front-end Javascript frameworks. In such a scenario, content shouldn’t just be context-specific, for example just mobile-friendly or website-friendly. Content in its pure form should be channel-agnostic - able to adapt to different contexts, just the way water adapts to the shape of the vessel its poured into.

Preston explained how decoupled Drupal helps configure front-end channels (the ‘vessels’) that own their contexts fully, enabling enterprises to target specific audiences. A whole new proposition to leverage Drupal in ways that evolve with the business.

One for the road…

Come to think of it - was the 2016 Brexit vote an outcome of the Remainers’ inability to effectively channel its messaging content to its targeted audience? Is the current imbroglio in the UK Parliament a result of similar shortcomings in the current dispensation?

As I said, a topic for another day. However, AI and digital technologies are increasingly impacting the spread of news, ideas and public opinion. In the post-truth era, the standing of media companies - to take one example - depends more and more on how they create and disseminate credible content to discerning audiences, across their preferred channels.

Will the near future see spiralling audience demand for peer-reviewed journalism, tagging of fake news, detection of fraud content, false references, fabricated statements? Technologies such as natural language processing, blockchain and bigdata + cloud are already addressing similar challenges for the scientific publishing world - how far behind is mainstream media?

The road ahead perhaps, for a modern CMS working with such technologies of tomorrow, backed by secure cloud platforms - an all-encompassing enterprise digital ecosystem. A topic for future DrupalCamps?

Truly, change is in the cloud, er… air.

Rajat Lal is the Business Head, UK and Europe at Srijan Technologies

Apr 18 2019
Apr 18

In the Drupal community, the annual DrupalCon show is the biggest event of the year. Held in a different city each year, the event brings Drupal users together for a week of sessions and networking.

drupalcon accessibility lessons

With so many people and agencies committed to Drupal in attendance, DrupalCon is the perfect opportunity to provide training and guidance. This year’s show, DrupalCon Seattle, dedicated its first two days to community summits and full-day training sessions. One of these summits tackled one of the most prevalent issues of the year for Drupal: Accessibility. Through a combination of keynotes, panels and breakout sessions, the summit’s organizers gave attendees actionable insights and new perspectives on front-end accessibility.

The day kicked off with a keynote from OpenConcept’s Mike Gifford, who spoke about his agency’s work with the Canadian National Institute of the Blind (CNIB). For the organization’s 100-year anniversary, the CNIB sought a rebrand and redesign with an emphasis on making their site’s content more accessible. As OpenConcept learned, creating an accessible platform is easier said than done. To illustrate how difficult the process can be, Gifford wryly offered this Donald Rumsfeld quote:

There are known knowns; there are things we know we know. We also know there are known unknowns; that is to say we know there are some things we do not know. But there are also unknown unknowns — the ones we don't know we don't know.

In the context of web development, accessibility is often an “unknown unknown.” Without extensive testing, programmers won’t know that any given element won’t limit access for certain users. As such, one of the major lessons that Gifford shared was the importance of manual testing.

“Automated accessibility testing will only get you 25 percent of the way there,” Gifford said. “Manual testing is essential, and this mostly comes down to getting rid of your mouse and tabbing through a site."

Download Accessibility Checklist

As Gifford and speakers from subsequent panels noted, the best method for testing a site’s accessibility is to actually use it. While a lot of problems can be found by, as Gifford said, unplugging your mouse and using the “tab” key to navigate, this approach can still miss blind spots that able-bodied users wouldn’t consider. Alternatively, hiring disabled users to perform QA testing on a given site is often the best solution. 

This ethos is especially true when building mobile sites. Another keynote speaker, Gian Wild of AccessibilityOz, covered the mobile accessibility testing process in detail. Manual testing on real devices can root out common traps, like if a site’s buttons are too small to be navigated with a finger or if links aren’t underlined. For more common errors, Wild’s slide deck can be found here.

As important as manual testing is, though, automated accessibility tools are a vital element of the accessible design arsenal. Though pervasive and subtle errors still require hands-on QA testing, automated solutions will identify many more thousands of minor issues in a fraction of the time. As such, using these tools in coordination with manual testing will ensure that your site is as accessible as can be.

During the final breakout session of the summit, attendees shared which tools they think work best for rooting out accessibility issues, many of which conveniently come in the form of browser extensions. Some commonly mentioned tools included:

We’ve previously profiled several accessibility tools, and you see which one is best for you here.

As challenging as accessibility testing can be, the reward of expanding your audience is well worth it. Fortunately, the Drupal platform helps ensure out-of-the-box accessibility features. During his keynote, Gifford pointed out that Drupal design patterns have already been tested, known bugs are listed transparently, and the development community actually cares about the issue. In fact, OpenConcept’s work for CNIB produced several fixes and modules that can now be utilized by any Drupal user. These contributions and further info about the CNIB redesign can be found on Gifford’s slide deck here

With a senior-level team of designer and developers, Duo can apply these lessons to sites across industries. Our commitment to accessibility means that every site we build will be open to all users. To learn more about our process and values, reach out to our team today!

Explore Duo

Apr 08 2019
Apr 08

For the longest time, web content had one purpose - to get pushed on a web page. But everyone today wants content to be available across the board - on mobile devices, native apps, digital signage, and show up on third-party sites and social networks - if it is to garner the right audience.

However, making this happen is easier said than done. Some of the persistent challenges faced by large editorial teams involve:

  • Coordinating and approving content that’s ready to go live

  • Ensuring authors and contributors can access a central system to create/submit content

  • Publishing a number of content pieces on different websites/subdomains.

Introducing Content Staging, Synchronization, and Syndication

Between 2010 and 2016, the media consumption grew at a 2% rate. It makes one thing clear that people love to consume content and they will in the future as well.

This, in turn, puts a lot of pressure on content creators and marketers to create and push new pieces of content.

Here’s how you can ensure quality and quantity production:

Staging

Creating quality content involves a lot of work, checks, and approval. Big publishing websites might come across several challenges in the process, such as:

  • Publishing a number of articles at the same time, and doing it across different websites/ sub-domains

  • Getting approval in a centralized system

Intricate publishing workflow is a critical part of the content strategy for any organization that employs distributed management.  Editing the content on the live site can result in accidental publishing. To avoid that, a separate staging environment is needed in a robust workflow.

Staging and publishing without requiring the editor to log into the target site is what content staging would help with.

Synchronization

Once the content is approved on the different environments, it must be automatically updated for other website environments. Synchronization helps you keep your environments in perfect sync by automating the secure provisioning of content, code, templates and digital assets between them.

Source: content Sync

Administrators can create and schedule multiple synchronization tasks to automatically occur in the future. It will target different destination servers and websites, or manually execute synchronization tasks through the user interface.

Developers can leverage the API and event handlers to automatically synchronize any type of staging tasks according to custom requirements.

Syndication

The web is big and noisy. So much so that even though you are targeting a niche audience, chances of them landing on your blog depletes with each day. Syndication gets your content in front of a different audience who might not be aware of your website otherwise.

“Syndication is important because it generates brand awareness and more traffic.”

content_syndication_staging_and_sychronization_with_drupal_srijan technologies                                          Drupal websites often syndicate content from Drupal planet

In simple terms, content syndication is republishing the content on a third-party website. Syndication works great for national and international media and publishing websites. There is no restriction on the kind of content that can be syndicated. The list can include blog posts, articles, infographics, videos and more.

It is a low-cost strategy which media and publishing websites like Huffington Post, CNN,  and NYTimes often use to garner a new audience. Syndication brings free exposure, backlinks, and greater organic traffic.

the_syndicate_image_srijan technologies

However, syndicated content is ultimately duplicate content. And duplicate content can create havoc with your SEO because Google loves unique content.  

While ranking the content it will only index the version that is original and larger, high-traffic website. You can make your syndicated content SEO-friendly by ensuring it is indexed correctly, on your site and on your syndication partner’s site.

Drupal Solutions for Content Staging, Synchronization, and Syndication

Drupal’s digital experience platform knows that your content must reach more than just websites. So yes, of course, it has modules for staging, syncing and syndication.

1. Workflow

Workflow, as the name suggests creates arbitrary workflows. Creating different workflows for the content saved as ‘draft’, ‘review’ and ‘published’, it can be assigned to the story node type.

  • Only users with role 'chief editor' can set stories to the published state. It also allows to set up workflow to alter states from form, page, comment, a special block, and a special workflow tab.

This module is available for Drupal 8.

2. Deploy

The Deploy module lets users to easily stage and preview content. It can manage the dependencies between different entities, like node references, automatically.

Designed to have a rich API which can be easily extended in a variety of content staging situations, Deploy can be used for both single and cross-site staging.

It should be noted that the Deploy module doesn't provide any settings or configuration pages, and the user must ensure that the target workspaces and/or remotes are configured correctly (workspaces configuration pages are provided by Workspace module).

For UI, Deploy provides just a link to run a deployment between current active workspace and its target.

This module is available for Drupal 8.

3. CMS Content Sync

CMS Content Sync provides content synchronization features between Drupal sites using a Node.js based Sync Core. It is built to support the synchronization of a huge amount of data, including content and media assets between many Drupal sites that can't be handled by Drupal itself.

Source: DrupalEurope

The three use cases for the CMS content sync are:

Content Staging: Content Sync allows you to test code updates with your content and publish code and content simultaneously. It further allows editorial review processes to ensure consistent quality of content.

Content Syndication:  For distributed teams, it allows the content to be updated and deleted centrally. It pushes content and media items at any of your sites to publish them on any targeted remote site automatically.

Content Pool: This feature lets you update and delete these items from the source site or allows you to completely customize it on the remote site. Further, you can connect the remote sites. Each content item comes with a preview and link to the source site that makes it easy to identify and select.

If your enterprise manages a large volume of content over a multi-site architecture, staging, syndication, and sync are crucial. Srijan’s expert teams can help you optimize these processes and follow industry best practices. Just drop us a line and our team will be in touch.

Apr 02 2019
Apr 02

For many businesses, eCommerce is an increasingly important trend. With the potential for frictionless and simple exchanges, doing business on the web has never been more appealing to customers. To make eCommerce work for your business, though, our site needs to be robust enough to handle every step of every transaction.


drupal decouples commerce

Photo by Igor Miske

With its open source community and robust core, the Drupal platform is a worthy solution for any and all eCommerce needs. While a site built on Drupal will have the enterprise capabilities needed to handle a wide array of business needs, one of the major selling points of the platform is its flexibility. Drupal has the ability to be decoupled, allowing you to use Drupal as your background CMS while utilizing a third-party solution for your front end. If your brand is tied to an existing look or design, a decoupled or “headless” solution will let you have your cake and eat it, too.

As you might imagine, headless solutions have major implications for the possibilities of eCommerce platforms. At this year’s MidCamp, an annual meetup of the Drupal community in the Chicago area, Commerce Guys Product Lead Matt Glaman took a look at the future of headless commerce solutions. What emerged from the session painted a picture of progress, as developers are continuing to create solutions in Drupal that will power a wide array of eCommerce solutions.

Decoupled Drupal Facts & Myths

Leading the path toward making headless commerce more feasible is Commerce Guys, a Drupal software firm that held a couple of events at MidCamp on the subject. Best known for creating the Drupal Commerce module and the shopping-cart software Ubercart before it, Commerce Guys brought years of experience in the eCommerce space to this year’s event.

Offering a look at the technical side of Drupal-based eCommerce, Glaman examined the various challenges and solutions surrounding headless commerce. As he explained, the heavily structured data model of eCommerce in general presents a challenge, as do the relationships between the various layers in a site, such as the data and presentation layers. Making sure that the connections between the Drupal-backend and the myriad of frontend possibilities are robust and stable is essential to making headless commerce solutions work for users.

To address these challenges, Glaman highlighted a variety of existing API solutions. To enable headless commerce, the available options include the GraphQL data query language, JSON-RPC, JSON API and the RESTful Web Services spec. Though the latter two have the convenience factor of being included in Drupal Core, all of these solutions have their strengths and weaknesses in the context of headless commerce.

The efficacy of each solution varies depending on which stage of the eCommerce process you look at. For catalogues and product display pages, using the JSON API offers strong query capabilities but doesn’t support mixed-bundle collections. A GraphQL solution, on the other hand, supports cross-bundling but queries can become very large. Most existing solutions also struggle with “add to cart forms,” as it can be challenging to create reusable solutions. Overcoming that hurdle requires using solutions in concert, such as a GatsbyJS:React and GraphQL build. Finally, for carts, the JSON API requires integration with a Cart API, while the aforementioned query issues with GraphQL require the use of GraphQLMutation plugins to solve. For a deeper look into the nuances of these existing headless commerce solutions, you can watch Glaman’s full presentation here:

[embedded content]

So, while headless commerce in Drupal is achievable, it takes some effort to get to a point where it can handle your business’ eCommerce needs. Luckily, the strength of Drupal’s open source community means that you don’t have to wait for the Commerce Guys to fix everything. A firm like Duo can help you fine-tune an eCommerce solution to fit your needs. Don’t just take our word for it; our previous work with the Chicago Botanic Garden demonstrates our prowess in designing unique and robust eCommerce platforms.

If you’re interested in exploring a headless commerce platform on Drupal or are just looking to make your online business run more smoothly, Duo is the right partner for you.

Explore Duo

Feb 21 2019
Feb 21

A PHP code execution bug affecting the Drupal core CMS has been discovered. The Drupal team has released a highly critical new security patch as a fix, urging all system administrators to update affected modules and configurations immediately.

drupal security patch

Not all Drupal sites are affected by the bug. According to the security advisory issued on drupal.org, sites that meet one of the following conditions are affected: 

  • The site has the Drupal 8 core RESTful Web Services (rest) module enabled and allows PATCH or POST requests, or
  • the site has another web services module enabled, like JSON:API in Drupal 8, or Services or RESTful Web Services in Drupal 7.

This bug arose because some field types are not properly sanitizing data from non-form sources. This enables arbitrary PHP code executions in certain cases. If not dealt with, a malicious user could exploit the bug to invade a Drupal site and take control of an affected server. Given that Drupal is such a popular website publishing CMS worldwide, with over 285,000 sites running on Drupal 8 and more than 800,000 sites running Drupal 7, a security issue of this magnitude warranted a swift response.

Per the advisory released on Wednesday, Drupal recommends users who may be affected to take the following steps:

If a site update cannot be updated immediately, the Drupal Security Team recommended another set of steps. Site admins can an disable all web services modules or configure their web servers to not allow PUT/PATCH/POST requests to web services resources.

The security patch was widely released on Wednesday, but Drupal considered the issue serious enough to let admins know about the release a day in advance. Duo was one of the agencies informed and our team got to work as soon as the patch was released. The advance warning gave our developers enough time to block out time on Wednesday afternoon to ensure that every site we’re responsible for was updated immediately. By the end of the day, we had patched all affected Duo client sites. 

While working with an agency helps guarantee a proactive solution to security fixes, Drupal’s in-house security team also plays a major role in maintaining diligence. A team of over 30 volunteers, the Drupal Security Team only recruits from experienced members of the Drupal community. As such, these active and committed watchdogs are typically able to identify problems before they become widespread. The current bug, for instance, was identified by the Drupal Security Team.

A strong security apparatus means nothing, however, if users don’t put in the necessary effort to keep their sites safe. In 2018, the Drupalgeddon 2 bug affected over a million Drupal sites. While many users subsequently patched their servers, an analysis conducted a couple months after that bug was discovered revealed that over one-hundred thousand sites remained vulnerable. All of the foresight in the world can’t protect a site if security concerns aren’t addressed as soon as they’re brought to light.

While major security issues like the one this week and Drupalgeddon 2 are rare, all code has bugs. The best thing a site can do to defend against potential vulnerabilities is to be proactive, actively searching for and fixing issues. Duo offers these protections on a continuous basis and, as part of the Drupal community, are able to discover and implement solutions as soon as they become available. In an increasingly digital world, it’s critical that companies find a partner who can handle your cybersecurity needs promptly and without complication.

Explore Duo

Jan 30 2019
Jan 30

If you were an early Drupal 8 adopter you've might have downloaded and installed your Drupal 8 sites by downloading a tarball or using Drush. We did as well, but the benefits of using Composer are so great that it's time to convert those in to being Composer-managed.

Luckily, grasmash has built a great Composer plugin called Composerize Drupal which does all the heavy-lifting for us.

Here's how we did it:

Before you even begin, make sure you branch out $ git checkout -b chore/composerize-drupal

And then we installed the Composer plugin globally:

composer global require grasmash/composerize-drupal

Consider the plugin options available:

  • Use the --exact-versions option if the site is big and complex. Especially if you don't have any good test coverage to ensure your site doesn't break. The option sets the constraints of your composer.json to the exact versions of your currently downloaded modules.

Now we run the command:

composer composerize-drupal --composer-root=. --drupal-root=. --exact-versions

Next:

  • Update your .gitignore and ignore the vendor/, core/ and modules/contrib folders. If the files were already commited you also need to remove them: Ignore files that have already been committed to a Git repository
  • Re-apply your patches! Since all the core code and contrib. modules are managed by Composer you'll need to add those patches to your composer.json:
    Something like this:
    "extra": {
        "enable-patching": true,
        "patches": {
            "drupal/core": {
                "2492171 - Adds transliteration to uploaded file and images": "_kodamera/patches/use_new_transliteration-2492171-72.patch"
           }
       }
       ...

When you run composer install they are automatically applied for you. No more manually work here. Yay!

Do some regression testing and if everything looks fine, you're done! Commit and deploy :)

Jan 22 2019
Jan 22

[embedded content]

Over the years I’ve written a fair bit about Drupal and its modules, but all the videos and tutorials focused on a single module or topic.

So I decided to try something different and record a video where I build a whole website in a single go. I recorded the video in one night and only stopped recording to get a drink.

In this video, which is over 3 hours long, I’ll teach you how to build a basic directory website. We’ll start right at the beginning by setting up a local Drupal site for this we’ll use DDEV-Local. Then we create content types, create a sub-theme, create a few custom views, a search page, media management functionality and so much more.

I’ve broken out the video into sections below with timecodes and extra resources. For the content below to make any sense you should follow along by watching the video.

Enrollments are now open for the Drupal 8 Site Building Bootcamp: 7-week program, 2 live lectures per-week. Enroll NOW!

1. Set up Local Drupal Site

Time: 00:01:33 – 00:09:49

Download Drupal

We first need to download the Drupal codebase, run the following Composer command:

composer create-project drupal-composer/drupal-project:8.x-dev SITE_NAME --stability dev --no-interaction

Replace SITE_NAME with the name of the folder.

Tip: If you want to speed up Composer then install the prestissimo plugin. This is a Composer plugin and has nothing to do with Drupal.

Configure DDEV-Local

We’ll use DDEV-Local to run our local Drupal 8 site. It requires Docker to run, and you can get the install instructions from their documentation site.

Once you’ve installed DDEV-Local go to your Drupal site within the terminal and run:

ddev config

You’ll be prompted with a few options, and it’ll configure the environment.

MacOS Users: If you’re using macOS make sure you set webcache_enabled to true in the ddev config.yml.

Go to your Drupal codebase and open .ddev/config.yml and change:

# From:
webcache_enabled: false
# To:
webcache_enabled: true

Time: 00:06:58

Links:

2. Create Content types and Taxonomy Vocabularies

Time: 00:09:50 – 00:29:08

Just like on any Drupal site we need to build the data model: content types and taxonomy vocabularies.

Content Types

Listing:

  • Body
  • Email
  • Listing categories
  • Logo
  • Website

Blog:

  • Body
  • Comments
  • Featured image
  • Tags
  • Blog categories

Taxonomy Vocabularies

  • Listing categories
  • Blog categories

Links:

3. Modify Content types

Time: 00:29:08 – 00:41:20

Once the content types have been created we’ll need to modify them. For this, we’ll use Display Suite.

To install Display Suite, run the following command:

composer require drupal/ds

If you’re keen to learn more about Display Suite check out our following tutorial series:

  1. How to Customize Content Pages
  2. How to Use Display Suite Fields
  3. How to Use Switch View Mode Sub-module
  4. Webinar: Customize Content Pages using Display Suite in Drupal 8

4. Create Bootstrap Sub-theme

Time: 00:41:22 – 01:01:40

We’ll use the Bootstrap theme on the site, and we’ll create a basic CDN sub-theme.

If you need step-by-step instructions on creating a Bootstrap theme, then read our “Getting Started with Bootstrap in Drupal 8“.

Install the theme using this command:

composer require drupal/bootstrap

Please note: The Bootstrap theme (as of this writing), only supports Bootstrap 3, not 4. If you need a Bootstrap 4 theme look at Barrio or Radix.

We have a tutorial on Barrio called “Getting Started with Bootstrap 4 using Barrio in Drupal 8“.

Bootstrap Layouts

The Bootstrap Layouts module ships a bunch of prebuilt layouts for Drupal 8. We’ll use these layouts in Display Suite.

composer require drupal/bootstrap_layouts

If you want to learn more about Bootstrap Layouts, then check out our tutorial “How to Implement Layouts using Bootstrap Layouts in Drupal 8“.

Links:

5. Block and Menu System

Time: 01:01:42 – 01:15:03

Once we’ve created our sub-theme, we’ll create four new footer regions.

Add the following into your theme’s .info.yml:

regions:
  footer_one: 'Footer one'
  footer_two: 'Footer two'
  footer_three: 'Footer three'
  footer_four: 'Footer four'

Add the following into page.html.twig (make sure you override the Twig file):

<div class="footer footer-grid {{ container }}">
    <div class="row">
        <div class="col-sm-3">
            {{ page.footer_one }}
        </div>
        <div class="col-sm-3">
            {{ page.footer_two }}
        </div>
        <div class="col-sm-3">
            {{ page.footer_three }}
        </div>
        <div class="col-sm-3">
            {{ page.footer_four }}
        </div>
    </div>
</div>

6. Views

Time: 01:15:03 – 01:38:10

We need to create a few custom Views for our website. The first one, which lists blog content is fairly simple.

The second, which is “My listing” is complicated because you have to deal with contextual filters.

Read our tutorial “Add Custom Tab to User Profile Page with Views in Drupal 8” for a step-by-step tutorial on implementing this type of View.

7. Build Search page using Search API

Time: 01:38:10 – 02:10:32

We’ll use the Search API and Facets module to build our custom listing search page.

Download the required modules using the following command:

composer require drupal/search_api drupal/facets

Watch our webinar “How to Build Custom Search Pages in Drupal 8” which covers the core Search module and Search API.

Links:

8. Media Management

Time: 02:10:55 – 02:30:54

We now need to add media handling functionality to the directory site.

Run the following Composer command to download the required modules:

composer require drupal/entity_embed drupal/ctools drupal/entity_browser drupal/inline_entity_form

For a detailed tutorial on configuring all this stuff and more go to “Managing Media Assets using Core Media in Drupal 8“. And there’s a video: “Live Training: Managing Media Assets using Core Media in Drupal 8“.

9. Roles and Permissions

Time: 02:30:56 – 02:51:10

Now we need to create a role called “Contributor” and configure its permissions.

To allow users to publish/unpublish listings, you’ll need to use Override Node Options.

Install it using the command below:

composer require drupal/override_node_options

The “Contributor” role needs the following permissions:

  • Use the Contributor HTML text format
  • Image: Create new media
  • Image: Delete own media
  • Image: Edit own media
  • Listing: Create new content
  • Listing: Delete own content
  • Listing: Edit own content
  • View own unpublished content
  • Override Listing published option

Create Registration Page

To create a registration page, we’ll use Multiple Registration.

Run this command to install it:

composer require drupal/multiple_registration

Read our “Create Individual Registration Forms using Multiple Registration in Drupal 8” for a detailed tutorial on the module.

Links:

10. Paragraphs

Time: 02:51:10 – 03:06:45

We’ll use the Paragraphs module to allow an editor to add a Bootstrap Jumbotron to a page.

Install the module by running:

composer require drupal/paragraphs

If you want to learn more about Paragraphs, then check out our free course, “Build Edge-to-edge Sites using Paragraphs in Drupal 8“.

Links:

11. Webform

Time: 03:06:47 – END

We’ll use the Webform module to build functionality which sends an email to the owner of the listing.

You can install Webform by running:

composer require drupal/webform

Below is the token which is used:

[webform_submission:submitted-to:author:mail]

Links:

Summary

I don’t expect many people to make it to the end of the video but if you did, congratulations! I hope you learnt something new by seeing how a Drupal site is built.

We can often learn a lot just by watching a developer build something.

Ivan Zugec

About Ivan Zugec

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 10 years and has successfully completed several large Drupal projects in Australia.

Jan 16 2019
Jan 16

In a past life, I worked as an editor for a couple of B2B websites. The first one ran on Drupal 7, while the second, launched several years after the first, was built out on Drupal 8. When this D8 site was ready for action, I was eager to dive in and test out all of the bells and whistles.

drupal admin ui

While I appreciated much of the streamlining and improved functionalities between the two versions, I couldn’t help but notice that the user interface (UI) for Drupal 8 wasn’t much different from Drupal 7.

As it turns out, I wasn’t the only one who saw the resemblance.

In a recent blog post, Drupal founder Dries Buytaert addressed criticisms from the community regarding the Drupal admin UI. Acknowledging that the interface was dated, he wrote:

This critique is not wrong. Drupal's current administration UI was originally designed almost ten years ago when we were working on Drupal 7. In the last ten years, the world did not stand still; design trends changed, user interfaces became more dynamic and end-user expectations have changed with that.

To address this issue, Dries continued, the Drupal team is going to revamp the Drupal admin UI. From the inside and out, this new UI is going to become more in-line with a modern editing experience.

There have been attempts to fix or update the admin UI before, but this new effort is wider in scope. Contrasted with a component like the Material Admin theme, which is also meant to modernize the backend editing experience, Drupal’s plan for a new admin UI is part of a comprehensive modernization strategy. The Admin UI & JavaScript Modernization initiative seeks to update Drupal’s APIs and underlying JavaScript code. This multi-year initiative’s ultimate goal is to make Drupal both more compatible with decoupled applications and easier to navigate for end users.

While these UI advances sound tantalizing, they’re a bit far off, as this initiative will take several years to complete. As the first phase of this plan, however, the Drupal team has a solution they’re planning on releasing sooner. In this case, they’re taking a cue from the community and creating a new theme known as Claro.

With a beta anticipated to come out in Spring 2019, Claro represents an early version of the Admin UI & JavaScript Modernization Initiative’s goals. Claro will be built along the same design principles that guide the initiative despite being built from the D7 core theme. While this first step is limited to visual improvements, insights gained from its adoption will be used during the larger modernization initiative. By developing this temporary solution, Drupal is giving users a chance to experiment with a version of the new layout while still staying open to feedback.

These gradual technical changes are much anticipated, but the big takeaway is that this isn’t just a cosmetic upgrade. Many of the guiding principles behind the admin UI modernization initiative are rooted in accessibility, responsiveness and collaboration. Thanks to the updated JavaScript-based UI, the interface will be React-powered, making the experience more app-like (read: intuitive). Design elements like iconography and colors will be simplified for easier understanding. While an update of this magnitude could easily have eschewed these concerns and opted for a purely aesthetic redo, signs point to a revamped admin UI that will improve the editorial experience for everyone.

Based on these defined principles and the level of attention already dedicated to the project, the Drupal team’s commitment to improving its user experience in this case cannot be understated. When users identified an outdated admin UI as an issue, Drupal offered both a short-solution to address the problem while being open about plans and philosophies for long-term development. By the end of the process, the out-of-the-box Drupal admin UI will be able to compete with other content management systems in terms of usability and appearance.

At Duo, we're committed to making sure that editors can easily and effectively manage their content. If you have any questions about Drupal or any new features on the horizon, please feel free to reach out.

Let's Talk!

Jan 09 2019
Jan 09

There’s no getting around it: Website redesigns are expensive, arduous processes. From project management to quality testing, the challenges involved in undergoing such a design overhaul are legion. Given the costs involved and the extent of labor needed to update any given site, delaying or putting off a major design overhaul is an understandable stance from business owners.  

drupal 8 upgrade

Photo by rawpixel

Drupal sites are not exempt from this reality. For businesses running sites on earlier versions of Drupal, upgrading to Drupal 8 represents a daunting task. With reasoning varying from typical costs to unsupported functionalities, forgoing a Drupal 8 migration has long been the norm. Though Drupal 8 launched back in 2015, adoption has been slow. Globally, there are around 71,000 live sites using Drupal 8 compared to over 333,000 live sites using Drupal 7. 

It’s time for that to change. 

With a suite of new and updated features, Drupal 8 has never been more of an asset. We’ve covered some of the benefits of a D8 migration in the past, but the framework only grows more robust each day. The development community continues to break new ground on Drupal 8, making it a robust solution for all manner of business needs. 

Beyond Drupal 8’s virtues, another, more pressing, reason to upgrade is rearing its head: the end of a lifecycle. As laid out in a blog post, Drupal founder Dries Buytaert has revealed the timetable for the launch of Drupal 9. The new version is expected to launch on June 3, 2020, rather than an initially projected December release. 

Why the accelerated timeline? One of the major dependencies for current Drupal cores is the PHP framework Symfony. The end-of-life date for the latest version, Symfony 3, will be in November 2021. To maintain site security, Drupal 8’s end-of-life is also tied to this date. To reiterate, by November 2021, everyone should have upgraded to Drupal 9. For everyone running Drupal 7 sites, the same deadline applies. 

Luckily, there’s good news. Once your site is upgraded to Drupal 8, moving over to Drupal 9 will be a much easier transition. This is because Drupal 9 is being built on Drupal 8 rather than on an entirely new codebase; the main work that will need to be done mostly involves removing deprecated code and updating dependencies. From a site owner’s standpoint, this means that functionality from Drupal 8 sites will carry over to ones on Drupal 9. With this level of backward compatibility, meeting the deadline of November 2021 will likely be smoother than a full-on website redesign. 

Given the eventual sunsetting of Symfony 3, moving to Drupal 9 is inevitable. The choice to make now is whether to ride out Drupal 7 and then upgrade to 9 before November 2021 or to upgrade to Drupal 8 first. After taking into account the value of Drupal 8, though, it isn’t really much of a choice at all. Easier integrations, a more robust content authoring interface and, crucially, mobile responsiveness are all features that make Drupal 8 sites feel more modern to users and more accessible to owners. Setting all of these bells and whistles aside, a move to Drupal 8 early on will prepare businesses for the eventual, inevitable switch to Drupal 9. Staying ahead of the development curve while adding improved site functionality is a win-win proposition that can put any business ahead.  

In the coming months, we will be taking a deep dive into more of the reasons why upgrading to Drupal 8 is the right move. In the meantime, reach out to us if you have any questions about the process or the challenges involved.

Free D8 Upgrade Worksheet

Jan 03 2019
Jan 03

As we step into 2019, it’s a good time to stop and take a look at what’s been happening with the Drupal editing experience. 2018 seemed to be the “year of the editor” for not only Drupal, but the entire open source CMS world.

 

drupal-editing-trends-main

Photo by Crew on Unsplash

Editors need easy-to-use, highly flexible and accessible tools to create beautiful sites. With the rise of solutions based in react.js coming of age as well as more REST oriented architectures, we can certainly expect to see an explosion of the editing experience, especially in Drupal.

Merging Technology Between The Giants in CMS with Gutenberg Editor

The greatest thing about open source is that it’s open. One platform can adopt the features of another, and they often do when their aims are as close as those of Drupal and WordPress. Last year the Drupal community adopted a project called Gutenberg for a more pristine editing experience. The editor allows you to have a visual inline content creation experience with text, media and, of course, blocks. Gutenberg was created in coordination with a major WordPress effort to introduce the concept of blocks to their CMS. Since Drupal was born in this concept, Gutenberg was an easy adoption into our community.

drupal-editing-trends-gutenberg

This editor of course enhances the experience on both systems. However, I believe Drupal stands to gain the most from this project as the CMS has a long established history of blocks as a delivery system, though the editing experience has needed help. When you add in all the other complexities Drupal offers, such as Paragraphs, Context and Views, the possibilities are endless.

Drupal and WordPress have always been locked in a great debate as to which to use, when, what’s better than what. In this case, it’s great to see how different open source communities can enhance each other. Drupal’s concept of blocks is hands-down proven and, conversely, WordPress has been a favorite for editing content. Even Matt Mullenweg, the founder of WordPress, was heard saying “Drupal is my other favorite open source project” at the 2018 WCUS conference. It’ll be exciting to see what comes of this in 2019 as we progress in Drupal.

Try a Demo of Gutenberg

Layout Builder

Layout Builder is an experimental module still in progress from the Drupal community. It’s a drag-and-drop style editing experience that is geared towards allowing editors the opportunity to create structured content with ease. If you’re familiar with Drupal Panels or Panelizer, you can think of this as a next step from there and in a similar direction as Gutenberg.

According to a Dries Buytaert post, we should see Layout Builder become stable and ready to use by May of 2019. Many of the remaining issues are related to maintaining Drupal’s commitment to accessibility standards. Layout Builder is aiming to keep up with Level AA compliance with WCAG and ATAG.  

Check out his live demo here.

layout builder drupal

Emerging 3rd Party Page Builders like Glazed

For those who desire more free and wild control, we’re seeing solutions like Glazed surface from 3rd party companies like Sooperthemes. Glazed is a Drupal module that allows you to have granular control over padding, margins, custom animations and so on with a rich feature list.

sooperthemes drupal

While the Sooperthemes strongly promotes their pre-built themes, the Glazed module is able to be installed independently into any theme. Paid modules with this kind of functionality are a bit against the grain in the Drupal community, however it’s gained a note of praise from Dries even. I recommend testing it out and seeing if it fits into your organization's needs.

Try a demo of Glazed

Making Trends Work for You

It’s really awesome to see how far we’ve come, but how you make a decision on which direction to go is always the question. There’s a few questions you can ask to help determine what’s best for your company.

  • Do you have the need for consistent and structured content?

  • Does your company have an established brand style guide?

  • How trained are your editors for design and technical editing?

Solutions like Glazed, for example, are very loose and free in what you can do. If you have multiple editors in your company on different teams, tools like this could distract from your brand’s consistency. In the case of needing structured content with some flexibility, I’d keep my eye on what’s to come with Layout Builder. And of course, if you have editors that come from the WordPress side of things, Gutenberg maybe a strong choice to minimize on new training while still benefiting from Drupal’s core features.

As a front end Drupal developer I favor structured, component driven theming patterns. One of the greatest challenges in delivering a custom Drupal theme is meeting the immediate need for an editor to understand how to utilize the tools I’ve made.

I’m a huge fan of Paragraphs, as it offers tons of flexibility for creating reusable components. However, those features and options can get buried in technical feeling UI. It’s exciting to have tools like these to tighten the gap between the features we make and the experience our clients have editing in Drupal.

Let's Talk!
Dec 18 2018
Dec 18

Drupal 9 is all set to release in June 2020, and brings with it end-of-life announcements for Drupal 7 and 8.

Drupal 9_ What’s in Store and How that Impacts Drupal Users

Source: Drupal 7, 8 and 9

While historically every new Drupal release has been evaluated in terms of all the new features being introduced, Drupal 9 is a bit of a break with tradition. If Drupal 8 represented a complete makeover of the technology, Drupal 9 is more a makeover of how a major Drupal release is rolled out.

So we take a look at what’s on the cards with Drupal 9, and have our Drupal experts weigh in on what that means for developers and site owners.

What's New With Drupal 9

Dries’ latest post “Plan for Drupal 9” says the big deal with Drupal 9 is that it shouldn’t be a big deal. And that thinking is exactly what is new.

Building With Drupal 8

Drupal 9 is not being built on a new core but rather within Drupal 8. New features and functionalities will be added to D8 as backward-compatible code. These will start being available to D8 users as experimental features, that can be used and modified for the better. All this while, older D8 features will work without a hitch.

Once these new features are stable, their older counterparts will be deprecated. And finally, the complete collection of these stable new features will be Drupal 9.

Ravindra Singh, Senior Drupal Architect at Srijan, thinks this approach is going to make life easier for Drupal users and developers. “Because everything new that makes up Drupal 9 will emerge out of existing Drupal 8, the final result will feel more like a minor version release rather than a ground-breaking all-new thing. And that’s good because it means less upheaval in the lives of Drupal users and developers. There will not be a huge learning curve for Drupalers to master D9, as was the case with D8. Most importantly, there won’t be a massive backlog of changes to be made to existing D8 sites, for them to remain functional with D9. All you need to do to make the migration easier and faster is to keep your Drupal 8 site abreast with all new updates."

The Migration Path - Drupal 8 to 9

The fact that Drupal 9 will not feel brand new also means that the upgrade from 8 to 9 will be super smooth.

Ritesh Gurung, our Senior Solutions Architect says, “Drupal developers working with D8 will have a chance to explore D9 features right from the start, and begin to upgrade any core or contributed modules. But the greatest benefit will be for Drupal site owners, specifically D8 sites. Those who have kept up with using the latest themes and modules, running on the updated D8 APIs, will have no trouble upgrading to D9.”

Highlighting how all Drupal releases are a community affair, Ritesh said, “Besides the volunteers working dedicatedly on Drupal 9, everybody else who gets to start using the experimental modules will be able to identify and help resolve any bugs and errors during the transition phase.”

Migrating from Drupal 7 to Drupal 9

As per the plans shared by Dries during Drupal Europe, both Drupal 7 and Drupal 8 will be end-of-life in 2021. Now if you are still on Drupal 7, you have two choices:

  • Continue with Drupal 7 till 2020, and then plan your migration to Drupal 9 in 2021

  • Migrate for D7 to D8, and then to D9, between 2019 to 2021

Now a direct migration from D7 to D9 seems like the best, and most cost effective path - why have two migrations when you can have just one.

However in this case, doing two migration might actually be a more practical option.

Ishan Mahajan, currently leading our large-scale Drupal project with Crain Communications, explains how:

  • Choosing to continue with Drupal 7 till 2020 doesn’t mean there’s no upgrade work coming your way. Drupal will likely release some more updates to D7 till it’s end-of-life. So there will be time and efforts invested to ensure your site keeps up with those.

  • Given the fact that D8 is now well advanced, with stable upgrade paths for almost all modules, you can move from D7 to D8 without giving up on any major site features or functionalities

  • Because D9 will be completely backward-compatible with D8, the final upgrade from D8 to D9 will not be as expensive or disruptive as you are expecting it to be.

So if you are still on D7, the announcement of D9 should be another reason to move to D8 as soon as possible. This will ensure you can move easily to D9 when it releases.

And for enterprises already running multiple sites on D8, Ishan says it’s important to “Make sure that the sites are always on the latest D8 version as well as ensure that no deprecated module or API is used. That way, these sites will be ready of Drupal 9.”

So there you have it, Drupal 9 - a major Drupal release that’s being designed to be as minimally disruptive as possible.

Have more questions about Drupal 9 features and how it might impact your site? Already chalking out an upgrade plan? Our team of Drupal experts, and range of Drupal development services, are ready to help.

Just drop us a line, and get the conversation started.

Srijan is Signature Supporting Partner to the Drupal Association. With 140+ seasoned Drupalers of which 56+ are Acquia Certified, Srijan has the largest team of Drupal experts in Asia. Srijan is also featured as Best Drupal Agency 2019 by Design Rush

Nov 12 2018
Nov 12

I've talked with hundreds of Drupal professionals over the years (probably thousands at this point), and whether or not it's intentional, I think we fall into a pattern. When we talk about the benefits of the platform — specifically Drupal 8 — and what it can do for organizations, we often talk about it in relation to either the front-end user or the website developer.

Drupal 8 Content Editor
Photo by Christin Hume

While both of those audiences are incredibly important, there's a flaw in that tendency. The users and developers are not the ones spending the most time in Drupal on a day-to-day basis — that would be the content editors. Content editors are the men and women who take the created content and publish it online. They push updates to the site, and they are the ones who more or less manage its content.

We've talked about the benefits of Drupal 8 in the past, but today, I want to focus on how the platform specifically impacts content editors. Drupal 8 has made great improvements to the admin interface and to the overall user experience for content editors. Here are some of the best benefits, in my opinion.

Quick Edit

Our clients who have already migrated from Drupal 7 to Drupal 8 would be completely happy if in-line editing were the only new benefit for content editors. This seamingly simple feature is receiving rave reviews, and it's no wonder why. In the past, it was such a pain to click through to each individual piece of content you wanted to edit. Now, to edit content, you technically don't even need to go into the back end.

The Quick Edit feature, which also comes out of the box in Drupal Core, allows content editors the opportunity to edit directly on the front end of a site. If you have a quick change, you can edit the content on the live site, save it and more on to something else. It's so easy, and so impactful.


CKEditor

CKEditor is a new WYSIWYG editor that is far superior to previous Drupal editors, and it is included in Drupal Core. One of the nice elements is a drag-and-drop interface. Speaking of CKEditor, the CKEditor Media Embed Module allows content editors to embed external resources such as videos, images, tweets and more via the editor.


Customization

One of the hallmarks of Drupal has been that you can customize it to fit your needs. The same is true for content editors. My colleague Michael Girgis wrote about how Drupal 8 sites can now use the Material Admin theme that makes for a more pleasant visual appearance — it reflects the styles of Google Material Design Language. That's one way to customize the experience for content editors. Similarly, the Gutenberg editor — which is scheduled for a stable release in December — gives editors a new publishing experience without needing any code.

In addition, the WYSIWYG editor that comes out of the box can be customized based on an editor's need, including hiding some features that are rarely or never used by content editors.


Responsive interface

It's obviously important for websites to be responsive today, but Drupal 8 also makes the back-end admin interface responsive, which is an enormous improvement over earlier versions of Drupal. The reality is that critical updates are necessary when people are away from their computer. Having the toolbar and editor be mobile optimized makes it much easier for editors to make site updates from their phone or other mobile device.

Content editors are the people who spend the most time in Drupal. Drupal 8 makes sure that time is now more enjoyable than ever before.

Let's Talk

Nov 01 2018
Nov 01

One of the favorite parts of my role at Duo is talking with potential clients about their digital challenges and helping determine whether Drupal can help develop a solution to their problem. Ask any of these people, and they'll tell you that I love talking about the benefits of Drupal 8 and how revolutionary the newest version of the platform can be.

crafting a new site
Photo by Clark Young

There are a number of fantastic aspects about Drupal 8, from how you can build and display content to new functionalities that come out of the box. In order to upgrade to D8, though, you need your site to be redeveloped. Even if you're completely happy with your site's existing design, your site will need to be recreated in order to take advantage of all that D8 has to offer.

You might be wondering why someone would have their whole site rebuilt if they're happy with how it looks and it is structured. Well, there are two answers. The first is that they may be happy with how the site functions now, but down the road they would love some additional functionality. Drupal 8 brings that added functionality.

The second reason, though, is the reality that all Drupal sites are on the path for being upgraded.  Drupal 7's "end of life" — when Drupal and its thousands of contributors around the world no longer support or made updates to the version — is scheduled for November 2021. That means all D7 sites have three years to be upgraded to D8.

If you're going to need to upgrade eventually, why not do it sooner so you can take advantage of all that D8 has to offer?

Whether you've already considered moving to D8 or the thought hasn't crossed your mind yet, these three questions may help you decide that the time to upgrade is now.

  • Are you considering a design refresh?

Whether you are considering a visual update to your site or are trying to determine how you want to rebrand it, you may want to step back for a minute and evaluate whether an upgrade to D8 should be done at the same time.

If you know you want to update how your site appears, consider what I think is one of the best new features of D8: Flex pages. I've written about flex pages in the past, but the reason I continue to bring them up is simply because they give site admins and content creators so much power over how their site looks. Flex pages allows these admins and creators to build beautiful sites with ease — and without the need for someone who knows how to code.

If you haven't considered an update to your site's appearance recently, perhaps you should. Remember what I said above. Drupal 7's "end of life" is three years away. That means you want to have your site updated by then.

  • Do you want more functionality on your site?

I talked with a past client recently and she told me that her company was considering switching their CRM (customer relationship management tool), and they wanted to know if I had a recommendation. I said I didn't have an opinion on a specific CRM, but I asked why they wanted to make the switch. I then asked if they were going to integrate the CRM to their website, and I was met with silence on the other end of the phone.

After a couple seconds, she confessed that she didn't realize that was possible. I said not only is it possible, but in Drupal 8, it's easier and more efficient than ever before.

Drupal's ability to seamlessly integrate with other applications is one of the platform's biggest differentiators. Looking to streamline your marketing automation? Considering connecting your website to voice recognition tools like Amazon Alexa or Google Home? Thinking about how the Internet of Things can work with your site? Considering more personalized content on your site? Drupal 8 makes it possible to do all of those things — and much more.

Now technically, many of these integrations can be developed in Drupal 7, but like I said earlier, all D7 sites are going to need to be rebuilt in the next three years. So before investing the time and resources into a new D7 integration, consider instead putting that commitment toward D8.

  • Are you ready to upgrade?

The past two questions are somewhat high level, but this question is far more straightforward. If you were to upgrade your site today, do you have the resources to actually make it happen?

Upgrading to Drupal 8 is prime time to reevaluate everything with your site, from tools you're using to platforms you're integrating with to your actual site content. An upgrade to Drupal 8 will require you take your site down to the studs, and that's the perfect opportunity to do some house cleaning.

Many of our clients begin the upgrade process with a content audit. We work with them to review their analytics and determine what content is worth moving. Sometimes, it's the majority of the content, but more often than not, we'll migrate the highest value content and supplement with new content. Do you have the resources to create that content?

Maybe you've been thinking about upgrading your site to D8 for a while now, or maybe the idea hasn't crossed your mind until now. Either way, hopefully answering those three questions will help you determine if now is the right time to upgrade.

If you'd like some help thinking through those questions, or if you decide now is the right time for a D8 upgrade, please get in touch with me, and I'd love to help out in any way I can.

Let's Talk
Oct 16 2018
Oct 16

[embedded content]

Video sections

Bootstrap is a powerful front-end framework which helps you build sites and web applications faster by offering prebuilt CSS and JavaScript components.

Some of the CSS components it offers are a grid system, buttons, navigation, jumbotron and so much more. On the JavaScript side, it comes with a few useful items such as a modal, collapsible divs, carousel to name a few. Read the Bootstrap documentation to find out more.

Bootstrap in Drupal

If you search for “drupal bootstrap” in Google, the first result will likely be the Bootstrap theme. This theme is the most popular on drupal.org with over 150,000 reported installs. But as of this writing, the theme only supports Bootstrap 3, not version 4 which is the latest.

So if you want to use Bootstrap 4 you’ll need to use another theme until the Bootstrap theme supports version 4.

In this tutorial, you’ll learn how to configure and use the Drupal 8 version of the Barrio theme which uses Bootstrap 4.

Getting Started

Before we can begin, go download the Barrio theme.

Using Composer:

composer require drupal/bootstrap_barrio

Create Sub-theme

The recommended way of using a theme in Drupal is to first create a sub-theme. You’ll never want to use Barrio directly. If you need to customize how things look, i.e., change CSS and override templates, then do it in the sub-theme and not Barrio itself, this way you can keep Barrio up-to-date.

If you want to learn more about sub-themes in general. Check out the Creating a Drupal 8 sub-theme, or sub-theme of sub-theme documentation page.

Let’s now look at creating a sub-theme which pulls Bootstrap via a CDN, this is the quickest and easiest way to get started.

Create CDN Sub-theme

1. Go to the bootstrap_barrio directory and copy the subtheme directory into /themes.

2. Change the subtheme directory name to anything you want, I’ll change it to barrio_custom (everywhere you see barrio_custom, use your actual sub-theme name).

Now we need to go through the sub-theme and replace bootstrap_barrio_subtheme to barrio_custom.

3. Rename the following files:

  • _bootstrap_barrio_subtheme.theme -> barrio_custom.theme
  • bootstrap_barrio_subtheme.info.yml -> barrio_custom.info.yml
  • bootstrap_barrio_subtheme.libraries.yml -> barrio_custom.libraries.yml
  • config/install/bootstrap_barrio_subtheme.settings.yml -> config/install/barrio_custom.settings.yml
  • config/schema/bootstrap_barrio_subtheme.schema.yml -> config/schema/barrio_custom.schema.yml

4. Open  barrio_custom.info.yml change the name of the sub-theme and rename the libraries section from bootstrap_barrio_subtheme to barrio_custom.

From this:

To this:

5. Open barrio_custom.theme (formerly_bootstrap_barrio_subtheme.theme) and change the function name:

// From:
bootstrap_barrio_subtheme_form_system_theme_settings_alter(&$form, FormStateInterface $form_state)
// To:
barrio_custom_form_system_theme_settings_alter(&$form, FormStateInterface $form_state)

6. Open config/schema/barrio_custom.schema.yml (formerly config/schema/bootstrap_barrio_subtheme.schema.yml) and change the following:

# from:
bootstrap_barrio_subtheme.settings:
# to:
barrio_custom.settings:

7. Open color/color.inc file and change the following:

// From:
'preview_library' => 'bootstrap_barrio_subtheme/color.preview',
// To:
'preview_library' => 'barrio_custom/color.preview',

8. Last but not least, open js/global.js and change the following:

// Change this:
Drupal.behaviors.bootstrap_barrio_subtheme = {
// To this:
Drupal.behaviors.barrio_custom = {

Now that you’ve created a sub-theme go to the Appearance page in your Drupal site and install your sub-theme by clicking on “Install and set as default”.

The front-end of your Drupal site should look something like the image below:

The actual Bootstrap 4 library is being loaded via a CDN which is the default behavior in the Barrio sub-theme and that’s why everything works without downloading the library locally. Of course, this can be changed and we’ll look at how to do that next.

Download Local Version of Bootstrap

In the sub-theme we created above, we’re pulling in Bootstrap through the CDN. Let’s configure it now to use a local version of Bootstrap.

1. Go to the Download page and click on Download in the “Compiled CSS and JS” section.

2. Extract the zipped file into /libraries directory in your Drupal site and rename the folder to bootstrap. 

The path to the css and js folder should be /libraries/bootstrap/css and /libraries/bootstrap/js.

3. Open up *.libraries.yml in your sub-theme, mine is called barrio_custom.libraries.yml and change the bootstrap section like so:

From this:

bootstrap:
  js:
    /libraries/popper/popper.min.js: {}
    /libraries/bootstrap/dist/js/bootstrap.min.js: {}
  css:
    component:
      /libraries/bootstrap/dist/css/bootstrap.min.css: {}

To this:

bootstrap:
  js:
    /libraries/bootstrap/js/bootstrap.bundle.min.js: {}
  css:
    component:
      /libraries/bootstrap/css/bootstrap.min.css: {}

Bootstrap 4 has two dependencies Popper and jQuery. Drupal comes with jQuery already and to save a bit of effort will use the bootstrap.bundle.min.js which comes with Popper whereas, bootstrap.min.js doesn’t.

4. Open the *.info.yml file in your sub-theme and change barrio_custom/bootstrap_cdn under libraries to barrio_custom/bootstrap.

From this:

libraries:
  - barrio_custom/bootstrap_cdn
  - barrio_custom/global-styling

To this:

libraries:
  - barrio_custom/bootstrap
  - barrio_custom/global-styling

5. Rebuild the site cache by running drush cr or drupal cache:rebuild or by going to /admin/config/development/performance and clicking on “Clear all caches”.

If the JavaScript or CSS file isn’t loading or the site looks broken. Make sure the paths in the *.libraries.yml file is correct and that the Bootstrap library is correctly in the /libraries directory.

Theme Settings

The Barrio theme allows you to configure a lot through the Settings page, which you can access by clicking on the Settings link after you’ve activated the theme. I won’t go through absolutely everything, however, I’ll mention some important settings.

To access the settings page, click on Appearance in the toolbar and Settings next to the installed theme.

Layout Settings

From the Layout tab, you can configure aspects of the layout such as the type of container, i.e., fluid or non-fluid and how wide the sidebar columns should be.

If you select “Fluid container”, then your website will be full-width with gutters on each side.

The “Sidebar first layout” and “Sidebar second layout” let you configure the width of each sidebar.

Components Settings

From the Components tab, you can configure the buttons and the navbar.

The most important section in this tab is the navbar. It lets you configure it without having to modify any CSS or SASS files.

Affix Settings

In this section, you can configure components like the navbar or sidebar to be affixed to the top when scrolling.

If you check “Affix navbar”, it’ll stick the navbar to the top as you scroll down the page.

Here’s an example:

Scroll Spy

In this area, you can configure the Scrollspy functionality in your Drupal Bootstrap site.

Fonts Settings

From the Fonts tab, you can configure what fonts will be used and icon set.

Colors

And finally, from the Colors tab, you can configure the color of the messages and how tables are displayed.

Color Scheme

One thing I do like about Barrio which is different to the Bootstrap theme is the ability to change the color scheme directly in the theme.

Now, this isn’t groundbreaking and Drupal’s had this ability for a long time, but being able to easily change colors without modifying CSS or compiling SASS is a nice touch.

However, there is a limitation on which colors can be changed. You can’t change Bootstrap colors: primary, secondary, success, danger, warning or info from the color scheme section.

So that is a quick overview of the settings page. My guess is you’ll spend most of your time configuring the navigation bar and grid layout. But do spend some time familiarizing yourself with the options available.

Bootstrap Library

Another way to load Bootstrap is by using the Bootstrap Library module. One of its benefits is the ability to change which version of the CDN library you want to use without modifying the *.libraries.yml file in your sub-theme.

1. Start things off by first downloading the module and then installing it.

composer require drupal/bootstrap_library

2. Go to the Settings page of your sub-theme and scroll to the bottom and from “Load library” choose how you want the library to be loaded.

  • CDN: This will load Bootstrap through a CDN.
  • Local non minimized (development): This will use the non minified version stored in the /libraries directory
  • Local minimized (production): This will use the minified version stored in the /libraries directory.

As long as you’ve downloaded Bootstrap and added it into the /libraries directory as explained early, the “Local non minimized” and “Local minimized” should work.

Bootstrap Library Settings

The Bootstrap Library module comes with a configuration page, just go to Configuration and click on Bootstrap Library.

If you choose None from “Load library” on the theme settings page, then whichever way Bootstrap is configured to load from this page is what will be implemented.

From this “Load Boostrap from CDN” section, you can choose if a CDN is used and which version. If you prefer to load Bootstrap locally, then select “Load locally”.

Then from “Minimized, Non-minimized, or Composer version” select which local version you want to use.

Form “Theme visibility” select which themes will have Bootstrap loaded.

Make sure you select your theme from the multi-select or the library will not load and your site will be broken.

From the “Activate on specific URLs” section, you can include or exclude the library on specific paths.

From the “Files settings” you can choose if you want CSS and/or JavaScript files loaded.

If you decide to use Bootstrap Library to load the library then make sure your sub-theme isn’t loading the library itself because you’ll end up loading the library twice.

Remove any library declarations from the *.info.yml file in your sub-theme. This will stop your sub-theme from loading the library.

Rebuild the site cache and you’re good to go.

Summary

The current state of Bootstrap in Drupal 8 is this. If you need to use Bootstrap 3, then use the Bootstrap theme. If, however, you want to use Bootstrap 4 then look at Barrio, Bootstrap4BootBase or Radix.

If you know of any good Bootstrap 4 base themes then please leave a comment.

Ivan Zugec

About Ivan Zugec

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 10 years and has successfully completed several large Drupal projects in Australia.

Oct 08 2018
Oct 08

We’ve been seeing interest in Drupal 8 increase in the last few months, and it’s with good reason. The platform has so much flexibility and the power to streamline work for any number of industries.

One area where I’ve seen a substantial rise in the desire to learn more about or adopt Drupal 8 is in the world of marketing — specifically from marketing departments. And it makes sense. marketing
Photo by rawpixel

In many businesses, it is the marketing department that owns and operates the business website. So they should have interest. And with everything that Drupal 8 has to offer, their interest should only continue to rise. What makes Drupal 8 so valuable to marketers? Let me tell you just a few ways.

The benefit of flex pages

I’ve written about flex pages in the past, but the reality is they are one of the biggest advantages for a marketer. Why? Because a marketer can create a webpage with whatever look or feel they like, and they can do it without having to rely on the IT team or a dedicated web developer.

Whether a marketing team is looking to build out a landing page for a specific campaign or working to redesign their entire website, flex pages give them the creative freedom to design in a way that best meets their needs.

The emphasis on integrations

Drupal is a dynamic content management system (CMS), but in my eyes, what makes it stand out is its ability to easily integrate with third-party applications. Drupal 8 is set up so that site administrators can easily use APIs to connect their website with any number of digital tools. Beyond that, Drupal makes it possible for admins to work with the technology that works best for them.

We’ve done work with the Chicago Botanic Garden (CBG), for example, and specifically we’ve helped with their ticketing system. Now, for those who don’t know, CBG has 50,000 members and more than 1 million guests visit the grounds each year. Those types of numbers making ticketing complex, and so CBG requires a system that fits their specific needs.

The marketing team at CBG had a specific platform that they wanted to use for ticketing, and so we worked with them to help integrate that system with their Drupal website. Now, the marketing team is able to learn all types of new information about their visitors — from purchase habits to web pages they visit — and track that data all in one place. As a result, the marketing team can now tailor specific content or opportunities to those visitors based on their previous actions.

The ability to leverage best-of-breed tools

I mentioned above how Drupal makes it possible to seamlessly integrate with third-party applications. Truly, though, Drupal’s biggest asset is that it makes it possible for complex systems to smoothly communicate with one another.

As a marketer, you may want to use a tool that allows you to retarget content to site visitors once they leave your website. Perhaps you have a marketing automation tool like Marketo and you want to be able to connect what users do on your website with the communications you share with them. Or maybe you want to implement a drip campaign that reminds site users that they left your website without purchasing items in their shopping cart, and as an incentive you are now offering an additional 10% off.

Those opportunities and countless more are possible with Drupal. Are you a marketer who wants to know more about the benefits of Drupal 8? Please give me a call and I’d be more than happy to answer any questions you may have.

Let's Talk

Oct 02 2018
Oct 02

[embedded content]

Watch other videos on our YouTube channel. Click here to subscribe.

I was recently looking at all the default views that come with Drupal 8. For people who don’t know, the Views module is part of Drupal 8 core. In Drupal 7 and below it’s the most installed module so during Drupal 8’s development it was decided to move Views into core.

During my exploration into all of the default Views, I noticed that in the People (User) view there was a filter called “Combine fields filter”.

Want to learn about Views? Read Build a Blog in Drupal 8: Using Views or watch it as part of our FREE Drupal 8 Site Building course.

Now just a quick side note, if you’re new to Drupal and Views I’d highly recommend you spend time walking through all of the default views and see how they were configured. You can learn a lot just by seeing how things are set up.

The “Combine fields filter” does a pretty cool thing. It allows you to search across multiple fields or put another way, it allows you to combine fields and then filter by their combined value.

How to use “Combine Fields Filter”

Using this filter is relatively straightforward. Just click on Add in the Filter criteria field-set. Search for the filter by name or select Global from the Category drop-down.

When configuring the filter, you can select which fields you want to search from the “Choose fields to combine for filtering” drop-down.

If you want to see what the actual query looks like, turn on “Show the SQL query” from the Settings page (admin/structure/views/settings).

Then in the preview area, you should see the query that gets generated.

The above example is from the “People (User)” view.

Summary

If you want to add basic filtering across fields to your views, then this is the way to go. It’s useful for those custom admin pages which we create to help editors manage content. If you’re looking for something more advanced such as keyword searching, then look at using Search API.

Ivan Zugec

About Ivan Zugec

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 10 years and has successfully completed several large Drupal projects in Australia.

Sep 25 2018
Sep 25
Think about these four words for a minute:
  • Transformation.
  • Growth.
  • Innovation.
  • Opportunity.
What do those words mean to you? To me, they represent the infinite possibilities that come with a well-designed website. If a site or digital platform is built to match the needs of its company, the result can be transformational. It can lead to a growth in a customer base or overall growth in an organization. It can be innovative in how it presents content. And the opportunities, well, they are limitless.

drupal for law firms
Photo by Patrick Fore

Those four words are also the basis behind the 2018 Legal Marketing Technology Conference Midwest. The conference, which Duo is proud to be a sponsor of, will be held Oct. 2 and 3 at Chicago’s award-winning tech incubator space, 1871.

This year’s conference revolves around the idea of “Technology in Action,” and it provides a variety of unique opportunities for participants, including:

  • Discussions on the innovations taking place within legal services
  • Conversations with innovative industry thinkers who represent firms of all sizes
  • Networking opportunities with peers from across the country

Duo has partnered with law firms of all sizes over the years to help them re-imagine their digital presence. In fact, we were recently honored with a WebAward for Best Legal Website for our work with Chicago-based Much Shelist.

With that site, we helped the full-service law firm completely rebrand how they presented themselves online. We also helped develop a style guide and branding guide for future reference.

We’ve leveraged the power and flexibility of Drupal for more than 20 different law firms. Each firm had different needs, but we have found there are some common attributes just about any firm could benefit from. Some of those include:

Proposal and profile generator
We worked with one of our larger clients to create a template that allows internal staff members to take information from their website and quickly generate a proposal or a lawyer profile in Microsoft Word. A process that used to be time-consuming and laborious is now simple and fast.

Website and HR connection
We worked with one firm to help solve a challenge that we’ve seen plague countless businesses from a variety of industries. The firm was looking to find a way to easily update its website whenever a lawyer joined or left the firm.

To solve that problem, we connected the website directly to the firm’s HR system. That way, whenever a person’s information is updated by HR, it also automatically is updated on the website directory.

Automatic news feed
In recent years, we’ve seen more law firms become interested in sharing content on their website, either about their lawyers or topics that they specialize in. Traditionally, a website administrator would have to create a new webpage that then linked out to a news article. The process doesn’t have to be so time consuming anymore.

We helped one firm become a better content aggregator by building the website to automatically collect news stories on the specific services the firm focused on. These stories were displayed throughout the site, making the site robust and topical, without being too time consuming to maintain.

There are countless other ways that law firms can enhance their website to better suit their needs and the needs of their clients. Remember those words I asked you about at the beginning of this?

  • Transformation.
  • Growth.
  • Innovation.
  • Opportunity.


Think about those words and how they relate to your website. How can you transform your website? Can you do so in a way that helps your firm grow? What’s something innovative you can do with the site? What opportunities are you missing out on?

Do you have answers to those questions? Do you want some help thinking through them? Either way, our team at Duo is ready to help you. Give us a call, or better yet, come visit us at the Legal Marketing Technology Conference Midwest.

Let's Talk

We can’t wait to hear from you!

Sep 05 2018
Sep 05

[embedded content]

Drupal has got new media management functionality in 8.6. In the above video, I’ll demonstrate what new media functionality we have in Drupal 8.6.

Thanks to the Media in Drupal 8 Initiative, media handling in Drupal has improved with every new release. In 8.4 we got the experimental core Media module. Then in 8.5, the module moved from experimental to stable and now it’s the recommended way for storing media assets. Now in Drupal 8.6 we get a few extra goodies such as oEmbed support, a Remote video media type and a media library.

Grab our FREE course on using core Media in Drupal 8.
(While you’re at it check out our list of free courses)

New Remote Video Media Type

When you install the Media module you get four media types by default: Audio, File, Image and Video. Now you get Remote video which can be used to embed YouTube and Vimeo videos.

Currently only YouTube and Vimeo are supported. If you need to support other video platforms look at using Video Embed Field.

Learn how to configure Video Embed Field with core Media module.

oEmbed Support

To handle the new Remote video media type, Drupal 8.6 also got oEmbed support (Drupal change record).

Media Library

The new Media library module is by far the most exciting new functionality. You’ll need to install the experimental module called Media library. Don’t forget this is experimental for now; use at your own risk.

The first change you’ll notice is that the Media page looks different. You get to switch between a Grid and Table view.

The module also comes with a new widget for the Media field called “Media library”. This will allow you to browse media assets from the edit screen.

To use this widget make sure “Media library” is selected as the widget on the “Manage form display” page.

Here it is in action and watch how you can bulk upload images.

Can this module replace Entity browser? At this point I’d say no. Entity browser gives you more flexibility in how you build these types of browse pages. But I hope in the future Media library will be the standard way of creating these browse pages.

Want to learn how to use Entity browser? Check out “How to Browse Media Assets using Entity Browser“.

Summary

Slowly and steadily media handling in Drupal core is improving and becoming more powerful. It’s good to see this continued momentum. But if you need to create bespoke media functionality I still think the combination of Entity embed/Entity browser is the winner for now.

Check out our epic “Managing Media Assets using Core Media in Drupal 8” tutorial where you’ll learn how to use Entity embed, Entity browser, DropzoneJS and more.

Ivan Zugec

About Ivan Zugec

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 10 years and has successfully completed several large Drupal projects in Australia.

Aug 23 2018
Aug 23

[embedded content]

Drupal Console and Drush are two command line (CLI) tools built for Drupal. For a long time Drush was the only CLI tool and it was very useful for managing Drupal sites. Common tasks you’d do with Drush are rebuild caching, installing sites, import/export configuration and so much more.

Then Drupal Console came onto the scene and offered other goodies such as the ability to generate boilerplate code, which Drush 9 can now do as well. People often ask “Can you run Drush and Drupal Console together” and the answer is yes, I personally use both. If you install Drupal using drupal-composer/drupal-project then you get both Drush and Drupal

In the video above, you’ll learn how to use Drush and Drupal Console.

Drupal Console

Drupal Console is a CLI tool for Drupal built using the Symfony Console library. One of its many strengths is the ability to generate boilerplate code. With a few simple commands you can create a module or a custom entity type.

How to Install Drupal Console

Drupal Console can be installed into your Drupal site using Composer, follow the instructions over on the Drupal Console documentation page.

Use the links below to jump to a section of the video:

  • Drupal Console intro: 02:31
  • How to install Drupal Console: 04:29
  • Using Drupal Console launcher: 06:27
  • Overview of Drupal Console commands: 07:41
  • How to use debug commands: 08:33
  • Using debug:router command: 10:11
  • Using debug:container command: 11:49
  • Using debug:cron command: 15:08
  • Using debug:user command: 15:08
  • How to use generate commands: 17:15
  • Using generate:module command: 18:07
  • View module code generated by Drupal Console: 20:42
  • Using generate:entity:content command: 20:59
  • View code generated by generate:entity:content command: 24:43
  • Install module generated by Drupal Console: 27:21
  • How to download modules using Drupal Console: 31:10
  • Viewer question: What’s composer?: 34:45

Drush

Drush is the original CLI tool for Drupal. You can use it to interact with a Drupal site and generate boilerplate code.

How to Install Drush

Drush is just a PHP library and can be installed using Composer. For details read the Drush install documentation page.

Use the links below to jump to a section of the video:

  • Drush intro: 37:22
  • How to install Drush: 40:56
  • Using Drush: 42:11
  • Overview of Drush Commands: 43:00
  • Using Drush generate command: 44:11
  • Using generate module-content-entity command: 45:12
  • View module code generated by Drush: 46:23
  • Install module generated by Drush: 47:13
  • Overview of common Drush commands: 52:00
Ivan Zugec

About Ivan Zugec

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 10 years and has successfully completed several large Drupal projects in Australia.

Aug 20 2018
Aug 20

I recently had a meeting with a client who has operated their website on Drupal 7 for the past few years, and they wanted to know why they should upgrade their site from Drupal 7 to Drupal 8. As I worked on answering their question, it became clear to me that there are 8 distinct reasons why it makes sense for businesses and organizations to make the leap from D7 to D8.

eight reasons for drupal 8
Photo by Franck V.

Here are those 8 reasons:

1 - Ease of use

Historically, users have complained about the back-end experience of managing and editing Drupal websites. Thanks to Drupal 8, those complaints are now a thing of the past. First off, D8 comes with a WYSIWYG editor designed specifically for Drupal’s use. Beyond the traditional basics — like buttons for bold, italic, hyperlinks, and so on — there are added extras, such as easily editable image captions that come with the editor’s new Widgets feature.

Site admins can also perform inline editing, meaning they can look at the front-end of their site and make edits in real-time so that they can instantly see what their edits look like. No longer do you need to exclusively go to the back-end to update or edit content. This gives admins far more flexibility than ever before.

Additionally, Drupal 8 features the Material Design Admin Theme that was designed using the rules Google developed for all of its products. This means that as Drupal admins manage their content, they can have an experience that resembles working with a Google product — which can make editing more familiar and more comfortable.

2 - Mobile first

Drupal 8 is fully responsive out-of-the-box. There is no customization needed to make that happen. After all, it’s 2018 — any web product should be fully responsive. That means that when your site is built on D8, elements like menus, blocks, and even images will automatically reshape to work and look good on any screen size.

Additionally, D8 features a mobile-friendly toolbar that has multiple benefits to it. First off, it makes it possible for admins to manage content from their smartphone or other mobile device. More importantly, the toolbar was designed with accessibility in mind, which means it makes it easier for screen readers to easily navigate to different parts of a site.


3 - Performance

If you have a website, you want it to perform well. That’s obvious. And good performance often refers to fast load times. What Drupal 8 has that Drupal 7 doesn’t is BigPipe technology, which was first developed at Facebook. What BigPipe does is it allows your site to have far better front-end perceived performance because of how it loads and caches content. Here is a video that our CTO Rich Lawson likes to use as an example of how BigPipe impacts a site.

BigPipe is part of Drupal core, so when you upgrade to Drupal 8, you will benefit from it immediately.


4 - Introducing TWIG

Drupal 8 introduces Twig, a widely adopted theme system in the PHP world, to Drupal. Twig’s syntax is simpler, and Twig is more secure than the PHP template-based theme system in Drupal 7 and below that it replaces. It allows designers and themers with HTML/CSS knowledge to modify markup without needing to be a PHP expert and with almost no risk of their actions causing security issues on your site.


5 - Migration plan

With Drupal 8, the process of updating the platform has changed, and it’s a change that benefits users, admins and Drupal itself. Historically, upgrading to a new version of Drupal (like Drupal 6 to Drupal 7), required an entire rebuild. It was time consuming and it was expensive. Starting with Drupal 8, that process changes. Upgrading from D7 to D8 still necessitates that total rebuild, but after that, you won’t need to rebuild when a new version of the platform comes out. So when Drupal 9 is unveiled, you want need the same type of overhaul as you’ve done in the past.

Beyond that, Drupal has changed to a new release cycle. Now, Drupal offers monthly bug fixes and security releases (for example, 8.0.1, 8.0.2, etc.) and semi-annual minor releases of Drupal core (so 8.1.0, 8.2.0 and so on). This means that if there is a bug with the platform, or a certain module isn’t working in the latest version, no longer do you have to wait years for the new version to be released. Instead, your wait time is only a couple of months, if that.

Additionally, modules are now compatible between immediate major versions, so you don’t ever have to say, “I cannot upgrade to Drupal 9 because my favorite module is only in Drupal 8.”


6 - Extensibility

Flexible content delivery is another key tenet of D8. That flexibility extends to integrations, one of the platform’s hallmarks and key differentiators. Drupal is a great foundation for web content management and digital experience management because it enables integrations with your best-of-breed technologies. Drupal 8 gives you the ultimate freedom and flexibility to choose what technologies you want to use.


7 - Future proofing

Drupal 8 makes it possible to access your content beyond the confines of a traditional screen. Drupal enables you to create and deliver content to any channel, device or application. That means Drupal makes it easier to share your content with mobile apps, voice recognition devices like Google Home or Amazon’s Alexa, or even Internet of Things devices (like your smart fridge, for example). You may not need that functionality now, but down the road, you may like the option.


8 - Commerce 2.X

The Drupal Commerce 2 module has been curated by commerce experts and its out of the box functionality can stand up against any proprietary platform. New features will be introduced into the core through micro-updates and major migrations will be a thing of the past, just as it is with Drupal 8 and beyond.

The Drupal community’s attention is on Drupal Commerce 2, just as the community is focused on D8 instead of D7. If you’re operating with Drupal Commerce 1, or a different e-commerce module, you’re not going to be guaranteed the same type of maintenance and security as you would in Drupal Commerce 2. When you’re focused on selling a product or service through your website, you want to make sure it is up to date with security and functionality settings.

Those are my eight reasons why I told our client they should upgrade to D8. Did I miss something? Is there something else about D8 that you want to know about? Shoot me a note and let me know.

Let's Talk

Jul 31 2018
Jul 31

The Superfish module allows you to create multi-level dropdown menus in Drupal 8. The module uses the JavaScript Superfish library to create and display a Superfish menu block for each menu available on your site.

With a few configuration options, you can control how it’ll behavior on mobile, turn multi-column menus, change the styling and more.

The module does come with a few styling options but you’ll have to style it yourself to match your theme. When you configure Superfish the first time the dropdown functionality will, however, it may not look good.

In this tutorial, you’ll learn how to install the module and how to configure it.

Let’s start!

Getting Started

It’s recommended that you install the module using Composer. This way Composer will automatically download the required library.

composer require drupal/superfish

Installing the Superfish module

If you don’t want to use Composer then you’ll need to manually download the library and extract it into the libraries directory in your Drupal site. View the Installation section on the project page for more details.

After downloading, enable the module either by clicking the module’s checkbox in the Extend Page or using Drush.

drush en superfish -y

Enabling the moduel with drush

Create Menu

As an example, let’s create a site with a 4 level menu. Superfish is capable of handling unlimited menu levels.

1. Click Structure, Menus and click the “Edit menu” button besides the “Main Navigation” menu.

2. Click the “Add link” button to add a menu item and make sure you mark the “Show as expanded” checkbox, if the menu item will contain children.

Creating the menu

3. Click the Save button each time you create a menu item and repeat the process for the whole menu structure. At the end you should have something like this:

Menu structure

Configure Superfish Menu Block

It’s time to get rid of the default menu block and place the Superfish menu block in one of Drupal’s regions.

1. Click Structure, “Block layout”. Look for the “Primary menu” region, click the dropdown button by the “Main Navigation” block and choose Remove. Confirm by clicking the blue Remove button.

Removing the main menu block

2. Now click “Place block” in the “Highlighted” region, type the word main in the search box and click “Place block” by the Superfish “Main navigation” block.

Inserting the Supefish block

Let’s review the settings one by one.

  • Uncheck the “Display title” option. This is Drupal’s default block configuration.
  • “Menu levels” option lets you configure the display of the menu and the number of levels permitted. Leave these options untouched.
  • “Block settings” area contains configuration about the menu appearance and its basic behavior.
  • “Menu Type” “Horizontal (double row)” shows the first and second level menu items in a horizontal display.
  • “Vertical (stack)” option is the right choice if you want to place the menu in one of the sidebars for example.
  • The style option lets you choose a menu with some predefined styles.
  • The “Slide in” effect option is there to configure the dropdown functionality of all submenus. You can install the jQuery Easing library (read the module’s documentation) if you want to have more options here.

Superfish settings

  • The “Superfish plugins” area deals with the display of the dropdown menus in the browser and on small screens, take a look at the possibilities, but generally speaking you won’t need to change this options, leave the default options. Pay attention to the Supersubs area, you can define here the width of your submenus.

Supefish plugins area

  • In the “Advanced Settings” area, you can control the animation speed of the Superfish menu, some hyperlink properties and you can also add custom CSS classes to the menu components.

Superfish advanced settings

Create Multi-column Menus

It is possible to create multi-column menus with the Superfish module, however you have to have a specific menu structure to achieve this.

Wrong menu structure

Right menu structure

Just check “Enable multi-column sub-menus” in order to use them.

Multi-column menus setting

Summary

The Superfish module allows you to build dropdown and multi-column menus and place them in your Drupal site in an easy way. But you’ll still need to spend some time styling the menus to match your theme.

Jorge Montoya

About Jorge Montoya

Jorge has been reading about Drupal and playing with it for almost 5 years. He likes it very much! He also likes to translate German and English documents into Spanish. He's lived in some places. Right now, he lives in the city of Medellín in his homeland Colombia.

Jul 17 2018
Jul 17

[embedded content]

In the video above, you’ll learn how to build powerful media management functionality using Drupal 8.5. I start the webinar with a review of what’s new in Drupal 8 and then jump right into a live demo.

If you prefer text, then read our tutorial on “Managing Media Assets using Core Media in Drupal 8“.

Modules

In the video we use the following modules:

Below is a time coded list of all the sections in the video. Just click on the time code and it’ll jump to that part of the video.

Video Sections

  • Agenda: (00:41)
  • What’s new in Drupal 8: (01:35)
  • Required Modules: (09:53)
  • Demo time: (11:02)
  • Install Media module: (11:49)
  • How to Upload and view assets: (12:34)
  • Overview of Media types: (14:42)
  • Create remote video media type: (15:34)
  • Field mapping in media types: (17:45)
  • Create remote video asset: (18:52)
  • Customize remote video formatters: (19:48)

Media Field

  • Attach media field to Article content type: (20:24)
  • Using Inline Entity Form on media field: (22:53)
  • Install Inline Entity Form: (23:27)
  • Configure IEF on media field widget: (24:46)

Entity Embed

  • Install Entity Embed: (27:44)
  • Create embed button: (28:37)
  • Configure text format for embed button: (29:40)
  • Testing embed button: (32:27)

Entity Browser

  • Install Entity Browser: (35:50)
  • Create entity browser: (38:21)
  • Integrating entity browser and entity embed: (39:45)
  • Create view for entity browser: (41:02)
  • Add IEF to entity browser: (47:35)

Entity Browser and DropzoneJS

  • Add dropzonejs to entity browser: (51:59)
  • Customize fields on media types using form modes: (54:26)

Drupal 8.6

Ivan Zugec

About Ivan Zugec

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 10 years and has successfully completed several large Drupal projects in Australia.

Jun 26 2018
Jun 26

The Block field module lets you insert a Drupal block as a field on your content.

A Drupal theme is divided into regions and you can place blocks or your own custom blocks into these regions. You accomplish this task by dragging and ordering blocks in the “Block Layout” screen. That means you can append blocks before or after the main content of your content type. This “Block Layout” screen will soon be cluttered if you have multiple content types and/or multiple single nodes, each one with a different custom block. Block Layout Screen

However, there’s a way to insert a block (or many blocks) directly into your content as a field. Thus, you don’t have to place the block in the “Block Layout” screen, instead, you insert the block as a field on the node.

Blocks as fields

In this tutorial, we’re going to cover the usage of the Block field module. Let’s start!

Installing the Block Field module

The first thing you’ll need to do is install the Block field module.

Using Composer:

composer require drupal/block_field

This module has no dependencies, so just install it and you’re good to go.

Enable Block Field module

Add Block Field to Content Type

Let’s start by adding a block field to the Article content type.

1. Go to Structure, “Content types”, click “Manage fields” on the Article now, then click on “Add field”.

2. Select “Block (plugin)” under the reference category and give it a proper label.

Adding a block field

3. Leave the “Allowed number of values” set to 1 and click “Save field settings”.

On the edit screen, you can add a default value for this field. There’s also a list of all blocks, which you can select or deselect in order to make them available to this particular field (custom blocks will appear here too). Click “Save settings” once again.

Availbale Blocks

Test Block Field

Click Content, “Add Content”, Article in order to create a test article. Choose a system block (for example the “Powered by Drupal” block) from the drop-down and click Save.

Creating content with a block field

You’ll see the selected block inserted as a field in the content. This block won’t appear in the “Block Layout” screen.

Block field inside the content

You can also use this module to insert a view via a block inside the content. Edit the article and select the “Who’s online” block under the “Lists (Views)” category, click Save and you will see this block in your content.

Please note: you won’t be able to use Views contextual filters with the Block Field module.

Display a view via a block in a field

Summary

The Block Field module lets you insert not only block views into a field but all types of blocks, even custom blocks. This allows the creation of complex content types and/or nodes and provides great flexibility when building a site.

Jorge Montoya

About Jorge Montoya

Jorge has been reading about Drupal and playing with it for almost 5 years. He likes it very much! He also likes to translate German and English documents into Spanish. He's lived in some places. Right now, he lives in the city of Medellín in his homeland Colombia.

Jun 11 2018
Jun 11

Three months ago I wrote an article on how to Create Image Styles and Effects programmatically and today we're following up on that article but introducing on how we can do that dynamically.

So, essentially what we would like to do is that we display an image, where we can adjust the way the image is outputted, given a height, width or aspect ratio etc.

Please bear in mind that all code provided in this article are experimental and does not yet cover things like access control, etc in this part.

Let's take a look at the service Unsplash.com. Its basically a free image bank with high quality images submitted by awesome freelancers and professionals that you can use for free.

Lake Tahio

Image by Eric Ward

The URL for the image above is the following:

https://images.unsplash.com/photo-1499365094259-713ae26508c5?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=26d4766855746c603e3d42aaec633144&auto=format&fit=crop&w=500&q=60

The parts we're actually interested in are: &auto=format&fit=crop&w=500&q=60 we can adjust them as we like and the image is displayed differently, i.e. changing the width of the earlier image to a smaller one:

Lake Tahio smaller

Alright, that's what we would like to do in Drupal 8. This article will be very iteratively, we'll rewrite the same code over and over until we get what we want. We'll notice issues and problems that we will deal with through out the article.

Prepare an environment to work in

We'll use a fresh Drupal 8.6.x installation.

To quickly scaffold some boilerplate code I'm going to use Drupal Console.

First let's create a custom module where we can put our code and logic in:

$ vendor/bin/drupal generate:module

I'll name the module dynamic_image_viewer

dynamic_image_viewer.info.yml

name: 'Dynamic Image Viewer'
type: module
description: 'View an image dynamically'
core: 8.x
package: 'Custom'

Next we need some images to work with, we'll use the core Media module for that. So let's enable that module:

vendor/bin/drupal module:install media

Now we can add some images. Go to Content >> Media >> Add media.

Media content

Implementing a Controller to display the image

The first step is to create a controller that will render the Media image to the browser. Again we'll use Drupal Console for a controller scaffold: vendor/bin/drupal generate:controller

We'll create a route on /image/{media} where Media will accept an media ID that due to Drupals parameter upcasting will give us a media instance in the controller method arguments. Doing this, if a invalid media ID is passed in the URL a 404 page is shown for us. Neat!

So we'll modify the generated controller slightly to this:

src/Controller/ImageController.php

<?php

namespace Drupal\dynamic_image_viewer\Controller;

use Drupal\Core\Controller\ControllerBase;
use Drupal\media\MediaInterface;

/**
 * Class ImageController.
 */
class ImageController extends ControllerBase {

  /**
   * Show an image.
   *
   * @param MediaInterface $media
   *
   * @return array
   */
  public function show(MediaInterface $media) {
    return [
      '#type' => 'markup',
      '#markup' => $media->id(),
    ];
  }

}


And the routing file looks like this: dynamic_image_viewer.routing.yml

dynamic_image_viewer.image_controller_show:
  path: '/image/{media}'
  defaults:
    _controller: '\Drupal\dynamic_image_viewer\Controller\ImageController::show'
    _title: 'show'
  requirements:
    _permission: 'access content'

If we install the module, vendor/bin/drupal module:install dynamic_image_viewer and hit the URL /image/1 we should see a page with the ID being outputted.

Render the original image

Ok. Currently nothing is rendered, so what we'll do is that we render the uploaded original image first.

To serve the file we'll use BinaryFileResponse. So let's update the ImageController::show method.

We'll also import the class in the top of the file:

use Symfony\Component\HttpFoundation\BinaryFileResponse;

  /**
   * Show an image.
   *
   * @param MediaInterface $media
   *
   * @return BinaryFileResponse
   */
  public function show(MediaInterface $media) {
    $file = $media->field_media_image->entity;

    $uri = $file->getFileUri();
    $headers = file_get_content_headers($file);

    $response = new BinaryFileResponse($uri, 200, $headers);

    return $response;
  }

So what we do here is that we grab the File entity from the field_media_image field on the Media image bundle. We get the URI and, using the file_get_content_headers we get the proper headers. Finally we serve the file back with the proper headers to the viewer.

And if we hit the URL again:

original-image-rendered

Before we continue, we should note some things that we'll get back to later:

  • What if the media ID is not a Media image?
  • The user can still access the media even if its unpublished.
  • What about cache?

Let's make a hard-coded image derivative

To modify the image, we'll create a new instance of ImageStyle and add an image effect.

Let's update the ImageController::show method again:

  /**
   * Show an image.
   *
   * @param MediaInterface $media
   *
   * @return BinaryFileResponse
   */
  public function show(MediaInterface $media) {
    $file = $media->field_media_image->entity;

    $image_uri = $file->getFileUri();

    $image_style = ImageStyle::create([
      'name' => uniqid(), // @TODO This will create a new image derivative on each request.
    ]);
    $image_style->addImageEffect([
      'id' => 'image_scale_and_crop',
      'weight' => 0,
      'data' => [
        'width' => 600,
        'height' => 500,
      ],
    ]);

    $derivative_uri = $image_style->buildUri($image_uri);

    $success = file_exists($derivative_uri) || $image_style->createDerivative($image_uri, $derivative_uri);

    $response = new BinaryFileResponse($derivative_uri, 200);

    return $response;
  }

So what we do here is that we create a new ImageStyle entity, but we don't save it. We give it a unique name (but we'll change that soon) and then add we add an image effect that scale and crops the image to a width of 600 and height 500.
And then we build the derivate uri and if the file exists already, we'll serve it and if not we'll create a derivative of it.

There is one big problem here. Since we use a unique id as name of the image style we'll generate a new derivative on each request which means that the same image will be re-generated over and over. To solve it for now, we could just change the

 $image_style = ImageStyle::create([
      'name' => uniqid(), // @TODO This will create a new image derivative on each request.

to a constant value, but I left it for that reason intentionally. The reason is that I want to explicitily tell us that we need to do something about that and here is how:

If we look back at the URI from Unsplash earlier &auto=format&fit=crop&w=500&q=60, these different keys are telling the code to derive the image in a certain way.

We'll use the provided keys and combine them some how in to a fitting name for the image style. For instance, we could just take the values and join them with a underscore.

Like so:

format_crop_500_60 and we'll have a unique string. If the user enters the same URL with the same parameters we'll be able to find the already existing derivative or if its another image, we'll create a derivative for it.

You'll also notice that I removed the $headers = file_get_content_headers($file); it is because those headers are not the correct ones for ur derivatives, we'll add them back soon.

Dynamic width and height values

On our second iteration of the code we'll now add the width and height parameters, and we'll also change the name of the image style to be dynamic.

Again, we'll update ImageController::show

We'll also import a class by adding use Symfony\Component\HttpFoundation\Request; in the top of the file.

  /**
   * Show an image.
   *
   * @param Request $request
   * @param MediaInterface $media
   *
   * @return BinaryFileResponse
   */
  public function show(Request $request, MediaInterface $media) {

    $query = $request->query;

    $width = (int) $query->get('width', 500);
    $height = (int) $query->get('height', 500);

    // We'll create the image style name from the provided values.
    $image_style_id = sprintf('%d_%d', $width, $height);

    $file = $media->field_media_image->entity;

    $image_uri = $file->getFileUri();

    $image_style = ImageStyle::create([
      'name' => $image_style_id,
    ]);
    $image_style->addImageEffect([
      'id' => 'image_scale_and_crop',
      'weight' => 0,
      'data' => [
        'width' => $width,
        'height' => $height,
      ],
    ]);
    
    // ... Rest of code

First we updated the method signature and injected the current request. Next, we'll get the width and height parameters if they exist and if not we fallback to something. We'll build an image style name of these dynamic values. With this we updated the name of the ImageStyle instance we create which makes sure that we can load the same derivative if the user hits the same URL. Finally we updated the width and height in the image effect.

Here is the updated ImageController::show and current file:

src/Controller/ImageController.php

<?php

namespace Drupal\dynamic_image_viewer\Controller;

use Drupal\Core\Controller\ControllerBase;
use Drupal\media\MediaInterface;
use Symfony\Component\HttpFoundation\BinaryFileResponse;
use Drupal\image\Entity\ImageStyle;
use Symfony\Component\HttpFoundation\Request;
use Drupal\Core\Image\ImageFactory;
use Symfony\Component\DependencyInjection\ContainerInterface;

/**
 * Class ImageController.
 */
class ImageController extends ControllerBase {

  /**
   * The image factory.
   *
   * @var \Drupal\Core\Image\ImageFactory
   */
  protected $imageFactory;

  /**
   * Constructs a ImageController object.
   *
   * @param \Drupal\Core\Image\ImageFactory $image_factory
   *   The image factory.
   */
  public function __construct(ImageFactory $image_factory) {
    $this->imageFactory = $image_factory;
  }

  /**
   * {@inheritdoc}
   */
  public static function create(ContainerInterface $container) {
    return new static(
      $container->get('image.factory')
    );
  }
  /**
   * Show an image.
   *
   * @param Request $request
   * @param MediaInterface $media
   *
   * @return BinaryFileResponse
   */
  public function show(Request $request, MediaInterface $media) {

    $query = $request->query;

    $width = (int) $query->get('width', 500);
    $height = (int) $query->get('height', 500);

    $image_style_id = sprintf('%d_%d', $width, $height);

    $file = $media->field_media_image->entity;

    $image_uri = $file->getFileUri();

    $image_style = ImageStyle::create([
      'name' => $image_style_id,
    ]);
    $image_style->addImageEffect([
      'id' => 'image_scale_and_crop',
      'weight' => 0,
      'data' => [
        'width' => $width,
        'height' => $height,
      ],
    ]);

    $derivative_uri = $image_style->buildUri($image_uri);

    $success = file_exists($derivative_uri) || $image_style->createDerivative($image_uri, $derivative_uri);

    $headers = [];

    $image = $this->imageFactory->get($derivative_uri);
    $uri = $image->getSource();
    $headers += [
      'Content-Type' => $image->getMimeType(),
      'Content-Length' => $image->getFileSize(),
    ];

    $response = new BinaryFileResponse($uri, 200, $headers);

    return $response;
  }

}

First we added a new dependency to our controller \Drupal\Core\Image\ImageFactory which allows us to construct an Image instance, where we can get meta data from the image, but also gives us a unified interface to apply things to our image. For instance, we could desaturate the image by doing $image->desaturate(); and then resave the file. Fow now we're only using it to retrieve the meta data. We'll take advantage of that in the next part, when we refactor some of the written code and add more flexibility to what we can dynamically output.

If we hit the url and add both the width and height parameters we'll get something like this:

generated-image

In the up coming article we'll take a better look at what we have, what we miss (access control, what if a user hits the same URL at the same time), adding more effects, and exploring the use of the Image and toolkit APIs more in depth.

We'll most likely remove adding image effects through ImageStyles and only use the image style for creating derivates that we can we can later apply changes with the toolkit API.

If you want to continue on your own, take a look at ImageStyleDownloadController.php file in core which contains a lot of code that we can re-use.

Jun 06 2018
Jun 06
Mike MadisonAbout Mike Madison

Mike Madison is an Acquia Certified Drupal Developer and a technical architect at Acquia. With over a decade of experience in web and background in HCI, he has used open source technologies such as Drupal (and Wordpress and Semantic MediaWiki) to solve challenging problems for a variety of clients and organizations around the world. He also contributes to a variety of Drupal community organizations and projects such a Drupal4Gov, as a maintainer of the Conference Organizing Distribution (COD) and Acquia's Build and Launch Tools (BLT).

Recently Mike has been working on a Digital Signage project for a mass transit agency. This project uses Drupal 8 and Amazon's Internet of Things (IOT) service to provide real time transit data to millions of riders daily.

Jun 05 2018
Jun 05

Webform allows you to create powerful forms in Drupal without the need for any custom code. You can use it for a basic contact us form with a few fields such as name, phone and email, or it can also be used to create complex multi page forms with conditional fields.

If you want to allow your editors to create their own forms without the need of a developer then install and teach them how to use the module. If you want to learn more about webform we have a two part series which will help you get started; Getting Started with Webform in Drupal 8 and Moving Forward with Webform in Drupal 8.

Collecting submissions using Webform is easy, but what if you want to integrate the module with a 3rd party SaaS provider? What if you want to push all contact form submissions into your CRM system, or add a row into a Google Sheets spreadsheet.

Of course, this can be done by a developer through the right APIs but you can also do it without writing any code using a service called Zapier.

In this tutorial, you’ll learn how to send Webform submissions into Zapier which will then add it as a row into a Google Sheets spreadsheet.

What is Zapier?

Zapier is an automation platform which lets you create workflows based on an action. For example, you could create a workflow when a user subscribes to a MailChimp list it’ll add the contact in a CRM (if supported by Zapier) or a Google Sheets spreadsheet.

It has integration with over 1000 SaaS applications and I do recommend that you have a play around with the service if you’ve never used it. They do offer a decent free plan which is more than enough to get you started.

Personally, if I’m looking at using a new SaaS application the first thing I check is if it has Zapier integration that way you can move data around and you have more flexibility.

How Does Webform Send Submissions to Zapier

Submissions are sent to Zapier using a POST request. This can be configured by adding a “Remote post” handler to a form. When a submission gets added, Webform will send it via a POST request using the URL in the “Remote post” handler.

Getting Started

For this tutorial, I’m going to assume you know how to use Webform. So all we’re going to do is download the module and install Webform and Webform UI. We’ll use the default Contact form that comes with the module.

Using Composer:

Composer require drupal/webform

Step 1: Create Zap on Zapier and Get POST URL

If you haven’t already, go ahead and create an account on Zapier. It is a paid service but has a free plan.

The first thing we’ll need to do is create the Zap where we’ll define a trigger and action.

1. Click on “Make a Zap!” in the top right.

2. In the “Choose a Trigger App” page, click on Webhooks in the “Built-in Apps” section down the page.

3. Choose “Catch Hook” and click “Save + Continue”.

4. Click Continue on the “Pick off a Child Key” page.

5. Copy the POST url because we’ll need it for Webform.

Step 2 : Set up Remote Post Handler

Using the POST url from Zapier which we got in the last section, we’ll need to create a “Remote post” handler in Webform.

1. Go to Structure, Webforms and click on Settings on a Webform. For this tutorial, I’ll use the default Contact form that comes with Webform.

2. Click on the “Emails / Handlers” tab, then click on “Add handler”.

3. Click on “Add handler” on the “Remote post” row.

4. In the Completed section paste in the URL we got from Zapier and click on Save.

Note: You can add a URL if the submission is updated or deleted. That’s a nice bit of added flexibility. I should also note that this is all the configuration required on Webform’s part, cool isn’t it!

Step 3: Send Test POST to Zapier and Finish Configuring Trigger

Let’s now jump back into the Zap we started building in step one.

1. Once you’ve configured the “Remote post” handler click on “Ok, I did this”.

2. Now go back to your Drupal site and submit the actual form so it sends a POST to Zapier. This is a required step.

3. Once you’ve sent a test POST, you should be on the “Pick A Sample To Set Up Your Zap” section. You can view what was in the post by clicking on the down arrow.

When you’re ready click on Continue.

Step 4: Configure Action in Zap

At this point, we’ve configured the trigger in our Zap and sent a test submission. We know that the POST request from Webform worked because Zapier received it.

Now we need to configure the action; where the submission will be stored.

1. Click on Google Sheets on the “Choose an Action App”.

2. Choose “Create Spreadsheet Row” and click on “Save + Continue”.

3. Connect Zapier to your Google account, then click on “Save + Continue”.

4. From the Spreadsheet field select the actual spreadsheet you want the submissions saved into.

5. Select the Worksheet within the spreadsheet.

If you see the message below it means your spreadsheet doesn’t have any headers.

Go and add a header for each column you want to save in your Google Sheets spreadsheet.

6. Now go and map the fields with the values below the “Catch Hook”.

Then click on Continue.

7. Click on “Send Test to Google Sheets” to test everything out.

Check your Google Sheets you should see a new row in it.

Then click on Finish.

8. Don’t forget to name and Zap and switch it on.

Step 5: Test Webform Submission

Go to your Webform and create an actual submission. Once submitted you should see the submission as a row in the spreadsheet.

Debug Zapier

If you need to debug what’s coming into Zapier or you want to see all the submission data which has been pushed into Zapier, then go to the “Task History” page.

From this page you can view if the task was successful or if there was a error. You can sometimes get an error if the API is down and not working.

You can also see what data has come in and out by clicking on the Task.

This gives you some nice visibility into what Zapier is handling.

Summary

The combination of Webform and Zapier is powerful. Almost everyone can be trained to use Zapier and create Zaps which will open a whole new world of possibilities. You’ll finally be able to connect your CRM with Drupal and without the need for custom code.

Ivan Zugec

About Ivan Zugec

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 10 years and has successfully completed several large Drupal projects in Australia.

May 22 2018
May 22

If a user needs to create an account on a Drupal site, they go to the user registration page at “/user/register”. This page is the registration form on a Drupal site. You can customize it by adding or removing fields. But what if you want to have multiple registration pages?

Let’s say you have two different roles on your Drupal site and you need a separate form for each role. How would you build that?

You could handle all of this writing custom code but remember we’re using Drupal so means there’s a module that can handle this type of functionality and It’s called Multiple Registration.

The Multiple Registration module allows you to create individual registration forms base off a user role in Drupal. When you register on one of the forms, you’re automatically assigned the configured role.

2018-05-14_22-28-00

In this tutorial, you’ll learn how to use Multiple Registration to create individual registration forms.

Installing the module

Download and enable the module with your preferred method.

Composer:

composer require drupal/multiple_registration

Drush:

drush dl multiple_registration -y

After downloading the module, click Extend in the toolbar and install it.

Enabling the Multiple Registration module

Create User Roles

The Multiple Registration module requires additional roles in order to display a customized registration form to each role. For the purpose of this tutorial, we’ll work with the example of a high school site with a registration form for parents and another for students.

The form for parents will have a field requiring information about payment methods and a billing address, while the form for students won’t have those fields, but instead of that will have a select list to vote for a sports team.

Click People, Roles, “Add role” in order to create the “Parent” role.

Creating roles

Repeat the process and create a “Student” role. After you’ve created the roles click the dropdown arrow next to the Parent role and choose “Add own registration page”.

Adding own registration page

You’ll be prompted to create a path for the Registration page for this particular role. For example, you could add “user/parent” as the path.

Creating the registration page path

Create also a registration page for the other role (in this case “Student”).

Configure Registration Forms

Now that you’ve created the roles, it’s time to configure the registration form for each one.

1. Click Configuration, “Account Settings”, “Manage fields” and click the “Add field” button.

2. Choose the “List(text)” option and label it “Payment method”.

Enter in a few options into “Allowed values list” and set the “Allowed number of values” to Unlimited, since a parent can have more than one payment method and click “Save field settings”.

1|Cash
2|Credit Card
3|Check
4|Other

List key-value pairs

You’ll be redirected to the Edit tab, scroll down to the bottom of the page and check “Users with Parent role”. This configuration is provided by the Multiple Registration module. Click “Save settings”.

Assigning fields to a role

Add another text field for the Billing address and assign it to the Parent role.

Lastly, add a list field for a sports team election, this one will be limited to one choice. In the Edit screen of this field check “Users with Student role” and click “Save settings”.

Assigning fields to a role

Test New Registration Forms

Click “Log out” on the right of your screen and click “Log in” on the same spot once again. You will see two new tabs corresponding to the roles we’ve previously created.

If you can’t see the tabs then you’ll need to rebuild the site cache. Go to Configuration, Performance and click “Clear all caches”.

Check each form and make sure the fields were assigned properly to each form.

Checking the fields in each registration form

Summary

The Multiple Registration module provides the ability to create different registration forms without having to write code. Best of all, the role configured in the form is automatically assign when a user registers. This will save you time because you want have to manually assign a role.

Jorge Montoya

About Jorge Montoya

Jorge has been reading about Drupal and playing with it for almost 5 years. He likes it very much! He also likes to translate German and English documents into Spanish. He's lived in some places. Right now, he lives in the city of Medellín in his homeland Colombia.

May 15 2018
May 15

Media Management for Drupal 8.5+

There’s a lot of momentum to fix media management in Drupal 8 thanks to the Media Entity module. By using a combination of Media EntityEntity Embed, Entity Browser and some media providers such as Media entity image you could add decent media handling in Drupal 8.

Then in Drupal 8.4, the Media Entity functionality was moved into a core module called Media. However, the core module was hidden by default. Now in Drupal 8.5 it’s no longer hidden and you can install it yourself.

In this tutorial, you’ll learn how to install and configure the Media module in Drupal 8 core. This tutorial is an updated version of the How to Manage Media Assets in Drupal 8 tutorial where we cover Media Entity.

Configuring Entity Embed and Entity Browser for the core Media module is essentially the same as with Media Entity. So if you have experience using Media Entity, then you’ll be fine using the core Media module.

Sections:

  1. Storing Media Assets
  2. Displaying Media Assets
  3. Embedding Assets into the Editor
  4. How to Browse Media Assets

What’s the Difference Between Media Entity and Media

The biggest difference between the two modules is that the API has changed. Any media provider module for Media Entity such as Media entity Instagram or Media entity Twitter need to be updated to use the new API. A lot of these modules now have a 8.x-2.0 version which only works with core Media. So if you’re going to use a media provider module read the project page.

If you want to see a technical explanation of the changes go to the “Moved a refined version of the contributed Media entity module to core as Media module” change record on drupal.org.

Getting Started

Before we begin, go ahead and install the Media module. It comes with Drupal core but it’s off by default.

Part 1: Storing Media Assets

The Media module implements a fieldable entity type called Media. This means you can add custom fields to them like content types and adjust their look-and-feel through the “Manage display” page. If you know how to manage content types then you’ll be right at home managing media types.

Let’s first look at how media assets are stored in Drupal 8. Saving assets into a Drupal site is similar to creating content.

1. Click on Content in the toolbar.

2. Click on the Media tab, then click “Add media”.

3. Choose which type of media you want to upload, in this example I’ll choose Image.

4. Enter in a name for the asset in the Name field and select an image using the Image, then click on Save.

5. Once you save the form, you’ll be redirected to the public media page.

View all Media Assets

You can view all upload assets from the Media page we were just on, go to the Content page and click on the Media tab.

You can search assets by their name using the “Media name” field or filter by media type using the Type drop-down.

Creating and managing media assets are pretty straightforward but the magic happens in the Media types, let’s look at them next.

Media Types

Media types are just like content types or taxonomy vocabularies. They are fieldable configuration entities.

Go to Structure then click on “Media types” to create and manage them.

Drupal 8 ships with four media types; Audio, File, Image and Video.

The File and Image media types are fairly self-explanatory use them to upload images or general files such as PDFs.

Audio and Video media types should be used when you want to locally host the video or audio file. The asset will be played using the HTML tags, <audio> and <video>.  You can’t use the this media type to embed videos from YouTube or Vimeo. To do that you’ll need the “Video embed field” and a new media type which we cover later in this tutorial.

Media Source

Every media type needs to use a “Media source”, this tells Drupal how the file should be handled, i.e., how the file should be stored or if a thumbnail should be generated.

The Media module in Drupal 8.5 comes with four media sources; audio, video, file and image.

So if you want to store and display tweets for example, then all you’ll need to do is create a media type called “Tweet” (or whatever you want) and install the 8.x-2.0 version “Media entity twitter” module. The 8.x-1.x version only works with Media Entity, whereas, the 8.x-2.x works with the core Media module.

Create Embed Video Media Type

Now let’s go and create a new media type for embedding YouTube videos. But first, download the 8.x-2.0 (make sure it’s 2.0) version of “Video Embed Field“. The module ships a sub-module called “Video Embed Media” which has a media source for handling embedded videos.

composer require drupal/video_embed_field

Once downloaded go and install “Video Embed Media” from the Extend page.

1. Go to Structure, “Media types” and click on “Add media types”.

2. Add “Embed video” into Name and “Used for embedding videos” into Description.

3. Select “Video embed field” from the Media source drop-down box.

4. From the field mapping section, you can store specific metadata about the video into a custom field.

For example, if you want to store the YouTube ID, which’ll be the “Video ID”. All you need to do is create a custom field and select it from the drop-down to map it.

5. Once everything is complete click on Save at the bottom of the page.

Edit Media Type

When you edit the Embed video media type, you should see three familiar tabs: Manage fields, Manage form display and Manage display.

A media type is just a fieldable configuration entity same as content types or vocabularies so managing fields are the same.

If you click on Manage fields you see a single field called “Video Url”. This is where the URL to the embedded video will be stored. We didn’t create the field, instead “Video Embed Media” programmatically attached it for us when we created the media type.

Create an Embed Video

Now that we’ve created our media type, let’s create the actual asset.

1. Go to Content and click on the Media tab.

2. Click on “Add media” then “Embed video”.

3. Enter a name into the Name field and enter in a URL to a YouTube video, then click Save.

It’s important to note that Video Embed Field supports more than just YouTube. Out-of-the-box it supports YouTube and Vimeo but it has support for other video providers via contrib modules. Check out the “Video Providers” section on the project page for more details.

“Video Providers” section on the Video Embed Field project page.

4. Once you’ve saved the form, you’ll be redirected to the media display page.

But as you can see in the screenshot above, the page looks messy. It’s displaying all the fields; date, author, thumbnail and at the bottom the actual embedded player.

Modify Media Display

Let’s clean up the display of the embedded video so only the embedded player shows.

1. Go to Structure, “Media types”.

2. Click on “Manage display” from the Operations drop-down on the “Embed video” row.

3. Move all the fields to the Disabled section except for “Video Url”.

4. Now if you go to the media display page you should only see the embedded player.

Part 2: Displaying Media Assets

You learnt how media assets are stored in part one and how to create your own media types. Now we’ll look at how to display the assets on a content type using a field.

I mentioned earlier that an asset is just an entity. So if you want to attach it to a basic page or article, all you need to do is create an entity reference field. Of course there’s a bit more to it, so let’s look at it now.

Create Media Field

The Media module comes with a field called Media. It simply lets you reference assets using an entity reference field. Let’s create one on the Article content type.

1. Go to “Content types”, “Manage fields” on the Article row.

2. Click on “Add field.

3. Select Media from the “Add a new field” drop-down and enter Asset into the Label field.

4. On the “Field settings” page, leave it as is and click on “Save field settings”.

5. Down in the “Reference type” field-set, you need to select which media type you allow. In this example, I’ll choose Image, then click on “Save settings”.

Now it’s time to test it out.

Go to Content, click on “Add content”, then Article and you should see the Asset field with an autocomplete field.

Then simply search for an asset using the “Use existing media” autocomplete field.

If you need to create a new asset, you’ll need to click on the “media add page” link or just go to Content, Media and create it from there.

But there is a problem with this method. You can’t create an asset directly from the article page. You need to go to the add media page, a totally seperate screen, upload the image then come back and search for it in the autocomplete field.

This workflow is not ideal. Now I’ll show you how to use Inline Entity Form module so you can create the assets without leaving the page.

Use Inline Entity Form to Upload Media Assets

Go download and install the Inline Entity Form module.

composer require drupal/inline_entity_form

1. Once installed, go to the “Manage form display” on the Article row.

2. Then select “Inline entity form – Complex” from the Widget drop-down on the Asset field.

3. Click on the cog wheel and make sure you check both “Allow users to add new media entities.” and “Allow users to add existing media entities.”.

3. Then click on Save.

Now if you go back to the create Article form, you’ll notice that the Asset field looks different.

Just click on “Add new media” if you want to create a new asset. When you click on the button, the create media form appears right here so you can create a new asset and attach it to a content type without leaving the form.

The “Add existing media” button allows you to select existing assets via an autocomplete field.

As you can see Inline Entity Form really does create a better user experience for editors. From the same page you can create/edit/delete and attach assets to a content type without leaving the page.

Part 3: Embedding Assets into the Editor

So far we’ve looked at how to attached assets to fields, but now let’s look at embedding them in the editor.

To build this functionality we’ll need two modules: Entity Embed and Embed.

Entity Embed allows you to create a button which is added to the editor. When you need to embed an asset, just click on the button, select the asset and embed. The module isn’t tied to the Media entity, it can be used to embed any entity type.

Using Composer, download the following modules then enable Entity Embed.

composer require drupal/embed
composer require drupal/entity_embed

Create Embed Button

1. Go to Configuration and click on “Text editor embed buttons”.

2. Click on “Add embed button”, enter Assets into Label and select Entity from “Embed type” and Media from “Entity type”.

3. Further down the page you can specify which bundles (Media types) should be allowed. If none are selected then all are allowed.

You can also upload an icon for the button. I’ll be using the media embed icon which comes with the Drupal 8 version of the Media module. You can grab a copy of it from here.

Once you’ve configured the form click on Save.

Manage Buttons

You can have as many buttons as you want and they can all be managed from the List page. If you need to modify a button then just click on the Edit button in the operations column.

Add Button to Editor

Now that we’ve created the button let’s add it to the editor. It won’t automatically appear in the editor unless we add it ourselves.

1. Go to Configuration and click “Text formats and editors”.

2. Click on Configure on the “Basic HTML” text format.

3. Find the button in the “Available buttons” section and move it into Media in the “Active toolbar” section.

Configure Filters

Now comes the tricky part, we’ve added the button but now we need to configure the filters in a specific order.

Few important steps need to happen here:

  1. Add the correct tags to the “Allowed HTML tags” text area.
  2. Enable “Display embedded entities” filter
  3. Reorder filters in specific order.

Configure “Allowed HTML tags” list

Once the button was added you should see the following tags in “Allowed HTML tags”.

<drupal-entity data-entity-type data-entity-uuid data-entity-embed-display 
data-entity-embed-display-settings data-align data-caption data-embed-button>

Enable “Display embedded entities” Filter

Next, enable the “Display embedded entities” filter from Enabled filters check list.

Confirm Order of “Align images” and “Caption images”

The Entity Embed README.txt mentions if you’re using the “Align images” and “Caption images” filters, to order “Align images” before “Caption images”.

Problem with “Restrict images to this site” Filter

The “Restrict images to this site” filter stops an image being displayed if you embed it and select an image style.

The filter stops a user from pointing to an image which is not hosted on the site. For example, if your Drupal site is hosted at my-drupal.com, then it won’t allow you to add an image such as <img src="http://random-site.com/image.jpg" />, all your images need to be <img src="http://my-drupal.com/image.jpg" />.

There is an open issue on drupal.org about it.

The workaround for now, unfortunately, is to remove the filter.

Once everything has been configured, make sure you click on “Save configuration” at the bottom of the page.

The filters list should look like this:

How to Embed Assets into the Editor

Now that the “Basic HTML” text format has been configured, we should be able to embed assets.

1. Go to Content, “Add content” and click on Article.

2. Click on the embed button and a pop-up should appear with an autocomplete field.

Search for the asset using its “Media name” and click on Next.

3. If it’s an image, select Thumbnail from “Display as”, select an image style, align and add a caption.

Then click on Embed.

4. Once embedded you should see the image on the right with the caption.

Save the page and you’re good to go.

Embedding YouTube Videos

In the section above it was easy to embed an image. You simply upload it, select a thumbnail size and you’re done.

Adding a video using the “Embed video” media type we created earlier is just as easy.

1. Click on the embed button within the editor, and search for a video in the Name autocomplete field.

2. Then select “Full content” from the “Display as” drop-down and click on Embed.

3. Once embedded you should see the YouTube player in the editor.

If you do not see an embedded player and just the video thumbnail then you’ll need to configure the formatter on the Media type.

Go to Structure, “Media types” and click on “Manage display” on the Embed video row.

Make sure the “Video Url” field is using the Video formatter.

Part 4: How to Browse Media Assets

We had to use an autocomplete field to find and embed an asset into the editor in the last section. This type of user experience is not great. You can’t upload an image after clicking on the embed icon, without going to a different page, and you can’t easily search assets, you have to know the name of it.

In section, you’ll learn how to use Entity Browser which lets you create a screen where you can search, select and upload new assets.

Using Composer, download the following modules then enable Entity Browser and Chaos tools.

composer require drupal/ctools
composer require drupal/entity_browser:~2.0

Make sure you download the 8.x-2.0 version of Entity Browser.

How to Create an Entity Browser

Configuring Entity Browser requires two steps:

  1. First you’ll need to create a view using a display called “Entity browser”. This view will be used to list out all assets.
  2. Then you’ll need to configure an entity browser and select the created view.

Create Entity Browser View

1. Go to Structure, Views and click on “Add view”.

2. Fill out the “Add view” form, using the values defined in Table 1-0 and click on “Save and edit”.

Table 1-0. Create a new view

Option Value View name Media browser Machine name Media_browser Show Media type of All sorted by Newest first Create a page Unchecked Create a block Unchecked

3. Next to the Master tab click on “Add” and select on “Entity browser.

It’s important that you select the “Entity browser” display or you won’t be able to select this view when we’re configuring the actual browser.

Let’s change the view to a table so it looks better.

4. Click on “Unformatted list” next to Format.

5. Select Table and click on Apply.

At this point we’ve switched the view from an unformatted list to a table.

Now we need to add two more fields: Thumbnail and “Entity browser bulk select form”.

6. Click on Add next to Fields, add the Thumbnail field.

This will display a thumbnail of the media asset.

7. Then add the “Entity browser bulk select form”.

This field is used to select the asset when browsing. It is a required field.

8. Reorder the fields so they’re as follows:

9. Once complete the preview should look like the image below:

10. Don’t forget to click on Save.

Create Entity Browser

Now that we’ve created the view, let’s configure the browser.

1. Go to Configuration, “Entity browsers” and click on “Add entity browser”.

2. Enter “Assets browser” into Label, select iFrame from “Display plugin” and Tabs from “Widget selector plugin”.

Leave “Selection display plugin” as “No selection display”.

Then click on Next

Do not select Model from Display plugin if you’re using the browser with Entity Embed it isn’t compatible (Issue #2819871).

3. On the Display page, configure a width and height if you like but do check “Auto open entity browser. This will save an extra click when embedding.

Then click on Next.

4. Just click Next on “Widget selector” and “Selection display”.

5. On the Widgets page, select “Upload images as media items” from the “Add widget plugin”. Change the Label to “Upload images”.

6. Then select View from “Add widget plugin”.

7. From the “View : View display” drop-down, select the view which we created earlier.

If you can’t see your view, make sure you select “Entity browser” when configuring it:

8. Once configured the Widgets page should look like:

Configure Entity Embed to use Browser

Entity Embed now needs to be linked to the browser we just created.

1. Go to Configuration, “Text editor embed buttons” and edit the embed button.

2. You should see a drop-down called “Entity browser”, select the browser you just created and click on Save.

Using the Entity Browser

Go into an article or page and click on the Entity Embed button.

You should now see a pop-up with two tabs: “Upload images and view.

From the “Upload images” tab, you can upload a new image and it’ll create an Image media entity.

If you click on view, you’ll see all the media assets.

To embed an asset, just choose which one you want and click on “Select entities”.

Summary

With every new Drupal 8 release you can see that the media functionality is getting better. In Drupal 8.5 , there’s still a lot of manual configuring required but the foundation of how assets are stored exists. If you want to keep track of how everything is progressing then look at “Media in Drupal 8 Initiative” and “Media initiative: Essentials – first round of improvements in core“.

Ivan Zugec

About Ivan Zugec

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 10 years and has successfully completed several large Drupal projects in Australia.

May 08 2018
May 08

With the Toolbar Menu module, you can add as many menus as you need to the toolbar of your Drupal installation. By default, a Drupal 8 installation has 3 menu links in its toolbar. These are:

  1. Manage – Administration of the whole Drupal site
  2. Shortcuts – Links added by the admin to administrative pages used frequently
  3. User Name – Link to the profile page

This module works also with the Admin Toolbar module, which improves the default toolbar providing dropdown menus. In this tutorial, we’re going to cover the usage of the Toolbar Menu module.

What to learn how to change the color of the toolbar depending on which environment you’re on, i.e., dev or test? Then check out Differentiate Websites using Environment Indicator in Drupal 8.

Getting Started

First of all you need to download and install the module:

With Composer:

composer require drupal/toolbar_menu

With Drush:

drush dl toolbar_menu -y

After downloading, go to Extend, look for the module and enable it. The Toolbar Menu module requires the Toolbar and Breakpoint modules. These two modules come with Drupal core and should be enabled by default.

Enabling the module

Configuring the Toolbar Menu Module

To configure Toolbar Menu, click Configuration and in the “USER INTERFACE” section click “Toolbar Menu”

Configuration of Toolbar menu

Click the “Add toolbar menu element” button, you’ll be prompted to enter a label and select a menu from the dropdown list. For the purpose of this tutorial, I’m going to select the “Footer menu”. Leave the checkbox unchecked, that way, you’ll see the label “Extra” instead of the label “Footer” as a clickable menu in the Toolbar of your Drupal installation and click Save.

Configuration of Toolbar Menu

The new menu will appear in your Toolbar and if you click on it, it will display its menu links. In this case, there’s only one link pointing to the contact page.

Toolbar Menu module

Let’s add another link.

Adding Links to a Menu in the Toolbar

To add a link to the newly added menu in the Toolbar, click Structure, Menus. Locate the dropdown widget on the right of the Footer menu, click the dropdown arrow and select “Add link”.

Adding links to a menu

Click the “Add link” button to enter a title for this menu link, for example “Disclaimer” to create a link to the Disclaimer page of your website. You could even include external links here if that makes sense in your particular case.

Choosing a link for Toolbar Menu

This is an autocomplete field, just start typing the name of the node you want to link to, once found select it and click Save.

Check the “Extra” menu link in the Toolbar. It has the new link you just added.

Reviewing the new link

If you click this new link, it will redirect you to the Disclaimer page as expected.

Summary

Toolbar Menu improves the user experience of your Drupal site by allowing site administrators to insert menu links directly in the Drupal default toolbar. With this module you can add all kinds of custom and/or default Drupal menus and grant access to certain user roles to those menus with the help of Drupal’s permission system.

Jorge Montoya

About Jorge Montoya

Jorge has been reading about Drupal and playing with it for almost 5 years. He likes it very much! He also likes to translate German and English documents into Spanish. He's lived in some places. Right now, he lives in the city of Medellín in his homeland Colombia with his wife and son.

Apr 25 2018
Apr 25

The Linkit module allow site editors to work in a more comfortable way when linking to internal entities (i.e. content, users, taxonomy terms, files, comments, etc.) and when linking to external content as well.

The benefit of the module is that your editors won’t have to copy and paste URLs of content they’re linking to, instead the module provides an autocomplete field, which they can use to search for content.

Linkit works based on a profile system. You can choose as many or as few plugins (linking options) for each profile and then assign each profile to a particular text format. This provides an extra layer of granularity, because the linking permissions are granted in the text editor and not within Linkit. That way you can add multiple roles or just one role to a Linkit profile.Linkit profiles

In this tutorial, you’ll learn how to configure Linkit by creating a profile and adding a button to CKEditor.

Getting Started

Before we can begin, go download and install Linkit.

Using Composer:

composer require drupal/linkit

Or, Drush:

drush dl linkit -y

Configuring Linkit

To configure Linkit, click Configuration, “Linkit profiles” and then on click “Add profile”.

Linkit profiles

You’ll be presented with the configuration screen for the first profile. For the purpose of this tutorial, I’m going to create two profiles: one for admin users and one for editors. Begin creating the first Admin profile. Give it a proper name and a description. After that click the “Save and manage matchers” button.

Adding a Linkkit profile

The matchers are just the entity types you’re allowed to link to. Click “Add matcher”, select Content and click “Save and continue”.

Adding the "Content" matcher

The “Results description” textbox helps us build our results in the Linkit autocomplete field in a more organized way through the use of tokens. For example, you can add [node:title]/[node:author].

The “Restrict to selected bundles” options allows us to restrict the search results to a particular bundle. All bundles will be shown in the select results if none are checked.

The “Group by bundle” option lets you group the results in the Linkit search results by bundle. This is an advantage if you have lots of content because you can search in an organized way. I’m going to include unpublished nodes, since this is the “Admin” profile. After choosing all options click “Save changes”.

Configuration of the Result description

Let’s add another matcher for the admin profile. We’ll assume that the admin user is allowed to link to User profiles while the editor profile won’t.

Adding the User matcher

Configure the “Result description” ([user:created]/[user:account-name]) as shown in the image below and click “Save changes”.

Configuration of the User matcher

You have now two matchers in your Linkit profile. You could add all of them if you want to. Now it’s time to configure the link attributes. Click the “Manage attributes” tab on the right.

Link attributes

This functionality allows you to add additional attributes to the link. Click the “Add attribute” button and choose the Title attribute. Click “Save and continue.

Link attributes

Check the “Automatically populate title” option and click “Save changes” once again.

Edition of link attributes

You can add as many attributes to your links as you want. The procedure is exactly the same as with the matchers.

Add Linkit Button to Editor

Now that you have created a Linkit profile, it’s time to add the button to the editor. Click Configuration, “Text formats and editors”. Choose the Full HTML format and click Configure on the right.

Assigning Linkit profile to a Text format

Remove the default Link button from the active toolbar and add the Linkit button instead.

Assigning Linkit profile to a Text format

Your toolbar should look like this:

Assigning Linkit profile to a Text format

Scroll down a little bit and you’ll find a “Linkit” vertical tab. Click and choose the profile you configured in the last step.

Assigning Linkit profile to a Text format

Click the blue “Save configuration” button.

Now it’s time to create a node and add some links pointing to another article and to a user profile.

Test Linkit

Click Content, “Add content”, Article. Write a proper title for you article and write some text in the body section. Make sure the “Text format” of your current editor is set to “Full HTML”, otherwise you won’t be able to see the Linkit button.

Linkit test

Highlight some text and click the Linkit button. If you type in the letter a for example in the Linkit modal, you’ll see all items that match that letter. These items will be grouped by bundle (when it’s about content). Also you’ll see the users that match that particular letter. Notice that the search results are presented according to the “Result description” (with tokens) that you configured in the Matchers section.

Linkit modal window

Choose one of the options, the Title attribute will prepopulate itself with the node title. Highlight another word or phrase and link it to some user. Save the node. Test now that your links point to the right node/user.

Summary

The Linkit module will save your editors time because they will no longer have to manually find content and the URL to link to. Linkit allows them to find and create links directly from the editor without having to leave the page.

Jorge Montoya

About Jorge Montoya

Jorge has been reading about Drupal and playing with it for almost 5 years. He likes it very much! He also likes to translate German and English documents into Spanish. He's lived in some places. Right now, he lives in the city of Medellín in his homeland Colombia with his wife and son.

Apr 17 2018
Apr 17

As a web developer, you probably build your sites first in a local environment (aka localhost), then you commit all your changes to a staging server (i.e. an online server to which only you or the development team has access) and if everything works fine in the staging server, you’ll commit these changes to a production or live server (that’s your online site).

However, you don’t have a way to differentiate between your local, your staging and your production environments apart from the address box of your browser, so it’s very easy to mix up everything and that could lead to complications. The worst case scenario is making changes directly to your live site without testing and breaking it. In order to prevent this, you can use the Environment Indicator module.

The Environment Indicator module adds a visual hint to your site, that way you’ll always be aware of the environment you’re working on. We’re going to cover installation and usage of this module in this tutorial.

Let’s start!

Getting Started

There are several ways to install the module. You can use composer for example:

Before we begin, go download Environment Indicator and install the “Environment Indicator UI” sub-module.

Using Composer:

composer require drupal/environment_indicator

Or, Drush:

drush dl environment_indicator -y

Once dowloaded, go to Extra and install both: “Environment Indicator” and “Environment Indicator UI”

Enabling the modules

Configuring Environment Indicator

To configure the module, go to Configuration, “Environment Indicator Settings” and you’ll see 3 tabs:

  • Settings
  • Environment Switcher
  • Current Environment (this tab is provided by the Environment Indicator UI module)

In the Settings tab you have two options:

  • Toolbar: integrates the environment indicator module with the toolbar. The toolbar will have a different color according to the environment you’re in.
  • Favicon: the module will add a favicon to your browser tab with the color of the corresponding environment and the first letter of it. If the name of your environment is Development, you’ll see a D with the colors you set up for that particular environment. This is practical if you have several tabs from different environments opened in your browser

Leave both options checked.

Environment Indicator Settings

In the Environment Switcher tab you can add buttons to switch between all your environments.

Click the “Add environment” button and give it a proper name, for example “Staging Server”. In the Hostname field insert the address of your staging server, configure the colors according to your preferences.

Environment Switcher Configuration

You could for example use the colors from a traffic light to indicate the different environments as defined in table 1-0.

Table 1-0. Example list of environments and their colors

Environment

Foreground (text) color

Background color

Development White Green Staging Black Yellow Production White Red

Click the Save button and repeat the procedure for each of your servers.

You should see all the different environments and their colors on the “Environment Switcher” page.

Environment Switcher

Finally click the “Current Environment” tab. This is the place where you configure the colors of the toolbar for the environment you’re working in at this very moment. I’m working on my localhost, so I will call this environment Development.

The foreground (text) color will be white and the background color will be a shade of green (lighter than the color of the switcher), you can choose the same color or another. I’ve chosen a different color just for demonstration purposes.

Click “Save Configuration”.

Notice that you’ll have to repeat this process in each one of your environments.

Current Environment Configuration

Click Configuration, Performance and clear the site cache.

Cache rebuild

Test Environment Indicator

You’ll see immediately that the toolbar changes its color to the color you selected in the “Current Environment” tab and also a new menu link in the Toolbar called Development.

Click this menu link. There are the environment switcher buttons, each one of them will take you to the URL you entered in the “Environment Switcher” tab. Notice also the favicon in the browser tab with a white “D” (Development) over a green background.

Envirionment Indicator Toolbar and Switchers

Configure Environment Indicator via settings.php

As already mentioned, the “Current Environment” tab is provided by the Environment Indicator UI module. You can also “hardcode” these settings directly in the settings.php file of your installation without the need of enabling the module.

Environmet Indicator Settings

Use a text editor to open the settings.php file of your Drupal installation and type this code at the end of the file:

$config['environment_indicator.indicator']['bg_color'] = '#333333';
$config['environment_indicator.indicator']['fg_color'] = '#DDDDDD';
$config['environment_indicator.indicator']['name'] = 'Dev. Environment';

settings.php file

You’ll see the change in the toolbar after rebuilding the site cache.

Toolbar with Environment Indicator

This won’t work if you already have configured the Current Environment in the UI. The first configuration has always precedence.

Summary

The Environment Indicator module is a valuable tool when developing your Drupal site. It helps you keep everything in order in your development process and prevents from inadvertently making changes in your live environment without proper testing.

Jorge Montoya

About Jorge Montoya

Jorge has been reading about Drupal and playing with it for almost 5 years. He likes it very much! He also likes to translate German and English documents into Spanish. He's lived in some places. Right now, he lives in the city of Medellín in his homeland Colombia with his wife and son.

Mar 28 2018
Mar 28

In our Drupal 7 site we have an enhanced textfield that autocompletes already stored values. When migrating to Drupal 8 we could normalize this by using a vocabulary and terms instead.

So in our current Drupal 7 setup we have something like:

Content type: Employee

nid name field_role 1 John Web developer 2 Emil Web developer 3 Henrik Web designer 4 Karl Web designer 5 David Sales 6 John Sales

And in Drupal 8 we want this instead:

Vocabulary: Role

tid title 1 Web developer 2 Web designer 3 Sales

Content type: Employee

nid name field_role 1 John 1 2 Emil 1 3 Henrik 2 4 Karl 2 5 David 3 6 John 3

Using entity_generate process plugin

The first approach we can take is to use the entity_generate plugin provided by Migrate Plus module.

In our migration file:

process:
  field_role:

    # Plugin to use
    plugin: entity_generate

    # Field from source configuration
    source: field_role

    # Value to compare in the bundle
    value_key: name

    # Bundle key value
    # If you get errors consider using only bundle
    bundle_key: vid

    # Bundle machine name
    bundle: role

    # Type of entity
    entity_type: taxonomy_term

    # Set to true to ignore case on lookup
    ignore_case: true

Running this migration will take the value of the textfield and try to lookup the term by name on the destination and if it does not exist the term will be created.

In the second part of this article (coming soon) we will take a look at how we can deal with translations.

Mar 16 2018
Mar 16

In our first post that announced the new Mediacurrent redesign, we looked at the evolution of Mediacurrent.com over the years and talked through the over goals of the relaunch. Now let’s take a look under the hood to see some of the cool stuff we did and discuss what our development team learned along the way.

Let’s talk architecture

Now for the fun part, the technical architecture of the new website. First, the backend was upgraded from Drupal 7 to Drupal 8 - that will probably not be a huge shock to anyone. The more interesting aspect of this build is that we have now implemented a fully decoupled frontend. We accomplished this using a static generator called Jekyll which has been integrated with the Drupal backend. More on that in a bit. First let’s answer the question, “Why decoupled?â€

Why decoupled?

A decoupled architecture provides flexibility for constant evolution, opening the door to a variety of potential programming languages and design philosophies to accomplish your website goals. There are any number of articles that discuss the benefits of moving to a decoupled approach. For this post, I want to focus specifically on the points that were deciding factors for our team.

Security

While we do have full confidence in the security features that Drupal offers, we have to acknowledge that a static public site does offer some advantages that make securing the application easier. First of all, we have the option to make the backend CMS completely walled off from the public site. It’s not a hard requirement that the Drupal admin is made publicly accessible. Second, there are simply fewer vulnerabilities that a static frontend will be susceptible to in comparison to a full PHP application. For example, it’s harder to DDOS a site serving only HTML/CSS/JS and there is no server side code running that could be hijacked by an SQL injection attack.

Performance

Decoupled sites often have a performance boost over a fully Drupal-rendered site because the frontend is more custom and lightweight. This is certainly true in our case. The static frontend requires no processing at the time of request so the page is served up immediately with no server-side execution required.

Hosting

One of the things we liked about this particular solution was that it made the hosting architecture pretty simple and inexpensive. With only editors logging into the CMS and the static site being served by Gitlab, we were able to have a fast, reliable stack up and running relatively easily. Up-time is great in that you aren’t as vulnerable to a production error or traffic spike bringing the site down. That being said, all platforms are subject to downtime each year.

Eating our own dog food

As many other agencies will attest to, when you work on your own website it’s a good chance to try something different! We looked at what some competitors had done and we wanted to try an approach that would be a good fit for our needs without overcomplicating the end solution. This endeavor was a way to take some risks and learn along the way.

Dividing the work

The great thing about decoupling is that you break apart the work that needs to get done. The frontend team can focus on the frontend stuff without being tied too much to the backend work (although there will always be some overlap). Our agency spends a lot of our day delivering solutions to our clients so being able to break apart some of the work streams was an advantage. We like that in the future we don’t necessarily need to do a big redesign and Drupal upgrade at the same time. With a decoupled approach, we have the flexibility to tackle each separately.

Technical Overview

Now that you have seen the “Why†behind this approach, let’s look at the “How.†We have kept our Drupal CMS in Bitbucket, which gets deployed to a Pantheon server. That piece is still the same as its been for many years. The new wrinkle is that the public frontend is served on GitLab Pages. If you haven’t heard of Github Pages (which run on Jekyll), Github, GitLab and many other services allow you host Jekyll source files which they can auto-compile into HTML pages and host for you for free or cheap. Pretty neat huh? We ended up going with GitLab Pages because GitLab allows you to add more build customizations than Github. We have also looked at potentially using Netlify in the future as the host for our Jekyll files.

The question you might be asking is how does Drupal content make its way to GitLab? Put simply, we translate node content to markdown and push to the GitLab API on every node save. For user files, we actually still use Drupal uploads and reference the path within Markdown files. If you are familiar with Markdown files, these are the “content†files that Jekyll compiles into pages. The diagram below illustrates the basic flow.

Illustration of how Drupal content makes its way to GitLab

The concept is pretty simple: have Drupal manage your content, write to Jekyll markdown files and deploy those files to a static host.

Why not [Insert favorite Node framework here]?

You might be saying, that's all well and good but why go with a static generator over a server-rendered JavaScript framework like Next.js or Nuxt.js?

The short answer is that we reviewed several options and concluded there wasn’t a framework we felt was a fit at the time we were planning development (around mid-late 2016). Going with a JavaScript-only framework was ruled out for SEO reasons and the options for Isomorphic (server + client side js) frameworks weren’t as stable as we would have liked. Jekyll was the most popular static framework (and still is) with a variety of plugins we could utilize. After doing some POC’s we opted for Jekyll in order to keep the page rendering lean, simple and speedy. The overall complexity of the integration was also a deciding factor in choosing Jekyll over other options.

Trade-offs

One of the fun challenges with a static only site is that you need to learn how to get around the lack of server side rendering. The files are of course static, thus if you want anything dynamic looking you are limited to mostly JavaScript-based solutions. A couple quick examples are forms and the site search. For forms, we were already using Pardot hosted forms for marketing automation, so that wasn’t a big tradeoff. For site search, we went with a pretty cool solution that leverages https://lunrjs.com/ to handle searching the site. Essentially we have Drupal push an index file that Lunr.js can search against using only Javascript in the browser. For RSS, we still generate the RSS feed from Drupal and push to GitLab.

Lessons learned and looking forward

Now that we have the shiny new website up and running, it’s time to look ahead. Would we recommend taking this exact approach in 2018? I would say not exactly. While we are still intrigued by the power of static generators serving as a front end we think something like Gatsby.js (Node/React-based) might have more upside than Jekyll. Further, we aren’t sold on this type of static-only being able to scale in comparison to Node-hosted solutions. The options for server-rendered JavaScript frameworks increase by the day and many have matured over the last few years. Mediacurrent.com will continue to be our place to try new approaches and share with you everything we’ve learned along the way. Thanks for joining us in this journey and enjoy the new site!

Additional Resources
The 3 C’s and 1 D of Drupal: Why Decoupled Matters | Mediacurrent Blog
Relearning Accessibility for a Decoupled Front End | Mediacurrent Blog
4 Benefits of Decoupled Architecture for Enterprise Marketers | Mediacurrent Blog

Pages

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web