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

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

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

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

Install the Charts Module and the Library

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

click install for Drupal charts

Installation Using Composer (recommended)

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

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

select google charts

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

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

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

create your content type

  • Add the required fields to match your data:

add required fields

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

the final result

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

create countries

Step #3. Create the View for your Drupal charts

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

click save and edit

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

add and configure fields

click apply

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

in the format section click apply

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

play with configuration options

  • Save the View.

Step #4. Place Your Block

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

look at your site

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

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

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


About the author

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

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

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

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

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

Step #1. Install the required modules

  • Open your terminal window and type:

composer require drupal/ckeditor_accordion

Install Composer using your terminal

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

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

Click Install

Step #2. Configure the Module

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

Click Save Configuration

  • Click Configuration > Text formats and editors.

Click Text formats and editors

  • Locate the Full HTML format and click Configure.

Click Configure

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

Click the link Show group names

Click the link Show group names

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

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

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

Check Limit allowed HTML tags and correct faulty HTML

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

Click Save configuration

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

Step #3. Create the Content

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

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

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

Select accordion tab

There are now 3 accordion tabs.

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

You should see the accordion with three collapsed tabs.

You should see the accordion with three collapsed tabs

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

Step #4. Styling the Accordion

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

For example:

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

How to integrate Accordion Tabs into CKEditor for Drupal 8

Conclusion

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

Thanks for reading!


About the author

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

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

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

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

Three menu levels

Step #1. Install the module and libraries

First, let's install the module:

Now, let's install the libraries:

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

 Superfish module file structure

Step #2. Create the menu structure

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

Click Add menu button

  • Enter the menu title and click the Save button:

Add site title and click Save

Step #3. Add the menu links

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

Click Add link button

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

Create menu link and click Save

Once you have created all the links:

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

Match the menu structure and click Save

Step #4. Place the menu

Menus in Drupal 8 are rendered as block entities.

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

Click Place block button

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

Click Place block button

Step #5. Finalize the Superfish configuration

  • Uncheck the Display title checkbox:

Uncheck Display title checkbox

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

Block settings

Advanced settings

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

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

You have a multi level dropdown menu now

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


About the author

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

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

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

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

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

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

Field Name Field Description Field Type Title

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

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

Step #1. Create the Customer content type

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

Starting point

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

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

Setting the Date Type

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

Configure the file directory for the images

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

Set the On and Off labels

Step #2. Prepare your spreadsheet for import

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

Importing to Drupal from Google Spreadsheets

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

Save file in CSV format

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

With the IMCE module:

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

New folder

Upload button

Uploaded profile pictures

Step #4. Import your content from the CSV file

  • Click Configuration > Content Authoring > Content Import

You will see a screen with two options.

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

Click Import

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

Troubleshooting Your Drupal CSV Import

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

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

To deal with this error, please do the following:

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

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

Replace them with the following two lines:

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

You’ll find more information about this error here.

I hope you enjoyed this tutorial.

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


About the author

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

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

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

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

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

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

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

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

Let’s start!

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

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

01

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

1) Dishwasher

2) Oven

3) Refrigerator

 Request status  List (text)  Select list

1) Pending*

2) Approve

3) Denied

 Required field.

* Default value.

 Additional comments  Text  Text field  Max length is 3000

02

Step #2 - Restrict access to certain fields

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

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

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

  • Download and enable the module with your preferred method.

03

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

04

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

05

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


06

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

07

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

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

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

Step #3 - Retrieving and processing the nodes

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

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

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

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

08

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

09

  • Search for the Request status field and choose it.

10

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

11

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

12

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

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

13

14

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

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

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

15

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

16

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

17

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

18

  • Add another condition testing the Denied value.

19

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

20

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

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

Additional Reading

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


About the author

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

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

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

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

Step #1. Install the Required Modules and Libraries

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

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

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

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

You can find the three libraries at these links:

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

How to Install CKEditor Plugins in Drupal 8

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

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

Step #2. Add Plugins to the Editor

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

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

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

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

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

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

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

Step #3. Test the Editor

Now we'll see if everything is installed correctly.

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

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

