Drupal Planet

In this digital age, keeping the customers engaged with your brand is one of the most important parts of every business. Personalization has become so important that the companies that have been implementing it have been successful in the age of UX. It has now become a requirement.

Personalization refers to the process of using the information provided by the user to provide a personalized experience to them according to their needs and preferences. This helps you in making your customers feel heard and market the right product to the right person at the right time.

Let’s not confuse personalization with customization. Personalization provides experience based on the information provided by the user whereas customization gives the users liberty to custom-make a product or service.

When you go to a website, say for shopping or maybe just surfing and you realize that the app or the website is interacting with you. This makes you like the brand and go back to them every time you have a similar requirement. This will make you feel special and more connected to the brand.

Personalization is important because it creates a bond between the users and the brand and makes them loyal customers. If there is no personalized experience given to the users then the user might feel like he’s not being given much help from the brand even though it is.

While personalization can be a big hit for your brand, context factors also make a lot of difference. The device the customer is using, whether in the location the person is in or even the time of the day matters a lot in personalization.

Personalization and design go hand in hand. If the UX of your brand is great and personalized for different kinds of users, you are good to go!

Let’s look at some of the best practices for Personalized UX Design

When providing personalized information, it is important to make sure that the information that you show the users is relevant and does not disturb the flow of the user experience. Many shopping applications show recommendations according to the search made by the users. This saves the user time and helps the user purchase more valuable.

Myntra shows trending products to let the users know what is trending currently. This is a different way of recommending products.

When we talk about personalized experiences, Netflix is a well-known player in the market. Netflix provides a personalized experience to its customers by asking for customers’ preferences once they sign up. The first thing that you will observe on the home page is that the content is adjusted according to your interests.

This practice uses algorithms to create an image of their potential customers, their buying habits, and their needs, depending upon factors like demographics, behavior, geolocation, and device.

Combining design with emotion creates a magical personalized experience. To create trust between a brand and its customers, it is important to get the required information from the user and use it to create a design that develops a positive emotional reaction from the user.

It should be taken into consideration that the design should not invade the privacy of the users. This is a major turn off and is not liked by the customers. 

Navigational personalization means showing products that have been searched by the user but left without purchasing. You can show the products and similar products on the home page or somewhere it is visible to the user when they visit your page next time.

I searched for watches on Amazon and left without purchasing. Now when I visited Amazon again, it shows different kinds of watches under ‘items from popular brands’.

Technical design is another practice that guides your technology decision towards a valuable personalized experience. There are two things that you need to consider: The kind of data that you collect from the users and the tactics that need to be implemented to this data.

Here’s a quick mapping of tactics with respect to customer volume and session time:

To implement such a technical design, different customer data platforms and digital experience platforms can be used. Customer data platforms have become a popular technology that unveils the value of market segmentation and personalisation at scale. Digital experience platforms (DXP) are designed to engage users by building websites rapidly. If you are working on an advanced DXP you will have extended possibilities like machine learning and behavioural profiling that will help you become aware of different segments.

Segmentation is a great way to organize contacts by their traits, personas, behavior, or other defining details. This helps the brand to create hyper-personalization content for each user.  Segmentation makes personalization more manageable by grouping contacts. 

Once you are done creating a segment worksheet, the next step is creating a campaign worksheet that includes the strategy that you will use for personalization. Talk about what the goals of your campaign would be, the description of the customers, the time frame of the campaign, the budget, etc.

The next step is wireframing personalization which is the first step in the design process. In this step, you decide the design that you will give to your campaign. Creating a simple wireframe makes sure that your designs will take into account the different page elements that are required to go into the design, and also that they’re placed in the best possible way.

The last and final thing to do now is to create a copy deck. A copy deck is a document that holds a series of related messages. It basically provides the infrastructure to plan your copy.

Writing a copy that relates to your campaign and design is the most important step. For example: 

Personalization is actually personal. It is the key for your brand to achieve new heights. It helps you gain the trust of the users and enhances the user experience by providing relevant content, and functions that match the user’s requirements. Personalization can be a great benefit if done in the right way. All you need to do is implement a successful personalization strategy with the help of the practices mentioned above! Contact us at [email protected] for your online business to boom!

In a previous blog post and video, we looked at the code that controls the display of link previews on Facebook. This is outlined by Facebook's Open Graph protocol, where we modify the tags within the of our HTML web page to say what the title, description, image, and other info should appear in our preview.  

In that post, I showed how to manually modify those HTML tags. While it's good to learn what's going on behind the scenes, in reality, it would be kinda crazy to ask your content editors to modify this code for each piece of content they add. In fact, if you're using a CMS, it would be impossible for them to do so.  

So instead, let's allow the CMS to make our jobs easier. In this video, let's look at the Drupal Metatag module and the included Metatag: Open Graph module to save us time and make our job easier. At the end of this, we will have added tags in the of our article to reflect how we want our preview on Facebook to appear.  

First, let's download the Metatag module. Inside of this module are many sub-modules, each of which is designed to handle the expected meta tags for other social networks, search engines and products.  

For this tutorial, you'll only need to enable the Metatag and Metatag: Open Graph modules. Although we are going to be dealing with Facebook link previews, we will not require the Metatag: Facebook module for this tutorial.

In order to give your editors the ability to change the meta information that gets printed to the , we need to add a field to our content type.   

• Go to Structure > Content Types > Manage Fields on the content type you want to affect
• Click Add Field > General > Meta tags
• Give your field a name ('Metatags' will do)
• Save Settings  

Now when we go to add or edit a piece of content of this type, we have a collapsible 'Metatags' group on the right hand side of the page. It has a few different sections:  

• Basic Tags
• Advanced
• Open Graph  

We can write inside of these fields and when we do, this will add the tags to our page. This gives your editors control over what gets printed in those tags and (eventually) what can be shown in the Facebook link preview.  

But we can also set some defaults. For instance, there's a lot options in the 'Advanced' section. Some of these fields we may never use, so let's turn them off and configure some others.

A new option appears on the Configuration page when we go to the Search and Metatag section. Click that and go to the Settings tab at the top of the page.

On that page, we get a list of different entities, including the content type that we just added the field to. Opening that section, it shows the Basic, Advanced, and Open Graph areas we saw before. Because none of them are checked, they all appear, but if we check the boxes next to Basic and Open Graph, now only those two sections will appear on our content type.

There are some Metatag fields that we probably don't expect our editors to fill out or have to change. So, we can set the default. For example, if we have an Article content type, we probably want to set the Facebook Open Graph og:type value to article. To change this:  

• Go to Configuration > Search and Metatag
• Scroll to the Content section and click Edit
• Open the Open Graph section and in the Content type field, type article
• Click Save  

Now, the og:type meta tag will be filled in automatically with the value article. This works for a value that remains constant, but what about fields that change on every piece of content, like the Title field? 

First, install and enable the Token module.  

To set the Facebook Open Graph tags to match what we add in our content, we have to use the Token browser at the top of the page to select the field value we need. In this example, we'll set the og:title to match the node title:  

• Open the Open Graph section and click on the Title field, making sure your text cursor is on the field
• Scroll to the top of the page and click Browse available tokens. A draggable modal window will appear
• Open the Nodes section
• Click on [node:title]

This will insert [node:title]in the Title field, automatically putting in that piece of content's Title. You can repeat this for other fields.

One of the Open Graph tags you probably want to automatically fill in is the og:image field. When configuring the default for this with the Token module, it might be tempting just to click on the image field on your content type, such as [node:field_image].

This won't work. We need the URL of the image, and this token does not provide that.  

Instead, you have to open the triangle beside the field, which reveals the different available Image Styles. Open the appropriate style, and get the URL of it, which appears like so: [node:field_image:large:url].

Setting up sensible defaults for your content editors is a great idea, and the Metatag module lets you get very specific with the data. And of course, these fields are editable on the content in case your editors do need to override them.

All good things must come to an end. Drupal 7 will soon meet its end. Does your organization have your migration plan to Drupal 9 in order? Here’s what you need to know to keep your Drupal site running and supported. Talk to Our Drupal Migration Experts Now!

