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.

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.

Use Taxonomy Terms as Webform Options in Drupal 8

Webform has a pretty robust system for managing lists of options. When you create a select box, you can define its options just for that element, or use a predefined list. If you go to Structure, Webforms, Configurations and click on Options, you can see all the predefined options and you can create your own.

If you want to learn how to create your own predefined options check out our tutorial; How to Use Webform Predefined Options in Drupal 8.

One thing to be aware of is that all of these options are stored as config files, which makes perfect sense, it is configuration.

But what if you want editors to manage the options?

Depending on how you deploy Drupal sites if you change an option only on the production site, your change will be overridden the next time you deploy to production because you import all new configuration changes.

To work around this, you could look at using Webform Config Ignore.

Another way of managing options is by using the Taxonomy system. An editor would simply manage all the terms from the Taxonomy page and nothing will be stored in config files.

In this tutorial, you’ll learn how to create a select element which uses a taxonomy vocabulary instead of the standard options.

Getting Start with Layout Builder in Drupal 8

The Layout Builder module allows you to customize the design of the entity such as content types, vocabularies, etc… by offering a new drag-and-drop interface. The new interface uses your front-end theme and it offers a proper preview of the actual content which will be used.

This makes it easier to build your layouts because you won’t have to save and then see what it looks like on the front-end, you can preview your changes while building it.

The module replaces the “Manage display” page with the new layout builder once enabled. Instead of seeing all the fields on the page, you’ll see a “Manage layout” button which redirects you to the layout builder page.

The best way to learn how to use any module is by using it to build something. So let’s get into it.

In this tutorial, you’ll learn how to use Layout Builder to modify a content type and how to use the module as a page builder (this is my favorite).

Using Pattern Trigger (Regex) in Webform Conditional Logic in Drupal 8

When you need to create survey style forms in Drupal 8 Webform is the clear winner. It’s powerful enough to create all sorts of forms and you can even give it to your editor so they can create their own, after a little training, of course.

One part of Webform which I like is the ability to define conditional logic. For example, you can show or hide a text field based off a value from another element. You can also make an element conditionally required. It’s a very useful part of Webform, and you do all of this through a UI, no custom code.

Defining simple conditional logic, check if element value has a single value, is pretty straightforward. But when you have to deal with multiple values, this is where things get tricky.

Getting Started with Bootstrap in Drupal 8

Bootstrap is a front-end framework for building websites. It ships prebuilt CSS and JavaScript components that make building sites fast. It comes with all sorts of common components that every website needs such as a grid system, buttons, drop-down, responsive form elements, carousel (of course) and so much more. As a developer I don’t want to spend time styling yet another button. I just want to know which CSS class to add to an “a” tag so it looks like a button and I’m good to go.

One complaint about Bootstrap is you can spot it a mile away because a lot of developers use the default look-and-feel. When you see the famous Jumbotron you know it’s a Bootstrap site. But with a little bit of effort you can make your site look unique.

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.