Summary

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

Thanks for reading!


About the author

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

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

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

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

Let’s start!

Step #1 - Create a Bootstrap Subtheme

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

Let's move on to the next step.

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

Configure the libraries file

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

Create an empty script.js file

Step #2 - Rearrange the Block Layout

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

Drag and drop the block

Step #3 - the CSS

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

Identify the CSS selector

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

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

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

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

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

This code will resize the search box

Search box resized

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

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

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

Step #4 - The jQuery

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

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

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

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

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

  • Save the file.
  • Refresh the site.

Refresh the site

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

Add the sbox CSS class

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

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

Final result

What's Next?

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


About the author

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

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

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

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

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

Let’s start!

Step #1. Download the Required Module

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

  • Type in your terminal the following line:

composer require drupal/linked_field in your terminal

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

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

Click to enlarge the image:

Click Install

Step #2. Create the Content Type

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

Click to enlarge the image:

Add the following fields

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

Click to enlarge the image:

Click Save and Contine

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

Click to enlarge the image:

Click Save settings

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

Click to enlarge the image:

How to Rewrite the Output of Views FieldsClick Save and continue

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

Click to enlarge the image:

Write an alt text for this image

  • Change the file directory to pdf-files.

Click to enlarge the image:

Change the file directory to pdf-files

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

Click to enlarge the image:

Click <i>Manage form display

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

Click to enlarge the image:

Drag the Image field to the Disabled section

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

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

Click to enlarge the image:

  • Rearrange the fields.
  • Click Save.

Click to enlarge the image:

Click Save

Step #3. Create the Content

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

Click to enlarge the image:

Create three or more nodes

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

Click to enlarge the image:

Your Content listing screen should look more or less like this

Step #4. Create the View

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

Click to enlarge the image:

Click <i>Save and edit

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

Click to enlarge the image:

Click Add and configure fields

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

Click to enlarge the image:

Click Apply

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

Click to enlarge the image:

Click Apply

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

Click to enlarge the image:

Click the File Download

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

Click to enlarge the image:

Select the Image field

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

Your Fields section should look like in the following image

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

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

Let’s take a look at that!

Step #5. Rewrite Results

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

Click to enlarge the image:

Click Apply

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

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

Click to enlarge the image:

Click Apply

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

Click to enlarge the image:

Click one of the download icons to test if they work

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

Thanks for reading!


About the author

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

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

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

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

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

Step #1. Install and Enable the Module

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

composer install drupal/fullcalendar_view

How to Integrate a Calendar in Drupal 8

Step #2. - Create the Content Types

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

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

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

Step #3. Create the Content

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

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

Your content overview page should look like this:

Step #4. Create the Calendar View

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

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

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

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

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

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

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

  • Click Apply.

  • Save the view and go to its URL.

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

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

Summary

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

Thanks for reading!


About the author

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

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

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

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

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

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

Highlighted menu item

Highlighted menu item

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

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

Step #1. Create the Content Types

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

Click Add content type

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

Click Save and manage fields

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

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

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

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

Step #2. Configure the Menu Structure

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

Edit the Main Navigation Menu

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

Click Save and repeat the process so many times as needed

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

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

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

Click Add menu

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

Click Save

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

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

Step #3. Configure the URLs

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

composer require drupal/pathauto

I’m using Composer

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

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

  • Click Configuration > URL aliases:

Click Configuration and then URL aliases

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

Click Add Pathauto Pattern

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

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

Use the available tokens widget

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

regions/alaska/[node:title]

Repeat the process for the Alaska Region Content

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

Click Update

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

Step #4. Place the Secondary Menu Block

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

Click Place block

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

Click Place block

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

Click Save block

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

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

Step #5. Install the Menu Trail by Path module

  • Download and enable the module with your preferred method:

composer require drupal/menu_trail_by_path

composer command

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

The menu item Alaska has an active state now

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

That is the real flexibility provided by this module!

Step #6. CSS for the Secondary Menu

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

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

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

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

Add styles

Add styles


About the author

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

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

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

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

Step #1. Checking the Status of the Solr Server

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