• Analyze 
• Inventory
• Migration
• Revision
• SEO

Staying up to date with Drupal versions is vital to maintaining performance to your site:

• Future-proofing
• Avoiding the end-of-life cut-off
• Performance
• Security

1. Catalog existing community contributed modules necessary to the project

• Do these modules have a corresponding Drupal 8 version?
• If the answer to the above question is no, is there an alternative?
• Is there an opportunity to optimize or upgrade the site’s usage of contributed modules?

2. Catalog existing custom built modules

• Do these modules rely on community contributed modules that may not have a migration path to Drupal 8?
• Do these modules contain deprecated function calls?
• Are there any newer community contributed modules that may replace the functionality of the custom modules?

3. Review existing content models.

• How complex is the content currently—field, taxonomy, media?
• What specific integrations need to be researched so content will have feature parity?

4. Catalog and examine 3rd party integrations.

• Is there any kind of e-commerce involved?
• Do these 3rd party integrations have any Drupal 8 community modules?

5. Catalog User roles and permissions

• Do user accounts use any type of SSO?
• Is there an opportunity to update permissions and clean up roles?

• Access to the codebase

• Access to the database

• Access to a live environment (optional)

• Access to integrations in order to evaluate level of effort

Module Report The module report should contain an outline of the existing Drupal 7 modules with the corresponding path to Drupal 8, whether that’s an upgraded version of the existing module or a similar module. This report should also contain a sheet outlining any deprecated function usage for the custom modules that will need to be ported to Drupal 8.

Content Model Report The Content Model report should contain an overview of the existing site’s content types, users, roles, permissions and taxonomic vocabularies with each field given special consideration. Recommendations should be made in the report to improve the model when migrating to Drupal 8.

Integration Report The integration report contains a catalog of the third party integrations currently in use and marks those with an existing contributed module from the community and those that will require custom work to integrate with the Drupal 8 system.

Our Insights on Drupal Our latest thoughts, musings and successes.

Contact us. We’ll help you expand your reach.

The post Drupal Migration Preparation Audit appeared first on .

Many of us at ComputerMinds have always taken pride on doing Drupally things the right way whenever possible, and then helping the community do so too. One of these things is displaying values from fields on content entities. We wrote before about how to do this in Drupal 7 and Drupal 8. It's now the turn of Drupal 9! Thankfully, this updated version is basically the same as the last one, as D9 is very similar to D8 on the surface, but with old cruft ripped out to allow it to continue improving. So the short answer to "How can I show a field programmatically?" is still:

Isn't that great? Your existing code for Drupal 8 already works with Drupal 9! That's was the aim of the update; to make the upgrade incredibly easy. Whereas upgrading from Drupal 7 can be a mammoth task (you might want to get in touch with us to help!), the jump to D9 is much simpler.

So is anything different? Most changes are buried well within Drupal's innards. The most relevant difference for displaying fields in Drupal 8 as opposed to Drupal 9 is that if you were originally loading the entity object ($entity) using the entity.manager service (e.g. from \Drupal::entityManager()), you now need to use the entity_type.manager service (e.g. \Drupal::entityTypeManager()).

Our previous article on rendering fields in D8 contains much more detail, which is still totally valid for Drupal 9. That will help you tweak the formatter settings to view a field with, or how to get raw values out of the field. For example:

A comment on that article did point out that you can get fatal errors if you use this code too naïvely. That's because magic methods are used here, with the assumption that you are sure the field exists on the entity. If you don't, then just break the chaining down:

Alternatively, you can use get() methods instead of the magic methods. But if you do, you'll probably want to surround your code with Exception handling to catch InvalidArgumentException exceptions, as the magic method getters are more lenient in more scenarios.

Photo by Belle Hunt on Unsplash

By default, Drupal implements a "node/nid" URL path system. When you create your first node in Drupal 8, the default URL path looks like ”/node/1”, and the next one will look like “/node/2” and so on. This not user-friendly nor is it very SEO-friendly. Search engines always prefer URLs that are more descriptive of the page content, clean and legible. Using the Drupal 8 Pathauto module, you can obtain a path that looks like this -> "/category/my-node-title". The Pathauto module also eliminates the need to manually create path aliases for every type of content on a Drupal site. When you have an existing site with plenty of content, you can leverage the Bulk generate option in the Drupal Pathauto module to automatically generate aliases for them in a jiffy. Let’s learn how to configure and implement this time-saving Drupal module. The Pathauto module is also Drupal 9 compatible.

The Drupal 8 Pathauto module enables automatic generation of URL/path aliases for different kinds of content like nodes, taxonomy terms and users. All of this without the need for the user to manually enter the path alias. So instead of a URL that looks like /node/1, the Pathauto module lets you create URL aliases like /category/my-node-title. Thus, giving your users a much better idea on what to expect from the web page. Without Drupal Pathauto, creating a URL structure is time-consuming and error-prone. The site admins can specify a pattern to follow for different types of content. The Bulk generate option lets you automatically generate or regenerate aliases for pre-existing content as well. 

Installing the Drupal 8 Pathauto module is like installing any other contributed module. I’m using the Composer to install since it automatically installs all of the necessary dependencies and Drush commands to enable the module. However, if you choose to install manually, make sure you also have the latest versions of the CTools and Token modules installed. 
Open the terminal, within the project enter the following command.

      $ composer require drupal/pathauto

      $ drush en pathauto

• Configure Pathauto patterns as required in Configuration -> URL aliases -> Patterns.
• Click "Add Pathauto pattern"
   

   

• Select the Pattern Type. For example, if you are generating URL aliases for nodes, you should choose “Content” as the Pattern type.
• Add the path pattern to the textbox, and you can browse available tokens for the pattern. When you click on the link, available options will show up. For example, I used the [node:title] pattern. So, the URL will be http://yourdomain.com/node-title
• Select content type or you can also leave it empty. This pattern will be used for all content from the Content Type dropdown.
• Enter the Label field which helps in identification of the pattern.
• Hit the Save button. 
      
• Back on the Patterns tab, you will now see that the Pathauto pattern has now been created
   

   

• Go to the Bulk generate tab for the entity type you want to bulk generate the aliases and click Update.
   
   
• Now you have created the URL aliases automatically.
   

   

• Now Click on one of the Alias just generated and the page will display the Content with the user-friendly URL as shown below
  
   

   

You can also batch delete aliases from the “Delete aliases” tab. You can either choose the entity types you want to delete, or you can bulk delete all aliases. You can choose to delete the aliases that you automatically generated. This will not affect aliases created manually. 

 

The Drupal 8 Pathauto module works efficiently in improving the user experience and search engine ranking of a Drupal website. This article will give you a brief overview of how the Drupal Pathauto module automatically generates bulk URL aliases and provides the user-friendly URLs within minutes. Want to know more about our Drupal development services? Connect with us today!

Leave us a Comment

Know more about our technology driven approach to recreate the content management workflow for [24]7.ai

Find out how we transformed the digital image of world’s largest healthcare provider, an attribute that defined their global presence in the medical world.

Discover how a Drupal powered internal portal encouraged the sellers at Flipkart to obtain the latest insights with respect to a particular domain.

VIEW ALL CASE STUDIES

It has always been Ny Media’s priority to provide integrations with payment gateways that are giving merchants leverage over their competitors. This is why for many years we’ve been integrating our eCommerce platform with payment platforms provided by Vipps, Nets, Klarna, and many more. When implementing certain payment integration we’re always looking for a solution that would best fit merchant requirements and business model.

Klarna Checkout (KCO) is among the most popular payment gateways not only in Nordic countries (company origins in Sweden), but it is gaining popularity in the rest of Europe and US. KCO is more than just a payment gateway - it’s a checkout solution tightly coupled with payment gateway. We’ve been implementing Klarna over the course of the last few years - first KCOv2 and nowadays KCOv3, which gives us a good understanding of how Klarna works and evolves. To highlight just a few features that have been added to KCO since we first implemented KCOv2:

• Klarna now allows gathering separate shipping and billing addresses,
• customer can choose shipping method directly within Klarna Checkout iframe,
• Klarna added support for external payment methods, i.e. Vipps or PayPal,
• the customer’s order can be validated by the eCommerce platform before the payment is made.

We’ve partnered with Klarna to make sure our implementation of KCO matches their guidelines and best practices. We can now proudly say that our platform, based on open-source Drupal Commerce, has been officially approved. We believe that sustainability in software can be achieved by sharing the code within a big open-source family so we’re happy to announce that the underlying code that we use in our platform is now part of the commerce_klarna_checkout and commerce_klarna_checkout_external_payment modules and can be downloaded and used by any merchant using Drupal Commerce as their eCommerce platform. If you’re looking for a more tailored solution that facilitates Klarna’s Shipping API - have a chat with us and we can help you with that!

We also want to remind all merchants that Klarna is planning to shut down KCOv2 in October 2020. If your platform is still using that product - reach out to our sales team and we’ll make sure to upgrade your platform in time.

This is part 2 of the series on power of open source in the time of COVID-19. In part 1, we focused on the impact of open source during COVID 19 pandemic. In this article, we will explore how Drupal is fighting against COVID-19 and the effects that COVID 19 has had on Drupal.

The COVID-19 crisis has shone a harsh spotlight on a range of development challenges, and the choices the world makes now in its path to recovery. The spread of COVID-19, now considered a pandemic, continues to have a significant global impact on various fronts. As we see, COVID 19 also presents significant economic challenges, due to the convergence of disruptions in daily life, which have immediate implications for businesses as well as their workforce.

During the current period of COVID-19, which incorporates people from all walks of life taking a stab at the solutions to overcome this unprecedented situation, Drupal has emerged as a major world power. In these extraordinary times, the Drupal community has long stood by its slogan i.e., Come for the code, stay for the community. This statement itself is an answer to the fact that Drupal is not built in a vacuum, rather it is built to serve the people who would use it.

According to Dries Buytaert (Founder and Project Lead of Drupal), “Open Source continues to grow despite recessions. In other words, Open Source communities have the power to sustain themselves during an economic downturn, and even to grow.”

Drupal is basically used to build the best, most ambitious digital experiences on the web. And even now in the time of the pandemic, Drupal is being used in the fight against COVID-19 by organizations like the National Institutes of Health (NIH), Centers for Disease Control and Prevention (CDC), United Nations International Children's Fund (UNICEF), and many more.

COVID-19 has affected each and every sphere of our lives, and its impact is being felt at the Drupal Association as well. The Drupal Association provides support to all end-users of Drupal with updates and security releases. However, in this time of uncertainty, Drupal’s own finances are at risk. 

Certainly, there was a significant financial shortfall of at least $500,000 against Drupal. However, the Drupal Association took control over the situation and surpassed it by creating a benchmark of $500,000 in just 30 days. This itself is a big victory and an inspiration for how the community rallied to help.

The situation of COVID 19 has made things evident that irrespective of what happens next, Drupal has to deal with the hard reality that DrupalCon revenue is a substantial part of what keeps the Drupal Association lively. With that being said, Drupal Association suffered an estimated loss ranging from $400,000 to $1.1 million.

Before the acquisition of the marketplace by the coronavirus pandemic, the Drupal Association was on track to achieve many of its strategic goals. However, the birth and rapid growth of coronavirus have hindered the Drupal’s solid financial path while also limiting its capacity to meet the mission and serve the community.

In these extraordinary times, the Drupal Association came up with a campaign called #DrupalCares with a view to organizing the fundraising effort across the Drupal Community. The goal of the campaign was to raise a fund of $500,000 in 60 days to secure the future of the Drupal Association, which Drupal achieved.

Individuals, as well as organizations graciously donated a 2-for-1 match for Drupal Association to help them raise money for the Drupal Association and helped keep the Drupal 9 launch right on track.

In order to protect the Drupal Association from the financial impact of COVID 19, the Drupal community also came forward to pour their support to the very known Drupal Association. Several individual donations have been made thus far and the community pledged to make this $1,00,000. 

Drupal’s Value and Principles are much more than the culture and behaviors that the Drupal community members are deemed to uphold. The principles laid down by Drupal are the foundation of the technical as well as non-technical decisions that are required to be made. Furthermore, these values and principles allow the Drupal community to make better decisions at an augmenting rate, inspire members to be their best selves, and eventually move forward as a unified community. 

In the time of the pandemic, most of us have the chance to encounter if the Drupal stated values (still) align with our values. In addition, we can also consider the role of Drupal in our lives when the pandemic subsides. Consider Drupal’s first principle - "impact gives purpose," which is also an aspect of the first value, "prioritize impact." The first principle is quite practical in nature and concludes that by prioritizing the stakeholder, we should consider the needs of the people who create content before the people who build sites and even before the people who develop Drupal. In other words, this principle states that the Drupal lines up the needs of content creators before the needs of the developers.

Drupal's first principle serves a pivotal role in describing the impact of the Drupal community. For say, prioritizing impact is an implication that every community member acts in the best interest of the project. However, it should be noted that not every community member can or should make the Drupal project their top priority. People will obviously begin with their own needs which is not bad. Contributions to the Drupal should be subjective and should not come at your own expense. Change begins when you have the potential and the power to help others. Drupal does encourage people to participate, but not with some sort of expectations.  

Drupal’s first principle focuses on bigger goals and higher levels of achievements which is way beyond a conference room talking. They seek to help others, both at home and in their careers. The main intent of Drupal revolves around the use of Drupal for Good or even live in (with) Drutopia.

Contributors at Drupal's doorstep are always the most valuable asset and are the sole force behind improvements to the platform and the community itself. Being an open-source project, Drupal depends on the contributions of thousands of people around the world.

Sometimes the best way to contribute is to sit back and not contribute at all. Yes, you heard it right. There is no secret that the Drupal community is huge and it's just not possible to fix thousands of open issues by any stretch of the imagination. We cannot fix everything around us and we need to accept this. Acceptance is the beginning of the contribution to Drupal. Saying so, there is nothing to feel guilty about taking a break and considering what is important to your life. 

Moreover, there are many ways to contribute, and the Drupal community always looks for ways to improve the contributor experience. For instance, there are various local public media organizations that use Drupal to disseminate the most relevant information at the time of COVID 19 pandemic. Also, Drupal doesn’t make the demand for the most gifted Drupal developers to perform their job functions. In other words, Drupal calls for a team of professionals who have the urge and ability to work together and create consensus around ideas. Being in a Drupal community, even the smallest contribution makes a big difference which is of supreme importance. 

Change is the only constant in this world. That is to say, we as individuals are subject to changes and there is nothing that ever stays the same. That being said, the world around us is experiencing the biggest change that has ever happened to human life. This outset of the change is owing to the COVID 19 pandemic that has not spared any signal entity present on the earth. 

Most of the vendors are not able to support all previous versions of their software. Generally, older programs are dropped from support and are upgraded or removed from the network. However, considering the impact of the COVID 19 pandemic, Drupal has decided to extend the Drupal 7 end of life till November 2022. The Drupal 7 was released about a decade ago and extending its lifetime is a great investment as it best aligns with Drupal’s goals thereby making it safe for everyone to use. 

The year 2020 also saw the first-ever virtual DrupalCon which seeks to open various opportunities to the speakers and attendees who never would have been able to attend otherwise.

At this point, there are no doubt millions of people worth acknowledging and thanking Drupal for their contributions to fighting the good fight during the current crisis, whether financial, personal, or professional. The Drupal project has faced many financial challenges before and we firmly believe that it can come out of this crisis with a stronger open web. Not to mention, the world around us is facing an unprecedented challenge that will only be solved with an unprecedented community effort. 

Do you wish to contribute your part to the Drupal community? If yes, then be a part of the Drupal community and ping us at [email protected]. We will get in touch with you in the shortest time possible.

