Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough
Sep 10 2020
Sep 10

With the Drupal Book module, it is possible to create collections of related pieces of documents presented in a hierarchy. This format is suitable for handbooks and tutorials, for example.

Notice: This module is not for creating ebooks.

The Book module comes by default (disabled) with Drupal core modules, so there is no need to download or install anything additional on your system.

Keep reading to learn how to use this module!

How to use the Drupal book module

Step #1. - Enable the Module

  • Click Extend.
  • Scroll down and enable the Book module.
  • Click Install.

How to use the Drupal book module

Step #2. - The Book Content Type

  • Click Structure > Content types.

There is a new content type in addition to the 2 Drupal default content types called the Book page Content type.

  • Click Manage fields.

How to use the Drupal book module

Add an image field with the default settings.

How to use the Drupal book module

  • Add a link field.
  • Give it proper title.
  • Click Save and continue.

How to use the Drupal book module

  • Set the allowed number of values to unlimited.
  • Click Save field settings.

How to use the Drupal book module

  • Click Manage display.
  • Hide the image label.
  • Rearrange the fields.
  • Click Save.

How to use the Drupal book module

Step #3. - The Book Outline

  • Click Structure > Books.

How to use the Drupal book module

You will be presented with a list of book outlines. At the moment this list is empty, since we haven’t created any book yet.

  • Click the Settings tab.

You have two settings here:

  1. the content types allowed in book outlines (you can select multiple options here)
  2. the default content type (one value allowed) added when you click the “Add page” link
  • Leave default values
  • Click Save configuration.

How to use the Drupal book module

Step #4. - Create a Book

  • Click Content > Add content > Book page
  • Enter a proper title and body text.
  • Add a proper image.
  • Click Book Outline on the right column.
  • Select Create a new book from the dropdown.
  • Click Save.

How to use the Drupal book module

How to use the Drupal book module

When seeing the published node, you will notice an extra tab on the top called Outline.

How to use the Drupal book module

You can click here at any time and rearrange the outline of this particular node within the book hierarchy. This is also possible through the Books outline interface we saw on the step before.

How to use the Drupal book module

Since we have created only the main page of our book, you will not be able to configure anything here.

  • Click Update Book outline.
  • Scroll down to the bottom of the book page.
  • Click Add child page

How to use the Drupal book module

This will take you directly to the Book page edit screen.

  • Add proper content
  • Click Save.
  • Change the weight to -15 (if you will have more than 16 child pages, you will have a problem to place the last one at the end) as a security measure.

As a matter of fact, this is more a quirk, since you can rearrange book pages through a drag and drop interface within the book outline.

How to use the Drupal book module

  • Click Save.

How to use the Drupal book module

Let’s add some more pages to “modelate” the structure detailed on the image. Use the column on the right of each node you edit.

How to use the Drupal book module

How to use the Drupal book module

When you have finished, take a look at the published nodes.

How to use the Drupal book module

Nodes with child pages, will display a list of links containing them. Furthermore you have on the bottom, three additional links. Two of them point to the previous and next articles according to the sequence on the hierarchy.

The link labeled “Up” takes you to the corresponding parent page, that is, one level up.

To check the finished outline,

  • Click Structure > Books > Edit order and titles.

You can rearrange the structure and order of your book here.

  • Click Save book pages after you are finished editing.

How to use the Drupal book module

The book navigation links can be styled through the css class .book-navigation or through its particular id.

How to use the Drupal book module

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.

How to Display Flickr Images on Your Drupal 8 Site

Jan 31 2019
Jan 31

How to Pin Images in Drupal 8

Jan 30 2019
Jan 30

How to Rewrite the Output of Views Fields in Drupal

Jan 23 2019
Jan 23

How to Create a Voting System in Drupal 8

Jan 20 2019
Jan 20

How to Create CSS and Javascript Animations in Drupal 8

Jan 20 2019
Jan 20

How to Create a Contact Form in Drupal 8

Jan 20 2019
Jan 20

Build a Mega Menu with Ultimenu and Bootstrap in Drupal 8

Jan 18 2019
Jan 18

How to Use Google Webfonts in Your Drupal 8 Site

Nov 16 2018
Nov 16

Allow Your Users to Choose Drupal Entities with the Entity Browser Module

Nov 15 2018
Nov 15

How to Create Drupal Charts With Views

Nov 07 2018
Nov 07

How to Use the CKEditor Accordion in Drupal 8

Nov 01 2018
Nov 01

Dropdown Menus in Drupal 8 with the Superfish Module

Oct 29 2018
Oct 29

How to Import Data from CSV Files to Drupal with Content Import

Oct 23 2018
Oct 23

How to Create a Request Contact Form in Drupal 7

Oct 22 2018
Oct 22

How to Install CKEditor Plugins in Drupal 8

Oct 16 2018
Oct 16

How to Create a Search Box with a Sliding Effect in Drupal 8

Oct 15 2018
Oct 15

How to Use the Fullcalendar View Module in Drupal 8

Sep 20 2018
Sep 20
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 region. 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 node 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.
Jul 31 2018
Jul 31

The Superfish module allows you to create multi-level dropdown menus in Drupal 8. The module uses the JavaScript Superfish library to create and display a Superfish menu block for each menu available on your site.

With a few configuration options, you can control how it’ll behavior on mobile, turn multi-column menus, change the styling and more.

The module does come with a few styling options but you’ll have to style it yourself to match your theme. When you configure Superfish the first time the dropdown functionality will, however, it may not look good.

In this tutorial, you’ll learn how to install the module and how to configure it.

Let’s start!

Getting Started

It’s recommended that you install the module using Composer. This way Composer will automatically download the required library.

composer require drupal/superfish

Installing the Superfish module

If you don’t want to use Composer then you’ll need to manually download the library and extract it into the libraries directory in your Drupal site. View the Installation section on the project page for more details.

After downloading, enable the module either by clicking the module’s checkbox in the Extend Page or using Drush.

drush en superfish -y

Enabling the moduel with drush