Check your Apache Solr status

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

Apache Solr configuration

Step #2. Installing the Drupal Module

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

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

Installing Drupal Apache Solr module

Step #3. Configuring Solr

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

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

Configuring Drupal Apache Solr

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

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

Create a collection for Drupal Apache Solr

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

Integrating Drupal Apache Solr

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

How to use Search API Solr Search in Drupal 8

Step #4. Enabling the Search API Solr Module

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

Enabling Drupal Apache Solr module

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

Enabling Drupal Apache Solr Defaults module

Step #5. Configuring the Search API

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

Configuring Drupal Apache Solr module

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

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

Drupal Apache Solr configuration

Server and index are ready to use.

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

Drupal Apache Solr uninstall

Step #6. Testing the Search API Solr Module

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

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

Testing the Drupal Apache Solr module

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

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

Thanks for reading, please leave your comments below.


About the author

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

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

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

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

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

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

Let’s start!

Step #1 - Download the libraries

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

The Animation Module in Drupal 8

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

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

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

  • Remove/delete all zip files.

Step #2 - Download and enable the module

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

composer require drupal/animations

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

Step #3 - Configure the module

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

  • Click Configuration, Configure Animations (DEVELOPMENT section):

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

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

The idea behind these settings is simple.

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

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

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

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

Summary

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

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

I hope you liked this tutorial. Thanks for reading!


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
Jul 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 with his wife and son.

Jul 25 2018
Jul 25
drupal 8 voting intro image

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

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

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

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

Let’s start!

Step #1 - Install the Voting System Module

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

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

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

Place the yaml code

  • Download with Composer the library and the module

Download with Composer the library and the module

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

Enable the Voting API and Votingapi Widgets

Step #2 - The Voting API Settings

  • Click Configuration > Voting API Settings

Click Configuration

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

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

Choose the options that fit your site most

Step #3 - The Widgets

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

Click Save and continue

  • Choose Fivestar rating and click Save field settings

Choose Fivestar rating

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

Repeat the process

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

Click Update

Step #4 - Test the Voting Widgets

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

Click Content

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

Test the voting widgets

Step #5 - Configure Access Permissions

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

Click Save permissions

Everyone can vote on your site from now on.

Step #6 - The Voting Results

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

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

Click Save and edit

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

Look for the Voting Widget fields

  • Click the Show results checkbox and Apply twice

Apply twice

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

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

Summary

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

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

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

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


About the author

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

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

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

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

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

Let’s start!

Step #1 - Install the Webform module

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

composer require drupal/webform

01

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

02

Step #2 - Create the Form

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

  • Click Structure > Webforms > Add webform.

03

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

04

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

05

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

06

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

07

  • Your screen should look like this:

08

Step #3 - The checkboxes

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

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

09

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

10

  • Repeat the process with the other three checkboxes.

11

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

12

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

13

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

14

Step #4 - The Conditional Emails

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

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

15

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

16

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

17

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

18

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

19

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

20

Step #5 - Testing the Webform

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

21

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

22

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

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

Additional Reading

What's Next

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

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


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
Jun 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 with his wife and son.

Jun 25 2018
Jun 25
Mega menu in Drupal 8

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

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

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

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

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

01

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

Let’s get started!

The Ultimenu Approach

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

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

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

A block containing regions containing blocks:

02

Step #1 - Install the Module

  • Install the module with composer:

composer require drupal/ultimenu

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

03

Step #2 - Create the menu

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

04

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

05

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

06

Step #3 - Configure the Ultimenu block

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

07

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

08

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

Step #4 - The Image Block

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

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

09

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

10

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

11

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

12

  • Click Block with Image:

13

  • Upload an image.
  • Click Save:

14

Step #5 - The links block

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

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

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

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

  • Click Save.

15

Step #6 - Place the Ultimenu block

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

16

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

  • Scroll down to the bottom of the page.

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

  • Click Place block:

17

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

18

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

19

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

Step #8 - The CSS

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

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

/* Menu Links */

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

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

/* Image Block */

#block-megamenuimage {
width: 100%;
}

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

/* Links block */