Following the previous post, in this article I wanted to share again some guidelines for debugging Drupal Migrations. While in the last article I wrote down some questions about modules, plugins and configuration object management, in this case I felt like stopping at something more “code-oriented”, more specific. I have chosen for this article some guidelines to configure Xdebug in an IDE (in this case I have used PHPStorm) for migrations running in a locally deployed Drupal using DDEV. With the aim of debugging a Migration process -although actually the process is similar for any …

Over the past few years, the Drupal community has been (sometimes slowly) embracing the Composer dependency manager tool for PHP projects. We have become accustomed to adding Drupal modules and base themes to our projects using composer require but many of us have only scratched the surface of what more Composer can do for us.

In this article, we'll go step-by-step in adding a non-PHP dependency to our project using Composer - as well as the helpful Composer installers extender plugin. We'll utilize Asset Packagist, a Composer repository for many popular NPM and Bower assets including things like Javascript libraries and CSS frameworks.

The general idea is that for just about any Drupal module or base theme that asks you to manually download an external library - you can use this method instead of manual steps.

Let's start with a simple example - adding the required Photoswipe module's library. The instructions for this module include some manual steps to download and place the plugin in a specific directory as well as an alternative installation using Composer. In this example, we'll accomplish the download part using Asset Packagist.

First, add the Photoswipe Drupal module using:

Next, add Asset Packagist to the repositories section of the project's composer.json file:

Then, find the Photoswipe Javascript library on Asset Packagist.

Finally, require the Photoswipe Javascript library using:

Supereasy, right?! Yes, but notice that the Photoswipe library wasn't installed in the proper /web/libraries/ location. Instead, Composer installed it in its default location for dependencies, the /vendor/ directory. Because the Photoswipe library doesn't have a composer.json file, and therefore doesn't have a Composer "type", there's nothing that the Composer installers plugin can do to help.

The Composer installers extender plugin can help with this task. It allows us to extend the types of dependencies that Composer installers can handle (by default, Composer installers only handles a specific set of dependency types. First, add the Composer installers extender plugin to your project:

Let's back up example 1 a bit so we can not only download the Photoswipe library to our project, but also put it in the proper place.

Next, we need to let Composer installers extender that we want its help in handling Composer dependencies from the npm-asset vendor. We do this by adding a bit of configuration to our project composer.json's extras section:

"installer-types": ["npm-asset"],

This allows Composer installers extender to help Composer installers place dependencies from the npm-asset vendor in a custom directory. Let's set the custom directory by adding to the default (if you're using the drupal/recommended-project Composer template) installer-paths section of the composer.json file:

Finally, use Composer to re-require the Photoswipe library:

Verify that the Photoswipe Javascript library has been installed in the web/libraries/ directory. 

The combination of Asset Packagist and the Composer installers extender really opens the door to allow you to manage the vast majority of all your project dependencies in a consistent manner. 

Use it to install Bootstrap, Foundation, the Chosen module's Javascript library, A11y, Babel, and other popular NPM and Bower packages. 

People who build websites sometimes choose Drupal because of its reputation for accessibility. Technically, features added to Drupal core must conform with the World Wide Web Consortium (W3C) WCAG 2.0 and ATAG 2.0 guidelines. That said, only a small subset of web developers could provide any specifics about those guidelines.

Are your customers suddenly asking for a DXP instead of a CMS? Well, not surprising as also the analyst firms are pushing the ease of use for a delivery of quick digital experience building as the challenge of managing content is largely solved by giants such as Drupal. In this blogpost I'll explain very briefly how you can set up a DXP using Open Source components.

So now we have that out of the way. A DXP is not a single product. You can maybe compare it to the word website. It can mean anything as long as it is digital. A website meant that you had a place where you represented yourselves or shared information. A DXP is a place where your customers come to solve questions they have, in a digital form. There is a lot of research on this topic, but I'll leave it to you, the reader, to dig in a bit deeper. I imagine you would get overloaded if you would google "what is a website" as well :-)

Drupal is also moving forward with its content management capabilities and the video below shows how a content editor would work with Drupal to create rich landing pages. That said, Drupal is still missing many other capabilities that needs to be augmented with tools in the same ecosystem to become a DXP building solution.

In terms of Management capabilities it is fairly easy to create registration, login & password management, roles & permissions but also to create group communities together so they can exchange information. It is a lot harder to keep a customer profile or to move towards voice and immersive elements using Drupal out of the box.

In terms of Platform capabilities Drupal makes it very easy to do custom development because of its years of community building on drupal.org. This also makes custom integrations very easy but it is a lot harder or near impossible to build neural networks in Drupal or with customer data that interacts with a Drupal application. Not only because of Drupal but also because how the web works and the many caching layers such as a CDN or Varnish are in between an interaction of the end user and Drupal. 

Another important benefit of Drupal is its API-First approach to allow frameworks such as Vue, React, Angular or others to create multi-channel experiences in a headless/decoupled or hybrid way.

In terms of Experience capabilities, it is also lacking when it comes to detecting intention or introducing personalisation and A/B testing. On the plus side, Drupal has a very powerful Search API extension which can be used to index the site and query structured data. However, to personalise this search or to boost information based on AI feedback loops it becomes a lot harder. 

• Customer Data Platform
• Personalisation
• Consent management

If we trim it down to practical capabilities we are missing a tool in our toolset for the above 3 cases. In the video below I'm demoing how this can be solved by utilizing the power of Apache Unomi. Next to that we can augment our toolset towards marketing automation with Mautic.

The ultimate goal is to increase conversions. The optimizations you do within the DXP are ultimately to drive conversions so that you can connect with your end user through marketing campaigns, powered by manual or automated actions. In the image here we see that in Google Analytics we segment the data in the different intention groups that were detected by the AI. We can then detect if certain intention groups have a higher conversion rate than others and start to change the content to influence these numbers over time. We can also add A/B testing and measure the result within the goals that were set in Google Analytics.

Mautic is a fully-featured cross-channel orchestration solution that enables organizations of all sizes to orchestrate and deliver individually personalized experiences at scale. Mautic helps teams gather important contact information, optimize and template campaigns, and report on results. No other solution compares to Mautic's modern and flexible design which provides team members the freedom to move quickly and adapt easily to changing business needs.

Apache Unomi™: The Open Source Customer Data Platform Apache Unomi™ (pronounced "You know me") is a Java Open Source customer data platform, a Java server designed to manage customers, leads and visitors data and help personalize customers experiences while also offering features to respect visitor privacy rules (such as GDPR)

Drupal is an open source platform for building amazing digital experiences. It's made by a dedicated community. Anyone can use it, and it will always be free.

This module connects your site to the API of Unomi. It allows a pluggable authentication strategy to support local Unomi's or hosted Unomi services like Dropsolid Platform.

This module allows you to select forms from a chosen Mautic instance and display on your Drupal 8 website. It allows you to choose between multiple authentication methods to get the list of forms.

The intent of Dropsolid Rocketship is to make digital business easy by providing a framework and best practice examples based on real life situations from a company that has built and managed over 500 Drupal sites.

Dropsolid Rocketship is a distribution that enables small to mid-market business to profit from an optimal start when getting your feet wet in Drupal. It provides best practices from deployment, configuration and ways to extend it, proven by many cases that have implemented and resulted in this learning.

All Drupal 8 sites at Dropsolid have Rocketship at its core. Junior developers learn the basics with Rocketship, while senior developers have had their say in how an optimal development codebase looks like.

As it is our goal to make digital business easy, there is no better way than being transparent in how we achieve that.

Privacy regulations are becoming more and more strict and with that also the way of handling cookie consent on websites. It’s not enough anymore to have a cookie notification bar, visitors should be able to give consent on specific types of cookies that are being stored when visiting a website.

There are many third-party solutions with subscription models to plug into a website, but the standard that we use is a Drupal module, so that it’s a part of the Drupal solution we provide and if required we can tailor it further to the needs of the client if required. 

Dropsolid has decided to contribute to the EU Cookie Compliance (GDPR Compliance) module on drupal.org and co-maintain this module in the future.

All of your interaction data are stored in a universal visitor profile. The data are available to create segments. These, in turn, can be used to personalize interactions, across all channels. Segments are available out-of-the-box in Drupal’s page builder and Mautic’s email and marketing content builders.

