Lightning Talk: Page Manager and Panels in Drupal 8

At March’s Sydney Drupal user group, I did a lightning talk on Page Manager and Panels in Drupal 8. In the talk, I demonstrate both modules and show you how to create a custom homepage with a few clicks. You can watch the whole talk in the video above.

Panels in Drupal 8 has changed considerably. The UI for building pages is now offered by Page Manager, with Page Manager UI installed, and not Panels itself. The UI also changed, but I think it’s much easier to use than in Drupal 7, but that’s my opinion.

Continue reading

Display Paragraphs Edge-to-edge using Bootstrap in Drupal 8

So far I’ve introduced you to the Paragraphs module where we created a basic paragraph type which allows you to display content as movable components. Then we looked at how to create container paragraphs, and this time we created a Banner which let us display nested paragraph items.

By now you should have a basic understanding of why you should use Paragraphs and how to use the module.

Today I want to teach you how to display paragraphs edge-to-edge using Bootstrap as the theme. We’ll use the Banner paragraph, which we created in the last tutorial, to display an image full width but have the nested paragraphs centered.

Continue reading

How to Create Powerful Container Paragraphs in Drupal 8

In the last Paragraphs tutorial, you were introduced to the module and we created a basic paragraph type called Content. We only skimmed the surface of what the module can really do. To utilize Paragraphs to its full potential you need to learn how to create a container paragraph type and nest paragraph items.

The concept of a container is fairly simple. It’s a paragraph type that has its own paragraph field on it and allows a user to nest paragraph items.

In this tutorial, we’ll create a container paragraph called Banner, it’ll have two fields: image and paragraphs.

When a banner paragraph is created and an image is uploaded, the image will be displayed as a background style. Now, I do understand there’re multiple ways of doing this, but for simplicity we’ll set it using a background style on the paragraph element.

All nested paragraphs will be rendered inside the container and displayed with the background. If you want to add any other settings, i.e., parallax configuration, you would place it on the container paragraph.

Continue reading

Build Edge-to-edge Sites using Paragraphs Module in Drupal 8

Over the last couple of years edge-to-edge, or fluid looking websites, have become popular. You just have to look at a few digital agency websites and you’ll notice the common pattern.

With this design, the page is broken out into separate components. A component could be something as simple as a single text field, or something complex like an image gallery. You may also see scrolling animation on these components. As a user scrolls the text could zoom in from the right and an image could fade in from the left.

How would you build this type of website in Drupal?

Let me introduce you to Paragraphs.

The module allows you to build Paragraph types which an editor can then add to a page using a Paragraph field.

On a decent size website, you could have a few paragraph types: one for entering in text and another to display content in a grid, or another which displays a video.

In this tutorial, you’ll learn the basics of Paragraphs and we’ll setup a simple paragraph type for adding basic text.

In future tutorials, we’ll look at using Paragraphs to manage a dynamic sidebar and how to create an image gallery.

We have a lot to do, so let’s jump right in.

Continue reading

Build a Blog in Drupal 8: Custom Contact Forms

In the last tutorial, we added a few menus to flesh out the site navigation. Let’s now build on this by creating a few contact forms.

In Drupal 7, the Contact module is used to create basic contact forms. When a user fills them out, an email is sent to configured email addresses.

One limitation in Drupal 7 is you can’t modify the fields on the form. You can create different categories but the form stays the same.

In Drupal 8, things have changed. Instead of having a single form, you can now create different contact form types. Following in good old Drupal tradition, these contact form types are fieldable. This means you can add any custom field to them and this let’s you create proper, albeit basic forms.

So in this tutorial, we’ll create a custom contact form called “Drupal question”. This form will be similar to the standard contact form but we’ll add an extra field called “Drupal version”. This will let the user select a version of Drupal from a drop-down list.

Let’s jump right in.

Continue reading

Build a Blog in Drupal 8: Create and Manage Menus