#block-multicolumnblock {
width: 100%;
}

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

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

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

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


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

20

Summary

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

Thanks for reading!


About the author

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

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

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

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

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

Step #1. Enable the required module

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

font your face module

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

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

Drupal webfonts import

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

Drupal webfonts save configurations

Step #2. Create a Font Display

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

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

Drupal webfonts font selector

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

Drupal webfonts disable fonts

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

Drupal webfonts add font display

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

Drupal webfonts webfont display settings

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

Drupal webfonts selectors font display

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

several font displays

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

webfonts before after

Conclusion

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

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

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


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
May 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 with his wife and son.

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
Logos of Drupal and Telegram

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

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

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

Step #1. Create a Telegram Account

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

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

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

Enter your phone number and the code provided by Telegram

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

Step #2. Get the JavaScript Code

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

Click Next

Click OPEN IN WEB

  • Click Start.
  • Follow the instructions.

Follow the instructions

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

Click Connect the site

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

Copy the JavaScript snippet

Step #3. Add the Javascript to Your Site

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

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

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

You can read more about creating a subtheme here.

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

Open the file in your text editor

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

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

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

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

Step #4 - Change the Logo of the Chat Window

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

Logo

Feel free to explore the different configuration options available.

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

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

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


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
Apr 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
unique look to google maps

Google Maps don't look appealing or pretty by default when you embed them in your Drupal content. Nor do they always nicely coordinate with your site look and feel.

What if you found a way to give them a custom design? For example - your own color? In this tutorial, you will learn how to give your Drupal Google Maps a custom style with the Styled Google Map contrib module.

Step #1. Download the Required Modules

For this example, you’ll have to download and enable 3 Modules.

  • Styled Google Map.
  • Geofield Map.
  • Geofield (this is a dependency for the other two modules).

Use your preferred method to download the modules. I’m using the Composer since it will automatically take care of all the needed dependencies.

Drupal Google Maps Composer output 1

Drupal Google Maps Composer output 2

Drupal Google Maps Composer output3

Step #2. Configure the Styled Google Map Settings

  • Click Configuration > Web services > Styled Google Map settings page.
  • Click the link above the blue button.
  • Get yourAPI Key from Google.

Get your Drupal Google Maps API Key

  • Scroll down until you see the blue Get a Key button and click on it.
  • Create a project name.
  • Click Next.

Create a project name

  • Copy the generated key.
  • Click Done.

Click Done for Drupal Google Maps

  • Paste the key in your Drupal site.
  • Click Save configuration.

Click Save configuration

Step #3. Create a Content Type with a Location

  • Click Structure > Content types > Add content type.
  • Give your content type a proper name.
  • Click Save.
  • Add fields.

Click Save and add fields

  • Click the blue Add field button.
  • Choose Geofield.
  • Add a proper label.
  • Click Save and continue.

Click Save and continue

  • Leave the default number of values.
  • Click Save field settings.

Notice that you can choose here multipĺe (or unlimited) values if you want to show more than one marker in the same map (for example a fast food chain with multiple locations).

Notice that you can choose here multipĺe (or unlimited) values

Step #4. Configure the Content Type Display

  • Click Structure > Content types > Location > Manage display.
  • Look for your Geofield field.
  • Change the format to Styled Google Map.
  • There’s a cogwheel on the right, it handles various configuration options for the map (we’ll come back here later).
  • Click Save.

Click Save

Step #5. Configure the Form Display

  • Click Structure > Content types > Location > Manage form display.
  • Look for your Geofield field.
  • Change the widget to Geofield Map.
  • Click Save.

geofield map

Step #6. Create a Node

  • Create a node by the Location type.
  • The Geofield Map widget you chose in the last step will help you to position the marker with an address (and not with latitude and longitude values).
  • Click Save.

Click Save

Step #7. Configure The Map Design

There are lots of map designs on this site.

  • Choose your preferred one.
  • Copy the JavaScript code on the left.

Copy the JavaScript code on the left

  • Click Structure > Content types > Location > Manage display.
  • Click the cogwheel on the right of your Geofield field. You’ll find a lot of configuration options. Feel free to explore and experiment with them.
  • Scroll down and select MAP STYLE.
  • Paste the code you selected into the textbox.

