Nov 07 2018
Nov 07
Create Charts in Drupal 8 with Views

There are many ways to present data to your readers. One example would be a table or a list. Sometimes the best approach is to show data on a chart.

It can ease understanding of large quantities of data. There is a way to make charts in Drupal with the help of the Charts module and Views.

In this tutorial, you will learn the basic usage of the module in combination with the Google Charts library. Let’s start!

Install the Charts Module and the Library

  • Download and install the Charts module.
  • Click Extend.
  • Enable in the Modules page the Charts module and its submodule Google Charts.
  • Click Install:

click install for Drupal charts

Installation Using Composer (recommended)

If you use Composer to manage dependencies, edit "/composer.json" as follows.

  • Run "composer require --prefer-dist composer/installers" to ensure that you have the "composer/installers" package installed. This package facilitates the installation of packages into directories other than "/vendor" (e.g. "/libraries") using Composer.
  • Add the following to the "installer-paths" section of "composer.json": "libraries/{$name}": ["type:drupal-library"],
  • Add the following to the "repositories" section of "composer.json":
            {
                "type": "package",
                "package": {
                    "name": "google/charts",
                    "version": "45",
                    "type": "drupal-library",
                    "extra": {
                        "installer-name": "google_charts"
                    },
                    "dist": {
                        "url": "https://www.gstatic.com/charts/loader.js",
                        "type": "file"
                    },
                    "require": {
                        "composer/installers": "~1.0"
                    }
                }
            }
    
  • Run:
    composer require --prefer-dist google/charts:45
    
  • You should find that new directories have been created under /libraries
  • Click Configuration > Content authoring > Charts default configuration. 
  • Select Google Charts as the default charting library.
  • Click Save defaults:

select google charts

Step #2. Create a Content Type for your Drupal Charts

We need some kind of structured data to present in our charts. I’m going to compare the population of all the countries in South America. You can, of course, make your own example.

  • Go to Structure > Content types > Add content type.
  • Create a content type for your Drupal charts

create your content type

  • Add the required fields to match your data:

add required fields

  • At the end, you should have something like this:

the final result

  • Now that you have your content type in place, let's proceed to create the nodes. In this example, each node will be an individual country.

create countries

Step #3. Create the View for your Drupal charts

  • Click Structure > Views > Add view. 
  • Give your view a proper name. 
  • Choose the content type you want to present to your readers.
  • Choose to create a block with a display format Unformatted list of fields. You won’t be able to proceed in this step if you choose Chart due to a small bug in the logic of the module.
  • I’ve chosen 12 items per block because there are 12 countries I want to show in my chart.
  • Click Save and edit:

click save and edit

  • In the FIELDS section of Views UI click Add.
  • Look for the relevant field for your chart and click Add and configure fields.
  • Leave the defaults and click Apply:

add and configure fields

click apply

  • In the FORMAT section click Unformatted list.
  • Choose Chart.
  • Click Apply:

in the format section click apply

  • Select the Charting library in the drop-down. 
  • Select the title as the label field, if it’s not been selected already.
  • Check your relevant data field as provided data.
  • Scroll down and change the Legend position to None.
  • Click Apply. 
  • Feel free to play with all the configuration options available here to match the chart you want or need.

play with configuration options

  • Save the View.

Step #4. Place Your Block

  • Click Structure > Block layout.
  • Search for the region you want to place the block in.
  • Click Place block.
  • Search your block and click Place block once again.
  • Click Save blocks at the bottom of the screen and take a look at your site.

look at your site

There you have it - your Drupal chart is live. Of course, if you change the data in one of your nodes, the chart will adjust itself accordingly. If you want to change the chart display, just change it in the Chart settings of your view. 

You can also give the other charting libraries (C3, Highcharts) a try and see what fits your needs best.

As always thank you for reading! If you want to learn more Drupal, join OSTraining now. You'll get access to a vast library of Drupal training videos, plus the best-selling"Drupal 8 Explained" book!


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
Nov 01 2018
Nov 01

As you already learned in a previous tutorial, CKEditor, the default WYSIWYG Editor for Drupal 8, can be enhanced through the installation of different plugins. They add buttons to the editor with additional features.

Content editors often need to embed accordion tabs into their articles, for example, to present a group of Frequently Asked Questions with their answers or to visually divide a topic into several subtopics.

The CKEditor Accordion module for Drupal 8 allows editors to insert an accordion directly into the WYSIWYG Editor (and therefore into the node) without the need to configure additional modules or even views.

This tutorial will explain the usage of this module. Let’s start!

Step #1. Install the required modules

  • Open your terminal window and type:

composer require drupal/ckeditor_accordion

Install Composer using your terminal

This will download the latest stable version of the module (currently 1.1.0) to your modules folder.

  • On your Drupal installation click Extend.
  • Search for the module name, click the checkbox.
  • Click Install.

Click Install

Step #2. Configure the Module

  • Click Configuration > CKEditor Accordion Configuration.
  • Check Collapse all tabs by default, if not already checked.
  • Click Save configuration.

Click Save Configuration

  • Click Configuration > Text formats and editors.

Click Text formats and editors

  • Locate the Full HTML format and click Configure.

Click Configure

  • Scroll down and click the Add group button in order to add a new button group.
  • If you don’t see the Add group button, click the link Show group names on the right.

Click the link Show group names

Click the link Show group names

  • Give this button group a proper name, for example, "Accordion".
  • Drag the "Accordion" button and drop it into the newly created group.

Drag the Accordion button and drop it into the newly created group

  • Scroll down to the Enabled filters section.
  • Check Limit allowed HTML tags and correct faulty HTML.

Check Limit allowed HTML tags and correct faulty HTML

  • This will display a vertical tab at the end of the screen.
  • Locate the dl HTML tag and replace it with <dl class>.
  • Click Save configuration.

Click Save configuration

This allows the module to inject the required CSS class, in order to give the accordion the proper styling.

Step #3. Create the Content

  • Click Content > Add Content > Basic Page.
  • Make sure that you select Text format HTML.
  • Click the Accordion button.

The module displays an accordion with two tabs by default. In order to add a third tab do the following:

  • Right-click inside the accordion element.
  • Select Add accordion tab after.

Select accordion tab

There are now 3 accordion tabs.

  • Write a title and some text for each of them.
  • Click Save.

You should see the accordion with three collapsed tabs.

You should see the accordion with three collapsed tabs

  • If you want to show the first tab displayed by default, go back to Configuration > CKEditor Accordion and uncheck the Collapse all tabs option.

Step #4. Styling the Accordion

The module adds class=”styled” to the dl tag containing all the elements of the accordion. So you have to target this class, in order to style the accordion.

For example:

dl.styled > dt.active > a {
background-color: red;
}

How to integrate Accordion Tabs into CKEditor for Drupal 8

Conclusion

The CKEditor accordion module lets you insert an accordion at any place of your node with the help of the CKEditor WYSIWYG Editor.

Thanks for reading!


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
Oct 30 2018
Oct 30

Entity Reference Views are one way you can make life easier for Drupal content creators.

Normally, when people are creating content on your site, each field consists of a single box with a single data point. For example, in a list of people, you might get only the person's name. 

Entity Reference Views allows you to provide far more information. For example, you can add photos and personal details to your list of people.

Entity Reference Views in Drupal 7

In this example, I have a content type called "Presentations" and another content type called "Speakers". Every time I add a presentation, I want to choose from a list of speakers.

  • Install and enable Views and Entity Reference.
  • Go to Structure > Views > Add new view.
  • Create a view of the content that you want content editors to choose from. In this example, I'm going to make a list of "Speakers":
Create a view of content in Drupal
  • At the top of the page, click "Add" then "Entity Reference":
Adding an entity reference view
  • Click "Settings" next to "Entity Reference list".
Click
  • Search fields: Choose the field you want users to search by.
  • Click "Apply (this display)".
Choose the field you want users to search by in Views
  • Check the preview to make sure your view is working ...
The preview of our entity reference view

Step #2. Add a Field with the Entity Reference View

  • Go to Structure > Content types.
  • Add an "Entity Reference" field.
Add an Entity Reference field
  • Target type: Choose to link to nodes, users, files or whatever else you want to display.
  • Mode: Choose "View: Filter by an entity reference view."
  • View used to select the entities: choose the view you created.
  • Click "Save field settings".
Settings for an Entity Reference field
  • Click "Add content" and the data entry for your field will use the View you created:
A working Entity Reference field

Entity Reference Views Widget

It's possible to extend this module by using Entity Reference View Widget. This places your view inside a pop-up box to make it easier to select items.

There's a tutorial here and this video has guidance:

[embedded content]

Entity Reference Views in Drupal 8

Both Views and Entity Reference are now part of the Drupal 8 core. To use Entity Reference Views in Drupal 8, the process is like this:

  • Create a view, as we showed above.
  • Go to Structure > Content types > Add field.
Adding an Entity Reference field in Drupal 8

Click through the settings and under "Reference type", you can choose "Views: Filter by an entity reference view".

The setting Views: Filter by an entity reference view

About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.
Oct 30 2018
Oct 30

Entity Reference Views are a great way to make life easier for Drupal content creators.

Normally, when people create content on your site, each field is very plain. However, Entity Reference Views allows you to provide far more information. For example, instead of just showing a list of users, your content creators can browse through a list of names, photos and personal details.

Both Views and Entity Reference are now part of the Drupal 8 core. This made using Entity Reference Views in Drupal 8 much easier.

If you're a Drupal 7 user, read this version of the tutorial.

Step #1. Create a content view

  • Create a view of the content that you want content editors to choose from. In this example, I'm going to make a view by the name "List of Speakers":
Create a view of content in Drupal
  • At the top of the page, click "Add" then "Entity Reference":
Adding an entity reference view
  • Click "Add Fields":

add field

  • Set For to 'This entity_reference (override)
  • Add the fields you want to have displayed and searchable.

03 add field

  • Click "Settings" next to "Entity Reference list".
Click
  • Search fields: Choose the field(s) you want users to search by.
  • Click "Apply (this display)".
04
  • Check the preview to make sure your view is working:
The preview of our entity reference view

Step #2. Add a Field with the Entity Reference View

  • Go to Structure > Content types.
  • Add an "Entity Reference" field.
Adding an Entity Reference field in Drupal 8
  • Save and continue
  • Save field settings
06
  • Click "Add content" and the data entry for your field will use the View you created.
  • If you prefer a checkbox to autocomplete go to Administrator > Structure > Types > Manage > Speakers > Form-display and change the widget type.
07

About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.
Oct 29 2018
Oct 29

If you want to build a large, multi-level drop-down menu in Drupal 8, then the Superfish module is a great choice.

The Superfish module makes use of the jQuery Superfish menu plugin, which is useful for multi-level drop-down menus. Superfish has more features than most dropdown menus. It supports touch devices and keyboard interaction.

In this tutorial, we’re going to create a menu for a sports news site with three menu levels.

Three menu levels

Step #1. Install the module and libraries

First, let's install the module:

Now, let's install the libraries:

  • Download the Superfish library 2.x for Drupal 8.x.
  • Uncompress it to your [DRUPAL_ROOT]/libraries directory. If you don’t have the libraries directory yet, please create it
  • Download the jQuery Easing plugin (optional but recommended)
  • Uncompress it too to your [DRUPAL_ROOT]/libraries directory. 
  • Rename both directories, so that you have the following file/folder structure:

 Superfish module file structure

Step #2. Create the menu structure

  • Go to Structure > Menus.
  • Click the Add menu button:

Click Add menu button

  • Enter the menu title and click the Save button:

Add site title and click Save

Step #3. Add the menu links

  • Once the menu has been added, click the Add link button to create the menu links:

Click Add link button

  • Create the menu links according to the predefined structure. Notice that you have to link each menu item to a piece of content.
  • Click on the Show as expanded checkbox, so that the menu will appear expanded if it has children.
  • Click the Save button each time you create a menu item.

Create menu link and click Save

Once you have created all the links:

  • Use the handles to drag and drop the items in order to match the menu structure
  • Click Save:

Match the menu structure and click Save

Step #4. Place the menu

Menus in Drupal 8 are rendered as block entities.

  • Click Structure > Block layout.
  • Search the Primary menu region and disable the Main navigation default block.
  • Click the Place block button.

Click Place block button

  • Enter the name of your menu in the search box. You will find two “News site” menus.
  • Click the Place block button on the line with the Supefish category.

Click Place block button

Step #5. Finalize the Superfish configuration

  • Uncheck the Display title checkbox:

Uncheck Display title checkbox

There are several configuration options in this window. Particular attention deserves the Slide-in effect provided by the jQuery Easing plugin (which you downloaded at the beginning) and the ADVANCED SETTINGS where you can configure for instance the animation speed. Play with this options until you find the ones to your liking.

Block settings

Advanced settings

  • Click Save block and go to your homepage. You will have a multi-level drop-down menu now!

You have to tweak it with your own CSS, but the main menu functionality is there:

You have a multi level dropdown menu now

I hope you enjoyed reading this tutorial and making your own Superfish menu. Please leave your comments below.


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
Oct 29 2018
Oct 29
How to Set Up Dropdown Menus in Drupal 8

A few years ago, we published a very popular post called "How to Create Dropdown Menus in Drupal".

That post focused on Drupal 7, and some things have changed in Drupal 8.

Here's an updated explanation of how to set up dropdown menus for a Drupal 8 site.

Step #1. Choose a theme with dropdowns

Before you can use a dropdown menu, choose your theme carefully.

Many themes don't have dropdown menus built-in. That includes Drupal's core themes, such as Bartik. Unless you want to make major code changes, it is best to choose a theme that already have dropdowns available. To find out whether a theme does have dropdowns, read the theme's description and documentation on Drupal.org.

If your theme doesn't support dropdowns, we do have a guide to adding a dropdown menu using a module.

Step #2. Create the dropdown links

If you want dropdown menus, you'll need to arrange your menu links in a parent-child relationship:

  • Go to Structure > Menus > Main Navigation.
  • Drag-and-drop your menu links to that they are in a hierarchy:

menu indented in Drupal 8

Also, edit each menu link and check "Show as expanded". If you don't choose this option, the dropdown link will only show if you are on the page being linked to.

show as expanded

Step #3. Places the menu block

In Drupal, menus are normally placed by using blocks:

  • Go to Structure > Block layout.
  • Click "Demonstrate block regions"
  • You'll now see a layout of your theme's regions. It should be clear where your menu should be placed. In this case, use the "Navigation" region. 
  • In this example, move the Move the "Main navigation" block to the "Navigation" region.

Your dropdowns will not appear unless your menu block is in a block region that supports dropdowns.

breeze-regions

Step #4. Configure your menu block

This is the major change in Drupal 8 in regards to dropdown menus. You must configure your menu block.

  • Click "Configure" next to the "Main navigation" block.
  • Change "Maximum number of menu levels to display" to more than 1.
Editing the menu block in the Breeze Drupal 8 theme

Step #5. Check the end result

If you make the changes listed here, your dropdown menus should appear:

Dropdown menus in the Breeze Drupal 8 theme

About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.
Oct 23 2018
Oct 23

Sometimes you may need to import data from a CSV file into Drupal.

We've spoken with OSTraining users who need to import from another CMS, and uses who need to import from a business spreadsheet.

There is no easy way do this import using the Drupal 8 core. To import your data from a CSV file, you need to install and enable the Content Import module.

In this tutorial, I'll walk you through the process of importing data with Content Import.

In this example, we'll import data into a "Customer" content type. This Customer content type will have the following five fields:

Field Name Field Description Field Type Title

The name of the customer / this is the default Drupal title field for each content type

Plain text Body Customer information Long text Contract Date The date when the contract with the customer was signed In the mm/dd/yy format Customer Picture The picture of the customer Image Discount This field indicates if the customer qualifies for an extra discount at the end of the year Boolean (Yes/No)

Step #1. Create the Customer content type

After creating the Customer content type and adding fields, you will have the following starting point:

Starting point

There are some details that you have to take into account to run this process without complications:

  • The date field has to be set as Date and time (this is related to the Unix timestamp. You can read more about this here).

Setting the Date Type

  • When creating the Customer Picture image field, configure the file directory for the images as [MACHINENAMEOFYOURCONTENTTYPE/images] You’ll upload your images to this directory with the help of the IMCE module or some kind of FTP software

Configure the file directory for the images

  • Set the On and Off labels in your Discount boolean field to Yes and No respectively

Set the On and Off labels

Step #2. Prepare your spreadsheet for import

You can use the spreadsheet application of your liking for this. I’m using Google Spreadsheets. The langcode column is mandatory

Importing to Drupal from Google Spreadsheets

  • Save your spreadsheet as a Comma Separated Values file. Once you do, your file will have a .csv file extension.

Save file in CSV format

Step #3. Upload the profile pictures to the specified directory

With the IMCE module:

  • Go to yoursite/imce in order to open the IMCE browser
  • Create the /customer folder inside the public directory
  • Create the /images sub-folder inside the /customer folder
  • Upload the profile pictures to this folder by clicking the Upload button on the top (/customer/images folder in our case)

New folder

Upload button

Uploaded profile pictures

Step #4. Import your content from the CSV file

  • Click Configuration > Content Authoring > Content Import

You will see a screen with two options.

  • Select the Customer option for the Select Content Type
  • Click on the Upload File button
  • Select the CSV file on your hard drive
  • Click Import

Click Import

Congratulations! If you followed along with my instructions, you should now see the Content screen of your Drupal installation with your newly imported content. 

Troubleshooting Your Drupal CSV Import

While importing content, you may run into the following error on the white page:

"The website encountered an unexpected error. Please try again later."

To deal with this error, please do the following:

  • In your Drupal site root go to modules > contentimport > src > form
  • Open the contentImport.php file in your text or code editor
  • Find the following two lines (around line 275):

$dateTime = \DateTime::createFromFormat('Y-m-d h:i:s', $data[$keyIndex[$fieldNames[$f]]]);
$newDateString = $dateTime->format('Y-m-d\Th:i:s');

Replace them with the following two lines:

$dateTimeStamp = strtotime($data[$keyIndex[$fieldNames[$f]]]);
$newDateString = date('Y-m-d\TH:i:s', $dateTimeStamp);

You’ll find more information about this error here.

I hope you enjoyed this tutorial.

If you want to learn more Drupal, join OSTraining now. You'll get access to a vast library of Drupal training videos, plus the best-selling"Drupal 8 Explained" book!


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
Oct 22 2018
Oct 22
How to Create a Customer Service Request Form in Drupal 7

An OSTraining member has asked us how to achieve the following in Drupal 7:

  1. A customer fills out a form to send their request for repair or service on a specific piece of equipment.
  2. A customer service agent comments on the request to either approve or deny it.
  3. The customer gets an automatic email after his request has been processed.

In this tutorial, you will look at this use case. You will learn how to achieve these requirements by creating a node.

My first thought was to do the job by collecting the data requests with the Webform module. I thought I would convert this data into nodes, so it can be then processed with the help of Views.

This is possible with the help of the Rules and the Webform Rules module.

However, there’s a less complicated process if you let your customers create a node. The main advantage is that you avoid the complex conversion step in the first place.

It also makes no sense to mix up your form submissions with your content, it’s easier to create a node instead of creating a submission and converting it into a node.

Let’s start!

Step #1 - Create a “Support Request” Content type

  • Click Structure > Content types > Add content type.
  • Uncheck Published and Promoted to the front page.
  • Close comments.
  • Leave the Author and date information (this is relevant information since you’re letting your customer create the node).
  • Leave the Main menu as default.

01

  • Click Add field and follow this structure:
 Field name  Type  Widget  Values  Device  List (text)  Select list

1) Dishwasher

2) Oven

3) Refrigerator

 Request status  List (text)  Select list

1) Pending*

2) Approve

3) Denied

 Required field.

* Default value.

 Additional comments  Text  Text field  Max length is 3000

02

Step #2 - Restrict access to certain fields

You certainly don’t want your customer to change the status of the request.

Also, the field additional comments are meant to be used by your employees.

To hide this fields from the user, you’ll have to download and enable the Field Permissions module.

  • Download and enable the module with your preferred method.

03

  • Click People > Permissions > Roles. 
  • Click edit permissions on the authenticated user line.

04

  • Look for the Support request: Create new content permission and check it.

05

  • Click Save permissions.
  • Your customer can now create nodes of type Support request on your site.
  • Click Reports > Field list > Permissions.
  • Look for the fields you want to revoke.


06

  • Click on each link (both fields).
  • Choose Custom permissions.
  • Click Save settings.

07

Your customer can now create a node (in the frontend of the site). Notice that the customer won’t have access to the backend because you haven’t granted those permissions.

  • Create an authenticated user and log in to another browser.
  • Click the Add new content link.
  • Fill out the node “form” and click Save.
  • Check the Content link in the browser you’re logged in to the site.

Excellent! The first part of the task is accomplished! Let’s move on.

Step #3 - Retrieving and processing the nodes

You can filter all support requests in the content view page, this is ok if you have 10 nodes.

But if you have more requests and some of them have already been approved or denied, then it’s not a practical way to select only nodes with status “Pending”.