The related Customer Data Platform, Unomi, is secure, scalable and is able to handle vasts quantities of data. Our AI engine is able to detect behavioural patterns from these data and is able to label visitors in real time according to its AI-defined segments. This allows for further personalization.

Data capture is easy: it only takes one tracking script on your website, comparable to a Google Analytics integration. You could be gathering relevant data within minutes of reading this page. Sounds interesting? See for yourself!

Need help? Happy to assist you.

Today, User experience (UX) is not just about how a user feels when interacting with your website. In this world of rapidly growing interfaces and APIs, content plays a supreme role in offering your users with exceptional UX. To keep up the pace, you need to adopt hot-selling, fast-moving front-end technologies like Angular JS, React JS, etc. that can deliver your content in an application-like speed.

Headless Drupal (or decoupled Drupal) is one such approach that is gaining much popularity because of its innovative ability to deliver outstanding digital experiences. Bigwigs like Weather.com, The Tonight Show, Great Wolf Resorts, Warner Music Group and many more, have taken the headless Drupal route offering their customers with interactive and unique front-end designs and fast-loading websites. With Drupal 8's commitment to the API-first architecture, content can be used and displayed anywhere.

To go headless or not is a rather tricky decision to make in this digital world. So what’s the whole buzz about going Headless? Simply put, in a headless CMS architecture, the front-end (consumers of content) of the CMS is detached from the back-end (provider of content). This not only enables your content to be delivered anywhere, it allows you to leverage latest Front-end technologies that offer unmatched user experiences.
 

Conventionally, Drupal websites are meant to multi-task. Which means, Drupal manages both - the back-end content management as well as the front-end rendering of content. There is no doubt that Drupal CMS on its own can deliver a rich user experience to the end user but when it comes down to instantaneous responses for a request, delivering content seamlessly in different interfaces, it does fall short. In a decoupled Drupal architecture, instead of the Drupal’s theme layer, a client-side framework like AngularJS, React or Backbone.JS is used. A user request does not have to be processed by the server all the time, which can drastically improve the speed and UX of your Drupal website.

Drupal 8 's API-first architecture took its first step by introducing REST API in core (Drupal 8.0). However, it came with its own set of challenges (setup and usage). Since then, many improvements have been made in providing better RESTful and non-RESTful webservices like JSON-API and GraphQL.

Technically speaking, a headless Drupal website sends out data in HTTP/JSON formats. A powerful front-end UI framework renders this data and delivers the web page.

In a traditional Drupal CMS architecture, the browser invokes a request that is processed by PHP logic which then renders the HTML and sends it back to the browser. Of course, the developer can embed Javascript for some client-side improvements but this can result in a situation where different client-side frameworks are being used for different modules. Thus making it an extremely complex system.

If you are looking to preserve your Drupal Theme layer and yet be able to provide immediate responses to the browser, the Progressive Decoupling approach is your best move. Here you can have your cake and eat it too! The initial application state is rendered by Drupal which can be then manipulated by client-side coding. Modules can be written in PHP or Javascript while you can avail the powerful performance benefits of Drupal.

This version of decoupled Drupal allows for contextualized interfaces, content workflow, site preview, and other features to remain usable and integrated with Drupal as a whole. While content editors and site assemblers feel at home with this decoupled Drupal version, it also allows front-end developers to pursue their own velocity while keeping site assemblers unblocked, by dedicating a portion of the page to a JavaScript framework.

In short, a progressively decoupled Drupal offers an approach that does a great job in striking the perfect balance between editorial needs like layout management and developer desires to use more JavaScript.

And then there’s the Full decoupling – where Drupal’s presentation layer is completely replaced with a client-side framework. This version of the decoupled CMS allows an uninterrupted workflow as the client-side framework also acts as a server-side pre-renderer. Drupal CMS is purely used as a content repository that takes care of all the back-stage jazz. When you completely ignore Drupal’s theme functionality you are also letting go of some effective performance benefits that Drupal provides. Also a lot of rebuilding would need to be done to fully decouple the administrative interface and front-end of a Drupal website. Using Javascript on the server-side also complicates the infrastructure requirements.

While a fully decoupled Drupal architecture has gained more attention in recent years with the growth of JavaScript showing no signs of slowing down, it involves separation of concerns between your content structure and its presentation. In a nut shell, creating a fully decoupled Drupal system is like treating your web experience as a separate application that needs to be served content.

Traditionally, Drupal CMS is meant to do both – content management and rendering the front-end for the whole website. A lot of pressure, don’t you think? Drupal experts believe that Drupal’s strengths lies in the power and flexibility of its back-end and that it needs to be service oriented first instead of HTML oriented. Decoupling Drupal means letting some other system manage the front-end while Drupal takes care of the back-end system. Why is it a good idea to decouple Drupal, you ask?

If you want to adopt cutting-edge and modern front-end technologies that Drupal cannot provide you will need a powerful front-end framework like React JS or Angular JS. With a headless Drupal approach, you can have all of this and still maintain your robust backend Drupal CMS.

• With the Headless Drupal architecture, you can “Write once and publish everywhere”. This system allows content editors, marketers and business owners to create content once and deliver it to multiple interfaces seamlessly.
• With a decoupled CMS, detaching the front-end from the back-end content management system will allow for more flexibility and efficiency of the Drupal content model. Just like how delegating work decreases your workload and increases productivity.
• A layered architecture promotes a more secure system. Site admins can restrict access to different areas of the infrastructure. 
• Headless Drupal allows front-end developers to have full control over the presentation, UI design and UX of the website. The combination of a great client-side framework and a seasoned front-end developer can get you a website with a rich, faster, application-like user-experience, and seamless interactivity.
• Integrating with third party applications is easier and more efficient with a headless Drupal model.
• Both the front-end and back-end developers can work independently which can lead to efficient and speedy delivery of a project.
• If you want to redesign your website, you won’t have to re-implement your Drupal CMS. Likewise, revamping your back-end system can be accomplished without having to alter your front- end.

Although decoupling Drupal can help you achieve your goals of an uninterrupted and application-like user- experience, it might not be a good fit for everyone. Here’s why –

• Websites like News sites or Blogs, that don’t really need much user interactivity, will not benefit from decoupling their Drupal website.
• When you opt for a fully decoupled Drupal architecture for your website, you are letting go of some of the top (and free) functionalities that come with the Drupal theme layer like the block placements, layout and display management, content previews, UI localization, security features like cross-site scripting (XSS), etc. Some of them cannot be replicated by a client-side framework.
• If budget is an issue you need to keep in mind about the price you will have to shell out for experienced front-end developers. Also the cost for rebuilding a missing (otherwise freely available) Drupal feature from scratch. 

Many top enterprises have taken the headless Drupal approach and successfully so! Their websites are fast to load and offer interactive experiences to their users in all devices and interfaces. Some examples are –

• The Tonight Show with Jimmy Fallon – uses Backbone.js and Node.js for the front-end
• Weather[dot]com – uses Angular.js for the front-end
• Great Wolf Resorts – uses CoffeeScript and Spine framework
• EC Red Bull Salzburg – uses Angular.js for the front-end
• Warner Music Group – uses Angular.js for the front-end

…And many more on this list here.

End-users today look forward to highly interactive websites that are able to pop out results in a jiffy. Content needs to be made available at all touch-points in harmony. The Headless CMS architecture solved all of these problems by creating different layers for presentation and data. Because Drupal emphasizes on server-side rendering rather than client-side rendering, the decoupled architecture was conceived. A headless Drupal website has its advantages and disadvantages and is not meant for every kind of a website. Founder of Drupal, Dries Buytaert believes that progressive decoupling is a better approach as in this way we can get the best of both worlds – a client-side framework for uninterrupted workflow without compromising on the Drupal’s content management capabilities. Still wondering if the headless Drupal architecture is a good idea or not? Contact our experienced and certified Drupal developers to help make your decision easier.

Leave us a Comment

Know more about our technology driven approach to recreate the content management workflow for [24]7.ai

