Planet Drupal

Create Pages using Gutenberg (WordPress Editor) in Drupal 8

Gutenberg is the new editor for WordPress 5.0. It’s a new style of editor/page builder. Instead of writing text in a single text area, you build a page using blocks. A block could be something simple such as a paragraph or an image. Or more complex blocks like a “Media & Text” or adding in columns.

The editor itself is written in Javascript, more specifically React. This is what makes it possible to be used in Drupal. But I’m sure extra works was required to get it working in Drupal.

In this tutorial, you’ll learn to install and configure the Gutenberg module, and you’ll learn how to use it on the Page content type.

If you’re keen to have a play with the editor without configuring a Drupal site go to https://drupalgutenberg.org/demo.

Getting Started with Bootstrap 4 using Radix in Drupal 8

Radix is a Bootstrap 4 powered theme which is set up out-of-the-box to compile the Bootstrap library locally. It is targeted towards advance front-end developers who want total control on how Bootstrap is loaded and comes with Browsersync and Font Awesome built-in. The theme doesn’t support loading Bootstrap via a CDN out-of-the-box. I’d recommend you look at the Barrio theme if you prefer to load everything through a CDN.

Because you’re compiling Bootstrap, you get the added benefit of being able to modify the _variables.scss which is used to customize Bootstrap and can control what SASS components get imported. By importing only what you need you can drastically reduce the size of the compiled CSS file.

The theme comes with a Drush command (Drush 8 only), drush radix "Theme name", which makes it easy to generate sub-themes. The sub-theme comes with a package.json which has all the required packages.

Just run npm install, then npm run dev to compile Bootstrap. It uses laravel-mix to compile everything so you don’t have to spend time configuring webpack files.

In this tutorial, you’ll learn how to install Radix, create a sub-theme, how to compiling everything and learn about Radix Layouts.

How to Build a Directory site using Drupal 8

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

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

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

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

Getting Started with Bootstrap 4 using Barrio in Drupal 8

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

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

Bootstrap in Drupal

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

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

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

Search across Fields in Views using Combine Fields Filter in Drupal 8

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

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

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

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

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

New Media Management Functionality in Drupal 8.6

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

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

Drupal CLI: Drush and Drupal Console

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

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

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

Create Dropdown Menus using Superfish in Drupal 8

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

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

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

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

Display Blocks within Content pages using Block Field in Drupal 8

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

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

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

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