For that purpose, you’ll have to create a view. Install and enable Views and Views UI if you haven’t done yet.

  • Click Structure > Views > Add new View.
  • Create the view Support requests - Older first.
  • Click Continue & edit.

08

  • In the Filter Criteria section click Content: Published and set its value to No.
  • Click the Add link.

09

  • Search for the Request status field and choose it.

10

  • Click Apply (all displays).
  • Choose Is one of and Pending.

11

  • Click Apply (all displays) again.
  • Save the view.
  • Now you have access only to those requests with pending status.

12

The employee can click on the link to have access to the full node, from where they can edit it. They have to approve/deny the request.

Otherwise, it will still be appearing in this view. So it’s a good thing if this view is empty (if you trust your employees).

13

14

Good job! That was the second part of the task.

Step #4 - Send the customer an email with the help of Rules

  • Install the Rules module and all its dependencies.
  • Enable Rules and Rules UI.
  • Click Save Configuration and Continue.

15

  • Click Configuration > Rules > Add new rule.
  • Give your rule a proper name.
  • Choose React on Event > After updating existing content.
  • Restrict by type > Support request.
  • Click Save.

16

  • You have now an Event.
  • Click Add condition.
  • Leave Data comparison.
  • Click Continue.

17

  • The Data selector value is node:field-request-status.
  • Click Continue.
  • Test the Approved value first.
  • Click Save.

18

  • Add another condition testing the Denied value.

19

  • Now click Add action.
  • Select Send mail from the dropdown list.
  • Configure the action with the help of tokens (replacement patterns).
  • Click Save.

20

From now on, your Drupal site will send the corresponding user an email, each time a support request is processed. Congratulations!

I hope you liked this tutorial. Thanks for reading it!

Additional Reading

If you want to learn more Drupal, join OSTraining now. You'll get access to a vast library of Drupal 7 training videos, plus the best-selling"Drupal 7 Explained" book!


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
Oct 16 2018
Oct 16

CKEditor is the WYSIWYG editor that you'll see in Drupal 8.

The default installation of CKEditor has a lot of options, but you can also add more features. CKEditor is an open source editor and has a wide range of extra plugins.

One of our customers asked how they could add 'color",  "text" and "font family" buttons to their CKEditor. This tutorial will explain how to add these buttons to the editor.

Step #1. Install the Required Modules and Libraries

You will need three modules to follow along with this tutorial:

  1. CKEditor Font Size and Family
  2. CKEditor Panel Button
  3. CKEditor Color Button

Next, you'll need to install the CKEditor plugins from the official CKEditor site:

  • Create a folder called libraries inside the root of your Drupal installation.
  • Download the plugin files from the CKEditor site to the libraries folder.
  • Uncompress the files.

You can find the three libraries at these links:

  1. Color Button
  2. Panel Button 
  3. Font Size and Family

How to Install CKEditor Plugins in Drupal 8

The folder structure in your Drupal installation should look like this:

  • Log in to your Drupal site and click Extend.
  • Scroll down to the CKEDITOR section of your modules’ page.
  • Enable the 3 downloaded modules.
  • Click Install.

Step #2. Add Plugins to the Editor

In this part of the tutorial, we'll link our new plugins to our version of CKEditor.

  • Click Configuration > Text formats and editors.
  • Click configure next to the Full HTML format.

  • Scroll down and click Show group names, in order to add a group of buttons to the editor top button bar or second level button bar.

  • Create a new group called Font.
  • Click Apply.

  • Drag and drop the “Font” buttons to the group you created.

  • Add another button group and give it the name Color.
  • Drag the two color-related buttons to the newly created group.

  • Scroll down to the end of the page and click Save configuration.

Step #3. Test the Editor

Now we'll see if everything is installed correctly.

  • Click Content > Add content > Article.
  • Add some text and test the newly added buttons.
  • Make sure that the text format is Full HTML.

  • Click Save when you’re done editing and head over to the published article.

Summary

The CKEditor WYSIWYG core module in Drupal 8 can be enhanced with some additional plugins. They will greatly increase your efficiency as you work on your Drupal 8 content.

Thanks for reading!


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
Oct 15 2018
Oct 15
How to Create a Search Box with a Sliding Effect in Drupal 8

One of OSTrainings members asked how to create a search box with a sliding out effect. Their goal was to arrive at the search box similar to the one you can find at the top of Drupal's own website.

In this tutorial, you will learn how to create a search box that expands once you clicked on its icon. Also, while it stays expanded until you close it, it will keep blurring out your main menu.

We’re going to use a Bootstrap subtheme for this demonstration.

Let’s start!

Step #1 - Create a Bootstrap Subtheme

This tutorial assumes that you have already downloaded the Bootstrap theme and created a subtheme as explained in the "How to Create a Drupal 8 Bootstrap Subtheme" lesson.

Let's move on to the next step.

  • Configure the libraries file to point to the css/style.css and js/script.js files:

Configure the libraries file

  • Create an empty style.css file inside the css folder of your theme.
  • Create an empty script.js file inside the js folder of your theme.

Create an empty script.js file

Step #2 - Rearrange the Block Layout

  • Click Structure > Block layout.
  • Drag and drop the blocks until they match the ones in the image:

Drag and drop the block

Step #3 - the CSS

The first thing you need to do is to identify the CSS selector of the input element:

Identify the CSS selector

  • Once you’ve found it, add in there the following CSS code:
.input-group input[type=search] {width: 150px;  float: right;  -webkit-transition: width 0.4s ease-in-out;  transition: width 0.4s ease-in-out;}

This code will resize the search box and move it to the right of the site.

It will also prepare the transition of the element, that will be triggered by the focus event.

  • Target the same element, this time add the :focus pseudo-class:
.input-group input[type=search]:focus {width: 100%;}

This code will resize the search box when it receives the focus:

This code will resize the search box

Search box resized

  • Target two more classes to dim the header and move the search box upwards:
.dimmed {filter: blur(3px);  opacity: .2;  transition: all .3s;}

.sbox {  transform: translate(0, -4em);  -webkit-transition: transform 1s ease-in-out;  -moz-transition: transform 1s ease-in-out;  -o-transition: transform 1s ease-in-out;  transition: transform 1s ease-in-out;}

These two CSS classes will be injected with the help of jQuery when the search box get the focus.

Step #4 - The jQuery

  • Add the following code to your script.js file:
jQuery(".input-group input[type=search]").focus(function(event){jQuery("#navbar").addClass("dimmed");});

jQuery(".input-group input[type=search]").blur(function(event){jQuery("#navbar").removeClass("dimmed");});

The first statement adds the dimmed class to the element with the id=”navbar” when the input[type=search] selector gets the focus.

The second statement removes the class when the input[type=search] selector loses the focus.

Please, take notice that you have to use the word jQuery instead of the $ symbol.

  • Save the file.
  • Refresh the site.

Refresh the site

  • To add the sbox CSS class to the element with id=”search-block-form” when the input field gets the focus, add another line to each one of your jQuery statements:

Add the sbox CSS class

This is a very basic example of what’s possible to achieve in your site with CSS and JS.

There are many ways to do this. If you think there’s a better way, please leave us your comments below.

Final result

What's Next?

Would you like to learn how to build great websites with Drupal? Sign up to OSTraining.com now and right away download our bestselling "Drupal 8 Explained" book.


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
Oct 04 2018
Oct 04
Should I Re-use Existing Drupal Fields?

Sometimes we're able to give really clear advice: "Do this!" or "Don't do that!"

This is not going to be one of those blog posts.

Drupal gives you the ability to re-use fields. If you have an "Image" field, you could choose to use that same field on every content type on your site.

However, it's not always clear whether re-using fields is a good idea. Sometimes it is, sometimes it isn't.

Here's an overview of the advantages and disadvantages to consider before re-using Drupal fields.

General advice on re-using fields

You can choose the "Re-use existing field" feature whenever you go to "Structure", then "Content types" and click "Manage fields" for a content type.

reuse drupal fields

The Drupal.org documentation use to officially recommend that you do not re-use fields:

It is recommended to create new fields, rather than reusing existing ones, unless you have a clear reason to do so.

However, that advice has become more nuanced in recent years, and Drupal officially says that are both advantages and disadvantages.

The Drupal Field UI documentation has a detailed section called "Reusing Fields":

There are two main reasons for reusing fields. First, reusing fields can save you time over defining new fields. Second, reusing fields also allow you to display, filter, group, and sort content together by field across content types. For example, the contributed Views module allows you to create lists and tables of content. So if you use the same field on multiple content types, you can create a View containing all of those content types together displaying that field, sorted by that field, and/or filtered by that field. There is one main reason to not reuse a field: different permissions. For example, you may need different user roles to have different levels of access to a field, depending on the content type to which it has been added. This can be difficult if you reuse a field.

Advantage: re-using fields can make your simpler

Yes, there can be a speed boost, but the time-savings are very small. A more compelling advantage is that re-using fields can sometimes make site administration simpler. Web Initiative sum this up nicely:

Reuse of fields can also reduce the system’s complexity. Instead of creating and maintaining 10 different fields, Drupal admins maintain only two fields and their documentation. Database administrators only need to improve performance of two extra tables. KISS is always a good principle.

It definitely would be easier to apply permissions, setting and design elements to one re-used field rather than 10 unique fields.

Advantage: some content works well with re-used fields

Back to the Drupal Field UI documentation again:

reusing fields also allows you to display, filter, group, and sort content together by field across content types. For example, the contributed Views module allows you to create lists and tables of content. So if you use the same field on multiple content types, you can create a View containing all of those content types together displaying that field, sorted by that field, and/or filtered by that field.

One comment writer on the Drupal.org documentation makes the same point about Views. They point out that Views can combe content in sophisticated ways. So, if you have multiple different content types, with different date fields, then Views can combine them into a single view. However, they also point out that Views isn't so sophisticated with sorting. So, if you have multiple different content types, with different date fields, then Views will struggle to sort the content on all those different date fields.

Disadvantage: Re-used fields are inflexible

Brandon Williams on Twitter summed this up nicely: 

at first it's a good idea, but give it a few weeks, reqs change, you end up creating separate ones anyway

To a large degree, if you choose re-used fields, you are limiting the changes you can easily make to your data later.

Disadvantage: Re-used fields make data harder to export or migrate

Re-using fields could become an issue when you need to export your data or when you need to migrate to a new version of Drupal or another platform.

Each Drupal field has it's own database table, as shown below. Extracting that data can be tough. The Features module (the most common way to export Drupal data) struggled for a long time with shared fields, although current versions can handle them more effectively.

media_1392150946256.png

This advice is similar to our thoughts on using multi-sites. Whenever you start to build dependencies between codebases or database tables, you add complexity to your site.

Advantage or disadvantage? Performance

The Drupal documentation outlines one possible benefit of re-using fields:

Reusing fields not only makes Drupal run faster, it also makes your project easier to maintain.

This thread on Stack Overflow has a very relevant discusion on performance. It includes this comment:

A real problem however is the number of fields you have. Because currently in Drupal 7, the complete field configuration of all fields, no matter if they're loaded or not, is fetched from the cache on every single request. I've seen sites with 250+ fields, where loading and unserializing the field configuration takes 13MB+ memory."

So, re-using fields could possibly give small performance improvements by letting us have a lower total number of fields.

However, those small improvements may lost elsewhere. This from Web Initiative again:

[fields] extra complexity to a Drupal system. When creating a new field, the field’s definition is added to the field class table and the field’s configuration is added to the field instance table; meanwhile, a new table is added to the Drupal database to store the field data. Database tables add complexity to the system. In addition, queries of nodes will incur JOINexpressions of tables to field data. Multiple JOINs will impact database performance since MySQL responds poorly to queries with multiple JOINs of tables if not properly configured.

Summary

Sorry that we don't have an easy answer to this question. This is a question where you will benefit from reading around the issue and understanding the pros and cons. If you're doing a real site build, it will be worth constructing the site in a test environment to learn more about how these pros and cons impact your site's needs.


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.
Oct 03 2018
Oct 03

One of our customers asked how to tweak the fields of a table output by Views to give the table a cleaner look.

They were looking for a way to merge the fields of the first and second columns. They also wanted to display the file download link just with an icon.

There are a couple of ways to achieve this. One of them is to rewrite the output of Views’ fields.

This tutorial will explain how to rewrite the results of any Views’ field independently of the display of the view (i.e. table, list, grid, etc).

Let’s start!

Step #1. Download the Required Module

In order to link the image field to the file, it’s necessary to install the Linked field module.

  • Type in your terminal the following line:

composer require drupal/linked_field in your terminal

This will download and place the module in the modules’ folder of your Drupal installation.

  • Click Extend and enable the Linked Field module.
  • Click Install.

Click to enlarge the image:

Click Install

Step #2. Create the Content Type

  • Click Structure > Content types > Add content type.
  • Create a content type and give it a proper name, for example Issued Paper.
  • Click Save and manage fields.
  • Add the following fields:
    • Label: Authors / Field type: Text (plain).
    • Label: Pages / Field type: Text (plain).
    • Label: Reference / Field type: Number (integer).

Click to enlarge the image:

Add the following fields

  • Click Add field.
  • Select File from the dropdown list.
  • Give this field a proper label.
  • Click Save and Continue.

Click to enlarge the image:

Click Save and Contine

  • Leave the default values and click Save field settings.
  • Scroll down to the Allowed file extensions option, delete txt and replace it with pdf.
  • Click Save settings.

Click to enlarge the image:

Click Save settings

  • Click Add field.
  • Under the Reuse an existing field dropdown select Image.
  • Click Save and continue.

Click to enlarge the image:

How to Rewrite the Output of Views FieldsClick Save and continue

  • Check this field as required.
  • Upload a default “pdf icon” image.
  • Write an alt text for this image.

Click to enlarge the image:

Write an alt text for this image

  • Change the file directory to pdf-files.

Click to enlarge the image:

Change the file directory to pdf-files

  • Scroll down and click Save settings.
  • Click Manage form display.

Click to enlarge the image:

Click <i>Manage form display

  • Drag the Image field to the Disabled section and click Save.

Click to enlarge the image:

Drag the Image field to the Disabled section

By disabling the field in the form, giving it a default value and making it required, we make sure that the same image (in this case an icon) will be displayed on all nodes of the same content type.

  • Click Manage display.
  • Drag the File field to the disabled section.
  • Click the cogwheel besides the Image field.
  • Check Link this field.
  • The destination will be the files folder. From the Available tokens section, select the [node:field_file_download:entity:url] token.
  • Click Update.

Click to enlarge the image:

  • Rearrange the fields.
  • Click Save.

Click to enlarge the image:

Click Save

Step #3. Create the Content

  • Click Content > Add Content > Issued Paper.
  • Create three or more nodes.

Click to enlarge the image:

Create three or more nodes

Your Content listing screen should look more or less like this:

Click to enlarge the image:

Your Content listing screen should look more or less like this

Step #4. Create the View

  • Click Structure > Views > Add view.
  • View Content of type Issued paper.
  • Check the Create a page checkbox.
  • Display it as a Table of fields.
  • Click Save and edit.

Click to enlarge the image:

Click <i>Save and edit

  • Click the Add button in the FIELDS area.
  • Type the name of your content type in the search box (e.g. “Issued paper”) - it works best with the machine name.
  • Select all fields except the body field.
  • Click Add and configure fields.

Click to enlarge the image:

Click Add and configure fields

  • Click Apply and continue five times for now.
  • Rearrange the fields like in the following image.
  • Click Apply.

Click to enlarge the image:

Click Apply

  • Click the Authors field and exclude it from the display.
  • Click Apply.

Click to enlarge the image:

Click Apply

  • Click the Title field, uncheck Link to the content and click Apply.
  • Click the File Download field, exclude it from display and set the Formatter to URL to file.

Click to enlarge the image:

Click the File Download

  • Select the Image field, and set the Formatter to Image, choose Thumbnail 100x100 pixels.

Click to enlarge the image:

Select the Image field

Your Fields section should look like in the following image (click to enlarge it):

Your Fields section should look like in the following image

Now it’s a good time to rewrite the output of these fields. Rewriting results is about displaying additional information that is different from the actual field within that field.

You achieve this through the use of tokens. It may sound complicated but it’s not.

Let’s take a look at that!

Step #5. Rewrite Results

  • Click the Title field.
  • Click Rewrite results.
  • Select Override the output of this field with custom text.
  • Click Replacement patterns.
  • Copy the {{ title }} token and paste it in the text area.
  • Wrap this token between the h2 tags.
  • Copy the {{ field_authors }} token and paste it below the {{ title }} token.
  • Click Apply.

Click to enlarge the image:

Click Apply

Notice that you can only rewrite the results of this particular field with the tokens of the fields that are above in the Fields section of Views UI.

  • Click the Image field.
  • This time check the Output this field as a custom link checkbox.
  • In the Link path textbox enter the {{ field_file_download }} token (available in the REPLACEMENT PATTERNS section).
  • Click Apply.

Click to enlarge the image:

Click Apply

  • Save the view and take a look at the page of this view on your frontend.
  • Click one of the download icons to test if they work.

Click to enlarge the image:

Click one of the download icons to test if they work

The Rewrite results feature in views allows you to rewrite a field in views with other fields of the same view.

Thanks for reading!


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
Sep 20 2018
Sep 20

One of our customers asked us how to integrate a calendar with events on their site.

The Calendar module is the most popular module in Drupal 7 with over 1 million downloads. Unfortunately, the module is still under development for Drupal 8.

Another option is the Full Calendar View module. This module is by far not as popular as Calendar, but it does its work well.

This tutorial will explain the usage of this module. Let’s start!

Step #1. Install and Enable the Module

  • Use your favorite method to install the module, The recommended way is using Composer.
  • Enable the module:

composer install drupal/fullcalendar_view

How to Integrate a Calendar in Drupal 8

Step #2. - Create the Content Types

For the purpose of this tutorial, you’ll be creating two content types for each of the two different types of events for a travel agency offering :

  • City tours by day.
  • City tours by night.
  • Click Structure > Content types > Add Content Type.
  • Create a Content type called "City tours by day".
  • Click Save and manage fields.

  • Click Add field.
  • Add the following fields:
    • Field ‘Start Date’Type: Date.
    • Label: Start date.
    • Date type: Date only (instead of Date and time).
    • Field ‘End Date’.
    • Type: Date.
    • Label: End date.
    • Date type: Date only (instead of Date and time).
    • Field ‘Description’.
    • Type: Text (plain).
    • Label: Description.
    • Maximum length: 255.
  • Repeat this process and create another Content type called "City tours by night".

Step #3. Create the Content

  • Click Content > Add content > City tours - day.
  • Give this node the name of "Tourist group green".
  • These group is going to take a 7-day tour.
  • The description text is "All included".

  • Create one more node of type City tours - day with the following values:
    • Title: Tourist group green - 1.
    • Length of this tour: 3 days.
    • Description: Beverages included.
  • Create one node of type City tours - night with the following values:
    • Title: tourist group black.
    • Length of this tour: 3 days.
    • Description: Non-alcoholic beverages.

Your content overview page should look like this:

Step #4. Create the Calendar View

  • Click Structure > Views > Add view.
  • Add a proper name for the view.
  • Show Content of type City tours - day.
  • Create a page.
  • The Display format will be Full Calendar Display.
  • Click Save and edit.

  • Go to the Filter Criteria section.
  • Click the drop-down caret besides the Add button, click Rearrange Remove the Content type: City tours - day criterion.
  • Click the Add button.
  • Search for the Content type filter criterion and select it.
  • Click Add and configure filter criteria.

  • Select Is one of and choose the relevant content types, including City tours - day.
  • Click Apply.

  • Click the Add button in the fields section.
  • Select the fields Start date, End date.
  • Leave the defaults.
  • Click the Settings link for the Calendar.

  • Map the fields for start and end date from your content types to the fields the calendar view is supposed to display.

  • Scroll down and open the legend colors section.
  • Choose the appropriate color for each Content type.

Notice also that you have the option to assign taxonomy fields to the content types. That way, you can select multiple colors for one content type.

  • Click Apply.

  • Save the view and go to its URL.

Congratulations! You have successfully created an event calendar for your Drupal site. It’s possible to move these elements by dragging and dropping. Just hold click and move them around. You can edit every element on the calendar by clicking it.

It’s possible to resize them too if they’re full-day events.

Summary

The "Full Calendar View" module lets you easily integrate a fully functional event calendar into your Drupal site.

Thanks for reading!


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
Sep 17 2018
Sep 17

Let me give credit where credit is due. The Drupal community have transformed the way it works in 2018.

In years gone by, Drupal was not a very well-organized project. Everything was done in a stereotypically "open source" way with loose roadmaps and vague planning. The apex of this was the development of Drupal 8 which dragged on for over 5 years.

About 18 months ago, I wrote a post "When is Drupal 7 End-of-Life?" Unfortunately, no-one knew the answer. The deeper I looked, the more messy and confusing Drupal's plans became. The release cycles for Drupal 7, 8 and 9 were all vague and undefined.

Now in 2018, we finally have clarity.

Back in April, Drupal got a real product roadmap for the first time. Not bad for an 18 year old project!