Create Menu

As an example, let’s create a site with a 4 level menu. Superfish is capable of handling unlimited menu levels.

1. Click Structure, Menus and click the “Edit menu” button besides the “Main Navigation” menu.

2. Click the “Add link” button to add a menu item and make sure you mark the “Show as expanded” checkbox, if the menu item will contain children.

Creating the menu

3. Click the Save button each time you create a menu item and repeat the process for the whole menu structure. At the end you should have something like this:

Menu structure

Configure Superfish Menu Block

It’s time to get rid of the default menu block and place the Superfish menu block in one of Drupal’s regions.

1. Click Structure, “Block layout”. Look for the “Primary menu” region, click the dropdown button by the “Main Navigation” block and choose Remove. Confirm by clicking the blue Remove button.

Removing the main menu block

2. Now click “Place block” in the “Highlighted” region, type the word main in the search box and click “Place block” by the Superfish “Main navigation” block.

Inserting the Supefish block

Let’s review the settings one by one.

  • Uncheck the “Display title” option. This is Drupal’s default block configuration.
  • “Menu levels” option lets you configure the display of the menu and the number of levels permitted. Leave these options untouched.
  • “Block settings” area contains configuration about the menu appearance and its basic behavior.
  • “Menu Type” “Horizontal (double row)” shows the first and second level menu items in a horizontal display.
  • “Vertical (stack)” option is the right choice if you want to place the menu in one of the sidebars for example.
  • The style option lets you choose a menu with some predefined styles.
  • The “Slide in” effect option is there to configure the dropdown functionality of all submenus. You can install the jQuery Easing library (read the module’s documentation) if you want to have more options here.

Superfish settings

  • The “Superfish plugins” area deals with the display of the dropdown menus in the browser and on small screens, take a look at the possibilities, but generally speaking you won’t need to change this options, leave the default options. Pay attention to the Supersubs area, you can define here the width of your submenus.

Supefish plugins area

  • In the “Advanced Settings” area, you can control the animation speed of the Superfish menu, some hyperlink properties and you can also add custom CSS classes to the menu components.

Superfish advanced settings

Create Multi-column Menus

It is possible to create multi-column menus with the Superfish module, however you have to have a specific menu structure to achieve this.

Wrong menu structure

Right menu structure

Just check “Enable multi-column sub-menus” in order to use them.

Multi-column menus setting

Summary

The Superfish module allows you to build dropdown and multi-column menus and place them in your Drupal site in an easy way. But you’ll still need to spend some time styling the menus to match your theme.

Jorge Montoya

About Jorge Montoya

Jorge has been reading about Drupal and playing with it for almost 5 years. He likes it very much! He also likes to translate German and English documents into Spanish. He's lived in some places. Right now, he lives in the city of Medellín in his homeland Colombia.

Jun 26 2018
Jun 26

The Block field module lets you insert a Drupal block as a field on your content.

A Drupal theme is divided into regions and you can place blocks or your own custom blocks into these regions. You accomplish this task by dragging and ordering blocks in the “Block Layout” screen. That means you can append blocks before or after the main content of your content type. This “Block Layout” screen will soon be cluttered if you have multiple content types and/or multiple single nodes, each one with a different custom block. Block Layout Screen

However, there’s a way to insert a block (or many blocks) directly into your content as a field. Thus, you don’t have to place the block in the “Block Layout” screen, instead, you insert the block as a field on the node.

Blocks as fields

In this tutorial, we’re going to cover the usage of the Block field module. Let’s start!

Installing the Block Field module

The first thing you’ll need to do is install the Block field module.

Using Composer:

composer require drupal/block_field

This module has no dependencies, so just install it and you’re good to go.

Enable Block Field module

Add Block Field to Content Type

Let’s start by adding a block field to the Article content type.

1. Go to Structure, “Content types”, click “Manage fields” on the Article now, then click on “Add field”.

2. Select “Block (plugin)” under the reference category and give it a proper label.

Adding a block field

3. Leave the “Allowed number of values” set to 1 and click “Save field settings”.

On the edit screen, you can add a default value for this field. There’s also a list of all blocks, which you can select or deselect in order to make them available to this particular field (custom blocks will appear here too). Click “Save settings” once again.

Availbale Blocks

Test Block Field

Click Content, “Add Content”, Article in order to create a test article. Choose a system block (for example the “Powered by Drupal” block) from the drop-down and click Save.

Creating content with a block field

You’ll see the selected block inserted as a field in the content. This block won’t appear in the “Block Layout” screen.

Block field inside the content

You can also use this module to insert a view via a block inside the content. Edit the article and select the “Who’s online” block under the “Lists (Views)” category, click Save and you will see this block in your content.

Please note: you won’t be able to use Views contextual filters with the Block Field module.

Display a view via a block in a field

Summary

The Block Field module lets you insert not only block views into a field but all types of blocks, even custom blocks. This allows the creation of complex content types and/or nodes and provides great flexibility when building a site.

Jorge Montoya

About Jorge Montoya

Jorge has been reading about Drupal and playing with it for almost 5 years. He likes it very much! He also likes to translate German and English documents into Spanish. He's lived in some places. Right now, he lives in the city of Medellín in his homeland Colombia.

May 22 2018
May 22

If a user needs to create an account on a Drupal site, they go to the user registration page at “/user/register”. This page is the registration form on a Drupal site. You can customize it by adding or removing fields. But what if you want to have multiple registration pages?

Let’s say you have two different roles on your Drupal site and you need a separate form for each role. How would you build that?

You could handle all of this writing custom code but remember we’re using Drupal so means there’s a module that can handle this type of functionality and It’s called Multiple Registration.

The Multiple Registration module allows you to create individual registration forms base off a user role in Drupal. When you register on one of the forms, you’re automatically assigned the configured role.

2018-05-14_22-28-00

In this tutorial, you’ll learn how to use Multiple Registration to create individual registration forms.

Installing the module

Download and enable the module with your preferred method.

Composer:

composer require drupal/multiple_registration