Find out how we transformed the digital image of world’s largest healthcare provider, an attribute that defined their global presence in the medical world.

Discover how a Drupal powered internal portal encouraged the sellers at Flipkart to obtain the latest insights with respect to a particular domain.

VIEW ALL CASE STUDIES

This is part 1 of the two-part series on the power of open source in the time of COVID-19. In part 2, we will throw light on how the Drupal world, one of the largest open source communities, is tackling this pandemic.
 
As COVID-19 makes its way across the globe, we are all well aware of the extraordinary pressure to stay focused and running. There is nothing wrong to say that we are all in the midst of this miserable pandemic, which is not just limited to our family, colleagues, and friends but has reverberated through every corner of the globe. The effect of the novel coronavirus (COVID-19) has generated many new challenges for the business world.

However, just like every other thing, nothing lasts forever. In other words, the open-source community has already taken an active role in pushing forward this important initiative. Yes, you heard it right! Open source community has been actively participating in combating the issues related to COVID 19.
 
This article serves as a culmination to the questions that have surfaced the impact of open source against COVID 19. However, before we hit the crux of the matter, let’s take a step back and have a glance at the possible outcomes coronavirus pandemic may lead to.

According to the UN’s Framework for the Immediate Socio-Economic Response to the COVID 19 Crisis, “The COVID-19 pandemic is far more than a health crisis’’. In other words, COVID 19 is all set to affect societies and econ­omies at their core. Moreover, there are higher possibilities of an increase in poverty and inequalities on a global scale, thereby making the achievement of SDGs (Sustainable Development Goals) urgent than ever before.

The pandemic is aggravating and deepening the pre-existing inequalities that are present in nature. That being said, COVID 19 is constantly exposing vulnerabilities in social, political, economic, and biodiversity systems, which are in turn augmenting the impacts of the pandemic. Out of which, the most performed inequality is gender inequality.

The world we live in is currently facing serious financial hardship, despite the fact that governments and private entities have managed to have workers stay home, banned public gatherings, etc. The pandemic COVID 19 has resulted in a global slowdown, which in turn has reduced the GDP in half.

All of these aforesaid scenarios portend physical hardships for people living around the world. However, there is one bright spot called ‘’Open Source’’ that more and more organizations are turning to. In the world of the pandemic, open source has emerged as an eye to the future. Therefore, it's worth digging into open source in order to minimize the negative impacts on individuals as well as on companies throughout this time.

The inception of ‘’Open Source’’ dates back to the late ’70s and early ’80s, states Hackernoon. The open-source movement stemmed from a widespread revolution, focussing on software with source code that anyone can easily inspect, modify, and enhance. Within a short span of time, open-source methodology became the most widely used software design and development method. 

The term openness has been playing a pivotal role to the individuals as well as companies dealing with the COVID 19. Open source allows teams of developers to design software in order to administer and meet the specific needs of COVID 19 cases. Moreover, the software is designed to help research labs who are constantly working with specialized proteins that might be beneficial to treat COVID 19. 

Previous studies and experiences have shown that open-source is a brilliant option in disaster situations. According to the Health Level 7 (HL7) International, a nonprofit health data standards development organization, open source has come forward with an intent to support the cause in the form of hackathons. The organization is led by the Debian Project with a wide range of sponsors including MIT, Johns Hopkins University, Microsoft Research, and the White House. 

Once you are exposed to what open source actually is, you must be intrigued to know about the open-source movement and the methodologies that are responsible to positively impact the business world and billions of people across the globe.
 
The role of open source is not limited to sharing and collaborating on software source code, rather there are various open-source projects that have been seen helping to track the pandemic, provide helpful datasets, and more. You may be experiencing some idle time while crunching the numbers against the Coronavirus, as the open-source communities are lending their methodologies to better understand this disease and potentially find a cure.

The National Health Service (NHS) in the United Kingdom has recently launched a new text message notification service for individuals who are put at home quarantine with suspected coronavirus symptoms using the open-source GOV.UK Notify application. 

Regional governments have also started the battle against COVID 19 by developing new open-source tools, such as the Government of Ontario Self-Assessment Tool. This step is an initiative to help members of their community to make safer and more informed decisions during this pandemic period. 

There are open source and public resources that are published by government agencies and other public sector organizations around the world on Open Government Solutions. These resources can help government agencies at all levels find solutions that have worked in other governments so that they can accelerate their digital transformation. 

Singapore’s Government Technology Agency (GovTech) has recently open sourced the contact-tracing protocol. This open source development model is used in its TraceTogether app with a view to help other authorities’ eliminate the COVID 19 outbreak. Not to mention, TraceTogether is one of the most efficient open-source projects that have emerged around the globe lately.

Recently, UCSC’s Genomics Institute (GI) has come up with a Genome Browser for SARS-CoV-2 in order to keep track of the data to ensure quick cross-reference. This new browser platform i.e SARS-CoV-2 browser provides the required amount of support for the development of therapeutics and vaccines against the virus. Furthermore, the UCSC facility is also looking forward to developing an open-source 3D browser to gamify crowdsourcing of COVID 19 data. 

The Center for Research in Open Source Software (CROSS) is collaborating with the University of Sonora on a dashboard so as to display the summaries of COVID-19 data on a daily basis.  

Mozilla, the organization behind the open source Firefox web browser, announced the open source COVID-19 Solutions Fund as part of its Open Source Support Program, which grants awards of up to $50,000 each to open source projects responding to COVID-19.

In addition to this, Mozilla is also openly supporting the Open COVID Pledge, an international coalition of scientists, technologists, and legal experts, that is calling on companies, universities and other organizations to make their intellectual property temporarily available free of charge for use in ending the pandemic and minimizing its impact.

COVID 19 pandemic has pushed Renesas engineers to take open source to another level. That being said, Renesas engineers have created a ventilator system with a view to addressing the challenges of COVID-19.  The engineers have built an easy to assemble three board ventilator designs. The main idea behind this creation is to control the tidal volume and mixture of gas that has been delivered to the patient while monitoring the patient’s status. 

The University of Pennsylvania (US) has come up with an open-source tool that estimates the impact of Covid-19 on local communities based on population size, hospitalization rates, and whether or when social distancing measures were implemented.

While the research and medical communities are constantly working to develop effective solutions to end the COVID 19 pandemic, open-source unlocks a whole new world of opportunities. That is to say, open-source communities have been active in the global effort to fight the COVID-19 pandemic. Not to mention, the movement has augmented the level of collaboration and speed at which data and resources are shared at an international level.

Got a question? Feel free to ping us at [email protected] and our industry experts will get in touch with you.

The Entity Extra Field module for Drupal 8 lets site builders attach blocks, views, token driven content, and entity operation links as orderable pseudo-fields to any entity’s edit form or its displays. After installing the module any user with the Administer entity extra field permission can easily configure node attributes like author or publish date as orderable fields — as well as create block fields, views fields, operation link fields (like Edit and View) or a host of other custom entity fields with a simple point and click interface.

Entity Extra Field is essentially an easy-to-use UI for configuring Drupal’s pseudo-field components that are defined and exposed through hook_entity_extra_field_info(). It puts the power and flexibility of pseudo-field elements into the hands of site builders, delivering a wide variety of new field configuration possibilities without dipping into custom code.

Here’s a quick example of configuring node properties as fields (or technically, pseudo-fields). Let’s say you’d like your site’s Article content type to display the author at the bottom of the post, instead of the standard display just beneath the title. With the Entity Extra Field module, you’ll be done in two minutes. First make sure you have the Token module installed on your site, then download the Entity Extra Field module via composer using:

composer require drupal/entity_extra_field

You can read about using composer to download modules & dependencies on Drupal.org. With Entity Extra Field installed, you’re ready to get started.

