Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough
Apr 21 2021
Apr 21

Dealing with constant upgrades and changes to the project requirements is not just the despair of all developers, but also dents the pockets of the clients. When discussing the project development - time and cost go hand in hand. The more the development time, the higher will be the cost. 

Resolving these hurdles is easy with, Drupal distributions as these

(1) make project development less costly to both build and maintain and 

(2) make it more commercially interesting

Leading media and publishing enterprises across the globe are already testifying the positive impact that Drupal has made on their digital business. By enabling a professional editing experience, multi-channel publishing, and personalization distributions are revolutionizing the way media and publishing houses approach Drupal.

media-publishing-drupal-statisticsSource: Drupal.org

But, what is a Drupal Distribution?

Drupal Distribution accelerates website development not just by saving time and cost but it provides quality code with out-of-the-box Industry-standard features. Maintenance of distribution is simpler because updates for all its modules and features can be performed in one shot!

According to Drupal.org “Distributions provide site features and functions for a specific type of site as a single download containing Drupal core, contributed modules, themes, and predefined configuration. They make it possible to quickly set up a complex, use-specific site in fewer steps than installing and configuring elements individually.”

Distributions provide site features and functions for a specific type of site as a single download containing Drupal core, contributed modules, themes, and predefined configuration.

Looking to redesign or start your website using Drupal in 2021? Explore the detailed comparison of the top media publishing distributions that are EzContent, Rain, Varbase, and Thunder to choose the right solution for you.

Top 4 Media & Publishing Drupal Distributions for 2021

Content Listing from EzContent

Content Listing from EzContent


    • Structured content for SEO: With EzContent you can not only easily create structured content but also provides a range of approaches to enable search engine optimization (SEO), including flexible fields, built-in metatags, Schema.org usage, and a large library of available components for rich text, media, and other common content needs.

Component Library EzContentComponent Library EzContent


    • A page builder for landing pages: With EzContent’s page builder, editors can create layouts on the fly without any dependency on developers. They can use the convenient drag-and-drop interface to easily place reusable components onto pages as needed. Similar components can be reused by configuring in different variations.

Drag & Drop Layout Builder EzContentDrag & Drop Layout Builder EzContent


    • An API-ready decoupled CMS: EzContent provides OOB Headless, CMS integration with Gatsby, React, and Angular. Thanks to EzContent distribution, editors are still empowered with legacy CMS features like previewing unpublished content, placing blocks and content using Layout Builder. Ready to use open-sourced Angular and React starter kits are available.

Choice of Frontends, OOB starter LitsChoice of Frontends, OOB starter Lits


    • AI-powered content generation: For content, leverage auto-tagging and auto caption to generate meaningful and contextual tags driven by Google AI and AWS Rekognition.

    • Now you can also manage and perform an intelligent search leveraging image recognition, image detection, and Deep Learning algorithms. Generate auto Podcast out of Article Content on the fly while curating content with help of Google AI.

auto-tagging-ezcontentAuto-tagging for Images

  • Thunder

    Thunder was designed by Hubert Burda Media and released as open-source software under the GNU General Public License in 2016. It consists of the current Drupal functionality, lots of handpicked publisher-centric modules with custom enhancements.

    Key Features & Pros of Thunder

    • Publisher Features: Create articles dynamically with paragraphs. Using paragraphs, you can add text, pictures, videos, Instagram, or Twitter Cardscards to your article with a WYSIWYG editor. — Change the order of elements by dragging and dropping the content wherever you like it.

    • LiveBlog: Cover events in real-time with the liveblog.

    • Google AMP: With the integration to Google AMP, you can deliver not only text but also images, galleries, videos, as well as Instagram and Twitter cards.

    • Improved media handling: With the help of the media browser, it’s very easy to add pictures, galleries, or videos to your article. You can upload new pictures to the media browser by just drag & drop.

    • Mobile-Friendly theme: With the Thunder installation, you get a responsive theme for the frontend and backend.

  • Varbase

    Varbase is an enhanced Drupal distribution launched in Feb 2019. It is packed with adaptive functionalities and essential modules that speed up your development and provides you with standardized configurations. The essence of Varbase lies within the basic concept of DRY (Don’t Repeat Yourself). It removes the need to perform repetitive tasks with the help of its modules, features, configurations that are included in the Drupal project.

    Key Features & Pros of Varbase

    • Publisher Features, Flexible Content Structure & Categorisation: The flexible content architecture allows for custom pages, layouts, and integrations for your special use cases. Content is organized through a predefined and scalable structure for better navigation.

    • Media Management: Full-Feature libraries to provide an appealing way to display media galleries.

    • Multilingual options with localized and translated content, translated interface, date formats, country flags, modern fonts, and more.

    • Mobile-Friendly theme: Fully optimized for mobile.

  • Rain

    Mediacurrent created the Rain Install Profile in May 2019. Rain comes prepackaged and pre-configured with components

    Key Features & Pros of Rain

    • The rain has a strong content model & focuses on editor features. It combines content, administrative & editorial features with a base theme and style guide. It also implements Components based theme, meaning components can be reused, and a build-in style guide.

    • Rain has a preconfigured API for exposing content to other applications in the JSON format. Rain can be paired with frameworks like Gatsby