A website’s navigation plays an important part in how easy a site is to use. It’s essential that you spend time fleshing out the overall IA (Information architecture) or you’ll end up with a site that’s hard to use and difficult to navigate through.

Previous versions of Drupal have always offered a simple interface for managing menus, and Drupal 8 is no exception.

In this tutorial, we’ll continue building our site by adding in some menus. We’ll create a custom menu which’ll be used to display links to popular categories, then create an “About us” page and add a menu link to the footer.

Continue reading

Build a Blog in Drupal 8: Managing Blocks

The Block system in Drupal allows you to add arbitrary content into regions within a theme. A block could be as simple as just text or list content using Views.

In Drupal 7, the Block system is pretty limiting. For instance, a single block can only be assigned to a single region. You also have very basic control of hiding and displaying blocks.

To handle these short comings in Drupal 7 you would use Panels for complex layouts and Bean so you can add fields to blocks.

In Drupal 8, the Block system has been revamped and it’s more flexible. The two big improvements: assign a single block to multiple regions and fieldable block types.

In this tutorial, we’ll continue work on our Drupal 8 blog site. We’ll add a static call-to-action which’ll only appear in the sidebar on the blog page. This call-to-action could be some promotional content or a newsletter sign-up form.

Then we’ll create a custom block type which we’ll use to create reusable promotional content that can be added to any blog post.

Continue reading

Build a Blog in Drupal 8: Using Views

Just when you thought Drupal 8 couldn’t get more powerful; I give to you Views in core. Yes, the most installed module in Drupal is now part of core.

No longer will you have to wait for Views to be upgraded to use the latest version of Drupal. Just install Drupal and start building your custom views page or block.

For people who don’t know, Views allows you to list Drupal content. That’s a simple explanation, but it doesn’t give the module the respect it deserves.

For instance, you could create a page (/latest-reviews) which displays all the latest content by content type and sorted by created date. Using the module, you can query the site’s content and display it in a block, table or page just to name a few.

Now that Views is part of core, it’s used throughout the administration section. Take for example the Content (admin/content) and People (admin/people) pages. All of these are powered by Views.

In this tutorial, we’ll continue building our blog site by adding in a few custom views. We’ll create a listing of blog posts for the homepage, a “Recent blog posts” block and we’ll enable Archive view which comes with Drupal but it’s disabled.

Continue reading

Build a Blog in Drupal 8: Adding Comments

If you want to communicate with readers on a blog, the best way to achieve this is by setting up comments. If you’re happy to deal with spam and the occasional troll, then comments are great for communicating with readers and fostering a community.

The functionality has changed a lot in Drupal 8. In Drupal 7, the comments system was fairly rigid. You could only use them on content types and only have a single comment type. If you needed to support multiple comment types like review or feedback, you were out of luck.

In Drupal 8, the comments system has been rebuilt. They can be attached to any entity type by adding a “Comments” field. You can also now have different comment types. This allows you to do all sorts of things like having public and private comments on a single content type.

In the last tutorial, we created a Blog content type and added fields to it. Let’s continue working on it by adding support for comments. We’ll configure the user permissions so that comments can be submitted anonymously, but will need to be approved before they’re published.

Continue reading

Build a Blog in Drupal 8: Content types and Fields

With Drupal 8 on the horizon, now is a good time to start using it. The best way to learn the new version is to build something with it.

Over the next few weeks, I’ll be publishing a series of tutorials teaching you how to create a blog in Drupal 8. The aim of the series is to help new comers, as well as experienced site builders, how to create a blog website using Drupal 8.

Throughout each tutorial, major changes between Drupal 7 and 8 will be highlighted. Even if you know Drupal 7, follow along and you’ll learn what’s new in Drupal 8.

In this first tutorial, you’ll learn how to create a Blog content type and how to add custom fields. You’ll also learn about the Taxonomy system by creating your own vocabulary to categorize blog posts.

Continue reading