Drush:

drush dl multiple_registration -y

After downloading the module, click Extend in the toolbar and install it.

Enabling the Multiple Registration module

Create User Roles

The Multiple Registration module requires additional roles in order to display a customized registration form to each role. For the purpose of this tutorial, we’ll work with the example of a high school site with a registration form for parents and another for students.

The form for parents will have a field requiring information about payment methods and a billing address, while the form for students won’t have those fields, but instead of that will have a select list to vote for a sports team.

Click People, Roles, “Add role” in order to create the “Parent” role.

Creating roles

Repeat the process and create a “Student” role. After you’ve created the roles click the dropdown arrow next to the Parent role and choose “Add own registration page”.

Adding own registration page

You’ll be prompted to create a path for the Registration page for this particular role. For example, you could add “user/parent” as the path.

Creating the registration page path

Create also a registration page for the other role (in this case “Student”).

Configure Registration Forms

Now that you’ve created the roles, it’s time to configure the registration form for each one.

1. Click Configuration, “Account Settings”, “Manage fields” and click the “Add field” button.

2. Choose the “List(text)” option and label it “Payment method”.

Enter in a few options into “Allowed values list” and set the “Allowed number of values” to Unlimited, since a parent can have more than one payment method and click “Save field settings”.

1|Cash
2|Credit Card
3|Check
4|Other

List key-value pairs

You’ll be redirected to the Edit tab, scroll down to the bottom of the page and check “Users with Parent role”. This configuration is provided by the Multiple Registration module. Click “Save settings”.

Assigning fields to a role

Add another text field for the Billing address and assign it to the Parent role.

Lastly, add a list field for a sports team election, this one will be limited to one choice. In the Edit screen of this field check “Users with Student role” and click “Save settings”.

Assigning fields to a role

Test New Registration Forms

Click “Log out” on the right of your screen and click “Log in” on the same spot once again. You will see two new tabs corresponding to the roles we’ve previously created.

If you can’t see the tabs then you’ll need to rebuild the site cache. Go to Configuration, Performance and click “Clear all caches”.

Check each form and make sure the fields were assigned properly to each form.

Checking the fields in each registration form

Summary

The Multiple Registration module provides the ability to create different registration forms without having to write code. Best of all, the role configured in the form is automatically assign when a user registers. This will save you time because you want have to manually assign a role.

Jorge Montoya

About Jorge Montoya

Jorge has been reading about Drupal and playing with it for almost 5 years. He likes it very much! He also likes to translate German and English documents into Spanish. He's lived in some places. Right now, he lives in the city of Medellín in his homeland Colombia.

May 08 2018
May 08

With the Toolbar Menu module, you can add as many menus as you need to the toolbar of your Drupal installation. By default, a Drupal 8 installation has 3 menu links in its toolbar. These are:

  1. Manage – Administration of the whole Drupal site
  2. Shortcuts – Links added by the admin to administrative pages used frequently
  3. User Name – Link to the profile page

This module works also with the Admin Toolbar module, which improves the default toolbar providing dropdown menus. In this tutorial, we’re going to cover the usage of the Toolbar Menu module.

What to learn how to change the color of the toolbar depending on which environment you’re on, i.e., dev or test? Then check out Differentiate Websites using Environment Indicator in Drupal 8.

Getting Started

First of all you need to download and install the module:

With Composer:

composer require drupal/toolbar_menu

With Drush:

drush dl toolbar_menu -y

After downloading, go to Extend, look for the module and enable it. The Toolbar Menu module requires the Toolbar and Breakpoint modules. These two modules come with Drupal core and should be enabled by default.

Enabling the module

Configuring the Toolbar Menu Module

To configure Toolbar Menu, click Configuration and in the “USER INTERFACE” section click “Toolbar Menu”

Configuration of Toolbar menu

Click the “Add toolbar menu element” button, you’ll be prompted to enter a label and select a menu from the dropdown list. For the purpose of this tutorial, I’m going to select the “Footer menu”. Leave the checkbox unchecked, that way, you’ll see the label “Extra” instead of the label “Footer” as a clickable menu in the Toolbar of your Drupal installation and click Save.

Configuration of Toolbar Menu

The new menu will appear in your Toolbar and if you click on it, it will display its menu links. In this case, there’s only one link pointing to the contact page.

Toolbar Menu module

Let’s add another link.

Adding Links to a Menu in the Toolbar

To add a link to the newly added menu in the Toolbar, click Structure, Menus. Locate the dropdown widget on the right of the Footer menu, click the dropdown arrow and select “Add link”.

Adding links to a menu

Click the “Add link” button to enter a title for this menu link, for example “Disclaimer” to create a link to the Disclaimer page of your website. You could even include external links here if that makes sense in your particular case.

Choosing a link for Toolbar Menu

This is an autocomplete field, just start typing the name of the node you want to link to, once found select it and click Save.

Check the “Extra” menu link in the Toolbar. It has the new link you just added.

Reviewing the new link

If you click this new link, it will redirect you to the Disclaimer page as expected.

Summary

Toolbar Menu improves the user experience of your Drupal site by allowing site administrators to insert menu links directly in the Drupal default toolbar. With this module you can add all kinds of custom and/or default Drupal menus and grant access to certain user roles to those menus with the help of Drupal’s permission system.

Jorge Montoya

About Jorge Montoya

Jorge has been reading about Drupal and playing with it for almost 5 years. He likes it very much! He also likes to translate German and English documents into Spanish. He's lived in some places. Right now, he lives in the city of Medellín in his homeland Colombia with his wife and son.

Apr 25 2018
Apr 25

The Linkit module allow site editors to work in a more comfortable way when linking to internal entities (i.e. content, users, taxonomy terms, files, comments, etc.) and when linking to external content as well.

The benefit of the module is that your editors won’t have to copy and paste URLs of content they’re linking to, instead the module provides an autocomplete field, which they can use to search for content.