There's also a clear roadmap for future Drupal versions:

  • Drupal 7 will be end-of-life when Drupal 9 releases in 2020, but there will be commercial support options for at least another year.
  • Drupal 8 will be end-of-life by November 2021.
  • Drupal 9 will be released in 2020, and it will be an easy upgrade.

Dries has a post called "Drupal 7, 8 and 9" which explains these timelines in detail. He includes this image which sums up Drupal's plans:

drupal 7 will be supported until november 2021

I've been criticial of Drupal's previously haphazard project management, but they're doing a superb job in 2018. There are real roadmaps, clear plans, and logical explanations. Kudos to the Drupal team.


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.
Sep 06 2018
Sep 06

Every six months, Drupal releases a new version.

Drupal 8.6 is not ready yet and is scheduled for release on September 5.

However, we already know what features will be in the final version. A Release Candidate is now available and at this point, the core is frozen and no new features will be added. 

So, now is a great time to dive in and discover what new features we'll see. Some of these features are outstanding!

New Feature #1. Demo Data

For the very first time, you can install Drupal and get a whole demo site to explore. If you install Drupal using your browser, you'll see a new option: "Demo: Umami Food Magazine". 

choose umami in Drupal 8.6

After you complete your Drupal installation, your site will be populated with dummy content for a food magazine.

umami screenshot

There are about 20 sample content items in the Umami demo. Many of them are in a sample content type called "Recipe". It looks like the demo data was chosen to give a good overview of mutiple different field types.

umami content type in Drupal 8.6

There also a couple of landing pages, created with sample Views. All-in-all the demo data is short and sweet but it does look much better than a plain Drupal install.

umami recipes in Drupal 8.6

New Feature #2. Media Library

Finally we're getting somewhere with media in Drupal! For many years, Drupal has shipped with almost no media handling. This was the most commonly requested feature whenever we did Drupal training.

Since the release of Drupal 8.4 in late 2017, Drupal has had some new media handling features. But, they were still very limited. With Drupal 8.6, we take a big step forward. There is now a "Media Library" module in the core. It is in the "Experimental" stage, so you'll need to enable the module:

media library drupal

To use the new library, create a field using the "Media" type. It will show as an "Entity reference".

media reference field

When you go to create content using this field type, you can click "Browse media" or "Add media".

media library

You'll be able to search through all the images uploaded to your site and choose the file you need. This is a huge - and long overdue - step forward for Drupal. This Media library is created using Views, so you can customize this screen however you wish.

media library with images

New Feature #3: YouTube and Vimeo Embeds

In addition to the new media library, Drupal 8.6 also has improved support for remote embeds. 

  • Create a field using the "Media" type and select the "Remote video" option.

media youtube

  • Go to Content > Media > Add media.
  • Click "Remote video".
  • Enter a YouTube or Vimeo URL.
  • Cick "Save".

add remote video

  • Now when you go to create content with a video field, you can click "Browse media":

youtube embeds

  • You can choose the video that you added earlier:

choose media embed

The idea is that you save your content and see the URL automatically turned into a video on the front of your site. However, in my testing, I wasn't able to successfully select videos and click "Select media". Perhaps the bugs will be squeezed out before the final release.

However, in addition to the bugs, the workflow for this embedding is still clunky. You have to add the video before you create content which is a significant hurdle for content creators.

New Feature #4. Layouts

Drupal's layout builder features continue to get better, although the two key modules are still experimental: Field Layout and Layout Builder. Enable both of those modules if you want to test the layout options.

field layout

You can enable the layout features for each content type individually.

  • Go to Structure > Content types.
  • Edit a content type and click "Manage display".
  • Check "Use Layout Builder.
  • Check "Allow each content item to have its layout customized."
  • Click the "Manage layout" button.

drupal layout options in Drupal 8.6

You'll now be taken to the front of your site, where you control the layout for this content type.

  • Click "Add Section" and you'll be able to choose from "One column", "Two column" and other options.

choose a layout in Drupal 8.6

In this image below, I've chose a new "Two column" layout. Slightly confusingly, you will now see "Add Block" although you can actually add much more than just a block.

add sections in Drupal 8.6

When you click "Add Block" you'll be able to choose from almost all the data on your site. You can add fields, user data, forms, views and much, much more. Don't be confused by the term "Add block". This option allows you add almost any site feature to your new layout.

choose blocks in Drupal 8.6

One of the most interesting things about this layout option applies to much more than just content types. You can use these layouts for media, contact forms, taxonomy, users, and more. I'm in the camp that feels that WordPress' Gutenberg editor is half-baked and not that useful. In contrast, the Drupal team seem to done an outstanding job with this new layout builder.

New Feature #5. Workspaces

The Workspaces feature allows you to preview your entire page before publishing it. Workspaces is still in the experimental stage, so you will need to actively enable it.

Two things to note about this feature:

  1. It's not yet compatible with Drupal 8's content moderation features. You do need to remove some key moderation features before enabling Workspaces.
  2. Don't confuse "Workspaces" and "Workflows". Workflows is a different feature, related to content moderation.

Let's see how to use Workspaces.

  • After enabling Workspaces, go to a URL on the front of your site. You'll see a green "Live" button in the top-right corner.

workspaces in Drupal 8.6

  • Click the green "Live" link.
  • Click the "Stage" link on the left-side of the black banner.

stage button in Drupal 8.6 workspaces

  •  Now you can activate the "Stage" workspace. Be careful because the "Cancel" button is where you'd expect the "Confirm" button to be.

activate stage in Drupal 8.6

  • Make changes to your content on this page. Any changes will not be publicly visible, even if you save them.
  • Click the orange "Stage" button.
  • Click "Deploy content" button and you can make your changes live on your site.

deploy content in Drupal 8.6

I did find some bugs with this Workspaces feature, and the UI is a little clunky. You can see some mistakes in the image above. But overall, this is another excellent new feature in Drupal 8.

Bonus

Drupal 8's migration modules are now stable! It's way too late of course. Drupal 8 launched three years ago and only now do we have a stable migration. It seems fair to guess that this significantly slowed adoption of Drupal 8. The one exception is new "Migrate Drupal Multilingual" module which is still experimental.

migration

My Drupal 8.6 Summary

Gabor Hojtsy, who's heavily involved with Drupal development, called this the biggest update in Drupal 8's history. He's not wrong. If you want to see our recaps of previous releases, Drupal 8.1Drupal 8.2Drupal 8.3Drupal 8.4 and Drupal 8.5.

In contrast to earlier some releases, Drupal 8.6 really shows the potential of Drupal 8's release cycle. What features are you excited to use when 8.6 arrives next month?


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.
Aug 30 2018
Aug 30

One of our customers asked how to highlight an active menu item in Drupal and how to keep it highlighted once it has been clicked.

In this tutorial, you will learn how to achieve this goal using the "Menu Trial by Path" and "Pathauto" contrib modules.

In this example, we're going to use a site that has a main menu with different regions e.g. Alaska, California, Pacific. There is also a secondary menu, customized for each geographical regions. So we have the following URL structure:

  • example.com/regions/alaska (Main Navigation)
  • example.com/regions/alaska/al-link-1 (Secondary Navigation)

The customer wants the menu item in the main navigation to remain highlighted. To make this happen, the menu item must keep the "active" class, even if a secondary menu has been clicked. 

Highlighted menu item

Highlighted menu item

The Menu Trail by Path module will allow you to do just that. It sets the active-trail on menu items according to the current URL.

In this tutorial, you’re going to recreate this scenario with the help of the "Pathauto" module and after that, the "Menu Trail by Path" module will do the rest of the job.

Step #1. Create the Content Types

  • Click Structure > Content Types.
  • Click Add content type:

Click Add content type

  • Create a content type called Regions, this nodes will be accessible through the main navigation of the site.
  • Click Save and manage fields:

Click Save and manage fields

  • Repeat the process and create a content type called Alaska Region Content. These nodes will be accessible through the secondary menu available within “Alaska”:

These nodes will be accessible through the secondary menu available within Alaska

  • Click Content > Add content > Region.
  • Create three Region nodes e.g. Alaska, California, Pacific.
  • Click Content > Add Content > Alaska Region Content.
  • Create three Region Content nodes ie. AL Link 1, AL Link 2, AL Link 3:

Create three Region Content nodes ie. AL Link 1, AL Link 2, AL Link 3

Step #2. Configure the Menu Structure

  • Click Structure > Menus.
  • Edit the Main Navigation Menu:

Edit the Main Navigation Menu

  • Add links for each one of your recently created Region nodes.
  • Click Save and repeat the process so many times as needed:

Click Save and repeat the process so many times as needed

  • Edit the menu once again, rearrange the menu items and click Save:

Edit the menu once again, rearrange the menu items and click Save

  • Click Add menu, in order to create the secondary menu:

Click Add menu

  • Give your menu a proper name for each one of the available geographical regions.
  • Click Save:

Click Save

  • Repeat the process of adding links to this menu, just like you did with the main navigation menu. This time, you’ll link to the Alaska Region Content nodes:

This time, you’ll link to the Alaska Region Content nodes

Step #3. Configure the URLs

The best way to configure SEO friendly URLs with a predefined pattern is with the help of the Pathauto module. Use your preferred method for installing it. I’m using Composer:

composer require drupal/pathauto

I’m using Composer

  • Click Extend and search for the module in order to enable it:

Click Extend and search for the module in order to enable it

  • Click Configuration > URL aliases:

Click Configuration and then URL aliases

  • Select the Patterns tab.
  • Click Add Pathauto pattern:

Click Add Pathauto Pattern

  • Use the available tokens widget to configure the URL pattern for the Regions content type:

[node:content-type]/[node:title]

Use the available tokens widget

  • Repeat the process for the Alaska Region Content content type with this URL pattern:

regions/alaska/[node:title]

Repeat the process for the Alaska Region Content

  • Click the Bulk generate tab.
  • Select the Content checkbox.
  • Select Regenerate URL aliases for all paths, please remember that I’m using a sandbox installation for this example and all the content is new, don’t do this on a production server. Check instead the other available options.
  • Click Update:

Click Update

  • Refresh the cache of your browser in case you don’t see the regenerated URLs.

Step #4. Place the Secondary Menu Block

  • Click Structure > Block layout.
  • Scroll down to the Primary theme region.
  • Click Place block:

Click Place block

  • Look for your custom secondary menu.
  • Click Place block:

Click Place block

  • Uncheck Display title in the Block configuration modal.
  • Select the vertical tab Pages.
  • Add the following paths:
    • /regions/alaska
    • /regions/alaska/*
  • Click Save block:

Click Save block

If you navigate to yoursite/regions/alaska/al-link-1, you’ll be able to see the custom menu on the left sidebar (Primary), but the “higher-level” item on the main menu has lost the active state:

The higher-level item on the main menu has lost the active state

Step #5. Install the Menu Trail by Path module

  • Download and enable the module with your preferred method:

composer require drupal/menu_trail_by_path

composer command

  • Navigate to yoursite/regions/alaska/al-link-1 once again. The menu item Alaska has an active state now.

The menu item Alaska has an active state now

This way, you could “highlight” any menu item depending on the URL of the node you’re viewing, you could visually associate thousands of nodes to a menu item if you would have to.

That is the real flexibility provided by this module!

Step #6. CSS for the Secondary Menu

You can add styles to these items by using the .menu--your-own-menu class in the style.css file within your subtheme. For example:

/* Link styles for the secondary menu of Region "Alaska" */
.menu--secondary-menu-alaska a {
width: 70%;
margin: auto;
text-align: center;
color: #333;
font-weight: 900;
border-radius: 3px;
}