1. Enable both the Entity Extra Field and Entity Extra Field UI modules via drush en entity_extra_field and drush en entity_extra_field_ui or the old-fashioned way on the Extend page at /admin/modules
2. Navigate to Content types administration at /admin/structure/types and click the Manage fields button next to Article
3. Click on the new tab, Manage extra fields, to add your pseudo-field
4. Click the Add extra field button at the top of the page, then fill out the form to define your new "Node author" field:
   • Field Name: Node author
   • Display Type: View
   • Description: The node’s author
   • Field type: Token
   • Field type configuration: Text field
   • Token value: Another great article by [node:author] (note that you can browse through about a billion other useful tokens via Browse available tokens)
5. Use the Field Type Conditions options at the bottom of the page to enable your new pseudo-field for just the Article content type
6. Finally, after saving your new "Node author" pseudo-field, head to the Manage Display tab of your Article content type and order your new field — in our case, just below the body

To complete our task, we’ll probably also want to disable Display author and date information in the Display Settings section of the Article content type Edit tab. Voila! Your node author is now a field.

You could easily repeat the above steps to establish a new "Post date" field — also orderable just like the new "Node author" field — and place that beneath the title or wherever you please. It’s also worth noting that the Field Type Conditions options (step 5 above) can add a whole layer of flexibility to when and how your pseudo-fields appear.

Creating token fields is just the beginning. With the Entity Extra Field module you can attach any block, view (with contextual arguments), token, formatted textarea with tokens, or — thanks to recent contributions from geek-merlin — entity operation links like Edit and View to any entity type edit form or display. The result isn’t limited to super configurable entity displays — there’s a whole world of possibilities using views with arguments or custom blocks as pseudo-fields.

I originally built this module, for example, to display dynamically rendered React charts as a node pseudo-field, where the data represented in the chart is driven by the values of various fields from the node context definition. The result is an easy-to-edit node form where content managers can add or edit the statistical data that drives the charts via normal node fields — and an orderable, configurable pseudo-field on the node display that renders the chart just like a regular field without complex configurations or poking around in code.

What else can you do with the Entity Extra Field module? You decide. And if you come up with anything you’d like to share, please let me know!

Last week wrapped up DrupalCon Global 2020, the first virtual edition of the biggest Drupal learning and networking event in the world.

Like pretty much everything in 2020, things are different this year and will be looked on in the future with an asterisk. When sports teams win their championships this year, there will be a little footnote at the bottom of future statistics books noting that they won in 2020, the year of the pandemic. The team won, but under strange circumstances, so maybe consider it a different win than other years.

I think we'll be talking about this DrupalCon in the same way for years to come. With an asterisk. Not because it was a failure (it certainly wasn't — it was a huge success), but because it will influence future DrupalCons.

If you've read any Twitter threads or other blog posts about this year's conference, you'll probably hear, "It was a great virtual conference, but it just wasn't the same as real life."

Totally agree. But I'm going to break down the different aspects of the 'Con:

• Technical
• Session Experience
• DrupalCon as an Experience
• Future DrupalCons

This year's conference used Hopin to manage the video and chat for the stage, sessions, and exhibition hall. I had never used Hopin before, but the signup process via the Drupal Association's emails were seamless.

On the morning of July 14, before the conference got started, there was already some buzz. On the right-hand side of the screen was a chat window that everybody at the conference could see. On another tab was a list of polls people could answer, and you could see a list of all the people that were attending the conference.

Like a real-life conference, you could "walk" (i.e., click) to a different hall and see what's going on. There was a main stage, session rooms, the exhibition hall, and a Networking tab which mimics the halls of a real conference where you meet folks. The Networking tab allowed you to be matched up with a random person and chat.

Now, this isn't how networking in real life works: in reality, you get introduced by somebody else or some eye contact is made and a conversation isn't initiated. So at first glance, the Networking tab doesn't mimic how conference networking happens. But there's an advantage to this I didn't see before writing this: I might get matched up with somebody I wouldn't think to approach at an in-person conference.

And maybe that's a lesson to learn: our networking software doesn't need to mirror the real-world exactly for it to be better.

At 9:30 AM ET, the conference officially began and our opening speakers, Tim Lehnen and Heather Rocker took the stage... from their homes. The video and sound quality was fantastic with just the two of them on stage. I'm sure mountains of rehearsals took place, but there was never seemingly any large lag or awkward "Could you repeat that?" or "Can you see my screen?"

Less than two minutes after starting, more than 800 people were watching. And it held up. So too during the sessions.

I did have issues with the video when there were lots of people sharing their video at the same time, such as in BOFs ('Birds of a Feather', essentially small groups that gather together to discuss a shared topic of interest), This was not a limitation of Hopin, but I think of my 2015 MacBook Pro laptop. Fans ran wild.

Having a bunch of people hanging out in a room adds a nice personal feeling. But maybe a recommendation for the future: when you get more than 6 people in a session, tell all but two people to turn off their video.

In brief: the chat worked well. There was an ever present chat for the entire conference which you could join, but then also a chat just for the session itself. Thumbs up.

A welcome addition to those with hearing difficulties, each session had live captioning provided by StreamText. Although I personally didn't have a need for it, it's fantastic that this was available and is now expected as default at conferences. The captions not only showed what was said, but also who was talking.

My primary browser is Safari. When visiting the Exhibition Hall, I ran into a bug where it would auto-scroll through all of the sponsors and the page became unresponsive. Not the Drupal Association's fault (they don't operate Hopin), but it's still surprising to me that web services built these days aren't built for all browsers.

I didn't try on my phone or tablet, but from what my colleagues told me, the experience on an iPhone was less than ideal.

After comparing notes with my colleague Suzanne, who was a presenter at DrupalCon and was also presenting at another online conference the same week using another tool called MaestroConference, Hopin clearly has a lot of the virtual conference experience features figured out. There's room for improvement, but this is way better than being on a series of Zoom calls all day long.

The meat of a DrupalCon are the sessions where you get to learn new things. How did it fare this year?

As an attendee, I actually preferred this format! The presenter showed their video and their slides, either of which I could enlarge if I clicked on them, but the user chat was the best part: in real-time the audience could provide commentary and share tips. So if the presenter mentioned a module or a project, somebody in the chat would usually link to it. If somebody asked a question in the chat that was directed generally, somebody would usually answer.

As a presenter, I could see a river of comments being distracting. Also: there was no obvious feature to share a comment as a question saved for the end, which would be a big help for the presenter. Also, threaded comments would have been useful to help organize the conversation.

Even as somebody who has gone to many DrupalCons, I still felt nervous about speaking up in BOFs (Birds of a Feather), especially if one of the people leading the session was somebody with notoriety in the community.

With this year's format, I felt way more comfortable joining in. You could join a BOF and just type in the chat section, or you could share your mic and video and be a "presenter" in the BOF. I did this several times and didn't feel the nervousness that I usually felt in normal conferences.

Maybe it had to do with wanting to support the person leading the BOF and if I chimed in with my video it made their job easier? Whatever it was, the intimidation did not feel so high this time around.

One of the first BOFs I attended was discussing the role of the Classy base theme in future versions of Drupal. Does it make sense to keep Classy as a Core theme when Drupal has now adopted a continuous upgrade path? In this BOF was a contributor who has been in the community for a long time, John Albin, and I've appreciated his work over the years. In a real-life conference, I may have been too shy to join in and speak up, but with Hopin, I felt comfortable to turn my mic and video on and join the conversation.

Another BOF was discussing how to do Drupal on a low budget. A lot of the web projects that get noticed are high-profile, big budget sites. But in my web developer experience, most of the projects I have done were smaller side-gig projects that can't afford $400/month hosting. More like, $100 / year hosting.

In this BOF, a small group of us talked about the limits of shared hosting and some ways we can get around them. This felt like a conversation that needs to happen more in our community: if we don't address the issues that lower-budget clients have, then we should not be shocked that Wordpress and Squarespace grab those clients.

My first DrupalCon was in Denver in 2012. I was a freelancer at the time and went to the conference alone, not knowing anybody that was going to be there, save maybe a few usernames that I recognized.

This was the biggest conference I had been to up to that date, and the Denver Convention Center still has to be the largest conference center I've visited. It's just massive, making my first few steps into DrupalCon intimidating.