Metric Comparison:

Feature Comparison

We did not forget Acquia Lightning!

The list of media publishing distribution is incomplete without mentioning Acquia Lightning. However, Acquia is ending support for the Lightning distribution in November 2021, simultaneously with Drupal 8.

Read the official announcement here

Conclusion

There are a lot of distributions to choose from. Evaluate what your product requires, map it with the vision of the distribution. Do check the roadmap, backlog, compatibility, and maintenance for the distribution.

If you’re looking for a smart distribution, OOB Components, and you want to be flexible on a choice of frontend, EzContent provides a starter kit to save your development time by 30%. 

Jan 11 2021
Jan 11

Whether you are running your business into B2B space or B2C space, the need for agility and speed in workflow management is indispensable. Because eventually, clients also expect faster delivery of the project/application to catch up with their customers’ requirements.

However, if developers do not use any standard tools, it can add unnecessary overhead and eat away their development time. Also, given that they are coming from different backgrounds and skillsets, it would become difficult for stakeholders to set up projects, onboard developers, troubleshooting, and even train them as large-scale projects come with complex requirements.

That is why it’s critical to have a standardized development environment across the teams. This blog guides you on using Lando software (an open-source tool that provides a single local development environment for all the developers’ projects) with Drupal 9 composer, PHP & SCSS Linters, and a multisite architecture scenario.

How Lando Provides a Standard Development Environment?

Setting up the project from ground level to managing configurations and distributing it to each developer, including frontend & backend,  becomes tedious due to various aspects, including different machines, a different configuration of the machine, and different OS.

And that’s where Lando software comes into the picture.

What is Lando Software?

It is an open-source, cross-platform, local development environment, and DevOps tool built on Docker container technology. Its flexibility to work with most of the major languages, frameworks, and services helps developers of all skill sets and levels to specify simple or complex requirements for their projects and then quickly get to work on them.

Some of the benefits of Lando include-

  1. Maintaining standardization across project/application.
  2. Offering speedy development(prebuilt configuration of the composer, drush).
  3. Add tooling to extend it from services. 
  4. Recommends out-of-the-box settings that are customizable.
  5. Automates the complex steps involved in unit testing, linting, compiling, or other recurring workflows.

How to Use Lando With Drupal 9’s Composer.json for Faster Development?

Consider a scenario when a developer has been replaced in the team with the new developer for the existing Drupal project. The new developer might not be familiar with the OS that others are using. Here, it would become difficult for him/her to install the composer quickly. And hence, this would delay his/her onboarding process.

However, if the team is already using Lando for development, it would take care of the operating system’s bottleneck itself. In fact, the composer is already built in the recipe (Recipes in Lando are the highest level abstraction and contain common combinations of routing, services, and tooling) of Drupal 9 and is also compatible with different OS. The only thing is developers should know how to use it.

code written in maroon background

Steps to Use Lando with Drupal 9’s composer.json

The prerequisite for this setup is that your local development machine should be compatible with Docker and Lando and installed successfully without any glitches. Make sure when you are running docker setup, other ports are not conflicting with Lando setup.

Here are the steps to be followed-

  1. You need to clone this  Drupal 9 open source git repository.(Ex:

    git clone  [email protected]:AbhayPai/drupal9.git)

  2. Change the directory to the cloned repository. (Ex: cd drupal9)

  3. Start your app using the lando start command. Before you begin, you can change some parameters in .lando.yml as per the need of your application.