.menu--secondary-menu-alaska a:hover { color: #333; }

.menu--secondary-menu-alaska a.is-active { background-color: darkorange; color: #50457b; }

Add styles

Add styles


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
Aug 22 2018
Aug 22

Apache Solr is a very popular open source search platform, based on the Java Lucene Library. Solr is very stable, scalable and reliable and provides a wide set of core search functions. Solr creates an index of the available documents and then you can query Solr to return the most relevant ones for your search.

For Drupal users, it is possible to integrate your site with Solr. The Search API Solr Search module (yes, that name is a mouthful!) provides a Solr backend for the Drupal Search API module.

This tutorial will deal with the integration between Drupal and the Solr platform. Before you begin, you will need to have installed Apache Solr on your server. 

Step #1. Checking the Status of the Solr Server

  • Open the Terminal application in your system and type:
service solr status

Check your Apache Solr status

You’ll see an output with the label Active: active (exited). That means Solr is working properly. By default, Solr works on port 8983. This way, you can take a look at Solr’s user interface by typing localhost:8983 (or whatever your host is called).

Apache Solr configuration

Step #2. Installing the Drupal Module

To install this module, you have to use Composer, otherwise there will be unresolved dependencies and it won’t work.

  • Open your Terminal application and type:
composer require drupal/search_api_solr

Installing Drupal Apache Solr module

Step #3. Configuring Solr

In order to work with the Solr platform, you have to create a collection. A collection is basically a logical index that’s associated with a config set.

  • Open your Terminal window and type:
sudo su - solr -c "/opt/solr/bin/solr create -c firstcollection -n data_driven_schema_configs"

Configuring Drupal Apache Solr

This command will vary, depending on where Solr is installed. In my case it’s in the /opt folder of my Ubuntu system. However, the collection will be created in another directory.

  • Take a look at Solr’s dashboard and select "Core Admin".
  • Check that the collection has been created and its location.

Create a collection for Drupal Apache Solr

  • Become the root user.
sudo su
  • Locate yourself in the collections folder of Solr, which is located at the /var directory in an Ubuntu based system.
cd /var/solr/data/firstcollection
  • Rename the default conf file.
  • Copy the configuration file called 7.x inside the installed Solr Search API module and rename it to conf.
cp -R /var/www/your_site/docroot/modules/contrib/search_api_solr/solr-conf/7.x conf

Integrating Drupal Apache Solr

  • Change owner, group and permissions for this new folder.
  • Restart Solr.
  • Exit session as root.

How to use Search API Solr Search in Drupal 8

Step #4. Enabling the Search API Solr Module

  • Click Extend > Uninstall and look for the Drupal default Search module. This module has to be uninstalled to avoid performance issues. Select the module and click "Uninstall".
  • Confirm the Uninstall process by clicking the blue "Uninstall" button once again.

Enabling Drupal Apache Solr module

  • Click the List tab and enable the "Solr Search Defaults" module, this module provides the initial default configuration.
  • Click "Install". The Solr Search module will be enabled automatically.

Enabling Drupal Apache Solr Defaults module

Step #5. Configuring the Search API

  • Go to Configuration > Search API.
  • The Server and Index configurations were provided by the Solr Search Defaults module.
  • Click the "Edit" button to configure the Server.

Configuring Drupal Apache Solr module

The only thing you have to do is to change the name of the Solr core to the name of the core you created previously.

  • Scroll down and find the Solr core label.
  • Change the name of the core to firstcollection.
  • Click "Save".

Drupal Apache Solr configuration

Server and index are ready to use.

  • Go to Extend > Uninstall.
  • Look for the Solr Search Defaults module, and uninstall it. For performance reasons, the provided configuration is already stored.

Drupal Apache Solr uninstall

Step #6. Testing the Search API Solr Module

By default, the Search API Solr module provides a view with a search box where you can type the text you’re looking for. The search page is located at:

yoursite/solr-search/content
  • Type in a keyword and hit the "Search" button.
  • If you see a list of results (the word has to be in the content of course) you’ve successfully configured Search API Solr. Congratulations!

Testing the Drupal Apache Solr module

This tutorial showed the basic configuration of the Search API Solr module to integrate Drupal 8 with Apache Solr.

I recommend exploring the available configurations and reading Solr’s documentationn. This will give you a better idea of all options available when configuring the search functionality of your sites.

Thanks for reading, please leave your comments below.


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
Aug 06 2018
Aug 06
The Drupal Paragraphs Module

Over the last few months we've worked with more and more Drupal 8 sites. Those projects all had one thing in common ... they used the Paragraphs module.

Paragraphs is a very popular module for handling content in Drupal 8. Paragraphs works in a similar way to content fields, but also provides a wide range of options for the design, layout and grouping of your content. 

Instead of putting all their content in one WYSIWYG body field, end-users can choose on-the-fly between pre-defined Paragraph Types independent from one another. Paragraph Types can be anything from a simple text block or image to a complex and configurable slideshow.

Often as web developers, we create sites that are meant to be used day-to-day by mostly non-technical users.

One pain point of this for many people—developers and clients alike—is the process of trying to implement a method of content creation that non-technical users can easily understand but that also provides all the options they need to create content in the ways that they want. For example, clients might understand how to add a pull quote into a content body, but it might not end up centered or formatted quite correctly. They may also want to do something more complex such as include an ancillary box of information inside an article, in which case they might not even know where to begin.

The Paragraphs module can make processes like these much more manageable for non-technical users while also giving developers the ability to control the formatting and appearance of such specially formatted elements at the theme level.

In practice, Paragraphs allows us to insert elements much like content fields, but instead of adding these around the body of any given piece of content, they are effectually inserted throughout the body.

For this demonstration, we’ll imagine we are creating a website called “Life Advice for Free,” which offers informational content in the form of articles. You can follow along on any other development website if you wish, making minor adjustments as necessary.

Installing the Drupal Paragraphs Module

We we recommend using a blank Drupal 8 test site for this project.

Click here to download the Paragaphs module. Additionally, Paragraphs requires the Entity Reference Revisions module.

Once you have downloaded these two modules and placed them in your /modules directory, install them for your site.

paragraphs module install

Basic Configuration of the Paragraphs Module

Paragraphs works by allowing us to create what are called “Paragraphs types” that in our case will collectively replace the Body field of any given content type with which we want to use these Paragraphs types.

In order to begin taking advantage of Paragraphs, you must first create at least one Paragraphs type, and then you have to add that Paragraphs type to a content type. This process can seem confusing at first, but it is easy to become familiar with once you set up one or two Paragraphs types.

In our demonstration, we’ll replace the Body field of the default Article content type with a handful of Paragraphs types.

Important: If you are testing this on a site that already has content of type Article, do not delete the Article content type’s Body field as we are about to do in this demonstration. If you do, you will lose the body of all Articles on your website. If you are working on a site in which the Article content type has already been used, you should create a new content type on which to test out the Paragraphs module.

On our "Life Advice for Free" site, we will begin configuring Paragraphs by editing the Article content type. 

  • Go to Structure > Content types.
  • Click the “Manage fields” button in the Article row.
  • You will now be on the “Manage fields” page for the Article content type. On this page, click the dropdown arrow next to the “Edit” button on the Body row, and click Delete.
  • Confirm deletion on the next page.

delete row for use with the Paragaphs module

Now we will create our first Paragraphs type.

  • Navigate to Structure > Paragraphs types.
  • Click “Add paragraphs type.”
  • On the next page, we need to provide a label for this paragraphs type. For our demonstration, we’ll call this one “Body text,” since we are going to use it as the body of our content.
  • Click “Save and manage fields.”
  • On this “Manage fields” page, click “Add field.”
  • In the following “Add a new field” dropdown list, scroll down, and under “Text,” select “Text (formatted, long, with summary)”. This is similar to the default Body field that the Article content type often uses—a long-form text area with a WYSIWYG editor.
  • On the following “Add field” page, we’ll label this particular field “Body text” as well.
  • Click “Save and continue.”

Next we are taken to this field’s “Field settings” tab. For any of these fields, we may specify an allowed number of values. It can be useful to allow more than 1 value for some fields—particularly those that accept individual discreet pieces of information, such as dates, image files, or short-form text fields for information such as names—but for long-form text areas, it is often unnecessary to provide additional values since paragraphs can simply be placed one after the other in a single text area.

  • Leave the default settings at “Limited” and 1.
  • Click “Save field settings.”

On the following “Body text settings for Body text” page, we can keep all of the defaults. Notice that users will still have all of the formatting options that they normally would with the text area’s WYSIWYG editor. We are not taking anything away from them. What we’ll be doing instead is giving them an additional, improved method of adding certain types of elements to their content. Click “Save settings.”

On the next page, click the “Manage display” tab. Currently this Paragraphs type has only one field—the Body text field. We don’t want a label to appear along with the text from this field, so select “Hidden” under the Label column for this field. Format should stay as Default. Click “Save.”

Once you’ve completed this configuration, look at your breadcrumbs and click “Paragraphs types.” You’ll see that now we have a Paragraphs type called “Body text,” with one single field: a long text field also called “Body text.” Now we need to add this Paragraphs type to the Article content type in order for that content type to be able to use it.

To make this Paragraphs type available to the Article content type, navigate to Structure > Content types. Click “Manage fields” for the Article content type. Then click “Add field.” To use our new Paragraphs type with this field, open the “Select a field type” dropdown list and select “Paragraph” under “Reference revisions.” After selecting “Paragraph,” provide the label “Body” because this is what we are using as the body of our content. Click “Save and continue.” On the next page, “Type of item to reference” should be set to “Paragraph,” and “Allowed number of values should be “Unlimited.” By selecting “Unlimited,” we can insert this special field provided by our configured Paragraphs types as many times as we want. This will become helpful when we begin inserting other things besides text into the body of the content. Click “Save field settings.”

On the following “Body text settings for Article” page, we need to make our previously created Paragraphs type available to this field. To do this, check the box next to “Body text” under “Type,” near the bottom of the page. This is how we make that particular Paragraphs type available in this field. As we add more Paragraphs types to our site, we can come back and make those available to this field as well.

  • Click “Save settings,” and the site should take you back to the “Manage fields” page for the content type.

Now we’ve finished replacing the previous (default) Body field with our new Body field, which utilizes Paragraphs, and specifically the “Body text” Paragraphs type that we created. Now we’ll configure a few more settings so that it appears the way we want.

  • To start, we’ll click the “Manage form display” tab so that we can place the new Body field in a prominent location on the content creation page for Articles.
  • On this page, scroll down to find our new Body field, and drag it near the top of the list, just below Title.
  • Click “Save.”

Now click the “Manage display” tab so we can make sure the field shows up in the proper place for site visitors. Again you’ll find Body at the bottom. Drag this near the top, just below Image. We’ll treat that image field as a large sort of introductory or lead-in image for our Articles and not part of the content itself. Click “Save.”

At this point, we have completed the setup for our Article content type using this new Paragraphs field. Now it’s time to create some content to test it out.

  • Go to your site’s Content page, and click “Add content.
  • Click "Article".
  • You can enter any title for your article. For this example, let’s call our article “How to Make 100 Friends.”
  • Now, down to the Body field, you may have noticed that it looks slightly different, though it still uses the same long-form field with a WYSIWYG editor just like before. The difference now is that we have an encompassing Body field that currently contains one Body text field. Just below the Body text field, you should see an “Add Body text” button, which allows us to add multiple fields. At this point, that would be unnecessary because the long text field currently in use is perfectly suited for inputting long, multi-paragraph text, so we wouldn’t need to add an additional field when we could just add more text in the same field. Later, though, we’ll see that it becomes very useful to be able to add additional Paragraphs fields when you have implemented multiple Paragraphs types on your site. For now, just enter a paragraph or two of text into your Body text field.
  • Save your article and view the page as any visitor would see it. 

At this point, the new Body using Paragraphs looks no different from an article using the default Body field. With Paragraphs in place, though, we will soon be able to allow our content creators to add additional elements to the content without having to know how to style it properly.

CSS for the Paragraphs Module

A big part of what makes Paragraphs so useful is that we can write CSS for specific in-content elements so that content creators don’t have to try manually styling as many of these elements themselves using the WYSIWYG editor or inline CSS. This means we’ll be customizing our site’s theme to make these elements appear exactly as we want.

In many real-world cases, you’ll likely be working with a custom theme or subtheme of your own, in which case you may edit it freely. For this tutorial, we are going to create a quick and easy subtheme of the default Bartik theme so that we can follow best practices and add our own CSS without editing the Bartik them itself. (We avoid editing Bartik—or any other core or contributed theme—directly because if we do so and then later apply a released update to that theme, our own modifications will be lost.) If you are unfamiliar with creating subthemes, that’s ok. We are not digging into the process extensively but instead are creating a direct copy of the theme, to which we will then apply some slight alterations. This is an easy process.

To create a subtheme, you first need to access the server on which your site is hosted, and navigate to your site’s root directory. Once there, open the “themes” directory. This is where all custom and contributed themes and subthemes are placed. In this “themes” directory, create a new folder called “custombartik,” and navigate into this new directory.

Now we need to add a couple files to this new directory. The first will be the theme’s info file. Open up whatever code editing software you use for web development. These info files require several pieces of information: the name of the project (the name of our theme), the type of project (“theme” in this case), the machine name of the base theme if this is a subtheme (as ours is), a short description, and the major version of Drupal (7.x, 8.x, etc.) for which the theme is built. We will enter this information in the following form (type everything exactly as you see it):

name: Custom Bartik 
type: theme 
base theme: bartik 
description: A custom theme based on the core Bartik theme 
core: 8.x

Make sure the base theme name “bartik” remains un-capitalized—it is the case-sensitive machine-readable name that we need. With this information entered, save the file as “custombartik.info.yml”. It is important that you save it with exactly the same name as the folder you created followed by “.info.yml”.

Now we need to create our theme’s libraries file, where we will tell Drupal where to find the theme’s CSS and what version of the theme this is (more information can be provided, but this is all we need for our purposes). Open a new file. In this file, pay close attention to the indentations here. Each indentation should be a two-space tab. Enter the following information exactly as it appears:

global-css: 
  version: 0.1 
  css: 
    theme: 
      css/style.css: {} 

Save this file as “custombartik.libraries.yml”. This file essentially tells the website that this is version 0.1 of the theme (we could have given this any version number) and that there will be a stylesheet located inside our theme directory (“custombartik”) at css/style.css.

Now we need to go back to our info file to tell Drupal to use the information under the “global-css” container to find our stylesheet. Open your custombartik.info.yml file, add a blank line under your “core: 8.x” line, and then add the following line of information, again keeping the indentation exactly as it appears below:

libraries:
   - custombartik/global-css

The whole file should now look like this:

name: Custom Bartik
type: theme
base theme: bartik
description: A custom theme based on the core Bartik theme.
core: 8.x
libraries:
  - custombartik/global-css

At this point, we are ready to add these two files to our theme. Upload or copy your custombartik.info.yml and custombartik.libraries.yml files into your custombartik folder.

Now add a folder called “css” inside your custombartik folder. Go ahead and create a blank file called “style.css” and upload it to this directory. This will be our stylesheet.

Before we create our stylesheet, however, navigate to your website’s “Appearance” page. Scroll to the bottom of the page, and under the “Uninstalled theme” section, you should see your Custom Bartik theme. If you do not see it, make sure that your custombartik folder and all of its files are present in the themes folder of your site’s file system.

Click “Install and set as default” under your custom theme so that your site will begin using your theme. Once this is done, navigate to your homepage, and it should look almost exactly like Drupal’s default Bartik theme, with the exception that you will probably see a broken image icon in place of the Drupal logo. The theme looks just like Bartik because what we have created is a subtheme of Bartik with no customization yet in place. If your site does not look like Bartik, and especially if it looks like plain HTML with no CSS styling, go back to your two .yml files and make sure they look exactly as printed above.

Finally, to fix the broken logo image, we’ll copy the logo straight from Bartik into our subtheme. This is ok because we aren’t actually changing anything in Bartik. Navigate to your site’s root directory, and go to core/themes/bartik. In here, you’ll see a file called “logo.svg”. Copy this file into your subtheme (the “custombartik” directory). On your website, navigate to Configuration > Performance, and click “Clear all caches.” Now the logo should appear on your site.

Multiple Paragaphs Fields

Now that we have a subtheme that we can safely edit, we can begin setting styling rules for the elements of our content controlled by Paragraphs. Before we do so, we should create a new Paragraphs type that requires special styling rules. We’ll follow our example of having a field that inserts a centered image in the midst of an article.

Navigate to Structure > Paragraphs types, and click “Add paragraphs type.” We’ll set the label for this one as “Centered image.” Click “Save and manage fields.” On the next page, click “Add field,” and select “Image” under “Add a new field.” We’ll label this field “Centered image” as well. Click “Save and continue.” On the next page, we can retain all default values, so click “Save field settings.” Then, on the “Centered image settings for Centered image” page, we’ll add a few simple restrictions. Set the Maximum image resolution to 650x450 and the minimum resolution to 50x50. Set the maximum upload size to 1 MB, and click “Save settings.” (These specific settings are not necessary for the Paragraphs type to work properly; we are including them simply to mimic a real-world scenario.)

Now click on the “Manage display” tab, set the Centered image label as “Hidden,” and click “Save.”

At this point, we need to add this Paragraphs type to the Paragraphs field we have in our Article content type. Go to Structure > Content types, and click “Manage fields” next to “Article.” You may be tempted to click “Add field” here for our new “Centered image” Paragraphs type, but remember, this is going to be intermingled with our custom Body field. So, instead, we will add Centered image to the Body field we created. Click “Edit” next to “Body,” and scroll to the bottom of the page. Here you’ll see “Centered image” available beneath our “Body text” Paragraphs type. Check the box next to “Centered image” to make it available to this field, and save your settings.

Now we’ll add an image using this field. Navigate to your Content page, and edit your “How to Make 100 Friends” article. Let’s imagine we want to add a centered image somewhere in the middle of our article. Beneath the Body text field, you’ll again see the “Add Body text” button to add another Body text field within this Body field. However, if you click the dropdown arrow next to this button, you’ll see that “Centered image” is now also available. Click this button, and choose some image file to upload here. Then provide some alternative text, since that is required.

Now we’ve added the image to our content, but currently it is placed below all of the text. This is where we will make use of an additional Body text field. Click “Add Body text.” Now we have, top to bottom, a field of body text, a centered image, and another field of Body text. Note that, though you shouldn’t need to do so at this point, you can freely move these around via the drag-and-drop arrows on the top left of the individual Paragraphs fields. To have the centered image appear sandwiched between article text, simply go to the first Body text field, select whatever text you would like to appear after the image, and cut that text from the field. Then scroll down and paste that cut text into the second Body text field (after your image). Now click “Save.”

When you view your article now, it will still not look quite correct. Since we have not yet added any styling rules to our theme, the image is likely to be floated left (as it is by default), rather than centered. However, it should appear after the text of the first Body text field and before the text of the second Body text field. Now we have an article on which we can test some custom styling rules.

Controlling Paragraphs Types with CSS

We’ll go to our custom subtheme now to begin styling the output of the Paragraphs fields we’ve created. For now, we’ll target the “Centered image” field specifically, rather than the encompassing Paragraphs field from the content type. We’re doing this because we will want this field to be centered anytime, regardless of where it is. Thus, by setting rules directly for “Centered image,” we avoid setting unnecessary multiple rules for multiple contexts.

We do need to target the “node” class, however, because there will be, by default, some styling for this field targeted under the “node” class. Thus, we have to override those rules.

Open your “custombartik” subtheme’s stylesheet at custombartik/css/style.css. The file should still be empty, but now we will begin adding rules to it. We’ll keep things simple for now. Add the following lines of code to your stylesheet:

.node .field--name-field-centered-image { 
  float: none; 
  text-align: center; 
} 
.node .field--name-field-centered-image img { 
  max-width: 100%; 
  max-height: 450px; 
}

With the first set of rules, we are simply centering the image horizontally within its field class and making sure no text or anything else floats next to it. The second set of rules is not strictly necessary, but is some common code to make sure images don’t end up larger than they should be in relation to the content area.

Once you’ve added this to your style.css file, save your changes (from here forward, any reference to saving changes in your subtheme also assumes uploading or otherwise copying the files to your server if you are not editing directly on the server on which your test site is located). Then on your site, navigate to Configuration > Performance, and click “Clear all caches” to load the theme changes on your site. Navigate back to the article on which you added the image to be centered (or refresh the page if you already have it open). The image placed through the “Centered image” Paragraphs type should now be centered with no text floated to either side of it. There may be further styling we’d like to add, but for the purpose of this tutorial, we’ve done what we want to do at this time—make sure that the output of this field is strictly controlled by CSS so that users adding content do not have to style anything themselves using the WYSIWYG editor or other inline styling methods.

Multi-field Paragraphs Types

We can also create Paragraphs types that themselves consist of multiple fields. For example, instead of a “Centered image” type, we can create a “Centered image with caption” type, which would consist of an image upload field and an accompanying text field for any single element of that type. This, too, helps us remove the burden of layout from those adding content to the site so that we can control content display at the theme level.

Let’s create this “Centered image with caption” type to practice the process of creating a multi-field Paragraphs type.

As you might expect, this process is going to be similar to that of creating a single-field type. To create this new Paragraphs type, navigate to Structure > Paragraphs types, and click “Add paragraphs type.” Label this type “Centered image with caption,” and click “Save and manage fields.” Then click “Add field.”

Since our previously created “Centered image” field is exactly what we want for the image portion of our new Paragraphs type, instead of creating a new field, we can reuse the previous one. So, do not select anything under “Add a new field” on the “Add field” page. Instead, under “Re-use an existing field,” select “Image: field_centered_image” (or “Image:” followed by whatever machine name your centered image field was given). Keep the “Centered image” label, and click “Save and continue.” We do need to once again configure out settings for the image’s size bounds on the next page. Let’s once again enter a maximum image resolution of 650x450 pixels, and a minimum of 50x50 pixels. Set the maximum upload size to 1 MB. Click “Save settings.”

Now we’ll add another field. Keep in mind we are still inside the settings for our new Paragraphs type, so once we add this second field, “Centered image with caption” will be one type with two fields. Click “Add field,” and add a new field of type “Text (plain)”. Label this field “Caption,” and click “Save and continue.” Some longer captions might need to exceed the default 255-character limit, so change the maximum length for this field to 500. Keep the allowed number of values at “Limited” and 1, and save the settings. The following caption settings defaults are all fine, so save the settings on that page as well.

Now our new Paragraphs type has all of the fields it needs, so click the “Manage display” tab so that we can remove the field labels, which are unnecessary in this case. Select “Hidden” under the “Label” column for both fields, and click “Save.” If the two fields were out of order, we would rearrange them so that the caption field comes after the image field, but since we added the caption field last, it should already be positioned after the image field, just as we want it to be.

Now we’ll add the new type to our Article content type. Navigate to Structure > Content types, and click “Manage fields” for Article. As was the case when we added our first “Centered image” Paragraphs type to the content type, we will add this new Paragraphs type within our custom Body field rather than adding a new field altogether.

So, on the “Manage fields” page for Article, click “Edit” for Body. Scroll to the bottom of the page, and check the box next to “Centered image with caption” to make that type available within this Body field. Click “Save settings.” Now this new Paragraphs type will be available for those who are adding Articles to the site.

Let’s go ahead and create a new article using this field, and then we’ll add our styling to control its display. Navigate to the Content page, click “Add content,” and click “Article.” Let’s call this article “Learning to Play an Instrument May Improve Your Life.” Click “Add Body text” to begin adding some text to the article. Enter a paragraph or two of text into this field. Then, below the Body text field, click the dropdown arrow next to “Add Body text,” and select the newly available “Add Centered image with caption” option. Notice that we are now presented with two fields for data input, as we should expect—the “Centered image” and “Caption” fields that belong to this Paragraphs type. Upload any image into the image field and provide some alternative text. Then type, “The Les Paul is one of the most legendary guitars in rock and roll.”

Now we’ll add some of the rest of the article’s text after the image and caption. Beneath the image and caption Paragraphs type, click “Add Body text” once again. Add another paragraph or two of text. Finally, click “Save and publish.”

Currently, the display of our “Centered image and caption” should be half correct. Since we reused the previous “Centered image” field, the image itself should already be centered just as it was for the previous field that consisted solely of an image to be centered. The caption text, of course, does not have any CSS rules yet, so it will appear left-aligned and look just liken the text of the rest of the article. So, we need to add some rules to our theme to style this caption text.

This time, when writing our CSS, we will target the entire “Centered image with caption” Paragraphs type and then drill down to the caption field within that class, rather than targeting the caption text independent of its container, as we previously did with the centered image. We’ll take this approach because we might want to reuse this caption text field elsewhere, and it is likely that in some cases we will want it styled differently (such as being aligned left or right rather than centered) from how it is in this particular Paragraphs type.

We’ll center our caption text because its corresponding image is centered, and to provide a visual differentiation between this text and the text of the article, we’ll make it bold (italics would also provide that effect). Add the following lines of code to your stylesheet, and save your changes:

{codecitation}.paragraph--type--centered-image-with-caption .field--name-field-caption {   font-weight: bold;   text-align: center; }{codecitation}

Then, to see our changes on the site, navigate to Configuration > Performance, and clear all caches. Go back and refresh the recently created article, and you should see the new styling rules in effect. The caption text should now be bold and centered below the image.

We can of course apply some styling to this Paragraphs type as a whole. One reason to do this would be to separate the image/caption element from the surrounding text and to make it visually clear that it should be viewed as a single unit. Add the following code to your stylesheet, and save your changes:

{codecitation}.paragraph--type--centered-image-with-caption {   border: 2px gray solid;   margin: 4px 0;   padding: 4px; }

Now clear your site’s cache once again, and refresh the article page. The image and caption should look mostly the same; however, now the entire image/caption unit is surrounded by a gray border and has small margins around the top and bottom. We could do more to improve the aesthetics here (and the border is likely not necessary), but this demonstrates our ability to provide styling for individual components of Paragraphs types as well as Paragraphs types as a whole.

Now if a non-technical user is adding content to the site and wants to include a large, centered image with a caption, all they have to do is select this Paragraphs field while editing the article, upload an image, and enter the text into the caption field. The formatting will be automatically applied.

Using Entire Nodes in the Paragraphs Module

At this point, we’ve seen some examples of the basic uses of Paragraphs. Now we’ll tackle a slightly more advanced example: using Paragraphs to place an entire node inside the body of a piece of content. One use case for this would be to place a related but standalone piece of supplementary information inside one of your articles (similar to something like a “Did You Know?” section that you might see accompanying a magazine article).

For our example, we’ll imagine we want to have the option to add what we’ll call “Info boxes” to our articles, and we’ll do so by placing a short piece of content entitled “A Short History of the Harp” within our previously created article about learning to play an instrument.

First, we need to create a content type for these “info boxes.” Navigate to Structure > Content types, and click “Add content type.” We’ll give this content type the name “Info box.” For the description, write “Short pieces of information used to supplement articles.” Click the “Display settings” tab, and uncheck “Display author and date information” because we don’t want author and date information showing up within our Info box content. All of the rest of the default settings on this page should be fine. Click “Save and manage fields.”

On the “Manage fields” page, we already have a basic long-form “Body” field, and this is all we want for this content type, since all pieces of content of this type should be short and simple. No changes are therefore necessary here. Click “Add field.”

Now that our content type has been created, we need to create the Paragraphs type that will reference it. Navigate to Structure > Paragraphs types, and click “Add paragraphs type.” Give this type the label “Info box.” On the “Manage fields” page, click “Add field,” and beneath “Add a new field,” select “Content,” found under the “Reference” header. For the label, write “Info box,” and save. All defaults are fine on the next page, so click “Save field settings” there.

On the next settings page, scroll down until you see the “Reference type” settings. Since we want to use this Paragraphs type to reference and display Info box nodes, check the box next to “Info box” beneath the “Content types” header. You can leave “Sort by” set to “None” because the field will autofill based on what we type and is not a list of all content of this type. Click “Save settings.”

Back on the “Manage fields” page, click the “Manage display” tab. As we’ve been doing so far, we’ll remove the label, so select “Hidden” under the label column for the Info box field. Then, because we want to display the entire Info box node whenever we choose to include an Info box in one of our articles, we need to select “Rendered entity” in the column labeled “Format.” Click “Save.”

It’s time to make this Paragraphs type available to our Article content type. Navigate to Structure > Content types, and click the “Manage fields” button for the Article content type. As we’ve been doing, click “Edit” for the Body field. Scroll down and check the box next to “Info box” under the “Paragraph types” header.  Save your settings.

With the structure side of this implementation complete, we’ll now create some content to test it out. We’ll start by adding our site’s first “Info box.” Navigate to the “Content” page, and click “Add content.” Choose Info box. For the title, enter “A Short History of the Harp.” Enter two or three paragraphs of text into the Body field, and click “Save and publish.”

At this point we will divert briefly from Paragraphs. Currently the home page of our site lists all of our articles and info boxes, but we don’t want the latter to appear on the homepage; we want them only placed within other articles. So, let’s quickly edit the view for our homepage to exclude these pieces of content. You can either click the “Edit view” icon (which is displayed as a pencil icon) on the top right corner of the view area of the homepage, or navigate to Structure > Views, and edit the “Frontpage” view.

On the view’s settings page, next to the “Filter criteria” header, click “Add.” Select “Content type,” and then click “Apply (all displays).” For the filter criterion, select “Is not one of” under “Operator,” and under “Content types,” check “Info box.” Then click “Apply (all displays).” This, as you probably know, will exclude all content of type “Info box” from the Frontpage view. Back at the view’s settings page, click “Save.” Now when you view the homepage of your site, you will no longer see the “A Short History of the Harp” info box.

Now we’ll add our Info box to the “Learning to Play an Instrument” article. Scroll down to the bottom of the Body Paragraphs field (the larger field encompassing all individual Paragraphs fields), click the dropdown arrow next to “Add Body text,” and select “Add Info box.” You can type in any piece of the title of your “A Short History of the Harp” Info box node into the autofill field, and that Info box should then be displayed as an option. Select it to include that Info box in the body of this article.

With the Info box now included in our Body, we need to place it where we want it. Drag and place it after the first Body text field and before the Centered image field. With this new organization, we should probably have some text between the Info box and the Centered image. To simulate doing this in a real-world scenario, we’ll cut some of our current text and paste it into a new Body text field, as opposed to arbitrarily adding text to the article.

So that we have a field to paste our new text in, go ahead and click the “Add Body text” button beneath all of the Paragraphs fields. Then scroll to the first Body text field and select and cut one or two paragraphs of text from the field (making sure to leave at least some text in the field), and paste the cut text into the newly created (currently empty) Body text field. Once this is done, drag the new Body text field, and place it after the Info box field and before the Centered image field.

Click “Save and keep published,” and upon viewing the article, you’ll see that the referenced Info box node is displayed in its entirety within the larger article. (If all you see is the title of the Info box node, that means you forgot to select “Rendered entity” in the Format column Paragraph type’s “Manage Display” page.) As it currently is, the lack of styling on the referenced Info box is likely to be confusing to most viewers. We won’t go through the task of applying additional CSS to these Info box references because we already now how to do that, but it is important to note that, in practice, these references should be styled to appear significantly different from the containing article. It should be made extremely clear—through the use of some combination of background color, borders, text size, and font family—that the information contained in the Info box is not part of containing article and is simply supplementary information.

Using Field Layout with Paragraphs Types

Just as the Field Layout module can be used to control the layout of nodes, it can also be used to control the layout of individual Paragraphs types. In some cases, this can be a viable alternative to controlling the layout via CSS, depending on the situation and on the developer’s (your) preference.

Important: As of this writing, Field Layout is an experimental module. As such, any implementation of Field Layout should be considered a risk. If you do decide to use the module during its experimental phase, it should be tested extremely thoroughly on a development site before being used on a production site. Otherwise, play it safe by considering this information useful for future situations after the module has graduated into non-experimental core.

Because Field Layout is a core module, it does not need to be downloaded. So, begin by navigating to your site’s Extend page, selecting the Field Layout and Layout Discovery (a dependency) modules, and clicking “Install.” Then, if prompted, click “Continue.”

Let’s use Field Layout to control the layout of a new Paragraphs type in which we create a two-column unit of “Pros and cons” information. Navigate to Structure > Paragraphs types, and add a new Paragraphs type. Give it the label “Pros and cons,” and add a field. For this field, select “Text (formatted, long),” and give this first field the label “Pros”. Save and continue, and keep all of the default settings through the next two pages until you are back at the “Manage fields” page. Add another field with a Text (formatted, long) input type, and label this one “Cons”. Save, and continue through the subsequent settings pages, once again keeping all default settings.

Once you’re back at the “Manage fields” page, click the “Manage display” tab. This time we will keep the label (positioned above, as is default) for each field so that when visitors are reading them, they know that we are listing pros and cons accordingly. If we look below the listed fields, we will see a new group of settings called “Layout settings.” This is made available by the Field Layout module. Click to expand these settings.

We have a handful of options here, and for our Pros and cons lists, we’ll select “Two column.” Then click “Save,” and you’ll be taken back to the “Manage display” page. Now we have additional layout areas to place our fields in for this Paragraphs type. In total, we have “Top” for the area spanning the width of the content space above our columns, “First” for the left column, “Second” for the right column, “Bottom” for the area spanning the width of our content space below the columns, and “Disabled” for fields we do not want to display. Drag and drop your Pros and Cons fields so that Pros is in the “First” column and Cons is in the “Second” column, and save.

Now, as usual, we need to add the new Paragraphs type to our Article content type. Navigate to Structure > Content types, and click “Manage fields” for Article. Edit the Body field, scroll to the bottom of that field’s settings, and check the box next to “Pros and cons” to add that Paragraphs type to this custom Body field. Then save.

Now we’re ready to begin using this “Pros and cons” Paragraphs type. Let’s use it in a new article. Create a new article called “Swimming Is a Great Way to Stay in Shape.” Add two or so paragraphs of Body text to this article. Then click the dropdown arrow next to the “Add Body text” button, and select “Add Pros and cons.” Notice that this Paragraphs type has two long-form text areas to fill in, one labeled “Pros” and the other labeled “Cons.” Enter text for five or so pros, each separated by a simple line break (in other words, separated by pressing the Enter key). If you’d like, you can alternatively make these 5 bullet points. Do the same in the Cons field.

If you’d like to fill out this article a bit more, you can then add another field of Body text below the Pros and cons field.

Click “Save and publish.”

Viewing the article, you’ll see your comparison of pros and cons listed, with the pros listed in a left-hand column and the cons listed next to them in a right-hand column. You should also see your “Pros” and “Cons” labels above each list.

In most cases you would likely want to apply some CSS to these elements via your stylesheet. Again, we won’t take the time do so here because you have seen how that works. Some styling suggestions might be to add a vertical border between the lists of pros and cons (and potentially borders surrounding the entire Paragraphs type) and to make the “Pros” and “Cons” labels more prominent. Additionally, you may consider going back and editing the Pros and cons Paragraphs type to add a title field which can be displayed in the “Top” area above both columns. In this case, such a field might read, “Some Pros and Cons of Swimming for Exercise.”

Permissions for the Paragraphs Module

At this point, we’ve set up all of our Paragraphs types and integrated them the way we want, aside from some styling we would need to apply to the Info box and Pros and cons types. However, we have not yet configured any permissions pertaining to Paragraphs. This is an important step. Currently, if an anonymous visitor were to view our site, they would not be able to see any of the content entered via Paragraphs types (which is all of the content we have entered in this tutorial) because by default, only administrators have permission to view such content. You can see this for yourself by logging out of the site in its current state and trying to view the content. You will see the titles of articles but none of the body content.

Additionally, we want to have a “Content creator” (or similar) role on the site so that not everyone adding content has full access to all administrative configuration on the site. These users need permission not only to view Paragraphs content but to create, edit, and delete it.

We’ll start by giving everyone permission to view Paragraphs content. Navigate to your site’s People page, and click on the “Permissions” tab. Scroll down until you see the “Paragraphs Type Permissions” section. Beneath this header, find “Body text: View content,” and check the boxes for Anonymous User and Authenticated User. Do the same for the “View content” permission of all the rest of the Paragraphs types we created: Centered image, Centered image with caption, Info box, and Pros and cons. Then click “Save permissions.” At this point, all users can view all Paragraphs content. Feel free to log out and view the site as an anonymous visitor to confirm.

Now to create a new role for those who will be adding and editing content on our site. Navigate to People, click the “Roles” tab, and click “Add role.” Call this role “Content creator.” Back on the Roles page, click the dropdown arrow next to the Content creator role, and select “Edit permissions.” There are quite a few permissions we will need to give users of this role. Some of these are unrelated to Paragraphs, but we’re including them anyway to mimic a real-world scenario. Additionally, it will be difficult to test the new role reliably if it does not have all the permissions it would have in practice. Note also that we’re granting these permissions assuming that our content creators are all working in-house. That is, we don’t have large numbers of technically authenticated but still pseudo-anonymous users creating content on our site, so we do feel we can safely grant these users permission to do things like use the Full HTML text format, which in other cases would cause some security concerns.

Here is the list of permissions the Content creator role should be given:

Comment

  • Edit own comments
  • Post comments
  • Skip comment approval
  • View comments

Contact

  • View the site-wide contact form
  • Use users’ personal contact forms

Filter

  • Use the Basic HTML text format
  • Use the Full HTML text format
  • Use the Restricted HTML text format

Node

  • Access the Content overview page
  • Administer content
  • View own unpublished content
  • Revert all revisions
  • View all revisions
  • View own unpublished content
  • Article: Edit any content
  • Article: Edit own content
  • Article: Revert revisions
  • Article: View revisions
  • Info box: Create new content
  • Info box: Edit any content
  • Info box: Edit own content
  • Info box: Revert revisions
  • Info box: View revisions

Paragraphs Type Permissions

Grant all permissions in this section except for “Bypass paragraphs type content access control.”

Search

  • Use advanced search
  • Use search

System

  • Use the administration pages and help
  • Use the site in maintenance mode
  • View the administration theme

Taxonomy

  • Edit terms in Tags

Toolbar

  • Use the administration toolbar

User

  • View user information

Make sure you click “Save permissions” when you are done.

A few notes about some of the permissions we did and did not grant here: We did not grant permission to administer Paragraphs types because we do not want them creating new Paragraphs types or changing the way that existing Paragraphs types work. They will simply be entering information using the Paragraphs types that we as the developers have created for them. Additionally, though in some cases it is wise to avoid granting non-administrative roles the ability to delete content (in most cases, it is sufficient that they can unpublish content, and deleting content makes it nonrecoverable), we do need  to give them permission to delete Paragraphs types content under “Paragraphs Type Permissions.” This is necessary because if they are unable to delete this type of content, and if they accidentally click to add any content via Paragraphs type that they do not actually need in a given article, there will be no way for them to remove that unit of content from the article. It would be similar to disallowing use of the Backspace key.

To test our new permissions, we’ll create a new user of the Content creator role and go through the process of adding a new article as that user. Navigate to People, and click “Add user.” Create a user named Mary (you can skip the email address), with a password you can easily remember. Make sure the user’s status is marked as “Active,” and, most importantly, make sure you check the “Content creator” role for this user. Then click “Create new account.”

Log out, and log back in as Mary. If permissions were assigned correctly, you should have access to the admin toolbar. Click “Manage” in the toolbar if you do not see the administrative links (“Content,” “Structure,” etc.). Then navigate to Content, and add a new piece of content of type Article. You can title this article “Broccoli Is Great for You.” Add a Body text field, and enter some text. You should then go through and try to add content of each Paragraphs type we have created: Centered image, Centered image with caption, Info box, and Pros and cons. After doing so, save the article, and view it. This full process should be the same as when we did so as a site administrator, and you should then be able to view all content with no problem.

If you do not have the option to add one or more of these, or if you encounter other problems while trying to do so, you probably missed one or more of the necessary permissions when granting them to the Content creator role. Go back to the permissions for Content creator, and make sure you gave them all of the permissions as listed above—especially those under the “Paragraphs Type Permissions” header.

Once you’ve confirmed that you can create and view content using Paragraphs content as a Content creator, you’ve completed this tutorial. At this point, you should have an understanding of why and how to use the Paragraphs module. To recap, the usefulness of this module lies in its ability for us to define special in-article content components, such as boxes of supplementary information and centered images with captions, without forcing content creators to try styling things on their own. With Paragraphs, they are simply asked to provide the content for these parts of our articles, and we as the developers can write site-wide rules (using CSS) for how that content should be displayed. This makes the content creation process easier for non-technical users, and it makes the appearance such content more consistent for technical and non-technical users alike.


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.
Aug 03 2018
Aug 03

There are multiple JavaScript and CSS libraries on the internet. They allow you to animate certain parts of your site and make them look more attractive.

The Animations module in Drupal makes use of the three useful libraries:

  • animate.css
  • typed.js
  • WOW.js

They give the elements inside your site some extra cool features and make it more appealing.

In this tutorial, you will learn how to install the required libraries and the module and take a look at its basic usage.

Let’s start!

Step #1 - Download the libraries

  • Create the /libraries folder inside the root of your installation (the root is where the /core folder is located)
  • Create three more folders inside the libraries directory. Pay attention to the letter case in each directory:
    • animateCSS
    • typedJS
    • wowJS

The Animation Module in Drupal 8

  • Download the animate.css library from its GitHub page
  • Place the zip file inside the animateCSS folder and extract it there
  • Leave the default folder name of animate.css-master and make sure it contains the animate.min.css file:

  • Download the typed.js library
  • Place the zip file inside the /typedJS folder
  • Uncompress and leave this directory with the default name of /typed.js-master
  • Create the /js directory inside the /typed.js-master
  • Copy the file named typed.js located in the /src directory and paste it inside the new /js directory:

  • Download the wowJS library
  • Place the zip file inside the /wowJS directory
  • Uncompress and leave this directory with the default name of /WOW-master
  • Make sure the file wow.min.js is located inside the /dist folder:

  • Remove/delete all zip files.

Step #2 - Download and enable the module

  • Use your preferred method to download the Animations module. I’m using Composer:

composer require drupal/animations

  • Click Extend, enable the module and then click Install:

Step #3 - Configure the module

Once the module has been enabled and all libraries have been put in place, it’s time to configure the module.

  • Click Configuration, Configure Animations (DEVELOPMENT section):

If everything is ok with the folder structure of the libraries, you’ll see the settings page of the Animations module.

If something went wrong, the system will prompt you to fix it.

The idea behind these settings is simple.

You choose one of the available animation effects and then you assign a page element to that particular effect through its corresponding css selector.

  • Click RUBBERBAND EFFECT and type h1 in the text area:

  • Choose another effect and add another selector. I created a custom block and placed it in one of the regions in this example, and after that I added the selector (id) of the whole block:

  • Click Save changes.
  • Now go to the front page of your site and you should see both animations at work.

Summary

The Animations module for Drupal 8 provides an easy way to animate certain elements on a website. You can do that without the need of JS or CSS coding

With some coding you gain even more control of your animations behaviour, for example, their speed, delay, and other parameters.

I hope you liked this tutorial. Thanks for reading!


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
Jul 25 2018
Jul 25
drupal 8 voting intro image

One of OSTraining’s customers asked how to implement content voting on their site.

There are a few alpha releases of voting modules based on the Voting API.

In this tutorial, you will learn how to use the Votingapi Widgets for Drupal 8.

It makes use of a “Rating” field, which you can customize and insert into your content.

Let’s start!

Step #1 - Install the Voting System Module

  • If your Drupal installation is not based on Composer, then download the jQuery Bar Rating Plugin.
  • Uncompress it.
  • Place it in the /libraries folder in the root of your installation.
  • After that download the module from its project page and enable it as usual.

If your Drupal installation is based on Composer, follow this procedure:

  • Place the yaml code available in the projects page into the composer.json file inside the root folder of your installation (not the composer.json file inside the core folder)

Place the yaml code

  • Download with Composer the library and the module

Download with Composer the library and the module

  • Enable the Voting API and Votingapi Widgets modules through the User Interface and click Install

Enable the Voting API and Votingapi Widgets

Step #2 - The Voting API Settings

  • Click Configuration > Voting API Settings

Click Configuration

These are default settings when a user (anonymous or authenticated) gives their vote.

  • Choose the options that fit your site most
  • Click Save Configuration

Choose the options that fit your site most

Step #3 - The Widgets

  • Click Structure > Content types
  • Click Manage fields on the Article row
  • Add a field from type Voting api field
  • Click Save and continue

Click Save and continue

  • Choose Fivestar rating and click Save field settings

Choose Fivestar rating

  • Repeat this process and add another field of type Useful rating

Repeat the process

  • Click the Manage display tab and rearrange the order of the Voting widgets
  • Click the cogwheel on the right the Fivestar widget in order to select its style
  • Click Update and then Save at the bottom of the screen

Click Update

Step #4 - Test the Voting Widgets

  • Click Content > Add content > Article
  • Make sure both votes fields are marked as open in the Article Form and click

Click Content

  • You should now see the published node with the voting widgets just before the Comments section, click them to verify they work properly

Test the voting widgets

Step #5 - Configure Access Permissions

  • Click People > Permissions and scroll down to the Votingapi Widgets section at the bottom of the page
  • Check the relevant permissions for Anonymous and Authenticated Users
  • Click Save permissions

Click Save permissions

Everyone can vote on your site from now on.

Step #6 - The Voting Results

To display the results, we’ll make a simple view:

  • Click Structure > Views > Add view
  • Show Content of type Article in a page and display an Unformatted list of fields
  • Click Save and Edit

Click Save and edit

  • Click the Add button in the FIELDS section of Views UI
  • Look for the Voting Widget fields, select them and click Add and configure fields

Look for the Voting Widget fields

  • Click the Show results checkbox and Apply twice

Apply twice

  • Save the View
  • The View page will show a summary of all votes per article with their average

The View page will show a summary of all votes per article

Summary

The Votingapi Widgets module allows you to implement a basic voting system for your content and other fieldable entities.

The module works properly, although it is still in alpha stage.

Please, give this module a try and share with us your experience in the comments below.

I hope you liked this tutorial. Thanks for reading it!


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
Jul 03 2018
Jul 03
Drupal Web Form

One of OSTraining’s members asked how to create a following web form with the Webform module:

  • The site has four regions to be contacted: NE, SE, NW, and SW.
  • Each region will have their own contact person/team.
  • The user must be able to select one or more of the regions to contact at the same time, using checkboxes.
  • All the submittions must be BCC-ed to the main administrator.
  • If needed, the site owner should be able to add one or more email recipients for each region.

In this tutorial, you will learn how to meet these user requirements using the Webform module.

The Webfrom module supports conditional emails. You can send an email to a particular email address, based on the value of the webform element.

Let’s start!

Step #1 - Install the Webform module

  • Type following command in your terminal inside the root directory of your Drupal installation.

composer require drupal/webform

01

  • The webform module has many submodules, for the purpose of this tutorial, you’ll only need to check the Webform and the Webform UI checkboxes.
  • Click Install.

02

Step #2 - Create the Form

We are going to create an easy form requesting the user to input their name, email address, the region (or regions) the user can select and a submit button.

  • Click Structure > Webforms > Add webform.

03

  • Give the webform a proper name.
  • Click Save.

04

  • Click the Add element button to add the desired elements.
  • Click Add Element next to the Text field option.

05

  • Give it the label of Name.
  • Scroll down and click Save.

06

  • Repeat the process, add an email element.
  • Click Save.

07

  • Your screen should look like this:

08

Step #3 - The checkboxes

We need 4 checkboxes each with one of these regions: NE, SE, NW, SW.

  • Click Add element.
  • Look for the checkbox and click Add element next to it.

09

  • Give this checkbox the NE title.
  • Scroll down.
  • Click Save.

10

  • Repeat the process with the other three checkboxes.

11

  • Click Add element once again.
  • Select Fieldset under the CONTAINERS section.

12

  • Give it a proper title.
  • Scroll down.
  • Click Save.

13

  • Rearrange the checkbox elements, so that they’re contained inside the fieldset (notice the “indentation”).
  • Click Save elements.

14

Step #4 - The Conditional Emails

We need now to add the logic to send an email, depending on the checkbox the user checks.

  • Click Structure > Webforms.
  • Next to the form you just created, click the arrow next to the button.
  • Select Settings from the drop-down menu.

15

  • Click the Emails/Handlers tab.
  • Click the Add email button.
  • Give this email a proper title according to the assigned supervisor (depending on the marked checkbox).
  • In the SEND TO area select Custom To email address.
  • Enter the email address for this particular supervisor.

16

  • Do the same with the BCC email. This is the global address which will be getting all the form submission from all the four regions.

17

  • Click the Conditions tab.
  • Build the condition for this email.
  • Click Save.

18

  • You should now see how the system added the email with its corresponding condition.

19

  • You have to create 3 more emails now to cover all the checkboxes.
  • When you’re done, click Save handler.

20

Step #5 - Testing the Webform

  • I’m working locally for this tutorial. There’s no problem if I test the webform a couple of times. You have to have a little more caution if you’re on a live server.

21

  • Click Reports > Recent log messages. You should see the sent emails to their corresponding recipients.

22

The webform module allows you to send emails based on conditions related to the value of the form elements in your Drupal site.

This is an easy way to add basic logic to your forms. I hope you enjoyed reading this tutorial. Leave us your comments below.

Additional Reading

What's Next

Join OSTraining Everything Club now for only $59 (saving of $85) and start learning how to build great websites with Drupal!

You'll get access to the large library of our Drupal training videos plus the best-selling "Drupal 7 Explained" and "Drupal 8 Explained" books.


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
Jun 25 2018
Jun 25
Mega menu in Drupal 8

One of our customers asked how to build a mega menu in Drupal 8.

Mega menus are menus with multi-column navigation. They are fastly becoming a trend in web design.

The Ultimenu module allows you to insert Drupal blocks into a menu. You can easily use it to build fairly complex menu layouts.

In this tutorial, you will learn how to build a simple mega menu using the Ultimenu module and Bootstrap.

The customer was aiming at building a mega menu similar to the one on the image below:

01

The mega menu drop-downs should have 100% width. Their content must be Drupal blocks.

Let’s get started!

The Ultimenu Approach

The Ultimenu module generates a block for each menu you add in the menus page of your Drupal installation (admin/structure/menu).

You can place this block in the Block layout screen like any other block. The module turns menu items into dynamic regions in the block layout page.

That way you can insert blocks (custom blocks, views, etc) into these regions.

A block containing regions containing blocks:

02

Step #1 - Install the Module

  • Install the module with composer:

composer require drupal/ultimenu

  • After downloading, click Extend and enable the module. No further dependencies are required:

03

Step #2 - Create the menu

  • Click Structure > Menus.
  • Look for the Main Navigation and click Edit menu.

04

  • Click the Add link button and add the first level menu items:

05

  • The Travel link points to route:<nolink>. This parent element is only there to contain other elements:

06

Step #3 - Configure the Ultimenu block

  • Click Structure > Ultimenu.
  • In the vertical Ultimenu blocks tab select Main navigation.
  • Click Save configuration:

07

  • Click Ultimenu regions.
  • Select Ultimenu:main: Travel. Ultimenu will create this region dynamically in the Block Layout page so that you can place blocks in it.
  • Click Save Configuration:

08

  • The Ultimenu goodies tab has additional configuration options. I’m not going to check any of these options. Please, read the module’s documentation to understand how these options work, particularly if you’re building a multilingual site.

Step #4 - The Image Block

In order to place an image in a block, you need to create a custom block type with the Image field.

  • Click Structure > Block layout > Custom block library > Block types.
  • Click the Add custom block type button:

09

  • Give the block type a proper name.
  • Click Save:

10

  • Click Manage fields.
  • Delete the Body field.
  • Click Add field.
  • Add the Image field.
  • Save it with the defaults.
  • Click Manage display.
  • Hide the Block label:

11

  • Click Structure > Block layout > Custom block library > Add custom block:

12

  • Click Block with Image:

13

  • Upload an image.
  • Click Save:

14

Step #5 - The links block

There are many ways to obtain a block with links in four columns, for example with Views.

I’m working with a Bootstrap subtheme in this tutorial. I’m going to use a basic block with Bootstrap markup and classes.

Check out this tutorial in order to learn how to create a Bootstrap subtheme in Drupal.

  • Click Add custom block once again.
  • Select Basic block this time.
  • Give the block a proper name.
  • Select Full HTML as text format in the editor.
  • Click the Source button.
  • Paste following code in the editor window:
<div class="row">
<div class="col-sm-3">
<h3>Top destinations</h3>
<ul>
<li><a href="#">North America</a></li>
<li><a href="#">Latin America</a></li>
<li><a href="#">Middle East</a></li>
<li><a href="#">Europe</a></li>
<li><a href="#">Africa</a></li>
</ul>
</div>
<div class="col-sm-3">
<h3>Editor's choice</h3>
<ul>
<li><a href="#">Best Hotel Deals</a></li>
<li><a href="#">Cruise Deals</a></li>
<li><a href="#">City Breaks</a></li>
<li><a href="#">Activities</a></li>
<li><a href="#">Culture</a></li>
</ul>
</div>
<div class="col-sm-3">
<h3>City breaks</h3>
<ul>
<li><a href="#">Paris</a></li>
<li><a href="#">Hong Kong</a></li>
<li><a href="#">Rome</a></li>
<li><a href="#">London</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</div>
<div class="col-sm-3">
<h3>Custom menu</h3>
<ul>
<li><a href="#">Disclaimer</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Advertisement</a></li>
<li><a href="#">Contact us</a></li> </ul>
</div>
</div>

  • Click Save.

15

Step #6 - Place the Ultimenu block

  • Click Structure > Block layout.
  • Disable the default Main Navigation block.
  • Place the Ultimenu: Main navigation in the Navigation (collapsible) region.
  • Uncheck Display title.
  • Click Save block.

16

Step #7 - Place the blocks in the “Travel” region

  • Scroll down to the bottom of the page.

You’ll see the dynamically generated region you assigned when configuring your Ultimenu.

  • Click Place block:

17

  • Place the image custom block in this region.
  • Uncheck Display title.
  • Click Save block.
  • Repeat the process with the Bootstrap markup block:

18

  • Rearrange the order of the blocks if needed.
  • Click Save blocks:

19

Now go to the front page of your site and take a look at the menu. A couple of CSS tweaks are required.

Step #8 - The CSS

By default, the libraries file of your subtheme points to the style.css file inside the css/ folder within your Bootstrap subtheme.

  • Add the following code to that file:
/* Google fonts */ 
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');

/* Menu Links */

.ultimenu__link {
text-transform: uppercase;
font-family: 'Roboto', sans-serif;
color: #000;
font-size: 1.1em;
display: inline-block;
font-weight: 700;
padding: 0.8em; 
}

.has-ultimenu:hover {
background-color: #FFF;
}

/* Image Block */

#block-megamenuimage {
width: 100%;
}

#block-megamenuimage img {
width: 100%;
}