Linkit works based on a profile system. You can choose as many or as few plugins (linking options) for each profile and then assign each profile to a particular text format. This provides an extra layer of granularity, because the linking permissions are granted in the text editor and not within Linkit. That way you can add multiple roles or just one role to a Linkit profile.Linkit profiles

In this tutorial, you’ll learn how to configure Linkit by creating a profile and adding a button to CKEditor.

Getting Started

Before we can begin, go download and install Linkit.

Using Composer:

composer require drupal/linkit

Or, Drush:

drush dl linkit -y

Configuring Linkit

To configure Linkit, click Configuration, “Linkit profiles” and then on click “Add profile”.

Linkit profiles

You’ll be presented with the configuration screen for the first profile. For the purpose of this tutorial, I’m going to create two profiles: one for admin users and one for editors. Begin creating the first Admin profile. Give it a proper name and a description. After that click the “Save and manage matchers” button.

Adding a Linkkit profile

The matchers are just the entity types you’re allowed to link to. Click “Add matcher”, select Content and click “Save and continue”.

Adding the "Content" matcher

The “Results description” textbox helps us build our results in the Linkit autocomplete field in a more organized way through the use of tokens. For example, you can add [node:title]/[node:author].

The “Restrict to selected bundles” options allows us to restrict the search results to a particular bundle. All bundles will be shown in the select results if none are checked.

The “Group by bundle” option lets you group the results in the Linkit search results by bundle. This is an advantage if you have lots of content because you can search in an organized way. I’m going to include unpublished nodes, since this is the “Admin” profile. After choosing all options click “Save changes”.

Configuration of the Result description

Let’s add another matcher for the admin profile. We’ll assume that the admin user is allowed to link to User profiles while the editor profile won’t.

Adding the User matcher

Configure the “Result description” ([user:created]/[user:account-name]) as shown in the image below and click “Save changes”.

Configuration of the User matcher

You have now two matchers in your Linkit profile. You could add all of them if you want to. Now it’s time to configure the link attributes. Click the “Manage attributes” tab on the right.

Link attributes

This functionality allows you to add additional attributes to the link. Click the “Add attribute” button and choose the Title attribute. Click “Save and continue.

Link attributes

Check the “Automatically populate title” option and click “Save changes” once again.

Edition of link attributes

You can add as many attributes to your links as you want. The procedure is exactly the same as with the matchers.

Add Linkit Button to Editor

Now that you have created a Linkit profile, it’s time to add the button to the editor. Click Configuration, “Text formats and editors”. Choose the Full HTML format and click Configure on the right.

Assigning Linkit profile to a Text format

Remove the default Link button from the active toolbar and add the Linkit button instead.

Assigning Linkit profile to a Text format

Your toolbar should look like this:

Assigning Linkit profile to a Text format

Scroll down a little bit and you’ll find a “Linkit” vertical tab. Click and choose the profile you configured in the last step.

Assigning Linkit profile to a Text format

Click the blue “Save configuration” button.

Now it’s time to create a node and add some links pointing to another article and to a user profile.

Test Linkit

Click Content, “Add content”, Article. Write a proper title for you article and write some text in the body section. Make sure the “Text format” of your current editor is set to “Full HTML”, otherwise you won’t be able to see the Linkit button.

Linkit test

Highlight some text and click the Linkit button. If you type in the letter a for example in the Linkit modal, you’ll see all items that match that letter. These items will be grouped by bundle (when it’s about content). Also you’ll see the users that match that particular letter. Notice that the search results are presented according to the “Result description” (with tokens) that you configured in the Matchers section.

Linkit modal window

Choose one of the options, the Title attribute will prepopulate itself with the node title. Highlight another word or phrase and link it to some user. Save the node. Test now that your links point to the right node/user.

Summary

The Linkit module will save your editors time because they will no longer have to manually find content and the URL to link to. Linkit allows them to find and create links directly from the editor without having to leave the page.

Jorge Montoya

About Jorge Montoya

Jorge has been reading about Drupal and playing with it for almost 5 years. He likes it very much! He also likes to translate German and English documents into Spanish. He's lived in some places. Right now, he lives in the city of Medellín in his homeland Colombia with his wife and son.

Apr 25 2018
Apr 25

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 17 2018
Apr 17

As a web developer, you probably build your sites first in a local environment (aka localhost), then you commit all your changes to a staging server (i.e. an online server to which only you or the development team has access) and if everything works fine in the staging server, you’ll commit these changes to a production or live server (that’s your online site).

However, you don’t have a way to differentiate between your local, your staging and your production environments apart from the address box of your browser, so it’s very easy to mix up everything and that could lead to complications. The worst case scenario is making changes directly to your live site without testing and breaking it. In order to prevent this, you can use the Environment Indicator module.

The Environment Indicator module adds a visual hint to your site, that way you’ll always be aware of the environment you’re working on. We’re going to cover installation and usage of this module in this tutorial.

Let’s start!

Getting Started

There are several ways to install the module. You can use composer for example:

Before we begin, go download Environment Indicator and install the “Environment Indicator UI” sub-module.

Using Composer:

composer require drupal/environment_indicator

Or, Drush:

drush dl environment_indicator -y

Once dowloaded, go to Extra and install both: “Environment Indicator” and “Environment Indicator UI”

Enabling the modules

Configuring Environment Indicator

To configure the module, go to Configuration, “Environment Indicator Settings” and you’ll see 3 tabs:

  • Settings
  • Environment Switcher
  • Current Environment (this tab is provided by the Environment Indicator UI module)

In the Settings tab you have two options:

  • Toolbar: integrates the environment indicator module with the toolbar. The toolbar will have a different color according to the environment you’re in.
  • Favicon: the module will add a favicon to your browser tab with the color of the corresponding environment and the first letter of it. If the name of your environment is Development, you’ll see a D with the colors you set up for that particular environment. This is practical if you have several tabs from different environments opened in your browser

Leave both options checked.

Environment Indicator Settings

In the Environment Switcher tab you can add buttons to switch between all your environments.