Paste the code you selected into the textbox

  • Click Update.
  • Click Save.

Take a look at your node, the map has now a custom look!

Take a look at your node, the map has now a custom look!

If you want to customize your maps even further and with your own colors, take a look at this style wizard application in Github, it helps you generate the JSON code required to style the map.

Take a look at this style wizard application in Github

Additional Reading: 

Would you like to know more about how to build great websites with Drupal 8? Sign up for our Video Club and watch its easy to follow lessons at your convenience.


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
Feb 27 2018
Feb 27
How to Create a Responsive Off-canvas Menu in Drupal 8

An off-canvas menu is the best way to offer a pleasant experience to those visiting your site from mobile devices. It is rapidly becoming a web design industry standard for any website.

In this tutorial, you will learn how to create and configure an off-canvas menu with the "Responsive and off canvas menu" Drupal 8 module.

This module relies on a couple of dependency libraries. They include the functionality of swipe gestures to open and close the menu on mobile screens.

They also provide the Superfish functionality when your site visitor hovers over the menu items.

In this tutorial, you will learn how to hide the default Drupal main menu and use an off-canvas menu instead.

Let’s start!

Step #1. Download the Module and Its Dependencies

  • Use your preferred method to download the module.

install via composer

  • Download the dependencies to the /libraries folder inside your root folder (if you don’t have the /libraries folder yet, create it manually). Download the required libraries by clicking these links:
  • Unzip and rename the /libraries folder. You should have the following directory structure now:

unzipped library folder

  • Enable the module.

enable the module

Step #2. Configure the Menu Module

  • Click Configuration > User interface > Responsive menu.
  • You’ll be presented with following configuration options: 
  1. The menu that will be rendered by the module.
  2. The number of levels (depth) of the menu. I’ll leave the default 9.
  3. The machine name of the menu which will be rendered in the off-canvas menu. To find out the machine name of the main navigation menu, for example, click Structure > Menus > Main Navigation. You’ll see the machine name next to the title.
  4. The type of wrapper which will contain the menu block. You can choose between nav or div.
  5. Use a breakpoint. Uncheck this option, since we want our off-canvas menu to apply to all screen sizes.
  6. Use the default module’s CSS, i.e. you can apply your own styles if you uncheck this option.
  7. Keyboard accessibility navigation.
  8. Add the off-canvas menu on the admin theme (leave unchecked).
  9. THEME COMPATIBILITY. this option is not required when working with Bartik (for example), but you will need to click this checkbox if you’re working with a Bootstrap based theme.
  10. Menu swipe and appearance options.
  11. Superfish options.
  12. Ad swipe gestures (for cell phones and tablets).
  • Choose your preferred options.
  • Click Save configuration.

select options click save configuration

Step #3. Clear the Site Cache

  • Click Configuration > Development > Performance.
  • Press the Clear all caches button.
  • Click Save configuration.

clear all cache

Step #4. Check the Menu Structure

  • Click Structure > Menus > Main navigation.
  • Review the structure of the main navigation menu. Notice in this example, menu Item 3 has a depth of 3, while menu Item 1 has a depth of 2.
  • Add/edit the links to your menu if necessary.

add edit links as your wish

Step #5. Place the “Hamburger" Icon

It’s time to place the “hamburger” menu icon (preferably) into the “menu” section of the site. At the same time, we will be disabling the default Main navigation block so that we don’t have the same menu twice.

  • Click Structure > Block layout.
  • Go to the Primary menu region.
  • Click the drop-down arrow beside the Configure.
  • Select Disable

07 select disable

  • Click the Place block button.
  • Type the word “menu” in the search box.
  • Choose Responsive menu mobile icon by clicking the Place block button next to it.
  • Notice that there’s another block called Horizontal menu. This is the module’s default menu for larger screen sizes. Remember, we deactivated this option in Step #2 (numeral 5), because we only want an off-canvas menu for all screen sizes. Feel free to play with these options!

place block

add custom block

  • Uncheck Display title.
  • Click Save block.

