Author name: Ivan Zugec

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

Add Preview Page to Forms using Webform in Drupal

Leave a Comment / Drupal / By

When you create a form using the Webform module, you may need a “preview” step. This is a page or step which allows the user who’s submitting the form to preview what’s being submitted.

If they see a mistake, they can go back to the form and fix the error. Once the form has been filled out and previewed then, it can be submitted.

Webform allows you to quickly create a preview step in any form, and in this tutorial, you’ll learn how to implement it.

How to Host and Deploy Drupal Sites using Cloudways

4 Comments / Drupal / By

Cloudways is a managed cloud hosting provider which allows you to host and deploy Drupal sites on popular cloud platforms. They don’t host your site, instead you choose a cloud provider, i.e., DigitalOcean, Linode, AWS and so on.

The benefit of using Cloudways is that you can start on a cheap server and upgrade as needed. You get the same features if you spend $20 or $100 per month. As your site gets more traffic you can scale up to a faster server.

The server provisioning and application management is all done via the Cloudways platform. For example, if you use DigitalOcean, you won’t have to create a separate account to manage the server. You can do everything via Cloudways platform.

The servers come configured with PHP, Apache, MariaDB, Varnish, Redis (uninstalled by default) and so on.

Once provisioned you’ll be able to host an unlimited number of Drupal sites on a single server. You’ll need to make sure your server has enough resources, i.e., RAM and CPU.

Other hosting platforms charge per site and traffic. Cloudways only charger per server and you can install as many websites as the server and bandwidth can handle.

In this tutorial, you’ll learn how to install and deploy a Drupal site on Cloudways.

We’ll cover how to install and run Drupal in two ways:

  • How to manually install Drupal via SSH
  • How to Deploy Drupal using GitHub

Cloudways doesn’t have a one-click install for Drupal. You will need to be comfortable with Composer and using SSH to get into a server. If you want to deploy your Drupal site via Git then you’ll need to be comfortable using GitHub.

Control which Roles can be Assigned in Drupal using Role Delegation

Leave a Comment / Drupal / By

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

2 Comments / Drupal / By

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

3 Comments / Drupal / By

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

20 Comments / Drupal / By

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

13 Comments / Drupal / By

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

33 Comments / Drupal / By

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

26 Comments / Drupal / By

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.

Scroll to Top