Click the “Add environment” button and give it a proper name, for example “Staging Server”. In the Hostname field insert the address of your staging server, configure the colors according to your preferences.

Environment Switcher Configuration

You could for example use the colors from a traffic light to indicate the different environments as defined in table 1-0.

Table 1-0. Example list of environments and their colors

Environment

Foreground (text) color

Background color

Development White Green Staging Black Yellow Production White Red

Click the Save button and repeat the procedure for each of your servers.

You should see all the different environments and their colors on the “Environment Switcher” page.

Environment Switcher

Finally click the “Current Environment” tab. This is the place where you configure the colors of the toolbar for the environment you’re working in at this very moment. I’m working on my localhost, so I will call this environment Development.

The foreground (text) color will be white and the background color will be a shade of green (lighter than the color of the switcher), you can choose the same color or another. I’ve chosen a different color just for demonstration purposes.

Click “Save Configuration”.

Notice that you’ll have to repeat this process in each one of your environments.

Current Environment Configuration

Click Configuration, Performance and clear the site cache.

Cache rebuild

Test Environment Indicator

You’ll see immediately that the toolbar changes its color to the color you selected in the “Current Environment” tab and also a new menu link in the Toolbar called Development.

Click this menu link. There are the environment switcher buttons, each one of them will take you to the URL you entered in the “Environment Switcher” tab. Notice also the favicon in the browser tab with a white “D” (Development) over a green background.

Envirionment Indicator Toolbar and Switchers

Configure Environment Indicator via settings.php

As already mentioned, the “Current Environment” tab is provided by the Environment Indicator UI module. You can also “hardcode” these settings directly in the settings.php file of your installation without the need of enabling the module.

Environmet Indicator Settings

Use a text editor to open the settings.php file of your Drupal installation and type this code at the end of the file:

$config['environment_indicator.indicator']['bg_color'] = '#333333';
$config['environment_indicator.indicator']['fg_color'] = '#DDDDDD';
$config['environment_indicator.indicator']['name'] = 'Dev. Environment';

settings.php file

You’ll see the change in the toolbar after rebuilding the site cache.

Toolbar with Environment Indicator

This won’t work if you already have configured the Current Environment in the UI. The first configuration has always precedence.

Summary

The Environment Indicator module is a valuable tool when developing your Drupal site. It helps you keep everything in order in your development process and prevents from inadvertently making changes in your live environment without proper testing.

Jorge Montoya

About Jorge Montoya

Jorge has been reading about Drupal and playing with it for almost 5 years. He likes it very much! He also likes to translate German and English documents into Spanish. He's lived in some places. Right now, he lives in the city of Medellín in his homeland Colombia with his wife and son.

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 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

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.
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.
Dec 19 2017
Dec 19
Embed a Youtube Player as Media Asset Into CKEditor in Drupal 8

The new media capabilities in Drupal allow you create a media library with all kinds of media assets and use these assets everywhere.

One way to use them is to embed these assets directly into CKEditor.

In this tutorial, I will show you how to pull a video from Vimeo with the Video Embed Field module. You will only need to store the video URL on your Drupal site. This will come in handy for a lot of site editors. Let’s start!

Step #1. Install the Required Modules

There are a couple of modules we need to download and install in order to be able to embed media assets directly into CKEditor. These modules are:

  • Media Entity.
  • Video Embed Field, allows us to create a Video - Media Bundle with a Youtube/Vimeo URL.
  • Entity, a dependency required for Media Entity.
  • Embed, a dependency required for Entity Embed.
  • Entity Embed. 

In my example, I used Composer for installation.

Download modules with composer

  • Enable Media Entity, Entity Embed, and Video Embed Media modules.
  • Click Continue.

Enable required modules and click Continue

Step #2. Create the Video Media Bundle

  • Click Structure > Media bundles.
  • Click Add Media Bundle button.

 Click add media bundle

  • Give the field a proper label.
  • Under the Type provider field, choose Video embed field.

The FIELD MAPPING group refers to additional metadata that can be attached to the media in form of additional entity fields. For the purpose of this tutorial, I’m going to leave this area as is.

  • Click Save Media Bundle.

Add media bundle details click save media bundle

  • Click the little arrow to the right of the Media bundle.
  • Choose Manage fields.

Click display arrow choose manage fields

You’ll notice that your Media bundle already has a field in it. There was no need to create it because you already chose the Type provider in the previous step and it automatically added it.

Video embed field added

  • Rebuild the site cache.

Step #3. Create the Media Assets

  • Click Content. You will see the Media tab appeared.

Media tab

  • Click Media.
  • Click Add media.

Click add media

  • Add a label for your media asset and enter a properly formatted URL.
  • Click Save and publish.

Add label url click save and publish

You have just created a Media bundle and a Media asset inside that bundle.  Think of your media bundles as an analogous concept to Content types and your Media assets as the actual content. 

Step #4. Create the Embed Button in the Editor

  • Click Configuration > Content authoring > Text editor embed buttons.

There’s already a button by default. This button will be used to embed node entities into the text area of the editor. We need to create a button to embed media entities.

Add embed button

  • Click Add embed button.
  • Give it a proper name.
  • Under Embed type select Entity.
  • For the Entity type choose Media.
  • Click the Select file in order to choose an icon for the button that will be displayed in CKEditor’s toolbar. Otherwise, the same E icon will be displayed and this can lead to confusions between embedding nodes or media entities.

Media embed button added message

  • Click Save.

Drag embed button to active toolbar

Step #5. Add the Icon to the CKEditor Active Toolbar

  • Click Configuration > Content authoring > Text formats and editors.
  • Edit the Basic HTML format by clicking Configure on the right. We’re assuming that this format is only for editors with the privilege of embedding videos on your site. Don’t do this if everybody (all authenticated users) has access to the Basic HTML format (this is just an example).
  • Select your Video embed button and drag it to the Media area of the CKEditor Active toolbar.

Click display embedded entities filter

  • Check the Display embedded entities filter.
  • Click Save configuration.

Type in media asset name click next

