Create Custom Permissions for Existing Paths in Drupal

This tutorial will demonstrate how to use the Custom Permissions module.

By default in Drupal, user permissions in the Drupal backend are not very granular.

For example, if you want to give a role the ability to edit only the “Basic site settings” in the Drupal admin UI. In Drupal, this can be achieved by giving the access permissions “administer site configuration”. However, with this permission enabled, the role will also have the ability to edit other site settings which you may not want a user to have access to.

Enter the Custom Permissions module.

With this module, you could solve the above problem by creating an extra custom permission to edit only the “Basic site settings” page without assigning the “administer site configuration”.

This light-weight module will allow you to specify the exact admin route (or path) that you want to give permissions to without giving the role access to everything in the administration section.

In this tutorial, you’ll learn how to create a custom permission which will only have access to the “Basic site settings” page. We’ll be using the 8.x-2.x version of the module.

Control which Roles can be Assigned in Drupal using Role Delegation

The roles and permissions system in Drupal is powerful, but it can be tricky to configure correctly. Some permissions give a role too much privileged access where others aren’t granular enough.

An excellent example of this is if you need to create a role to manage user accounts.

Drupal comes with the permission “Administer users” which lets you create user accounts, only give this permission to trusted users.

The above mention permission allows you to create user accounts but you can’t assign them roles without “Administer roles and permissions”. But this permission (“Administer roles and permissions”), will enable you to assign any roles, including the default Administrator role.

Drupal Live Site Build (Part 3) – Create Bootstrap Grid using Views and Display Related Content

In the show notes below, I outline what we implement in part 3 of the Drupal live site build. We’ll create a new content type called Portfolio which will have three fields, Body, Featured (media field) and a Portfolio category field.

Then we create a “Related project” block which will display other portfolio items which are related through the category field.

We use the Views module to create the block.

And then we create a listing page which displays the portfolio items as Bootstrap Card components in a grid layout.

Drupal Live Site Build (Part 2) – Create Layout Builder Section, Bootstrap Carousel

In the show notes below, I outline what we implement in part 2 of the Drupal live site build. We start off by fixing a few bugs, which I introduced and didn’t notice until I started playing around with the site after the first video. For example, we couldn’t drag-and-drop any of the card components because I overrode the inline-block template.

Part 2 (this video) is a little more advanced because we create a custom module, implement two layouts and implement a hook_preprocess_HOOK.

So we start off by creating a Row layout which fixes the bug from part 1 and we implement the Bootstrap Carousel component (clients love carousels) using block types.

Drupal Live Site Build (Part 1) – Project Set Up, Build Bootstrap Card Component using Layout Builder

Below are the show notes for the first video in a series on building a Drupal site using layout builder and Bootstrap. To help with the build process we’re going to follow a template and in each live stream session, we’ll build a component from the template.

And the plan is to have a semi-complete website after a few live streams.

Don’t forget to subscribe to our YouTube channel to stay up-to-date.

In this first video, we’re focusing on the three-card components below the homepage carousel.

We built the three-card components using a custom block type and layout builder. We’re not using paragraphs in this video.

So here are the show notes for the video.

Getting Started with Paragraphs and Bootstrap in Drupal

Paragraphs is a popular module that allows you to create components which can be used on an article or basic page for example. It’s a module which I’ve used on all of my projects for the last half-decade.

Instead of an editor writing all the page content in a text editor, a site builder can create a set of paragraph types that the editor can use to create pages.

An example of a paragraph type could be an accordion, slideshow, or any type of complex component.

The Drupal landscape in the last couple of years has changed thanks to Layout Builder, which is a core Drupal module that lets you control and create layouts on entities. Hence the name Layout Builder. If you want to learn more about the module then look at our Getting Started with Layout Builder in Drupal 8 tutorial.

Now, with Layout Builder on the scene. Does it mean that Paragraphs is dead? NO!

The Paragraphs module is great for implementing complex data models, i.e., grouping fields together. I have worked on projects where they have gone a little overboard with the use of Paragraphs and things got pretty messy. I’m talking about 4 levels of nested paragraphs. But if you control the complexity of the paragraph types and don’t have so many nested levels then you should be fine.

I’ve talked about Paragraphs on this site many times in the past. If you’re looking for a basic introduction then look at our Introduction to the Paragraphs Module in Drupal 8 tutorial.

Managing Media Assets using Core Media in Drupal 8

A lot of media functionality has been added into Drupal core over the last few releases. First, we got the Media module in 8.5 which offers fieldable media types. Then we got the Media Library module which offers a popup where users can select media assets. Now for Drupal 8.8 and above you have the ability to embed media assets directly into the editor.

There are three important parts when it comes to media functionality. You need the following:

  • Store media assets (media types)
  • Reuse media assets (media library)
  • Embed media assets

As of Drupal 8.8+,  the above-mentioned functionality is all supported in Drupal core without installing any extra modules.

This functionality could be achieved before Drupal 8.8 by using Media entity, Entity embed and Entity browser. But required a fair bit of site-building and configuring. However, now all you need to do is install Media and “Media Library” and you’re good to go.

In this tutorial, you’ll learn how to create and manage assets, using the Media field and Media library. Then we look at how to embed assets directly in the editor. We finish things off by creating a custom media type to manage Instagram posts.

Getting Started with React in Drupal 8

If you’ve done any web development in the last couple of years, then I’m sure you noticed that JavaScript libraries and frameworks have become popular. The three that come to mind are React, Vue.js, Angular but there are many, many more.

These libraries and frameworks are great for building complex JavaScript applications. Also, being written in JavaScript means they can easily be embedded into a Drupal site.

In this tutorial, I’ll show you how to embed and compile a React application using two methods: Lavavel Mix and Webpack. If you want to use React then you’ll realize very quickly that you can’t just write JavaScript and have it work out-of-the-box, it needs to be compiled. That’s why I’ll show you two ways you can compile React locally without using a CDN.

This tutorial is targeted towards developers who know how to create a Drupal module, use the npm command and know basic React.

A copy of all the code can be found at https://github.com/WebWash/ww_react_examples.

Using Code Generators in Drupal 8

Code generators in Drupal are great as a productivity tool. If you need to create a module, you could easily run a few commands and have a module generated. Then if you need to create a custom block, you could run another command which will generate all the boilerplate code and add the block into a module.

If you want to create a new event subscriber, form, service, etc… There’s always a bit of boilerplate code required to get things going. For example, making sure you extend the right class and inject the correct services. A code generator makes this process quick and easy.

Most of the popular frameworks, Laravel, Symfony, Rails just to name a few, utilize code generators which create scaffolding code.

In this tutorial, you’ll learn three ways you can generate code in Drupal 8 using Drupal Console, Drush and Module Builder.