This repository would give you some common tools that include linting of PHP, linting of SCSS, linting of js files, and compiling of SCSS files and services like node.js and npm to directly connect with the Lando app. You do not need to go inside any container after starting your application. By default, this repository is only able to lint custom themes and is flexible enough to extend it to custom modules and profiles.

How to Use PHP Linters With Drupal in Lando

As Drupal is one of the largest open-source communities, millions of developers contribute and offer coding solutions in different ways. To standardize the coding practices and make the modules easy-to-maintain and readable, varying from indentation, whitespaces to operators, casting, line length, and many more, Drupal has a core package that takes care of these standard practices automatically when configured in the project. In general, these are called PHP Linters.

Following are the steps to configure the PHP linter in the project-

  1. Download dependencies package of Drupal coder using `lando composer requires drupal/coder`.
  2. Define a file for linter standard or copy file from Drupal core in your project folder where all standards are predefined in the XML file. It resides in core/phpcs.xml.dist.
  3. Configure a tool of `lint:PHP` within the .lando.yml file like the below example-

code written in black background

4.  Confirm if tooling is configured correctly just by using the ‘lando’ command to list all tooling. code written in white background

5.  Use this newly configured tool in your project using ‘lando ’. In this case, it is ‘lando lint:php:themes’

code written in maroon background

This automating tool which is configured with Lando software will help developers save time for finding and fixing these issues and will also ensure best practices are followed in the project repository.

How to Use SCSS Linters With Drupal in Lando

SCSS is a preprocessor used for writing CSS or CSS3 in any modern-day project. This SCSS is used because it helps developers to write less code and remove redundancy in the repetition of classname and other properties which are frequently used in the project.

The purpose of using SCSS linter in the project is to ensure that the quality of the code is high and easily maintainable for future enhancement. Further, it would save time in development and faster delivery of the projects.

Following are the steps that need to be followed for configuring the SCSS linter in our project-

  1. Configure node service and install gulp inside that service within .lando.yml file.
    code written in black background
  2. Configure tool for using npm with Lando within .lando.yml file.
    code written in black background
  3. Confirm if tooling is configured correctly just by using the ‘lando’ command to list all tooling.
    code written in white background
  4. Create a package JSON file and install and configure the stylinter package in the project.
  5. Create a new script in the package.json file for triggering stylinter.
    code written in black background
  6. Configure the tool to trigger this using lando.
    code written in black background
  7. Confirm if tooling is configured correctly just by using the ‘lando’ command to list all tooling.
    code written in white background
  8. Run this tooling command and Lando will lint it automatically.
    code written in maroon bavkground

This automation tool integrated with Lando for SCSS linter will ensure that best practices and code hygiene is followed in the project repository.


How Can Lando Help in Reducing Developers’ Efforts While Building Drupal Multisite Architecture?

Let’s take a scenario where your project ( client’s website) is live now and running smoothly. Now the client wants to create multiple new sites in alignment with the existing site. For instance, the new sites should have custom modules, themes, profiles, etc. to ensure brand consistency. 

Here, Drupal would come in handy as it would simplify the multisite architecture and speed up the local development setup with Lando through some minor tweaks in configuration files.

For setting up multisite architecture in an existing project, you need to follow below steps- 

  1. Configure .lando.yml file to setup app server URL for the new website
    code written in black background
  2. Configure database server for setting up this site with the new website
    code written in black background
  3. Configure drupal settings like sites,php, and folder structure for site2; to leverage this Lando configuration
    code written in black background
    code written in black background
  4. Rebuild configuration for setting up this new website.
    code written in maroon background

The minor tweaks in the existing project would help you extend existing Lando projects/websites to build multi-site architecture via local development and accelerate the delivery process for the client.

Conclusion

If you have come this far, Dhanyavaad (thank you). I hope that this article would help you in speeding up the development process & hence, faster project delivery, knowledge transferring of your application/project with Drupal, and leveraging Lando at its best by using inbuilt composer for automation in local development environments.

Now that you are armed with the knowledge and Lando’s benefits, what are you waiting for? Get started now!

Dec 15 2020
Dec 15

Every aesthetically pleasing website has a common ground - a good theme. An attractive theme can bring the website’s visuals to life and facilitate you to create a powerful brand identity. But that’s just one part of the story!

The website theme, beyond being beautiful, should cater to great user experiences also. 

And that’s how you prepare a robust yet enticing website - maintaining design & the best usability practices hand-in-hand are the key to increase conversion rates.