Step #6. Create an Article and Embed Your Media Asset

  • Click Content > Add content > Article.
  • Add a title and some text.
  • Click Media Embed.
  • Start typing the name of your media asset in the text box, choose it and click Next.

Thumbnail of the video

  • Change the display to Thumbnail.
  • Click Embed.

You will see the thumbnail of the video URL you saved as media asset, however, we want to embed the player and not just a thumbnail.

Click media

Step #7. Create a Video Player View Mode

  • Click Structure > Display modes > View modes > Add new view mode.
  • Click Media.

Select video player view

  • Write a proper name, for example, Video Player View and click Save.
  • Now that you’ve created the view mode click Structure > Media bundles.
  • On the right of your Video - Media bundle click Edit.
  • Click the Manage display tab.
  • Click CUSTOM DISPLAY SETTINGS and choose your recently created View mode.
  • Click Save.

Manage display click save

  1. On the top, you will see the recently enabled Video Player View mode.
  2. Click it and drag all fields except the Video URL field to the Disabled Section of the form.
  3. Hide the label.
  4. Make sure the format is set to Video.
  5. Click Save.

Final result 

  • Rebuild the site cache.
  • Go back and open up your article.
  • Double click the video thumbnail.
  • Select Display as Video Player View, or whatever you called your View mode at the beginning of this step, in the dropdown list.
  • Click Embed.
  • Save the node.

The Youtube/Vimeo player has now been embedded in your article.

Your site editors will be happy to work this way. I hope you enjoyed reading this tutorial. Please leave your comments below. Thanks!

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.
Dec 06 2017
Dec 06
Add Font Awesome Icons to Your Drupal Menus

Font Awesome icons use scalable vectors. You get a high-quality icons, that look good no matter the size of the screen.

The Drupal contrib module "Font Awesome Menu Icons" will help you to add and position the icons in your menu tabs. 

Step #1. Module Installation

In order to install the Font Awesome Menu Icons module, you have to meet certain dependencies. It requires the Font Awesome module and the Libraries module

  • For proper functioning of the module, download and extract two libraries into your /libraries/ folder:
  • You should have following structure in your [root]/libraries folder after downloading/unzipping/renaming your folders: 

The /libraries/ folder structure

 Step #2. Create Menu Items

For demonstration purposes in this tutorial, we’ll be using the Main navigation menu. You can apply this approach to all menus in Drupal. Even custom ones.

  • Click Structure > Menus > Main navigation
  • Click the Edit button next to the Home menu link

Edit menu Main Navigation

  • You’ll see two additional options in your menu Edit form:
    • FontAwesome Icon
    • FontAwesome Icon - Appearance

Two additional options

  • Click the first text box. You will see a tooltip with all FontAwesome icons to choose from. You can even filter them with the filter option on top.

Icons filter

  • Choose the icon of your liking or write the code according to the FontAwesome Cheatsheet
  • The second option allows you to choose whether you want the icon before/after the text or if you want no text at all. For this example, I’m going to place the icon after the text
  • Click Save.

Choose your icon appearance and click Save

  •  Now complete your menu structure if you haven’t done that yet and take a look at your menu. 

Final menu

You can tweak the size and color of your icons with CSS to fit the look you are trying to achieve.
I hope you liked reading this tutorial. 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.
Nov 22 2017
Nov 22
Drupal 8 - Smart Cropping of Media with Image Widget Crop

Sometimes, in your Drupal site, you may need to crop images with a predefined aspect ratio but with different size values within a certain range. This is where the Image Widget Crop module is your tool for the job.

It can be used in a great variety of Drupal sites. From image galleries to educational sites with illustrations.

In this tutorial, you’ll be using the contrib Image Widget Crop module in conjunction with the new media features for images available in Drupal core.  

Step #1. Create and Configure the Media Entity

To make the most of the Drupal core media features:

  • Install the Media Entity Image module
  • Go to Structure > Media bundles
  • Click Add media bundle

Click Add Media Bundle

  • Give your Media bundle a title and a description
  • Choose Image in the Type provider dropdown
  • Uncheck the Published checkbox
  • Click Save media bundle

Click Save Media Bundle

Next, you will add an image field to the Media bundle you’ve just created.

  • On the dropdown on the right click Manage fields
  • Click Add field 

Click Add Field

Manage Fields

  • Choose the Image field type
  • Give it a label
  • Click Save and continue

Click Save and Continue

  • Leave the defaults and click Save field settings
  • Click Save settings once again 

Click Save settings

You have created a Media bundle with an image field attached to it. Now you have to reference this Media bundle within a Content type through a Reference field. Let’s do just that! 

Step #2. Reference the Media Bundle within the Article Content Type

  • Click Structure > Content types > Article > Manage fields
  • Delete the default image field of the Article Content type 

Notice: I’m working in a sandbox installation with dummy content. Please, don’t delete anything if you have actual content in your Article Content type.

Click Delete

  • Click Add field
  • Give your new field a proper name
  • Choose Other in the Reference subsection
  • Click Save and Continue

Click Save and Continue

  • In the Type of item to reference choose Media
  • Click Save field settings

Click Save field settings

  • Select the Media bundle you created in Step #1 
  • Click Save settings

Click Save settings

Good job! You have referenced the Media bundle you created in Step #1.

Step #3. The Image Widget Crop Module

Next, you will add images to your Media bundle and enable the crop functionality of the Image Widget Crop module.

  • Download and enable the Image Widget Crop module
  • Go to Configuration > Media > Crop types in to create the Crop type you’re going to use
  • Click Add crop type

Click Add crop type

  • Give your Crop type a proper name. For example, Image_Widget_Crop
  • The Aspect Ratio refers to the relation between the width and the height of the image. I’m going to choose 16:9 for this exampĺe. It is common for wide screens. Other common aspect ratios are 1:1 (square) or 4:3 (like old TVs)

Aspect ratio