uncheck display title

  • Go to your Home page and you should see your newly added menu.

visit your home page

  • Click on the "hamburger" icon.
  • Navigate through the whole menu structure with the arrows next to each menu item to check everything works as desired.

12 click the hamburger icon

Congratulations! You just learned how to add an off-canvas menu to your Drupal 8 site. No doubt, those visiting your site from their mobile devices will enjoy and appreciate it. 

Thanks for reading!

Additional Reading

Drupal is an amazing tool for creating websites and applications. If you want to learn more Drupal, join OSTraining now. You'll get access to a vast library of Drupal training videos, plus the best-selling"Drupal 8 Explained" book!


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
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.

Sep 02 2017
Sep 02

With "A Simple Timeline" contribution module in conjunction with the Drupal core module "Views" you can present a nicely looking and well organized vertical timeline of Drupal entities. It could be, for example, teasers. This is exactly what you will learn in this post. 

For the purpose of this tutorial, I will use a sequence of the Summer Olympic Games of this century. Let's get started!

Step #1. Create a Content type Olympic Games

  • Go to Structure > Content types > Add content type
  • Create the content type
  • Click Save
  • Add the required fields for this particular content type.

Add content type "Olympic Games"

Step #2. Add fields to the Olympic Games content type

  • Click the Add field button

Add field button

  • Add the following three fields:
    • Field type: Image
    • Label: Logo
    • Field type: Date
    • Label: Openning Ceremony
    • Field type: Date
    • Label: Closing Ceremony

Add field Logo

Add field Opening Ceremony

After adding those three fields you will see the following screen:

Screen after adding the fields

Step #3. Configure the display of the Teaser View

  • Click the Manage Display tab on the right
  • Click the Teaser option, as we are going to display Drupal teasers in this example
  • Go to Structure > Content types > Olympic Games > Manage Display

Manage display

  • Rearrange the fields in following order:
    1. Logo
    2. Opening Ceremony
    3. Closing Ceremony
    4. Body
  • Set the LABEL of the Logo field to Hidden
  • Click on the cogwheel on the right, where you can configure the image style:

Hide the label of the logo

  • Select Medium (220x220)
  • Click Update

Choose Medium (220x220) and click Update

  • Set the labels of the Opening and Closing Ceremonies to Inline
  • Configure the Date format to be displayed as HTML Date 
  • Click Update in both cases.

Set the labels to the Opening and Closing Ceremonies to Inline

  • Configure the Format of the Body field to the Summary or trimmed
  • Click Save

Configure the Format of the Body field

Step #4. Create the Nodes

  • Go to Content > Add Content > Olympic Games

The text and images for this tutorial were taken from the english version of Wikipedia. You can use your own examples or you can just use the Devel module to create five nodes from type Olympic Games:

Create the node and click Save and publish

  • Create the node
  • Click Save and publish

Step #5. Create the Timeline

It’s time for the fun part.

  • Go to Structure > Views
  • Click Add view:

Add view button

  • Create a View with the following specifications (please pay close attention to the PAGE DISPLAY SETTINGS): Display format: Simple Timeline of teasers 
  • Click Save and Edit

Display format: Simple Timeline of teasers

Step #6. Change the SORT CRITERIA

Our timeline is almost ready. There’s only one last step we have to do in order to get the teasers in the right order.

  • Click on Configure sort criterion: Content: Authored on
  • Click on Remove to remove the criterion.

Click on Content: Authored on and remove that criterion

The SORT CRITERIA area is now empty.

  • Click the Add button, in order to add the criterion that will sort the teasers in a chronological order:

Add the criterion that will sort the teasers in a chronological order:

  • Type the word opening in the search box in order to choose the field Opening Ceremony as the sort criterion
  • Click the Add and configure sort criteria button

Add and configure sort criteria

  • Leave everything as is
  • Make sure the option Sort ascending is selected
  • Click Apply.

170824 simple timeline 17

  • Now you can save all your changes in the Views UI.
  • Take a look at your finished timeline by clicking the View page button.

Take a look at your finished timeline