/* Links block */

#block-multicolumnblock {
width: 100%;
}

#block-multicolumnblock h3 {
text-transform: uppercase;
font-family: 'Roboto', sans-serif;
background: #000;
color: beige;
font-size: 1em;
display: inline-block;
font-weight: 700;
padding: 0.8em;
border-radius: 10px;
}

#block-multicolumnblock li {
list-style: none;
border-top: 0.5px dashed #333;
}

#block-multicolumnblock li:last-child {
border-bottom: 0.5px dashed #333;
}

#block-multicolumnblock li a {
text-decoration: none;
color: #333;
display: block;
line-height: 2.5em;
}


By now you should already have noticed how to tweak the menu by yourself:

20

Summary

You just learned how to build megamenus in Drupal using the Ultimenu module, Bootstrap and an easy to understand “Drupal block” approach.

Thanks for reading!


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
May 30 2018
May 30
google webfonts

Although Drupal has reputation for being a developers' platform, lots of user rely on Drupal's admin area for key tasks.

For typography in Drupal sites, the best way to change your site's fonts via the admin is a module called @font-your-face

The @font-your-face module allows you to work with webfonts like Google Fonts or Font Squirrel. It also provides the ability to work with paid font services like Typekit or fonts.com.

In this tutorial, you’ll learn how to configure and use this module in Drupal 8.

