Categories

(76)
(51)
(8)
(30)
(69)
(113)

Building user profiles in Drupal 8 with new core modules

04.09.2019
Building user profiles in Drupal 8 with new core modules
Author:

Your website’s users are its dearest treasure. Drupal 8 offers everything to make your users happy and satisfied. They can publish content with ease, quickly find things through the robust search in Drupal 8, use their native language thanks to Drupal 8’s multilingual improvements, and so much more.

But let’s get to the beginning of their journey — user profiles. We will take a tour of building the structure of user profiles in Drupal 8.

First, let’s talk about some basics before moving on to a few interesting tweaks that make profiles richer and more engaging. These will involve new Drupal 8 core modules such as:

  • the Media Library to enrich profiles with multimedia
  • the Layout Builder to shape the profile layout with the handy drag-and-drop feature

And we will also use the not so new but always essential Views module that is part of the Drupal 8 core to help us display the needed data more precisely. Let’s begin!

Building user profiles in Drupal 8

1. Introduction: using fields to build user profiles

Users are fieldable entities in Drupal 8 just like content types. This means you can build user profiles with any fields, and every account will have them.

These can be any fields imaginable — first name, last name, picture, email, link to the website, and so forth. They can be created in Configuration — People — Account settings — Manage fields with the use of the relevant field types.

Managing fields in Drupal 8 profiles

The order in which the fields will appear to visitors can be specified by the drag-and-dropping at “Manage display,” hide or show their labels and use formatters.

Manage display to reorder fields in Drupal 8

Every field can be made required or optional on the field “Edit” page.

Making fields required or optional in Drupal 8

A special group of field types is “Reference”. It allows you to connect to other entity types. With this, you can allow users to:

  • list other users of your website (i.e. “My mentors”)
  • select options from taxonomy vocabularies (i.e. counties, cities, or spoken languages)
  • list their favorite content from your website

and much more.

One of interesting referenced entity cases comes next with the Media Library.

adding referenced entity field in Drupal 8

2. Making profiles richer with the Media Library

You can allow users to embed media of various types from Drupal 8’s Media Library into their profiles. This includes images, videos, audio, files, and remote videos from YouTube or Vimeo. For example, they can list their featured photos, favorite music videos, and so on.

The Media Library appeared as an experimental module in Drupal 8.6 for media handling. New Media Library interface in Drupal 8.7 impressed even the experts with its stylish design and handy features.

Media Library in Drupal 8

For media embedding, the Media and the Media Library core modules need to be enabled. Then it’s necessary to set the Reference field type to “Media,” specify the allowed number of values and select the media type.

Media field settings in Drupal 8

Adding Media field in Drupal 8

With these settings like on our picture, the user’s account will have the fields for up to 5 featured photos that users can embed into profiles directly from the Media Library.

Adding media from Media Library in Drupal 8

It’s great to know that in Drupal 8.8, there will be a media embed button added to the CKEditor dashboard.

3. Displaying the needed data in profiles via Views

More opportunities are open thanks to adding collections of entities, or Drupal Views. Remember, for example, we mentioned the referenced entity field open to other users such as the “My mentors” field?

referenced entity user field in Drupal 8

However, this just listed the mentor’s usernames on the user profile. What if we want the mentors’ pictures to be shown?

Views comes to the rescue! We can arrange mentors’ photos as Views and attach it as a block or page to the user profile.

We need to:

  • go to Structure — Views and create a new view block of the “user” type that will use fields
  • add the field for the user picture and, in the field settings, relate it to our “My Mentors” field
  • add a relationship in the “Advanced” section of Views to the “My Mentors” field
  • create a contextual filter in the “Advanced” section of Views that will display only the mentors of the particular user

Views in Drupal 8 that shows each user's mentors

Contextual filter by user ID in Drupal 8

With this done, we now have a block that shows the pictures of mentors on each user page. However, this block is not yet added anywhere to the site.

4. Shaping user profiles with the Layout Builder

It’s time to finally unite it all together. The Views block can be attached to the profile using the traditional Drupal block layout as a simple option. However, the new Layout Builder that appeared in Drupal 8.5 offers an amazing drag-and-drop interface for this purpose!

The Layout Builder is used with all fieldable entities, including user profiles. In addition to enabling the module, we need to enable the Layout Builder on the Manage Display tab of the particular entity type (in this case — user account settings).

Enable Layout Builder for entity type

The Manage layout button takes us to the drag-and-drop interface where we can add sections with a different number of columns, set their width proportions, and add blocks to them. Blocks include Drupal fields, Views blocks, forms, menus, and much more.

adding blocks in Layout Builder Drupal 8

Every Drupal block is configured on the right sidebar with all settings traditionally available in “Manage display.”

Configuring field in Drupal 8's Layout Builder

We are creating a three-column section and adding profile fields as blocks, including the “My featured photos” filed and the “My mentors” Views block. We will save the result and see how our profile looks.

User profile created in Drupal 8's Layout Builder

Of course, it still needs a good touch of HTML and CSS. However, we have only touched the tip of the iceberg of what core Drupal 8 modules can do for building user profiles. The opportunities are endless!

Building user profiles in Drupal 8 with our team

Let your user profiles look exactly as you wish, with no limits to your imagination. Entrust building user profiles to our Drupal team who will use core, contributed, or custom modules created specifically for your case. Contact us!

5 votes, Rating: 4.8

Read also

1

If you want the visitors to settle down on your website and register, you definitely need a special tool to make both the registration and login processes easier and faster. Luckily, Drupal 8...

2

Editorial workflows in Drupal 8 are easy to create and manage. This is achieved by the Content Moderation and Workflows modules. These modules are Drupal 8’s innovation — they have appeared...

3

It’s exciting to see how once unimaginable things become popular digital practices! A vivid example is artificial intelligence. What about Drupal websites — are they ready for AI? The answer is a...

4

Here is the news that will make the supporters of API-first Drupal simply lose their breath. Among the new features of the freshly...

5

One of the hottest use cases today is decoupled Drupal architecture. Of course, Drupal has got distributions for it that give you decoupled Drupal out-of-box. They include Reservoir, Headless...

Subscribe to our blog updates