Aspect ratio

  • The SOFT LIMIT dictates the size at which a warning will be displayed if I carry on reducing the size of the image 
  • The HARD LIMIT dictates the smallest size an image will be cropped to
  • I’m choosing 640x360 for the SOFT LIMIT and 400x225 for the HARD LIMIT in this example
  • Click Save crop type

Click Save crop type

  • Click Configuration > Media > Image styles
  • Edit the Crop thumbnail style
  • Delete the default Scale effect
  • Select Manual crop
  • Click Add

Select Manual crop and click the Add button

  • For the Crop type choose Image_Widget_Crop (or whatever you called your crop type)
  • Click Add effect 

Click Add effect

Step #4. Add a Crop Type to your Media Bundle

  • Go to Structure > Media bundles > Images to crop > Manage form display
  • On the widget column of your image asset select Image_Widget_Crop
  • Click the cogwheel on the right
  • For the Preview image style select Crop thumbnail
  • Select your Crop type
  • Click Update
  • Click Save

Click Save

  • Click Manage display
  • Disable the Thumbnail
  • Hide the Media asset label
  • Click on the cogwheel on the right and select the proper image style
  • Click Update
  • Click Save 

Step #5. Create your Media Asset

  • Click Content > Media > Add a new media
  • Select an image from your computer, preferably a big one
  • Click on the down arrow to open your cropping widget
  • Resize the cropping area, and play with it a little bit
  • Notice that you get the SOFT LIMIT warning and it doesn’t go away. Even when you’ve reached the HARD LIMIT.

Copping applied

  •  Click Save once you’re satisfied with your cropping selection

Click Save

Step #6. Create your Content

  • Go to Content > Create Content > Article
  • Give it a body
  • Reference the media asset you’ve just created 
  • Click Save.

You’ll see your article with the cropped media asset 

Congratulations! You just learned how to use the Image Widget Crop Drupal contrib module. Along the way, you have also taken a quick look at Drupal 8 core media capabilities.

Please leave us your comments and questions below. 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.
Nov 08 2017
Nov 08
How to Highlight the differences between two images with Zurb Twenty Twenty Module

Zurb TwentyTwenty module is mostly intended to highlight the difference between two images on a Drupal site.

One example use case is advertising images for skin products. Those images present half of the face before applying the product and half of the face after applying it.

Besides doing direct comparisons between images, you can use this module for other purposes as well. In this tutorial, you will learn how Zurb TwentyTwenty module works.

Step #1. Install and Enable the Module

  • To work with Zurb TwentyTwenty module, firstly, download the jQuery Plugin to Compare Images from its Github page
  • Upload it to the /libraries folder located in the root of your site. If you don’t have the /libraries folder, create it
  • Uncompress the module ZIP file
  • Rename /twentytwenty-master to /twentytwenty 
  • Delete the zip file

171103 Twentytwenty 01

Step #2. Create the Content Type

  • Go to Structure > Content types > Add content type
  • Create a content type with the name Banner Picture
  • Uncheck Published, Promoted to the front page and Display author and date information 
  • Click Save and manage fields

171103 Twentytwenty 02

  • Delete the Body field
  • Add an image field
  • Click Save and continue

171103 Twentytwenty 03

171103 Twentytwenty 04

  • Set the Allowed number of values to 2, as we need two images
  • Click Save field settings
  • Click Save settings

171103 Twentytwenty 05

Step #3. Create the Content

  • Click Content > Add Content > TWENTY TWENTY Picture 
  • Give it a title 
  • Upload your images
  • Click Save

171103 Twentytwenty 06

Step #4. Configure the Display

  • Go to Structure > Content types > Banner picture > Manage display
  • In the FORMAT column choose Twentytwenty 
  • Click the cogwheel on the right and choose the offset for the slider. These values fluctuate between 0 and 1 where 0 is far left and 1 is far right. I’m choosing 0.1 for this example
  • Click Update 
  • Click Save

171103 Twentytwenty 07

171103 Twentytwenty 08

  • Now take a look at your newly created content and play with it a little bit.

171103 Twentytwenty 09

  • Changing the order of the images is very easy. Just edit the node and drag the second image to the top and click Save.

171103 Twentytwenty 10

When hovering over the image, you will see a dark overlay with some text (Before --- After) on it. You can disable this overlay with one simple line of CSS:

.twentytwenty-overlay {display: none;}

More Examples

171103 Twentytwenty 11

You have now another handy tool to embellish your Drupal site. Do you know of any other practical use of this module? 

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.
Nov 01 2017
Nov 01
Using the Focal Point Module for Images in Drupal 8

You most likely created image styles with Drupal's "Scale and crop" image effect. This style allows you to display large images on a smaller scale and save precious screen space.

There is one issue with such styling though. Often the most interesting point of the image gets chopped off. The "Focal Point" contrib module helps avoid this issue.

In this tutorial, you will learn to use this module to select the most important portion of the image you would like to show to your readers. 

There is always a limited amount of space on a screen. So when you insert an image in your posts, you have sometimes either to crop it or to scale and crop it. By default, Drupal provides image styles, which you can create and configure.

This is a good solution, but sometimes it’s kind of rigid. You only have the focal point, the part of an image that will be retained during the crop, for all images with that style. Sometimes the most interesting part, the part you want your readers to see, is not in the center.

Add Crop effect

Example:

Point of attention not in the center

If we crop this image with the anchor in the center of it we will have this result:

Cropped image

We should set the anchor point to the right of the image style. But, what if we want to draw the attention of the reader to the left of the image in the next post? That would certainly complicate everything. For these

For these cases, you have the contributed module Focal Point available. Focal Point allows you to choose the most important portion of the image to show to your readers. In this tutorial, you will learn how to do that.

Let’s start!

Step #1. Install and enable the module 

Enable Crop API module

Step #2. Configure the Image Style

  • Click Configuration > Media > Image Styles
    Click Add image style

Add image style

  • Give your image style a proper name. In this case, I’m going to call it Square (300x300). It’s a good practice to include the dimensions of your image style in the name so that you have a better orientation when selecting image styles for your displays (for example in Views)
  • Click Create new style