But luckily, back in Denver, there was a friendly circle of people that I joined in conversation and they quickly invited me out to go for dinner and drinks. I'll never forget that (thanks Matthew Saunders!) I had a blast that evening, meeting a bunch of other new faces that the group introduced me to. And then throughout the rest of the conference there was a launching pad of people that I could wave to in-between sessions and during breaks. You felt like you belonged there.

It should be noted, mentorship programs have been put in place for people who are new to DrupalCon, who may have been just like me back 8 years ago in Denver. They also adapted for this conference so people felt welcomed virtually.

If you go to enough DrupalCons, you'll learn the lingo, inside jokes, and the traditions that carry on each year. Some of those jokes lived on in the chat in this year's conference:

• "The Wi-Fi is holding up this year!"
• "Please sit in the middle of the row and don't block the doors!"
• "Please record how much coffee you drank so we can get an estimate on how much we drank in total"

These quotes will make sense to you if you've been to DrupalCons before. They're fun little things about the conference, and it's good to see them being reinvented in this new circumstance.

But for somebody that this is their first DrupalCon? This will be lost on them. Nobody's fault of course, but it'll be different for them.

According to the poll put in the Hopin chat, this was a lot of people's first time coming to a DrupalCon — 35% at the time I took this screenshot.

This is truly fantastic news that new people are interested and engaged! But my fear is that they won't get that same feeling of group acceptance that I felt at my first DrupalCon in 2012. Not that they aren't accepted and welcomed by the community, but the limitations of any virtual conference are that it can't deliver that same attendee experience -- and I'm not sure if it ever can.

One of the biggest things I learned from DrupalCon 2012 in Denver was how to network and meet people, and that week was a crash course. In the span of a week, I must have talked to at least 300 people and took handfuls of business cards (including one from my current employer, Evolving Web, who I didn't even know at the time!)

As mentioned, there was the networking tab in Hopin, which is great, but I'm not sure if it's a replacement for meeting people in real-life. But maybe this is the new way we'll have to network.

At the start of this post, I said this would be the DrupalCon with the asterisk, the outlier conference that we'll talk about for years to come. Not only because it was the oddest one, but because it will affect all future DrupalCons.

At previous conferences, I had heard the idea floated around that we should do a fully virtual conference, but it never came to fruition. We only did it when our arm was twisted and we had to.

DrupalCon Barcelona is coming up in December, and at the time of this writing, it's still planned to go ahead in-person. Let's say that does happen: what if some people don't feel comfortable about going, but still want to virtually attend? Will we need to organize our conferences for the virtual crowd and the in-person crowd?

Next, the concern of travel-related climate change is real. If this DrupalCon was such a success and it led to less carbon emissions, wouldn't it be our duty to no longer do in-person conferences, despite the loss of 'oh-you-had-to-be-there' stories and experiences?

And, accessibility: this was the most accessible DrupalCon ever. In terms of travel, finances, and physical mobility, you could easily argue this was the most equitable conference we have organized yet. If we go back to 'normal', in-person-only conferences, less people will be able to join because of previous family commitments and finances. Is that a decision that we are willing to make?

With all the barriers put up on the organizers of this conference over the last months, I can say with certainty that this was a very successful DrupalCon that exceeded my expectations of what a virtual conference can look like.

I think we have some lessons learned and have some tough choices to make for the future, but the organizers should be proud.

Thank you for your work!

Content authors and content editors always look out for a seamless, easy-to-use experience when it comes to page building. Drag-and-drop and WYSIWYG tools are something they expect when they want to create and design pages. Drupal Layout Builder offers this exact experience with its easy-to-use page building capability, in Drupal core. 

Drupal Layout Builder is unique and provides a powerful visual design tool to let content authors change the way content is presented. Introduced in Drupal core in its latest version, Layout Builder in Drupal 8 allows you to add/remove sections to display the content using different layouts, and customizing your pages based on the requirements. The Layout Builder Module in Drupal 8 also allows you to combine these sections and create a truly customized page. 

The Drupal 8 Layout Builder can be used in two different ways. It can be used to create a layout for each content type on the website, and also to create a layout for an individual piece of content.

The Drupal 8 Layout Builder module allows you to customize the design of the entities such as content types, taxonomy, users etc. It provides an easy-to-use drag and drop option for site builders to place blocks, fields etc.

The layout builder module in Drupal 8 makes it easier to build your layouts by offering a preview of the changes made while building your layouts. Instead of having to save every small change made in the layout and then looking it up on the front-end, layout builder in Drupal 8 layout builder allows previews of the changes made for a seamless layout building experience. 

In order to install/setup the Drupal 8 layout builder module, navigate to Extend and enable both Layout Builder and Layout Discovery module..

Note: Layout Builder was introduced as a stable module in Drupal 8.7 core. So, make sure you’re using the latest version. In older versions of Drupal, it was an experimental module.

1. Once you have installed the module, navigate to Structure, Content types and click on “Manage display” for any content type , For now we will use the “article” content type.

2. Scroll to the bottom and click on Layout options and select “Use Layout Builder”, then click on Save.

3. Once you’ve enabled Layout Builder on the view mode, you can see a “Manage layout” option instead of field formatters. You can use Layout Builder for any of the view modes present.
 

4. When you click on “Manage layout”, you’ll be redirected to article content type layout.

1. To add sections to the layout builder, remove the default section first. Click on the close icon (as depicted in the below screenshot). Further, you will be provided with an option to the right side of your screen to remove the default section. Click on “Remove”.

2. Let us add a few sections to our layout by clicking on the “Add Section” option. Further, you will be provided with options to choose a layout of your choice for your section, on the right side of the screen. For now, let us select the “Two Column Section”.

3. You will have an option to choose the width for your “Two Column Layout”. Let us select a “50%/50%” for now. Then click on “Add section”.

Once added, you should be able to see an “Add Block” link for each section region.

After choosing your section for the layout, you can add blocks into your section. To add a block just click on “Add Block” and the “Choose a block” option will slide out from the right.

1.Choosing a Block
 
Blocks can be chosen from the right by just clicking on them. You can even find blocks by filtering them out by their name using the “Filter by block name” text field. 
We will select “Authored on” content field for now.

When you click on the block you want to add, you’ll be able to adjust the field formatter. Once you’ve configured the formatter, click on “Add Block”.

The “Authored On” content field will be placed on the left side of the block.

After placing the “Authored On” field, you need to save your changes. Save all the changes you have made to your section by clicking on “Save Layout” option at the top of the Drupal 8 layout page

Let us try adding some more fields into our layout to further customize our layout builder.

After saving this layout, if you visit an article content type page, you will be able to see a preview of the layout which you just built..

The layout which we just built will be applicable for all the articles. If you want to build a customized layout for a particular article in Drupal, we have to enable some options provided by Drupal for the same. You can do it by selecting “Allow each content item to have its layout customized.”

After enabling this option, if you go to an article, you should see a Layout tab button.

You can now modify the layout using the same interface. However, this will only change the layout on this specific piece of content.

The Drupal 8 Layout Builder has immensely improved the content editing experience for site builders and content editors. The easy drag and drop functionalities, visual designs, customizations, more control over content, and more such features have made it easy for non-technical editors to design customized layouts in Drupal 8. Experience features like this and more on Drupal 8 with our expert Drupal development services. If you’re still on Drupal 7 (or 6) and looking for a seamless Drupal 8 migration, we can help. Connect with us today.
 

Leave us a Comment

Know more about our technology driven approach to recreate the content management workflow for [24]7.ai

Find out how we transformed the digital image of world’s largest healthcare provider, an attribute that defined their global presence in the medical world.

Discover how a Drupal powered internal portal encouraged the sellers at Flipkart to obtain the latest insights with respect to a particular domain.

VIEW ALL CASE STUDIES

New to Drupal 8.9 and 9.0 is the ability to create the HTML element within a native Drupal menu that can be used to toggle secondary menus (such as drop-downs or mega-menus) in a usable and accessible way.

It's common to see links (instead of buttons) used to toggle submenus. The result of this pattern is typically inaccessible for keyboard navigation and assistive devices such as screen readers.