Pretty cool, isn’t it? You can change the timeline settings if you click on the word Settings in the FORMAT area of the View. You can choose the position of the marker and the position of the timeline items.

Timeline settings

Position of the marker an the timeline items

There you have it! You now know how to present Drupal entities in a nicely looking vertical timeline using "A Simple Timeline" community contributed module.

Please leave your comments and questions below. Also, you may want to share here your own experience with this module. 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.

View the discussion thread.

Aug 28 2017
Aug 28
How to Display Locations on a Map in Drupal 8

The Geolocation Field Module allows us to store geographical locations (e.g. addresses) as value pairs (latitude, longitude). These values can be rendered in a map with the help of a map marker.

Many map markers in a map are useful in a wide variety of cases, for example to show graphically different offices of a bank in a city or to show the cities/countries of a concert tour of your favorite band. The possibilities are endless.

In this tutorial we are going to learn how to show the markers in a map of four tourist Attractions in New York City using the Geolocation Field Module and Views.

Step #1. Install the Geolocation Field Module

Step #2. Get the Google Maps API Key

You will be requested to enter the Google Maps API Key, which is necessary for the Geolocation module to function properly.

Now go back to your Drupal site.

  • Paste the key in the Geolocation Configuration Screen
  • Click Save Configuration.

There are additional Google parameters to configure if we want, but for this tutorial we’re going to work with the default values.

07

08

09

10

Step #3. Add the Geolocation Field to your Content Type

We’re going to create a new Content type called Tourist attractions with four fields:

1. The title (provided by default)
2. An image field (the picture of the touristic attraction)
3. A Body field
4. The Geolocation field (Field Name: Address / Field type: Geolocation) - leave the default options

11

12

13

Step #4. Configure the Form Display

In order to use the Geolocation Google Geocoder (which integrates with the API key we already generated) we have to change the Form Display Option From Geolocation Lat/Lng to Geolocation Google Maps API / Geocoding and Map.

14

15

This will allow us to enter values like addresses or even keywords to search our tourist attractions instead of entering Latitude/Longitude Values.

  • Click Save

Step #5. Configure the Node Display

Now, you have to change the display option for the address field to Geolocation Google Maps API - Map in the content type, that way we’ll get a map when viewing the node instead of a Latitude/longitude value pair (pretty much the same logic as above),

16

  • Click Save

Step #6. Creating Nodes

We’ll create the following four nodes:

  1. Statue of Liberty
  2. Rockefeller Center
  3. Empire State Building
  4. Central Park

17

18

Step #7. The Markers View

Now it’s time to create our Map View with all the map markers in it.

  • Click Structure > Views > Add new View

We’ll create a Page called Markers Map, it will contain Fields and the Display Format will be again Geolocation Google Maps API - CommonMap with No Pager.

  • Click Save and Edit

19

Step #8. Add Fields to the FIELDS section of the Views UI

In order to get the map working, we have to include at least the address field, because this is the field that the Google Maps API will reference as source field for the geolocation.

  • Click Add in the FIELDS Section of the Views UI
  • Locate the field Address
  • Click checkbox next to it
  • Click Add and Configure Fields.

20

21

Leave the Formatter as it is, check Exclude from display and click Apply.

22

You can (of course) explore the different configuration options that Google and Views provide.

Step #9. The FORMAT Settings

  • Click on Settings on the FORMAT Section of the Views UI

23

  • Verify that the source field is set to Address and leave the default value None for the Title source field:

24

  • Scroll to the GOOGLE MAPS SETTINGS in this popup window
  • Open them and go to the MARKER option
  • Uncheck Automatically show info text.

This will prevent the tooltip of the first view row to display automatically (instead of that, you have to click on the marker to display the tooltip).

  • Click Apply.

25

Step #10. Configure the Title field

  • Click on the Title Field
  • Customize the field HTML to be displayed as a H2 Tag under STYLE SETTINGS
  • Click Apply.

26

  • Save the view and check your page.

27

You have now a map with multiple markers with an easy Geolocation Field - Views approach. Your possibilities are now endless. It’s up to you. 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.

View the discussion thread.

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