Step #1. Enable the required module

  • Download and install the @font-your-face module from Drupal.org.
  • Enable the @font-your-face module.
  • Enable the integrations you need. In this example, I'll enable the Google Fonts submodule.

font your face module

You have to check the @font-your-face settings in order to import the fonts of each one of the enabled submodules.

  • Click Appearance > @font-your-face > Settings
  • Click the "Import all fonts" button. The process will take about 5-10 minutes to complete, depending on the speed of your internet connection.

Drupal webfonts import

  • Click "Save configuration" after the Import process has finished.

Drupal webfonts save configurations

Step #2. Create a Font Display

In order to create a font display, you have to browse and enable your desired fonts.

  • Click Appearance > @font-your-face > Browse (This is a View, you can edit it if you want).
  • Select and enable the fonts you want to use in your site.
  • On top of the page is an exposed filter. You can search the fonts by name or specifying other criteria like the weight of the font or its classification.

Drupal webfonts font selector

  • Make a search for two or three fonts with different filter settings and enable them. Every enabled font will get a green background.

Drupal webfonts disable fonts

  • Click Font display and then click the blue "Add Font display" button.

Drupal webfonts add font display

  • Add a proper label to the Font display.
  • Choose the font.
  • Choose a preset selector, for example All Headers (h1, h2, h3, h4, h5, h6).
  • Choose the theme you want to add this particular font display.
  • Click "Save".

Drupal webfonts webfont display settings

  • Repeat the process with other fonts and Preset selectors.
  • If you want to choose another selector not included in the Select list options, choose other and type the selector in the text box.

Drupal webfonts selectors font display

  • Please take notice that the cascading nature of CSS will apply depending on the order you create the Font displays. The last one will take precedence over the others.

several font displays

  • After creating all necessary Font displays, you can either create some content or take a look at your already existing content.
  • The default Bartik fonts have changed and now match the ones you enabled and configured.

webfonts before after

Conclusion

The @font-your-face module for Drupal 8 provides an easy way to change the fonts of your site without writing additional CSS code.

This module is very useful in sites that switch their theme according to some predefined event. You can configure different Font displays for the same Preset Selectors depending in the theme currently in use.

Thanks for reading! If you're looking for a more code-centric approach, try this video from our Drupal 8 Theming class.


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
May 08 2018
May 08
How to Build User Profiles With Fields in Drupal 8

By default, a Drupal 8 user account collects only very basic information about the user. 

And, most of that information is not visible to visitors or other users on the site.

Fortunately, Drupal makes it easy to modify and expand this profile so that people can add useful information about themselves such as their real name (versus a username), address, employer, URLs, biography, and more.

If you're new to how Drupal handles users, read this tutorial before starting. In this tutorial, I'm going how to create expanded user profiles for your Drupal users.

First, let's add some fields to your user profiles. This allows users to provide more information about themselves.

  • Go to "Configuration", "People", "Account settings", and then "Manage fields". You can now see a screen which looks the one below:

How to Build User Profiles With Fields in Drupal 8

Let's add the following Text (plain) fields:

  • First Name. Set the "Maximum length" to 50 characters.
  • Last Name. Set the "Maximum length" to 50 characters.

Next, add the following Link fields:

  • LinkedIn
  • Facebook
  • Personal Website

fields user profile

  • Go to the "Manage display" tab and arrange the new fields in the order you want them to show to site visitors.

manage display user fields

  • Go to "People" and "Permissions".
  • Give the "View user information" permission to the Anonymous and Authenticated users.

view drupal user information

Now, go and see those user profile fields that you just created:

  • Click your user name to go to "My account" in the black menu bar at the top.
  • Click the "Edit profile" tab.
  • Scroll down and you can use all the fields that you just created.
  • Fill in the fields.
  • Save your data and click the "View" tab to see your profile:

drupal user profile

Now, see how these fields appear to your site’s users. For many users, this user profile editing area should look similar, but slightly different:

  • You can use the Masquerade module to see the site as the user would. If you're not familiar with Masquerade, read this tutorial.
  • Click the article writer name to go to "My account".
  • Click the "Edit profile" tab and see what the user sees:

drupal article writer

Finally, see how this appears to a new user:

  • Log out or visit your site in another browser.
  • Visit http://[your_web_address]/user/register
  • The registration screen should show the default Drupal fields, plus your new fields:

new user registration

If you want to remove any fields from the registration area, you can hide them by going to "Configuration, "People", "Account settings", and then "Manage form display".

Want to Learn More?

This tutorial was an extract from Drupal 8 Explained, the best-selling guide to Drupal 8. Grab a copy today to learn all the fundamentals of Drupal 8.


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.
May 08 2018
May 08
How to Manage User and Role Permissions in Drupal 8

This tutorial is all about managing users on your Drupal 8 site.

I'll show you how to control who can do what on your site:

  • Who can create, delete, and edit content?
  • Who can upload modules and themes?
  • Who can modify menus and blocks?

You also see how to make user accounts more interesting. You do this by allowing users to add more information about them. 

Drupal Roles and Permissions Explained

Drupal users are defined by their role. Roles are defined by the permissions you assign the role. Drupal has three default roles:

  • Anonymous: Visitors to your site who are not logged into your site.
  • Authenticated: Anyone who has an account on your site and logs in is authenticated. The Authenticated role also serves as the minimum set of permissions that is given to all logged in users. Drupal sets some default permissions but you can change them.
  • Administrator: Users assigned the administrator role can do everything on the site.

You might be thinking that this is enough for your site, but just in case you have bigger plans, let's take a look at how you fine tune access to your account via three examples.

Creating an Article Writer

Start with the example of an Article writer. Such a person will be a role to which you can assign users. If users are in this role, all they can do is write articles. There are four steps to make sure a user account is set up correctly:

  1. Add a role.
  2. Set the role permissions.
  3. Create a user.
  4. Test the user to make sure it has the correct permissions.

Following are those four steps.

  • Click "People" on the admin menu bar and then on the "Roles" tab.

drupal roles

  • Click "Add role".
  • Type Article writer for the new role name.
  • Click "Save".

Now that the Article writer role has been created, you need to decide what user in that role can and can’t do.

  • Click the Permissions tab to see the permissions available:

drupal permissions tab

On the left side of the list, you can see the modules that have permissions settings. The modules are ordered alphabetically. Across the top of the list, you see the four roles that you have set up.

drupal permissions tab

The permissions for the three default roles are already set. You can also see that some permissions for the Article writer role are already set. This is because those permissions have been giving to the Authenticated User role. By default, if you grant permission to the Authenticated role, all subsequent roles (except for anonymous) inherit said permission. That is why the check marks for comments are grayed out and can't be deselected.   

drupal permissions boxes

Your article writer is going to need more permissions than those granted by default to the Authenticated role, so let's get started.

  • Scroll down until you find the header Node. Remember that Node is Drupal’s geeky word for content.
  • At the top of the Node area, you see some admin-type permissions, as shown below:

drupal node permissions

Scroll a little further to find the Article permission set. To keep things simple in this example, check all of the Article permission boxes:

  • Create new content
  • Delete any content
  • Delete own content
  • Delete revisions
  • Edit any content
  • Edit own content
  • Revert revisions
  • View revisions

drupal article permissions

  • To ensure the Article writer can "Add Content", check the permissions box for "Use the administration toolbar".

drupal admin toolbar permisisons

  • Click "Save permissions" at the bottom of the page.

Now let's set up an actual user account for an Article writer.

  • Click the "List" tab at the top of the screen.
  • Click the "Add user" button.

As you can see by the absence of the red asterisk, an email address is not required. However, the email is necessary for the user to receive messages, such as password reset. If you have an email address, other than the one you used when creating your first account, enter it now, so that you can see the emails users will receive. Otherwise, leave it blank.

  • Username: articlewriter
  • Password: articlewriter
  • Roles: Check the "Article writer" box.
  • If you included an email address, check the box to "Notify user of new account".
  • Click "Create new account".

drupal create article writer

The fourth and final step is crucial. Permissions are a vital part of your site’s security, and if you don’t test your permissions, you could easily allow some users to do things that can compromise your site.

Following is a basic method for testing. You can use the following steps:

  • Open a browser where you are not already logged in.
  • Log in by going to http://[your_web_address]/user/login.
  • Observe that the menu bar to which you have grown accustomed is lacking in options. That is good. First test passed.

drupal low permissions

  • Click "Shortcuts" and then "Add content".
  • The "Create Article" form appears immediately, with no other content types available. Test passed again!

drupal create article

There are limitations to this testing. Because you created the account and the password, you were able to log in as that person and test.

However, on a real site, it is neither feasible nor safe to know what your users’ passwords are. Instead, you can use a module called Masquerade to easily test any user account. Here’s how it works:

  • Make sure you are logged in using your main admin account.
  • Install the Masquerade module.
  • Go to "Structure" and then "Block layout".
  • Place the Masquerade block at the top of the Secondary region.
  • Go to your homepage and you'll find the Masquerade block and its search box.
  • Type in the name of the user you want to test and click "Switch".

drupal masquerade

The Masquerade block disappears and an "Unmasquerade" link appears in the black menu bar at the top of the screen. Don’t worry: by default, this link appears only for administrators.

drupal user masquerade module

You can now browse the site and see exactly what an Article writer can see. Simply click the Unmasquerade link, and you’ll be back at the administrator account.

Creating a Moderator

Now see one more example of user permissions. Let's set up a role called Moderator. People in this role can moderate comments and forum posts. These people help to make sure that your site is a pleasant and spam-free destination.

  • Go to "People", "Roles", and then "Add new role".
  • Type Moderator for the Role name.

Next, we'll set up the permissions:

  • Click the "Permissions" tab and scroll down until you find the Comment module.
  • Check the "Administer comments and comment settings" box in the Moderator column.

drupal create moderator

  • Scroll down until you find the Forum module and check the "Administer forums" box in the Moderator column. This allows the Moderator to rearrange the forum boards if needed.

drupal administer forums

  • Scroll down until you find the Node section.
  • Give Moderator permission to create, delete any, and edit any Forum nodes.

drupal forum permissions

  • To ensure the Moderator can add content, check the permissions box for "Use the administration toolbar".
  • Check the "View user information box" in the Moderator column. This can help the Moderator when advising the site administrator if an account needs to be blocked.
  • Click "Save permissions" at the bottom of the screen.

Now we can move on to the create the Moderator account:

  • Click the "List" tab at the top of the screen and click "Add user".
  • If you have yet another extra email account, enter it, otherwise, leave the email blank.
  • Username: moderator.
  • Password: moderator. You can set this to something more difficult if you want. Drupal warns you that this is a weak password.
  • Roles: Check the "Moderator" box.
  • Click "Create new account".

Now it's time to test the account:

  • Visit the front page of your site.
  • Use the Masquerade module to see the site as moderator.
  • Click "Forum" on the Main menu.
  • Access any forum topic, and you can edit or delete the topic.
  • If there is a comment on a topic, you can moderate it using the "Edit" and "Delete" links.

drupal edit delete links

  • Click any user’s account name. The easiest account to find will probably be your main administrator account.

drupal user name

  • You'll see the user profile. In the next part of the chapter, we're going to make this look more interesting!
  • If you think the user needs moderating, click the "Edit" tab. You change the user status from "Active" to "Blocked". Please do not try this with your own administrator account!

drupal edit user

You can grant your Moderator role permission to administer users (see the User section on the Permissions page). Note that this is a very powerful permission. If granted, any user with Moderator role can access any other user's account and change its settings. Grant with caution.

Video on Drupal Permissions

This video is taken from the class called "The Beginners Guide to Drupal 8":

[embedded content]

Want to Learn More Drupal 8?

After reading this tutorial, I'd recommend "How to Build User Profiles" which follows on directly from this point.

This tutorial was an extract from Drupal 8 Explained, the best-selling guide to Drupal 8. Grab a copy today to learn all the fundamentals of Drupal 8.


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.
May 02 2018
May 02
Videos to Get you Started with Drupal Development

How do I get started with Drupal development?

That's a common question we get from people who join OSTraining for the first time. They want to know about the skills they will need, and what kind of classes they should take.

In this guide, I'll give you an overview to help you get started with Drupal development.

The Skills You Need

Clients are often surprised when we recommend that new Drupal developers sit through our beginner and site-building training. 

Unfortuantely, it is very common to find Drupal websites that were built by talented developers who had no Drupal knowledge. A good understanding of Drupal's user interface and key concepts is absolutely critical. Being a good developer is not enough.

Here are the skills that will be useful for you as a new Drupal developer. An in-depth knowledge of Drupal is at least as important as any other skill:

drupal 8 skills

Learn Drupal 8 Theming

Unlike Drupal 7, the latest version of Drupal relies on the Twig template engine. Get started by watching the How to Use Twig class.

Then move on to the How to Design Drupal 8 Themes videos. These 52 lessons will take you deep inside the Drupal 8 theming system.

I'd also recommend checking out How to Use the Drupal Paragraphs Module because the majority of sites I come across are now using Paragraphs for design and layout work.

Learn Drupal 8 Module Development

How to Develop Drupal 8 Modules is the place to start here. You'll develop two modules using step-by-step instructions to hook into Drupal's existing functionality.

Next, check out the videos on Drush. Although Drush has slightly fallen out-of-favor lately, it's still an invaluable tool in many Drupal situations.

Finally, try Drupal 8 Composer and Configuration Management. This is an introduction to many of the tools that Drupal professionals use in the work.


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.
Apr 25 2018
Apr 25
Logos of Drupal and Telegram

Telegram is an easy to use free chat application that is rapidly winning fans all over the world. 

There is a Telegram plugin for WordPress but there is not yet a Telegram module for Drupal.

In this tutorial, you will learn how to integrate the Telegram app with your Drupal 8 site using JavaScript from Re:plain.

Step #1. Create a Telegram Account

If you don’t have a Telegram account yet, you’ll have to create one. The process is pretty straightforward. Download the Telegram app to your smartphone and activate an account with your mobile phone number.

Download the Telegram app to your smartphone and activate an account with your mobile phone number

  • Allow Telegram to receive and make phone calls and send SMS messages.
  • Enter your phone number and the code provided by Telegram.

Enter your phone number and the code provided by Telegram

  • Allow Telegram to access pictures and contacts and you’re good to go.

Step #2. Get the JavaScript Code

  • Open your web browser and web.telegram.org in the address bar.
  • Choose your country, type your phone number.
  • Click Next.

Click Next

Click OPEN IN WEB

  • Click Start.
  • Follow the instructions.

Follow the instructions

  1. Click Menu.
  2. Click Connect the site ("Connectar el sitio" on my screenshot below).

Click Connect the site

  • Create a name for your chat room, for example, “Customer Support”.
  • Enter a description and a welcome message for your “Customers”.
  • Choose the default widget language in the site (i.e. English).
  • Your chat room is created.
  • Copy the JavaScript for later use.

Copy the JavaScript snippet

Step #3. Add the Javascript to Your Site

The code has to be inserted into a page before the closing </body> tag. That means the JS code has to be inserted into the html.html.twig template.

The theme I’m using is the default Bartik. For demonstration purposes, I’m going to use the default core template. However, this is not a best practice.

The right way of doing this is creating a Bartik subtheme, copying the template inside the new theme and modifying it there.

You can read more about creating a subtheme here.

  • Locate the core/themes/classy/templates/layout/html.html.twig file.
  • As you can see, Classy is the base theme for Bartik.
  • Open the file in your text editor and paste the script right before the closing </body> tag.

Open the file in your text editor

  • Save the file.
  • Clear the site cache. You’ll see the Telegram icon at the bottom right corner of your screen.

Good job! We haven’t installed any Drupal module, that’s the reason why you’re seeing the Telegram icon even in your administrative pages. These make use of the html.html.twig template as well.

  • Open another browser and test the chat as an anonymous user.
  • The system will prompt you to introduce your contact data - this is a Telegram answering template. You can configure your templates in the Telegram web application or in your phone.
  • I can read and answer to the message in my cell phone.

I can read and answer to the message in my cell phone

Step #4 - Change the Logo of the Chat Window

  • In your web/mobile Telegram application click Menu > Customer Support (or whatever you named your channel). You have a bunch of options here. They’re pretty self-explanatory.
  • Tap/Click Edit logo.
  • Click the Camera icon in order to upload a picture.
  • Refresh your Drupal site.
  • There’s the logo.

Logo

Feel free to explore the different configuration options available.

Telegram has an extensive documentation about how to customize and enhance the functionality of your chats with the help of bots, that perform different tasks.

As you already noticed, this method is useful for any type of site, not just Drupal sites.