The launch of Drupal 9 in June encouraged the community to make it high up on their agenda to revamp its user experience and ensure friendliness for every stakeholder - designers, editors, marketers, and developers, of course. 

With an emphasis on Olivero, a modern front-end theme designed to exhibit the CMS in its best light; front-end developers can expect plenty of benefits from it. 

It will empower them to bring that magical touch to the websites by utilizing their creativity along with modern tools and frameworks to define layout, styles, typography, buttons, color schemes, and many more, to drive the visuals and engagements of the website/ application.

This blog walks you through Drupal's soon-to-be default theme - Olivero and how front-end developers can leverage it for designing a great website.

Olivero and It’s Benefits

Olivero is going to be a new default front-end theme that is expected to be rolled out in Drupal 9.2. It is designed to give Drupal a flamboyant look and feel. Olivero is also going to be compatible with the Drupal 8 website as a contributed theme.

Currently, Bartik, a ten-year-old theme, initially created for D7, is being used. It is certainly mobile-responsive and had some outstanding features to meet D8’s mobile-first requirements. However, the development has outdated the design. 

Thus, the need for a new front-end theme emerged to showcase Drupal’s strength appropriately.

Drupal Trivia

Olivero is named after a female programmer, Rachel Olivero, an outstanding supporter/ programmer of website accessibility. Sadly, she passed away in 2019. To honor her, the Drupal community kept her name alive with this beautiful theme. The idea is to showcase patience, generosity, and inclusiveness - the qualities of Rachel that the theme should also epitomize.

Benefits of Olivero Theme in Drupal 9

The Olivero theme is intended to give Drupal websites an eye-pleasing view apart from ensuring,

  • Simplicity- declutters by eliminating the colors, effects, and visual elements that make the theme look and feel too heavy.
  • Professional look - encompass all the design elements, for instance, negative space and high contrast, to grab users’ attention.
  • Accessibility- designed with WCAG AA conformity in mind, from functionality to layout, to colors, all components will be accessible for everyone. 

Drupal Trivia

The blind federation conducted an accessibility test to evaluate the Olivero theme for visually impaired users. They were happy and satisfied with its design and high responsiveness.

  • Flexibility- facilitates Drupal front-end developers with multiple options to choose from - be it button styles, headers, or logo styles to text titles, and many more.
  • Compatibility - supports modern browsers’ features & various engagement modes. The creators have ensured that the theme supports recent Drupal updates and features for websites such as Layout builder, media embeds, second-level navigation, and many more.

Get the Hang Of Olivero’s Exciting Features

Here are the features of Olivero that you can leverage for designing your next Drupal website-

A. Bright color palette

Websites leveraging Olivero’s color scheme will look beautiful with a base color of bright blue. Besides being attractive, it would boost Drupal’s brand recognition. Several permutations and combinations of darker and lighter colors and shades would provide website improved accessibility.

Screen Shot 2020-12-15 at 11.23.46 AM

A bright color palette in Olivero theme

Source- Drupal.org

B. Simple and elegant forms & buttons

The forms and buttons added in the new theme are user-friendly, distinguishable, and accessible. Forms comprise a left color bar, and their labels are placed above the fields to abide by the website accessibility requirements and guidelines. 

The buttons inform users about clickable action. The theme also has a filled primary button style and a secondary button style which is an outlined version of the button.

The buttons’ different modes are present default in Olivero, unlike other themes where you need to define these modes. 

The four modes are- Default, Hover, Focus, and Active

8 rectangles in white background

                                                                 

                                                                 Button modes in new theme                                                                                                                                         
                                                                   Source- Drupal.org

C. Typography

Typography provides scale to maintain uniform sizing, line height, and spacing throughout the design. The base font used for body copy is 18px. The size can be tweaked for smaller screen sizes.

Consistency, throughout line-height and spacing, has been a key objective when setting the scale for typography.

D. Flexible header and navigation options

Navigation options can cater to any website’s needs. The header can fold into a hamburger button menu when scrolling, allowing the user to access the menu easily on long pages. 

The secondary dropdown menus are also supported by Olivero, thus saving coding efforts of developers unlike Bartik where they need to reinvent the wheel time & again.


E. Vertical Rhythm

Vertical rhythm ensures the correct spacing arrangement of the text. It calculates line-height, font size, and margin or padding to maintain equal space throughout the website. 