Create new style

  • Select the Focal Point Crop effect
  • Click Add

Select the Focal Point Crop Effect

  • Now set the dimensions for the cropped image, in this case, 300x300px
  • Click Add effect

Set dimensions

The new image style has been created. Let’s test it!

Step #3. Set the image style as the default display

We’re going to apply this image style to the Article content type

  • Click Structure > Content Types > Article > Manage display
  • Click on the cogwheel on the right of the Image field
  • Choose the newly created style Square (300x300)
  • Click Update
  • Click Save

Choose Square (300x300) style

Step #4 Create an Article

  • Click Content > Add content > Article
  • Upload an image
  • After uploading you will see a little cross on the preview thumbnail 
  • Drag this cross and place it wherever you want to set the focal point of the image
  • Save the article and view the result

Create article

Not the result you expected?

  • Don’t like the result? No problem! Edit the article and drag the cross until you get the expected image in your article.

Improved image

This handy module gives the site editors a great flexibility! I hope you enjoyed reading about the Focal Point contrib module.

Leave your comments below. Thanks!


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 2017
Oct 04
Make use of fancy pagers in your Drupal Views with Pagerer

The Pagerer module provides additional preset styles for Drupal standard pages and Views. It is a very simple module with styling options for everyone.

In this tutorial, you will learn how to add a pager to a View with Pagerer. Let's get started.

Download the Pagerer module from its page at Drupal.org site. Install and enable it.

Step #1. Configure the module

  • Click Configuration > User Interface > Pagerer
  • Click the Add pager button

Add pager

  • Create a name for the pager you’re creating
  • Click Create

Click Create

You’ll be presented with a configuration screen with multiple options.

  • The Panes dictates the position of the pager within the screen
  • The Style option defines the style of the pager itself
  • Experiment with these options in order to see how each pager looks in the PAGER PREVIEW

Edit Fancy Pager

  • Once you selected a style for your pager, click the Configure button.

You’ll see a page with multiple configuration options, for example:

  • Prefix and suffix labels
  • The description and help texts
  • The width of the slider
  • Choose your preferred options and click Save

Center pane settings

  • Click Save once again until you see the Pagerer page. You will see your newly created pager as an option.
  • Select it and click Save Configuration

Replace standard pagerer

Step #2. Add the pager to your View

  • Go to the Views interface
  • Click the Pager option
  • Select Paged output, Pagerer
  • Click Apply

User pager: mini

Paged output: Pagerer

Your recently created pager will be selected by default

  • Click Apply once again

Page: Pager options

  • Save the View
  • Click View Page

View page

  • Now scroll down and take a look at your “fancy” pager.

Take a look at your fancy page

If you are managing large sets of data, this module is a must-have.

Don’t forget to leave your questions, comments, and thoughts below. 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 21 2017
Sep 21
Create a One Page Website with Views Infinite Scroll

You most likely already navigated across some sites, blogs or galleries, that present the content in an infinite scroll mode.

Such scrolling can easily be implemented with the Views Infinite Scroll contribution module in Drupal 8. No additional libraries or plugins required.

In this tutorial, we’re going to create a gallery of article teasers of all countries in the Americas. Let’s get started!

 Step #1. Create the content

  • Download, install and enable the Views Infinite Scroll module
  • Click Content > Add content > Article
  • Create the articles’ content. It will be a simple article with a picture of the flag and the related content to each country.
  • Click Save and Publish each time you create an article

Create article

Step #2. Configure the teaser display

  • Click Structure > Content types > Article > Manage Display
  • Choose the Teaser option
  • Click on the cogwheel next to the Image field and choose Image style: Large (480x480)
  • Disable the Links field
  • Click Save

Manage display

Step #3. Set up the View

  • Click Structure > Views > Add new view
  • Give the view a name according to your type of content
  • Choose to show content of type Articles
  • Click the Create a page checkbox
  • Choose the Display format as a Grid of teasers
  • Change the Items to display number to 9
  • Uncheck the Use a pager option
  • Click the Save and edit button

Add View

Step #4. Tweak the Grid

Now it’s time to make some adjustments to the view.

  • In the FORMAT area of the views interface click on Settings to change the display of the grid 

Settings

  • Choose 3 for the number of columns
  • Click Apply

Number of columns

Step #5. Configure the Sort Criteria

Let's sort the teasers in alphabetical order.

  • In the SORT CRITERIA area click on Content authored on (desc) 

Sort criteria

  • Click the Remove button

The Remove button

The SORT CRITERIA area is now empty.

  • Click the Add button

Sort criteria is empty now

  • Enter the word Title in the Search box
  • Mark the Title checkbox in the Content category
  • Click the blue Add and configure sort criteria blue button

Add and configure sort criteria

  • Leave the Order criterion as Sort ascending
  • Click Apply

Sort criteria

Step #6 The infinite scroll feature

It’s time to add the infinite scroll functionality to our view.

  • In the PAGER section click on Display a specified number of items 

Display a specified number of items

  • Choose the Infinite Scroll
  • Click Apply 

Select Infinite scroll and Click Apply

You’ll see a couple of options to configure the Infinite Scroll functionality.

  • To load the content automatically without clicking a button, mark the checkbox Automatically Load Content
  • Click Apply

Mark Automatic load content and click Apply

Notice: If you want to load the content automatically, you have to enable the use of AJAX in your view. Let's do just that.

  • Click the ADVANCED section in your views interface on the right, to display the advanced options
  • Click the Use AJAX link
  • Check the Use AJAX option
  • Click Apply

Click the Advanced button

Mark Use AJAX checkbox

  • Save the view
  • Click View page in order to see your gallery

The view Country gallery has been created

When you scroll down now, you will see how the new content loads.

Congratulations! You now know how to easily create an infinite scroll for all kind of views with the Views Infinite Scroll module.

I hope you enjoyed reading this tutorial. Please, share in the comments below your own experience with creating infinite scrolls on your Drupal sites. Or maybe you have any questions on 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.

View the discussion thread.

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