If you want to learn more Drupal, join OSTraining now. You'll get access to a vast library of Drupal training videos, plus the best-selling "Drupal 8 Explained" book!


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
Apr 16 2018
Apr 16
What's in the Drupal 8 Roadmap?

Every year we go to DrupalCon (this time it was in Nashville).

Every year, it's an excellent event.

Every year, Dries Buytaert gives his keynote address, known as the "Driesnote".

However, something was different this year.

In the past, Drupal's release cycles were vague and so the Driesnotes often focused of proposals and ideas. "It will be ready when it's ready" was a favorite quote.

That changes this year. In Nashville, Dries presented a detailed roadmap for where Drupal is headed. There has been an official roadmap page on Drupal.org since 2016, but it never had any real information. Now it full of information about what's coming to Drupal 8.

I'm going to give you a quick-start guide to every item the roadmap presented at DrupalCon, starting with the next release: Drupal 8.6 in September. This image belows show the roadmap from the Driesnote:

drupal 8 roadmap

What's planned for Drupal 8.6?

Content layouts: We have covered this a couple of times on the OSTraining blog, first when Drupal 8.5 was launched and then in a full tutorial. The best way to think about this could be, "Panels is now in core". This feature is already in the Drupal core now and ready for you to test! Click here to see the full Layout initiative.

drupal 8 layouts

A Drupal 8 demo: This is also known as the Out-of-the-Box initiative. Here's a quote explaining the goal of this project: "Installing Drupal currently gives you a mostly empty box. There is no demo content nor much preconfigured functionality. This makes for a weak first impression and makes it hard for the evaluator to connect the dots and find out what Drupal can do for them. The Out of the Box Experience initiative (OOTB) aims to improve this situation. The goal is to add sample content presented in a well designed theme, presented as a food magazine. Using recipes and feature articles this example site will make Drupal look much better right from the start and help evaluators explore core Drupal concepts like content types, fields, blocks, views, taxonomy, etc." Click here to see the issue for this new demo content.

YouTube support: This is part of the new Media features in Drupal 8. This basic Media module is already in the Drupal 8 core, but it's not very useful yet. The plan is that you will be able to add YouTube embeds to your site, alongside the more basic Media types: Images and Files.

Drupal 7 to Drupal 8 migration path: The migration path to Drupal 8 will finally become stable ... three years after the launch of Drupal 8. That's way too late, but at least it's almost done. In fact, if you read the official issue queue, the migration tools are stable now: "So the only thing blocking it from going stable at this point is that it depends on an unstable module. Meaning, migrate_drupal. Otherwise, the UI is now as stable should be considered Un-Officially stable!!! Go out and migrate using it." The main limitation at the moment seems to be with multi-lingual sites.

Support for JSON API specification: I'm not quite sure why this item made the list, as it's a more minor change. This update allows Drupal to show which version of the JSON API specs is currently supported.

Media Library (experimental): Currently Drupal 8 does not have a browseable media library. You need to know the name of the file in order to find any media that you uploaded previously. Go to 44:50 of the Driesnote video and you'll see a preview of the new library. Click here to see the full Media Library issue.

drupal 8 media library

What's planned for Drupal 8.7?

Full-site previews: This is a really interesting new feature which introduces the ability to preview and stage changes. Drupal will have the option to create a new version of a page. You can work on this page in private, and then push it live. Drupal will call these "Workspaces", so you'll have a Staging and a Production workspace. This would be an ideal solution if you wanted to prepare landing pages to launch on a certain date, or get approval for updates to existing pages. Click here to read more about this initiative.

switcher UI compare

Auto-generated API docs: It's generally agreed the Drupal 8 API documentation is lacking. There's talk of a new project to overhaul all the documentation, but the API docs could be automatically generated as with Symfony.

Redesigned Javascript admin interface (experimental): Scroll down and watch from about 43:00 of the Driesnote for an introduction to this topic. The image below shows what the redesigned Drupal 8 could look like. You can find more images on this Drupal.org issue. This is part of a larger initiative called "Modernize Drupal's Javascript". It is 10 years now since Drupal added jQuery to the core, and it's now time to move on to alternatives such as React. The very ambitious goal for Drupal 8.7 is to "create an alternative admin experience for Drupal as a single-page React application".

new drupal 8 interface

What's on the Wishlist?

Automatic updates: There is an official initiative working on this. "Updating a Drupal site can be difficult, time-consuming, and expensive. While implementing an automatic updates system is a difficult problem, and not without its risks, it is a problem that has been solved by other platforms, and that Drupal can address." We wrote about the need for this in 2014. The short version of this after Drupalgeddeon 1 and Drupalgeddeon 2, Drupal can't afford to leave so many sites unpatched. Blaming the site owners is not a good strategy.

Redesigned data modelling tools: There's no information available at this project yet.

Support for GraphQL specification: This is part of the API-first initative. Working is being done in the GraphQL module which will form the basis of this project.

Hoverboard prototype: Honestly, this isn't needed. This problem was solved in 1989.

Watch the Driesnote from Nashville

Dries starts speaking around the 19 minute mark:

[embedded content]

About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.
Apr 06 2018
Apr 06
Getting Started With Drupal's Webform Module

One of our club members asked us how to create a survey form in Drupal 7. They wanted to achieve this without a need for custom coding.

The Webform contrib module is the perfect tool for the job. In this tutoral, you will learn how to use this module to survey what peanut butter, jelly and bread your site visitors prefer.

Webform is a module for making forms and collecting information from users in Drupal.

After a submission, you can send users a thank-you email as well as sending a notification to administrators.

Results can be exported into Excel or other spreadsheet applications. Webform also provides some basic statistical review and has an extensive API for expanding its features.

If you need to build a lot of customized, one-off forms, Webform is a more suitable solution than creating content types and using the CCK or Field modules.

Step #1. Download the Webform, CTools, Views, and Token Modules

Download the Webform module

Make sure you download the latest versions of the module for Drupal 7. They may have changed since we wrote this, so be sure to check.

Step #2. Install the Webform, CTools, Views, and Token Modules

tutuploadsStep_2._Install_the_Webform_Module.png

Note: if you don't see the Install new module link, please go to Modules and enable the Update manager module.

Step #3. Enable the Webform, CTools, Views, and Token Modules

tutuploadsEnable_the_module.png

  • Go to the Modules and enable the Webform module
  • Scroll down to Webform and click the checkbox.
  • Click Save configuration.

Step #4. Access the Form Fields

tutuploadsAccess_the_form_fields.png

  • Go to Structure  > Content types.

tutuploadsmedia_1317093423174.png

  • Scroll down to Webform.
  • Locate the edit, manage fields, manage display and delete links.

tutuploadsmedia_1317094660865.png

  • Click Edit.

You will be taken to the Webform module management page:

tutuploadsmedia_1317095178845.png

This is not the place where you will be creating forms. Editing here is exactly the same as editing Fields in Content Types, which is a way to make fields available to this content type.

From here you can edit fields, manage existing fields, the display and the comment functions by clicking on the appropriate tabs.

But creating the actual form is done by adding content in the same way you would add an article.

You won't need to do much here but review all your choices and see if there is anything you feel you must change.

The default values will work for the purposes of our demonstration. After you create your first form and understand the module you might want to revisit the configuration.

Now that the module is installed and the configuration is checked, you can begin building your survey form.

Step #5. Create a Web Form by Adding It as Content

tutuploadsStep_3._Create_your_first_webform_by_adding_it_as_content.png

  • Go to Content > Add Content > Webform.

tutuploadsCreate_the_basic_entry_form_and_configure_the_same_as_any.png

  • Give it a title and make the decisions on all basic options.
  • Save this with the Save button at the bottom of the page.

Step #6. Add the Form Components

tutuploadsStep_4._Start_adding_form_components.png

Now you will see the controls for creating and editing the rest of the form elements.

Let's start adding Form components using the WEBFORM tab.

tutuploadsStep_5._Make_a_pre-filled_username_field_using_a_Token.png

  • Make sure you are under the Webform tab.
  • Enter Name instead of the New component name text.
  • Choose the textfield.
  • Click Add.

We are surveying registered users, so we are going to automatically fill in their username.

A name is a basic text field, but we want our registered users to show up on the textfield, so we're going to make use of the Tokens. Using Tokens is just an optional feature.

tutuploadsmedia_1317148972326.png

  • Enter the %username token value in the Default value field. This will pull the username from the database and fill it in automatically.

Note: If you don't see the TOKEN VALUES, you probably don't have the Token module installed. You only need the %username token if you want to fill in the default values taken from the database.

If this is going to be a blank field that the user will fill in when they visit the page, you can just leave the Default value blank. I used the token value here to illustrate the possibilities available to you.

  • Scroll down the rest of the page and make any configuration selections you need.
  • Click Save component at the very bottom of the page.

Step #7. Create the Select options Fields

tutuploadsStep_6._Create_your_first_Select_field.png

Now let's create our first select field form component.

  • Enter Bread as the filed label.
  • Choose the Select options type from the drop-down. 
  • Click Add. 
  • On the next screen enter the options as displayed in the image below:

tutuploadsStep_7._Create_the_list_of_options_for_the_user_to_choose.png

  • Go to Options and create Key-Value pairs.

These pairs consist of a machine-readable key and a plain language value separated by a "|" - This character is called a "pipe" and you can find it by holding shift while pressing the backslash key "\" key on most keyboards.

Key-value pairs MUST be specified as "safe_key|Some readable option". Use of only alphanumeric characters and underscores is recommended in keys. Enter only one option per line.

  • Save the component.
  • Repeat this step for the flavor of the jelly and type of peanut butter.

tutuploads-_Default_choice_is_radio_buttons.png

When you are creating lists, the default type is radio buttons. If you want checkboxes or a list box the choices are farther down on the page.

You can also set the field as mandatory or optional. If you click the "Multiple" checkbox at the top, the list will appear as checkboxes.

If you choose the Listbox under DISPLAY you will have a drop-down box. Selecting Multiple and Listbox will allow users to make multiple selections from a drop-down box.

When you create the Jelly type, add Other as a choice. Then add a text field so people can write in their suggestions.

Step #8. Add a textarea Field

tutuploadsStep_8._Add_a_Text_field.png

  • Add a textarea field. It will be a large area used for entering more extensive written responses.

Other field types you might want to add for your purposes are an E-Mail field or Date field. You can choose these types from the drop-down Type box.

tutuploadsmedia_1317154370995.png

Step #9. Add a Preset Field Type for US States

tutuploads-_Add_a_preset_field_type_-_an_added_feature_of_Webform.png

There is a convenience feature you may want to use. You can create pre-built option lists and add them to your form. The module comes with several default lists. 

  • Add one for the US States to see how this looks on your form.
  • Label it State.
  • Choose the Select Options type. 

tutuploadsmedia_1317151406971.png

  • Choose the US States from the drop down.
  • Click Save Component.

Step #10. Check Your Survey Form

tutuploadsStep_9._Check_your_form_and_fine-tune_the_view..png

At this point, your form will look similar to the one on the image above.

You can change the locations of the descriptions by clicking the WEBFORM tab and editing each item and making different configuration selections.

  • Order the form fields the way you like and all the questions and fields correct. You can use drag and drop to move form elements to different positions.

Next, let's configure the E-Mail Option.

tutuploadsStep_10.__Configure_the_E-Mail_options..png

  • Go back to the WEBFORM tab > E-mails tab.
  • Fill in an e-mail address. 
  • Click Add.

Good job. You just set the email address to receive an email when the form is submitted. If you wish, you can add multiple e-mail addresses.

tutuploadsmedia_1317152290926.png

There are lots of choices to make. Be sure you check every one of them so they are correct for your form. Be sure to save the changes.

Let's move on to the last step.

Step #11. Configure the Form Settings

tutuploadsStep_11._Configure_the_Form_Settings.png

  • From the WEBFORM tab click the Form settings sub-tab at the top of the page.
  • Check and modify settings as needed. 
  • Save your changes.

Step #12. Test Your Form

  • Now publish your form exactly like you would publish any other content item on your site.
  • Log out of your site.
  • Fill in our survey form as an anonymous user.
  • Now log in back to your site.

The Results tab

  • Click the Results tab.

Click the view link

  • On the next screen, click the view link.

The Submission screen

You will see the Submission #... screen, resembling the one, displayed on the image above. Job done! If you wish, you can also run a test as a logged in user.

Apr 04 2018
Apr 04
Check Out the New Page Builder in Drupal 8.5!

Earlier on the OSTraining blog, Steve Burge gave an introduction to the new Layout Builder in Drupal 8.

Many users have been eagerly waiting for this module and it was released in version 8.5.

In this tutorial, you will take a further look at how to work with this module. You will see how to use the Layout Builder to configure content types and nodes.

This module is one of the new major changes. I feel strongly it will really improve the usability of Drupal. Let’s try it out!

Step #1. Enable the Layout Builder Module

  • Click Extend.
  • Scroll down to the CORE (EXPERIMENTAL) section.
  • Check the Layout Builder module.
  • Click Install.

Click Install

  • The Layout Discovery module will be enabled as a requirement.
  • Click Continue.

Click Continue

Step #2. Create Content

For the purpose of this tutorial, I’m going to generate five articles with the Devel module. This is a handy module that will help you with development tasks.

  • Install the Devel module.
  • Enable both the Devel and Devel Generate parts of the plugin.
  • Click Install.

Click Install

  • Click Configuration > Generate content in order to generate five articles.
  • Click Generate.

Click Generate

  • Click Content and you’ll see the generated articles.

Step #3. Configure the Layout of the Article Content Type

  • Click Structure > Content types.
  • To the right of the Article content type click the dropdown list.
  • Choose Manage display.

Choose Manage display

You’ll be presented with a different interface than the one you’re used to.

  • Click the Manage layout button.

Click Manage layout

This drag-and-drop interface will allow you to configure the layout of all nodes of the Content type Article. Please notice that the layout capabilities refer to the Content itself (i.e. the Content region).

This drag-and-drop interface will allow you to configure the layout of all nodes

  • Click the Add Section link at the top.

You will see a slide menu on the right with different layout options.

  • Choose one of them, for example, the 3 “equal” columns layout.

Choose 3 equal columns

You’ll see the newly created layout surrounded by blue dashed lines:

You’ll see the newly created layout surrounded by blue dashed lines

  • You can click on each of the Add Block links to place Drupal’s default and custom blocks within this new layout regions, for example, within a block specifying the language of the content:

You can click on each of the Add Block links

  • Drag and drop each of the fields of the Content type inside each one of the layout regions.
  • For example, place the image on the left column, the body text on the middle column, the tags on the right column and the comments in the bottom part (footer) of this particular section:

Place the image on the left column, the body text on the middle column, the tags on the right column and the comments in the bottom part

  • When you’re finished with the configuration for your desired layout, scroll to the top of the page.
  • Click Save Layout.
  • If you leave some part empty, it won’t display in the node:

If you leave some part empty, it won’t display in the node

  • All your articles have the same layout now. Take a look at them!

All your articles have the same layout now

All your articles have the same layout now

Step #4 - Configure the layout of a single node

  • Once again, click Structure > Content types.
  • Choose Manage display from the drop-down of the article content type.
  • Check the Allow each content item to have its layout customized checkbox.
  • Click Save.

Click Save

  • Click Content.
  • Choose one of your articles.
  • You’ll see a new tab above the content called Layout: 

You’ll see a new tab above the content called Layout

  • Click this tab. You’ll be presented with the same interface.

The process is the same as the one I described above. The only difference is that you’re configuring the layout just for this article. You can add blocks or even an additional image the same way as explained before.

ou can add blocks or even an additional image

This layout capabilities make Drupal even more accessible for site builders, who don’t know how to override templates or just to speed up the development time.

As already stated, this module is in the experimental phase. Please, don’t use it in your production sites yet. Play with it and send your feedback to Drupal.org if you find any bugs.

I hope you liked reading this tutorial. Thank you and please leave your comments below!

Additional Reading

What's Next?

If you want to learn more Drupal, join OSTraining now. You'll get access to a vast library of Drupal training videos, plus the best-selling"Drupal 8 Explained" book!


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
Mar 29 2018
Mar 29
Theming and Layouts in Drupal 8

One of the most frequently asked questions among our Drupal students is "How do you control the look and feel of Drupal sites?"

If you really would like to be in control of layouts, you need to learn theming.

We've created a "Drupal 8 Theming and Layout" video class to help you. In this post, you will take a look at the class and what you can learn while watching the lessons.

This is not a course for Drupal beginners. Before starting it, you should know how to:

  • Navigate the administration area to manage essential tasks.
  • Set up a basic Drupal site.
  • Install and configure modules.
  • Set up content types with fields and manage their display.

In the first few videos, you will learn how to set up your Drupal 8 learning environment. This is really important.

You are encouraged to not just watch these videos, but to do all the tasks along with the class instructor. It will really solidify the training for you.

  • Module 1 will introduce you to Drupal theming fundamentals. You will create a theme from a clean slate, and we'll provide some great resources to help you along the way.
  • In Module 2 you will work with customizing a theme using template and function overrides.
  • In Module 3 we will introduce you to sub-theming and explore some great base themes at Drupal.org.
  • In Module 4 you will take a design mockup provided by our graphic designer and create an entire Drupal theme to match it. This is really at the heart of this course.
  • In Module 5 we will give you some homework, to help you solidify all the training.

Since this is a video course, we encourage you to use the Pause and Rewind buttons. There will be times when you may want to pause the video, to read something or finish the task before you move on.

There might also be a time when you would just need to see or hear a concept over again before you continue. This is very easy to do and that's the best part of the video training.

We do encourage you not only to watch but practice. We've structured each section of this class with an introduction to the presentation, a demonstration and then a setup task to be done.

You will learn more and it will stay with you longer if you do the tasks.

Are you ready for the "Drupal 8 Layout and Theming" class? Sign up now.


About the author

Born from Ukrainian mother and Russian father, Alex migrated to the United Kingdom in 1999. He is a self-taught Microsoft Certified Professional. He enjoys learning content management systems and helping web site developers make the most of them.
Mar 26 2018
Mar 26
 Log Into Drupal Without the Login Block

This is actually quite a common question from our students. They start building their Drupal site. Then they go to work with their blocks or menus.

Then they accidentally disable the "Log in" menu link. There is no "Log in" link displayed on the site anymore. Neither for them nor for their visitors.

In this short tip, you will learn how to login to your Drupal admin page in such situation. 

The image below shows the normal Drupal login link. When you first install Drupal it usually appears in the top right-hand corner of your site.

login link displayed

For example, you may accidentally disable it in your Drupal admin dashboard:

login menu link disabled

Then, the "Log in" link disappears.

login link gone

How can you now log in back to your site and get the "Log in" link back to its place?

So here's what you do. Use one of these URLs:

Visit one of those URLs and you should see a login screen like the one below:

login block Once you are back to your admin panel, simply enable the menu link, and you are all set.
Mar 15 2018
Mar 15
How to Change the Default Text Strings in Drupal 8

Drupal 8.5 is available now, and we covered some of the key new features.

However, some smaller, but very useful features arrived with 8.5. For example, it's now much easier to translate the default text.

A few years ago, we explained how to translate the default text in Drupal 7. The process was painful! Let me show you how much easier it is in Drupal 8.5.

First, go to the "Extend" tab and enable the "Interface Translation" and "Language" module:

enable multilingual modules 

  • Next, go to "Configuration", then "Languages".
  • Click "Edit" next to "English" (or whatever your site's default language is).
  • Select the box, "Enable interface translation to English".
  • Click "Save language".

enable interface translation

  • Next, go to "Configuration", then "User interface translation".
  • You can search for and translate language strings directly from this screen. In this example, I'm changing "Weight" to "Gravity".
  • Click "Save translations".

string translation

That's really all there is to the process. It's much, much easier than in Drupal 7. Here is my translated text live on the site:

translated string


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.
Mar 12 2018
Mar 12
How to Embed Buy Now Stripe Button in Drupal

Would you like to avoid a hassle of processing and keeping your online customers' card details? Stripe is a global online payment gateway you can quickly start using just for that.

In this tutorial, you will learn how to easily embed the "Buy Now" button from Stripe into your Drupal content. You will be able to integrate the Stripe Checkout even if you don't know how to write code.

Stripe collects the credit card’s information from your customers and sends a token to the browser, which redirects it to your web site’s server.

With this information, your server is able to make a request to create a charge and complete the payment.

Your server won’t get the credit card details at any time. That’s the reason why this method is so secure.

The Stripe Checkout module will allow you to embed a button, that integrates your site with the Stripe platform (more precisely with your Stripe account).

The module complies with the CSP (Content Security Policy) standard.

Note: before starting this tutorial, please make sure:

  1. You signed up for a free Stripe account.
  2. You are running your Stripe account in the Test mode.

Let’s start!

Step #1. Install the Required Modules

Install it using Composer

  • Enable the "Stripe Licensing" module.
  • Click Install.

You will be prompted to enable two additional modules: the "Stripe API" and the "Key".

  • Check the Stripe Licensing check box.

Check the Stripe Licensing check box

  • Click Continue.

Click Continue

Step #2. Get the Stripe API Keys

Click the API menu item

  • Copy from your Stipe account the following two API keys:
    • The Publishable key.
    • The Secret key.

Copy the API keys from your Stripe account

  • Back in your Drupal site, click Configuration > Web Services > Stripe API.

Click Configuration then Web Services then Stripe API

  • Click on the "create a new key" link under the Stripe Public Key (test) section.

Click on create a new key

  • Enter a proper title.
  • Paste the Publishable key that you copied from your Stripe dashboard.
  • Leave the defaults intact.
  • Click Save.

Click Save

  • Click Add Key.
  • Repeat the same process for the Secret key.

Repeat the same step for the Secret Key

  • Click Configuration > Stripe API once again.
  • Doublecheck to make sure that you assigned the keys properly.

Doublecheck to make sure that you assigned the keys properly

Excellent! You just finished configuring the Stripe "Buy Now" button on your Drupal website. Next, you will learn how to add this button to your Drupal content.

Step #3. Create Your Content with the Stripe Button

  • Click Structure > Content types > Add content type in order to create a “T-shirt” content type.
  • Add the following fields:
    • Size (field type List, Allowed number of values > 1).
    • Color (field type List, Allowed number of values > 1).
    • Price (field type Stripe Checkout, Allowed number of values > 1).
    • Image (field type Image, Allowed number of values > 1).
    • Leave the defaults intact.
    • Click Save field settings.

Click Save field settings

  • Rearrange the display of the fields.
  • Click Save.

Click Save

  • Click Content > Add content > T-shirt.
  • Add your content.
  • Click Save.

Click Save

  • You will see your newly created node with the blue "Buy Now" button underneath.

You will see your newly created node with a blue button on the bottom

  • Click that button.
  • Fill the Stripe form with this data:
    • Credit Card number: 4242 4242 4242 4242.
    • Date: any future date.
    • CVV: any three digits.
    • ZIP Code: any five digits.
  • Click Pay.

Click Pay

  • You’ll see a green confirmation button.
  • Now go to your Stripe dashboard and check your payments.

Now go to your Stripe dashboard and check your payments

Congratulations! You’ve configured the Stripe Checkout module correctly. Thanks for reading!

Additional Reading

Join OSTraining to learn more about how to build great websites with Drupal. Find a video class appropriate to your Drupal skills and bring them up to the next level by watching and practicing.


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
Mar 06 2018
Mar 06
unique look to google maps

Google Maps don't look appealing or pretty by default when you embed them in your Drupal content. Nor do they always nicely coordinate with your site look and feel.

What if you found a way to give them a custom design? For example - your own color? In this tutorial, you will learn how to give your Drupal Google Maps a custom style with the Styled Google Map contrib module.

Step #1. Download the Required Modules

For this example, you’ll have to download and enable 3 Modules.

  • Styled Google Map.
  • Geofield Map.
  • Geofield (this is a dependency for the other two modules).

Use your preferred method to download the modules. I’m using the Composer since it will automatically take care of all the needed dependencies.

Drupal Google Maps Composer output 1

Drupal Google Maps Composer output 2

Drupal Google Maps Composer output3

Step #2. Configure the Styled Google Map Settings

  • Click Configuration > Web services > Styled Google Map settings page.
  • Click the link above the blue button.
  • Get yourAPI Key from Google.

Get your Drupal Google Maps API Key

  • Scroll down until you see the blue Get a Key button and click on it.
  • Create a project name.
  • Click Next.

Create a project name

  • Copy the generated key.
  • Click Done.

Click Done for Drupal Google Maps

  • Paste the key in your Drupal site.
  • Click Save configuration.

Click Save configuration

Step #3. Create a Content Type with a Location

  • Click Structure > Content types > Add content type.
  • Give your content type a proper name.
  • Click Save.
  • Add fields.

Click Save and add fields

  • Click the blue Add field button.
  • Choose Geofield.
  • Add a proper label.
  • Click Save and continue.

Click Save and continue

  • Leave the default number of values.
  • Click Save field settings.

Notice that you can choose here multipĺe (or unlimited) values if you want to show more than one marker in the same map (for example a fast food chain with multiple locations).

Notice that you can choose here multipĺe (or unlimited) values

Step #4. Configure the Content Type Display

  • Click Structure > Content types > Location > Manage display.
  • Look for your Geofield field.
  • Change the format to Styled Google Map.
  • There’s a cogwheel on the right, it handles various configuration options for the map (we’ll come back here later).
  • Click Save.

Click Save

Step #5. Configure the Form Display

  • Click Structure > Content types > Location > Manage form display.
  • Look for your Geofield field.
  • Change the widget to Geofield Map.
  • Click Save.

geofield map

Step #6. Create a Node

  • Create a node by the Location type.
  • The Geofield Map widget you chose in the last step will help you to position the marker with an address (and not with latitude and longitude values).
  • Click Save.

Click Save

Step #7. Configure The Map Design

There are lots of map designs on this site.

  • Choose your preferred one.
  • Copy the JavaScript code on the left.

Copy the JavaScript code on the left

  • Click Structure > Content types > Location > Manage display.
  • Click the cogwheel on the right of your Geofield field. You’ll find a lot of configuration options. Feel free to explore and experiment with them.
  • Scroll down and select MAP STYLE.
  • Paste the code you selected into the textbox.

Paste the code you selected into the textbox

  • Click Update.
  • Click Save.

Take a look at your node, the map has now a custom look!

Take a look at your node, the map has now a custom look!

If you want to customize your maps even further and with your own colors, take a look at this style wizard application in Github, it helps you generate the JSON code required to style the map.

Take a look at this style wizard application in Github

Additional Reading: 

Would you like to know more about how to build great websites with Drupal 8? Sign up for our Video Club and watch its easy to follow lessons at your convenience.


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
Feb 27 2018
Feb 27
How to Create a Responsive Off-canvas Menu in Drupal 8

An off-canvas menu is the best way to offer a pleasant experience to those visiting your site from mobile devices. It is rapidly becoming a web design industry standard for any website.

In this tutorial, you will learn how to create and configure an off-canvas menu with the "Responsive and off canvas menu" Drupal 8 module.

This module relies on a couple of dependency libraries. They include the functionality of swipe gestures to open and close the menu on mobile screens.

They also provide the Superfish functionality when your site visitor hovers over the menu items.

In this tutorial, you will learn how to hide the default Drupal main menu and use an off-canvas menu instead.

Let’s start!

Step #1. Download the Module and Its Dependencies

  • Use your preferred method to download the module.

install via composer

  • Download the dependencies to the /libraries folder inside your root folder (if you don’t have the /libraries folder yet, create it manually). Download the required libraries by clicking these links:
  • Unzip and rename the /libraries folder. You should have the following directory structure now:

unzipped library folder

  • Enable the module.

enable the module

Step #2. Configure the Menu Module

  • Click Configuration > User interface > Responsive menu.
  • You’ll be presented with following configuration options: 
  1. The menu that will be rendered by the module.
  2. The number of levels (depth) of the menu. I’ll leave the default 9.
  3. The machine name of the menu which will be rendered in the off-canvas menu. To find out the machine name of the main navigation menu, for example, click Structure > Menus > Main Navigation. You’ll see the machine name next to the title.
  4. The type of wrapper which will contain the menu block. You can choose between nav or div.
  5. Use a breakpoint. Uncheck this option, since we want our off-canvas menu to apply to all screen sizes.
  6. Use the default module’s CSS, i.e. you can apply your own styles if you uncheck this option.
  7. Keyboard accessibility navigation.
  8. Add the off-canvas menu on the admin theme (leave unchecked).
  9. THEME COMPATIBILITY. this option is not required when working with Bartik (for example), but you will need to click this checkbox if you’re working with a Bootstrap based theme.
  10. Menu swipe and appearance options.
  11. Superfish options.
  12. Ad swipe gestures (for cell phones and tablets).
  • Choose your preferred options.
  • Click Save configuration.

select options click save configuration

Step #3. Clear the Site Cache

  • Click Configuration > Development > Performance.
  • Press the Clear all caches button.
  • Click Save configuration.

clear all cache

Step #4. Check the Menu Structure

  • Click Structure > Menus > Main navigation.
  • Review the structure of the main navigation menu. Notice in this example, menu Item 3 has a depth of 3, while menu Item 1 has a depth of 2.
  • Add/edit the links to your menu if necessary.

add edit links as your wish

Step #5. Place the “Hamburger" Icon

It’s time to place the “hamburger” menu icon (preferably) into the “menu” section of the site. At the same time, we will be disabling the default Main navigation block so that we don’t have the same menu twice.

  • Click Structure > Block layout.
  • Go to the Primary menu region.
  • Click the drop-down arrow beside the Configure.
  • Select Disable

07 select disable

  • Click the Place block button.
  • Type the word “menu” in the search box.
  • Choose Responsive menu mobile icon by clicking the Place block button next to it.
  • Notice that there’s another block called Horizontal menu. This is the module’s default menu for larger screen sizes. Remember, we deactivated this option in Step #2 (numeral 5), because we only want an off-canvas menu for all screen sizes. Feel free to play with these options!

place block

add custom block

  • Uncheck Display title.
  • Click Save block.

uncheck display title

  • Go to your Home page and you should see your newly added menu.

visit your home page

  • Click on the "hamburger" icon.
  • Navigate through the whole menu structure with the arrows next to each menu item to check everything works as desired.

12 click the hamburger icon

Congratulations! You just learned how to add an off-canvas menu to your Drupal 8 site. No doubt, those visiting your site from their mobile devices will enjoy and appreciate it. 

Thanks for reading!

Additional Reading

Drupal is an amazing tool for creating websites and applications. If you want to learn more Drupal, join OSTraining now. You'll get access to a vast library of Drupal training videos, plus the best-selling"Drupal 8 Explained" book!


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
Feb 22 2018
Feb 22
How to Use the New Media Features in Drupal 8.4

Since the release of Drupal 8.4 in late 2017, Drupal has contained new media handling features.

For many years, Drupal has shipped with almost no media handling. This was the most commonly requested feature whenever we did Drupal training.

In this tutorial, we'll walk you through how to use Drupal's new media options. We'll update this post as soon as Drupal 8.5 is available.

Step #1. Install a Contrib Module

The core of Drupal 8.4's media features is a new "Media" module. This module is available, but hidden by default.

To active the Media module you need to install and activate a contrib module for the media type you want to use. At the moment, there are ten modules that are ready:

  1. Document
  2. Image
  3. Audio
  4. Slideshow
  5. Video embed field
  6. Twitter
  7. Instagram
  8. SlideShare
  9. Facebook
  10. Inline entity form

If you want a complete, updated list of Media modules that are ready for 8.4, bookmark this page.

After installing and enabling a contrib module, Drupal will ask you to enable the Media module too. The Media module is hidden by default and will only become available when enabling contrib modules.

Step #2. Create the Media type

Now, we're going to create the entity that will store our tweets.

  • Go to Structure > Media types.
  • Click "Add media type".

twitter media type

One of the more advanced features of the Media module is field mapping. If you want to, you can extract multiple types of data from the tweet and store them in different fields.

field mapping

  • Finish saving your new media type.
  • Click "Manage display" for "Twitter".

manage display

  • Change the display of "Tweet Url" to "Twitter embed".

twitter embed manage display

Step #3. Create the Fields

Next, we're going to add our new media type to a content type.

  • Go to Structure > Content types.
  • Create a new field for a content type, choosing the "Media" field type:

add drupal media field

  • Click through and choose "Twitter" in the "Bundles" area.
  • Don't check "Create referenced entities if they don't already exist" because that led to errors in my testing. 

media bundles

  • After saving your field, click "Manage display".
  • Change the display for your new field to "Rendered entity":

manage display twitter

Step #4. Add the Media

At this stage of Drupal 8's media journey, we will need to create the media items before we use them.

  • Go to Content > Media.
  • Click "Add media".
  • Choose "Twitter".

drupal84tweet

  • Save the tweet and the next image shows what you will see.
  • If you don't like the display, go back to Structure > Media types > Manage display and tweak the options.

drupal84 tweet

#5. Use the Media

Finally, let use our new created media inside a node:

  • Go to Content > Add content.
  • Create new content. 
  • You'll be able to search for your existing tweet using an autocomplete field:

tweet publishing drupal

  • Save your content type, and there's the embedded tweet:

tweet embedded drupal

If you want to learn more Drupal, join OSTraining now. You'll get access to a vast library of Drupal training videos, plus the best-selling"Drupal 8 Explained" book!


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.
Feb 22 2018
Feb 22
Check Out the New Page Builder in Drupal 8.5!

Drupal 8.5 is now available!

In this blog post, I'll give you an introduction to three of the main new features you can start using in 8.5.

New Feature #1. Layout Builder

To me, the most exciting feature in Drupal 8.5 is the Layout Builder. No matter what you personally think about Page Builders, vast sections of the website-building world loves them. You can talk about other Drupal features headless frontends and continuous integration tools all day, but drag-and-drop Page Builders is what many end-users care about.

In Drupal terms, the best way to think about this could be, "Panels is now in core". 

layout builders

  • After enabling these modules, go to "Structure" then "Manage display".
  • You'll see that the fields have been replaced by a "Manage layout" button.

manage display Drupal 8.5

  • After clicking this button, you'll be taken to the front of your site. Here you'll see a Panels-style page builder tool. You can drag-and-drop fields and other items between different regions of the page.

drupal field layout

  • If you click the "Add Section" button you'll have a choice of layouts in the right sidebar:

click add section

  • Inside each section of the layout, you can choose from a wide variety of Drupal items to place on the page. Did I mention that this was "Panel in core"? In fact, at first glance, this appears to be far better. The user interface is certainly a big improvement over Panels.

drupal 85 layout builder

New Feature #2: Settings Tray

This is an experimental module that has gone stable in Drupal 8.5.

After enabling the module, click the blue "Edit" button in the top-left corner of the admin toolbar.

enable settings tray

Now you'll see a "Quick edit" link next to all your blocks. In previous versions, you only had the "Configure block" link.

quick edit drupal block

If you click "Quick edit" you'll see the block configuration options in the sidebar of your site. This is the "Settings Tray" from the module title. This should make it easier to configure blocks without needing two switch back-and-forth between multiple pages.

settings tray module edit

New Feature #3: The Media module

The Media module landed in the core 6 months ago with Drupal 8.4. However, in 8.4 the Media module was completely hidden. In 8.5, the Media module is stable and visible but it is not enabled by default.

You can click here for a full overview of how to use the new Media module, but here's a short version of how Media works in 8.5:

  • After enabling the Media module, go to Structure, then "Media types".
  • You'll see four default media types: Audio, File, Image, and Video.

media types screen

  • When you add a new field, there will be a "Media" option, alongside the old "Image" and "File" types:

new media field

  • When you select the settings for each field, you can choose which media types are acceptable:

media type

The usability of this new Media workflow is not perfect. When a content creator sees a Media field, they're going to be sent to a new screen to add their media. After navigating through the other screen, they can then come back here to choose their newly uploaded files.

create new media

At the moment, there's no browseable media library. Users will need to search using the file's title:

choosing drupal media

All in all, the Media in 8.5 shows progress, but has real limitations. The old Image and File field types are still the default option and I suspect most sites will continue to use the old field types.

Honestly, the non-default status, plus some usability issues, left me underwhelmed. We may be looking at Drupal 8.6 before use of the Media module really starts to take off.

Summary

Drupal 8.5 is shaping up to be an exciting release. I didn't even touch on a host of other improvements such as the Content Moderation features finally going stable, and BigPipe being enabled by default.

Did you see any features that you're really looking forward to in 8.5?


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.
Jan 29 2018
Jan 29
Give Your Drupal Articles More Visual Appeal with Boxout

A boxout is a design element used mainly in magazines to enclose related information to the main article while retaining some type of connection. You can use it to add extra links related to your content or a small bio.

The "Boxout" contrib module helps you add this design element to your content directly in CKEditor. In this tutorial, you will learn how to do just that. Let’s start!

Step #1. Install the Module

  • The Boxout module has no additional dependencies. Use your preferred method to install it.

install boxout

boxout module installed

Step #2. Add the Boxout Button to Your CKEditor

  • Click Configuration > Content authoring > Text formats and editors.
  • Select the Basic HTML CKEditor.
  • Click Configure.

add boxout button to ckeditor

  • Make sure the Boxout (insert) button is available in your Active toolbar.

make boxout button available to ckeditor

  • Scroll down and make sure you see the <div class="boxout default-plain"> in the Allowed HTML tags.
  • Click Save configuration.

click save configuration

Step #3. Write Your Content

  • Click Content > Create Content > Article.
  • Add title and body for your article.
  • Position the cursor where you want the boxout to start and click the Boxout button. You’ll see a popup window.
  • Add a title and related content to your article.
  • Click the Insert button.

click the insert button

  • Finally, add an image.
  • Click Save.

add image click save

You’ll see your article with its corresponding boxout.

you will see article with boxout

  • Would you prefer another look for your boxout? No problem! Use the .boxout.default class to polish your CSS and change font, color, border, background or width.

change boxout style

I hope you enjoyed reading this tutorial.


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
Jan 04 2018
Jan 04
Select Embeddable Media Assets in Drupal 8 with Entity Browser

If you already learned how to embed a media asset into CKEditor in this tutorial, you’d probably noticed that the media asset selection occurs through an autocomplete field.

This doesn't really help those working with their media assets. Nobody remembers every single name of every single asset to embed. Good news is there are a few modules in Drupal 8, which can help you enjoy your media browsing task. 

In this tutorial, you’re going to learn how to configure the Entity Browser Module, in order to quickly find your media assets and easily embed them in your text editor.

The process of creating an Entity Browser is divided into three main parts.

  1. You have to create a view to being used by the Entity Browser.
  2. You have to create the actual Entity Browser Item to contain that view.
  3. You have to configure Entity Embed to use the configured Entity Browser you created in the second part.

With this procedure in mind, let’s start!

Step #1. Install the required modules

You will need to install only two additional modules for this tutorial:

Use the method you prefer and you’re good to go! I am using Composer to download the modules. I then enable them with Drush.

I am using composer

Step #2. Create the Media assets View

  • Click Structure > Views > Add new view.
  • Give your view a proper name.
  • Show > Media > of type > All > sorted by > Media Name.
  • Leave the Page Settings and Block Settings unchecked.
  • Click Save and edit.

click save and edit

  • In the Displays section of Views UI click the +Add button.
  • Select Entity Browser (this is mandatory).

select entity browser

  •  Click Add in the FIELDS section and add two additional fields:

click add in the fields

  • Search for Thumbnail and select it.

select thumbnail 

  • Type in browser in the Search box.
  • Select the Entity browser bulk select form field.
  • Click Add and configure fields.

click add and configure fields

  • Leave the configuration options of the Entity browser bulk select form field untouched by clicking Apply and continue. 

Note: The Entity browser bulk select form is a mandatory field. It is just a checkbox that will be used to select a media asset within the Media browser and embed it in the editor.

Your Media Browser won’t work if you don’t include this field in the view, so pay special attention to this.

 configure field media entity

  • For the thumbnail's style choose Medium (220x220).
  • Click Apply.

choose medium click apply

  • Take a look at the Preview now and you will something like this:

the preview you will see

If you wish, you can give the View another format. It will look a little bit clearer, for example with a table. 

  • Finally, click Save the View.

You have achieved the first part of the procedure. 

Step #3. Create the Entity Browser Item

  • Click Configuration > Content authoring > Entity browsers.
  • Click Add Entity browser.
  • Give your browser a proper name.
  • Choose either IFrame or Standalone Form in the Display Plugin option. There’s a compatibility issue between the Modal display and Entity Embed, so it won’t work if you leave the Modal display.
  • Click Next. 

11 click next 

  • Check the Auto open entity browser checkbox.
  • Click Next.

check auto open entity browser click next

  • Click again Next twice until you land on the Widgets screen.
  • Click the Add widget plugin drop-down.
  • Select Upload.

This will provide you an upload button for all kinds of files including images, text files, pdf files, etc. You will even have even another option if you would have configured an Image Media Bundle as explained in this tutorial.

  • Choose View in the Add widget plugin.
  • Select the View display you configured in Step #2.
  • Click Finish.

click finish

 You have achieved the second part of the procedure. Almost there. 

Step #4. Attach the Entity Browser Item to the Entity Embed Button in Your Editor 

  • Click Configuration > Content authoring > Text editor embed buttons.
  • Click Edit on your Media embed button (once again - review this tutorial first).
  • You’ll see a new Entity browser option with a drop-down.
  • Choose the browser item you configured in the previous step.
  • Click Save.

 click save

That was the third part of the procedure. Now you have to test your browser to see if everything works as expected. 

Step #5. Create content to test the browser

  • Click Content > Add Content > Article.
  • Click the Embed button in your editor.
  • You’ll see the media browser.
  • Check the video you want to embed.
  • Click Select entities.

click select entities

  • Choose how do you want your media asset (in this case a video) to be displayed.
  • Click Embed.

click embed

Time to relax and enjoy your newly acquired Drupal knowledge. Leave us your comments below. Thanks for reading!

If you want to learn more Drupal, join OSTraining now. You'll get access to a vast library of Drupal training videos, plus the best-selling"Drupal 8 Explained" book!


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.

Pages

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web