F. UI Patterns

The header is designed flexibly so that it can accommodate the text titles and or logos of varied width and height. 

On scroll down, the header will fall into a hamburger-button menu, to let the user access the menu or longer pages.

G. Site branding variations

You can tweak the theme settings to change the background color and width of the site-branding to incorporate different types of logos and long text.

white background with text and boxes

Flexible site-branding options in Olivero

Source- Drupal.org

H. Forms

These simple yet modern forms consist of elements that enhance the design, while still being recognizable, usable, and accessible. 

The left color bar highlights the form element and labels are added above the form field to avoid confusion. Form fields have a consistent look to indicate to users that they are a form element. States such as focus, disabled, and errors have also been accounted for.

3 field boxes

Highlighting error state in the form

Source- Drupal.org

I. Tables

Table divider lines are designed such that it improves readability. Olivero's theme will also support the responsive table features of Drupal. 

J. Sidebar

Only one sidebar is implemented to stop competition for space on the screen. It improves readability and allows content to look more rich and prominent on the screen. Editors can showcase related posts and other types of utility blocks too. 

The sidebar also offers good support and space.

Text written in white background

One sidebar aimed at improving readability

Source- Drupal.org

K. RTL Support

Olivero theme supports right-to-left languages as required by Drupal core. It also supports better display and multilingual functionality. For example, Arabic, Hebrew, Persian, and Urdu support RTL writing and so does Drupal.

text written from right to left in white background

RTL support in Olivero

Source- Drupal.org

L. Messages

Messages intent to inform users for they need to consume important information or provide feedback on an action already taken. 

Messages are visible as they are designed with bright colors to highlight the message and yet don’t mess up with the readability of the message itself. 

Text written in white background

Displaying messages per their type (error, alert, and success message)

Source- Drupal.org

M. Breadcrumbs

Breadcrumbs in Olivero are placed near the top of the page above the page title to help users keep track of documents or websites. 

A visual cue informs users about more breadcrumbs which they can access later by swiping left to right or right to left. This feature is not part of MVP. 

Text written in white background

Breadcrumbs to keep track of pages

Source- Drupal.org

N. Color module

This feature is not part of the initial release. However, this or similar functionality might be included later. 

Challenges That Olivero is Going To solve for front-end developers

Olivero is a modern theme with a magnificent look and feel. It can help front-end developers in simplifying their work. See how-

1. Lighter theme with up-to-date design elements

Unlike Bartik which used outdated graphical elements such as drop shadow and gradient, it uses a layout builder, grid system, hamburger menu, to name a few, to ensure that the site remains lightweight and responsive.

2. Low code

There is little or no coding required in CSS to determine the presentation of a web document and for adding content blocks anywhere. 

There are few other scenarios that simplifies the work of front-end developers -

  • Bartik doesn’t offer a secondary menu while Olivero does. This saves the coding efforts of front-end developers 
  • If any other theme is used, the hamburger menu is not available. Olivero theme is mobile-friendly. It encapsulates the menu automatically via the hamburger menu feature. No coding is required for it.

3. Scalability

Even on enlarging page size, it won’t break. Instead, it would give you a clear view as always. This makes Olivero more responsive.

4. Compatibility with other browsers

Bartik is not compatible with other browsers like Internet Explorer 11 while Olivero is. Front-end developers need not write code separately to ensure the support to all the functionality and features of the browsers. 

5. Code compilation/ testing

Olivero has CSS Grid Layout that can handle both columns and rows. It is a powerful layout system that helps developers write code hassle-free. They can write code in a nested structure to make it compact, easy to understand and increase readability. 

6. Extensibility with PostCSS Standalone technology

PostCSS is an accessible tool that empowers front-end developers to easily contribute to in the form of custom plugins. 

It simplifies the writing of CSS stylesheets by keeping code simple and facilitating understanding of dependent selectors and media queries within the stylesheet. 

During the development of the Olivero theme, there were several PostCSS plugins that were leveraged to make the CSS more readable and reduce the probability of breaking the page.

Conclusion

Olivero is a modern theme that is going to be the new default theme for Drupal from version 9.2. Front-end developers can use this flexible and scalable framework to improve work efficiency and create exquisite websites. 

Figure out how your enterprise can leverage Olivero’s constructive features to empower your front-end developers. Meanwhile, let’s wait for this beautiful theme!

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