Oct 22 2019
Oct 22

Contextual filters in Drupal allow you to add or remove information (content) to the currently displayed view. The filter acts dynamically based on the URL.

If the provided argument value is in the URL, the view will contain certain results, if the value is not in the URL, the view will be filtered with other results.

This whole concept implies certain complexity, so the best way to clarify it is with an example. 

Keep reading if you want to grasp the idea behind contextual filters in Drupal 8!

Step #1. Create the View

For the purpose of this tutorial, I have created 11 articles with an image and body text.

190930 drupal basic workflow

  191019 contextual filers 001

The goal of this exercise is to create a block with a view displaying articles, related to the currently viewed post. 

  • Click Structure > Views > Add view
  • Set the following options
    • Show Content of type Article
    • Create a Block
    • Display a Grid of fields
    • Choose 12 items per block
  • Click Save and edit

191019 contextual filers 002

  • On the FIELDS section click Add
  • Search for the Image field and select it
  • Click Add and configure fields

191019 contextual filers 003

  • Link the image to the Content

Notice that I created a squared image style (Configuration > Image styles), to display it in the view. More on Image styles on a future tutorial. 

  • Click Apply

  191019 contextual filers 004 

  • In the FIELDS section click the dropdown arrow and select Rearrange

191019 contextual filers 005

  • Drag the Image field above the Title
  • Click Apply

191019 contextual filers 006 

  • Click Grid Settings in the FORMAT section
  • Change the number of columns to 2
  • Click Apply

191019 contextual filers 006

  • Click Save to save the view

 Step #2. - Place the View Block

  • Click Structure > Block layout
  • Scroll down to the Sidebar second region
  • Click Place block

191019 contextual filers 008

NOTICE: I have also removed the 2 blocks on the Sidebar first region.

  • Search for the name of your view in the search box
  • Click Place block

191019 contextual filers 009

  • Restrict the block only to the Article content type
  • Click Save block

191019 contextual filers 010

  • Go to the frontend of your site
  • Open one of your articles.

You will see the block displaying the view the way you have just configured it. However, the currently displayed article will also appear within the view results. That is not user-friendly and looks less professional.

191019 contextual filers 011

Step #3. - Views Contextual Filters

  • Hover your mouse over the block  
  • Click the pencil icon and Edit view

  191019 contextual filers 012

  • Click ADVANCED to display the right-hand column of Views UI
  • Click Add to ad a Contextual filter

191019 contextual filers 013

  • Display only the filters related to Content
  • Select the Entity (Content) ID as a contextual filter
  • Click Add and configure contextual filters

191019 contextual filers 014

This view is displayed in a block. Blocks do not have URLs to reference, so you have to add this “connection” manually. 

  • Click When the filter value is NOT available
  • Select Provide default value
  • Choose Content ID from URL
  • Click Apply

191019 contextual filers 015

  • Scroll down to the Preview section

This is where you can test how the contextual filter works. The system will take the value of the Article (in this case) ID from the URL and according to that value, it will filter and present the right view. 

One thing to notice is that Drupal is smart enough to internally figure out the node id, even if you have enabled Pathauto, or have changed the URL manually in the node edit form.   

  • Enter the ID of one of your articles
  • Click Update preview

191019 contextual filers 016

The view will display just the element related to that particular article. This is not what we want to have. As a matter of fact, it is the exact opposite of what we want to achieve.

  • Click the Content: ID filter
  • Scroll down and click MORE
  • Check Exclude
  • Click Apply

191019 contextual filers 017

By clicking exclude, you are basically telling Drupal to display all results of the view, except the one related to the currently displayed article. 

  • Click Save to save the view

If you go to one of your articles, you will see a block displaying all other related publications, but not the one you are reading.

191019 contextual filers 018

This tutorial only scratches the surface of what is possible with contextual filters. I hope this has helped you to clarify the concept a little more.

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 09 2019
Oct 09

Drupal is a wonderful Content Management System with tons of features that solve many problems for editors and content managers. A developer can take different approaches to achieve the same result, and the Drupal update process is no exception.

It is possible to update Drupal either with Composer, Drush, or manually within the CPanel interface. The first two methods imply that you have at least mid-level experience with the command line and secure shell access to your public host. The third method is more visual and is suitable for developers beginning with Drupal.

Keep reading, if you want to learn how to update your Drupal site with this method.

Step #1. The Local Installation

This tutorial assumes, you already have managed to create a local installation, as described in steps #6 and #7 of this tutorial. This tutorial will build upon that example.

  • Enter the SSH mode of the virtual machine (Scotch box) 

vagrant up

vagrant ssh

190930 drupal basic workflow

  • Access the public directory of your virtual machine

cd /var/www/public   

  • Enter 192.168.33.10 on the address bar of your browser to access the site
  • Click Configuration > Maintenance mode
  • Check Put site into maintenance mode
  • Click Save configuration

190930 drupal basic workflow 001

The local site is now in maintenance mode. You need to create a backup of the database and of the codebase. 

  • In the terminal of your PC, type:  tar -zcvf drupal-backup.tar.gz .

To create a compressed file called drupal-backup.tar.gz of the public directory. This process will take about one minute. 

190930 drupal basic workflow 002

To create a copy of the database type: 

mysqldump -u root -p my_drupal_8 > /var/www/public/my_drupal_8.sql

  • Enter root as password (you won’t see any characters rendered on the screen)

190930 drupal basic workflow 003

Notice that these two files are now stored inside the public directory within the virtual machine and also in the public directory located at mydrupalbox in your projects folder. 

190930 drupal basic workflow 004

 Step #2. - Installing on a Production Server

On a regular hosting provider, you normally install your application (e.g. Drupal) with a one-click-install procedure. 

190930 drupal basic workflow 005

The hosting provider will assign a Username and Password for the newly created account. We need these, to edit the settings.php file of the installation we are going to import. 

  • Click the link to CPanel
  • Click File manager within the Files section

190930 drupal basic workflow 006

  • Click on the public_html folder on the left 

190930 drupal basic workflow 007

On the right is the Drupal codebase installed by the system of your hosting provider.

  • Select all files and folders
  • Press Delete
  • On the menu bar Click Upload, a new tab will open

190930 drupal basic workflow 008

  • Click Select file
  • Upload the compressed file you created in the last step

190930 drupal basic workflow 009

  • Select the file
  • Click Extract
  • Click Extract file(s)
  • Click Close
  • Select the tar.gz file and press Delete
  • Press Confirm
  • Open the sites/default folder
  • Select the settings.php file
  • Click the pencil on the menu bar, to edit the file
  • Scroll down to the end of the file
  • Change the database, username, and password with the ones you got from your hosting provider (hint: a better approach is to edit the file before compression on your local installation)


To find out the database name, head over to CPanel. In the Databases section, click  phpmyadmin 

190930 drupal basic workflow 011

The database name is on the left. 

190930 drupal basic workflow 012

  • Edit the settings.php file accordingly 
  • Click Save changes
  • Click Close

190930 drupal basic workflow 013.0

 Step #3. - The Database

  • In phpmyadmin scroll down and click Select all, to select all tables

190930 drupal basic workflow 013

  • On the dropdown select DROP
  •  Click Yes/ok

190930 drupal basic workflow 014

The database is now empty.

  • Click Import
  • Select the database backup you created in the last step

190930 drupal basic workflow 015

  • Click Continue

The system will prompt you, once the import process has finished.

190930 drupal basic workflow 016

  • In the address bar of your browser type:  mysitedomain.com/user 
  • Enter your Username and password - make sure that you change these in your user profile, in case you had a less secure password in your local installation
  • On the address bar type: mysitedomain.com/update.php

You will be redirected to the Update screen

  • Click Continue

190930 drupal basic workflow 018

If everything goes well, the system will prompt you to continue to the Front page or the Administration pages. 

  • Click Administration pages
  • Click Configuration > Maintenance mode
  • Uncheck Put site into maintenance mode
  • Click Save configuration

190930 drupal basic workflow 019

How to Update Drupal Core

The first thing you have to check on your local installation is the status of core and contrib modules. 

After putting your local installation on maintenance mode, and making backups of the codebase and the database, position your cursor at the root folder of your local installation (the composer.json file is there)

  • Type: composer outdated "drupal/*"   

To check for outdated modules.

  • To update modules type: composer require drupal/modulename     

Just like re-installing the module.

190930 drupal basic workflow 020

You can update all modules, but as you can see, the drupal/core package is not listed. 

190930 drupal basic workflow 021

Honestly, I don’t know what this is about, however, this is simple to solve. 

  • Edit the composer.json file

Omit the “replace” section and place the “drupal/core”: ”^8.x” statement inside the “require” section.

190930 drupal basic workflow 022

190930 drupal basic workflow 023

rm composer.lock     -To delete the file.

sudo rm -R vendor    -To delete the folder

 composer update drupal/core --with-dependencies     -To update Drupal core. This will also generate the vendor folder and the composer.json file.

190930 drupal basic workflow 024

  190930 drupal basic workflow 025

Now you need to start over with step #2. You will not need to upload the database this time.  

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.
Sep 20 2019
Sep 20

Drupal is well known for its stability and security out-of-the-box. However, we all know how dangerous the internet can be with all the risks of having your site attacked. There are particular situations in which an extra security measures are needed. This tutorial will deal with specific ways to secure your Drupal site, and the modules involved in this process. 

Let’s get started!

The Out-of-the-Box Features

The Drupal theming system has been improved in Drupal 8 with the use of the templating language, Twig. Twig templating has many advantages over PHP templating. One of them is that it is much easier to visualize on code. Another advantage is the fact, that all variables passed to the template are auto-escaped automatically. That minimizes the risk of a variable including a result that could break the HTML, and therefore your site. The risk is also minimized because you do not have to write custom PHP code in your templates anymore.

The PHP input filter module was part of the Drupal core in Drupal 7, but in Drupal 8, it is a contributed module. This measure eliminates vulnerabilities.

Drupal 8 implemented the trusted hosts configuration. This allows you to associate the Drupal codebase with a specific domain, to prevent online spoofing attacks

Due to the new programmatic approach of Drupal, modules can be enhanced in their functionalities by adding plugins. These plugins add behaviors to the module. The code stays clean and easy to analyze.

The use of Composer as package manager opens the door to new development possibilities for Drupal Open Source software, and it also helps to maintain all modules and keep their dependencies up-to-date and working properly. This is a key factor for the stability of Drupal systems.

How to Enhance Security on Access - Contrib Modules

190919 drupal security

There are two alternatives:

  • Lock attack vectors within the system
  • Limit vulnerabilities by restricting or changing system functions and operations, taking the responsibility from the user

Here are some modules, which provide this kind of functionality:

Automated Logout

Link: https://www.drupal.org/project/autologout

This module allows you to configure the time period for users to be logged in on your site. You can configure different time periods for different user roles, assuming that a user with a higher role, i.e. with access to more valuable information or resources on the site, would need to log in more frequently, than a user with a lower role. 

Session Limit

Link: https://www.drupal.org/project/session_limit

With the Session limit module, you can determine the limit of simultaneous sessions per user on 2 different browsers. If you set the session limit to 1 and open a new session in another browser, the session of the first browser will automatically expire.

Login Security

Link: https://www.drupal.org/project/login_security

Login Security allows site administrators to authenticate user only from valid IP addresses, that way, it is possible to grant or restrict access to your site to whole countries if needed, just by configuring the right domain. Login security restricts also the number of login attempts, so brute force attacks can be avoided. An extra feature of this module is the fact that it can hide Drupal login error message. The attacker will have another problem trying out if the account he wants to access even exists. 

Security Kit    

Link: https://www.drupal.org/project/seckit

Security Kit allows developers to change response headers. This is useful for very specific security needs on sites with high probabilities of Cross-site scripting, Cross-site request forgery, and origin driven attacks.

Honeypot

Link: https://www.drupal.org/project/honeypot

Honeypot prevents robots from filling out the forms of your site, by determining if the user is human or not. It uses two identification methods. One of them is by using a hidden form field, which is not visible to humans if the field has been filled out, Honeypot detects this and blocks the submission. The other method is by taking the time in seconds, in which the form has been filled out. A low value here (2-3 seconds), would speak for a robot, so the module would block  this submission too.

CAPTCHA 

Link: https://www.drupal.org/project/captcha

A captcha is a challenge-response test, to determine whether the user is human or not. This way, the goal of blocking fake form submissions, is achieved since robots will not be able to decipher the captcha text or image.

Auditing - Checking Procedures

190919 drupal security 001

It is always important to permanently review the system logs. This is even more important if your site has already been compromised. The analysis of all this data will help you also to track transactions within your system and perform checks on the ongoing state of the system. A rule of thumb is to log as much data as possible - always!

Some of the modules, which provide this type of functionality are listed below:

Site Audit

Link: https://www.drupal.org/project/site_audit

Site audit performs a static analysis of the whole system, against a set of recommended configurations. The module also stores reports of every audit. By performing this check, you as a developer can be sure and confident that your site is meeting the required security standards.

Security Review

Link: https://www.drupal.org/project/security_review

Security review, like Site audit,  makes also an analysis of the system, but this time, against a set of potential security implications on your site, like file permissions, text formats, and potentially malicious PHP or JS code on the frontend. It also stores reports. 

Login History

Link: https://www.drupal.org/project/login_history 

Login history adds a report to the database with a log of every user login, including timestamp, IP address, and user agent information. As stated before, it is always good to log as much information as possible.

Authentication Measures

190919 drupal security 002

Often, the importance of the information, implicate a reduction of usability. Users take instead of that the extra hassle of these additional authentication procedures.

The modules that you can use for this purpose are listed below: 

Two-factor Authentication  

Link: https://www.drupal.org/project/tfa

Two-factor Authentication provides an additional verification step, which ensures the integrity of the user authenticating. It also provides an API to support different plugins (provided by modules), which integrate several authentication services, like the Google Authenticator module.

simpleSAMLphp Authentication 

Link: https://www.drupal.org/project/simplesamlphp_auth

This module will allow you to replace the default Drupal login with a single-sign-on implementation. The module communicates with identity providers for authenticating users. That way you can validate the identity of the user through a service like Twitter, Facebook or Google

Password Policy

Link: https://www.drupal.org/project/password_policy

The Password Policy module defines a set of rules to force users to have strong passwords. It also forces users to change their password from time to time, depending on the configured options. Password Policy provides an API to define your own set of rules. 

Password Strength

Link: https://www.drupal.org/project/password_strength

This module provides a star rating widget, for users to test the strength of their passwords. You can leverage the API of Password Policy to force users to enter a password with a high rating (minimum rating).

Encryption

190919 drupal security 003

The data at rest (data that is not being used) should be encrypted to prevent attacks of all types. The encryption provides solutions at all levels:

  • Hosting
  • Server
  • CDN
  • Drupal system

As a rule of thumb, and to guarantee the highest security, the best way is to perform encryption at a low level of this stack.

You should always use HTTPS and SSL for all your web traffic, and you should also ask your hosting or cloud provider about full disk encryption.

Some useful modules are:

Key

Link: https://www.drupal.org/project/key

The Key module manages the system and API keys. It provides an API with options to store and retrieve sensitive keys like API keys or encryption keys. The site admin can decide where to store these keys in the system. Examples of API keys are the public keys for services like AWS, PayPal, or MailChimp.

Encrypt

Link: https://www.drupal.org/project/encrypt

The Encrypt module is an API, which provides a common algorithms utility to encrypt and decrypt Drupal application data. Its API is leveraged by many modules, which make use of algorithms to encrypt/decrypt (Real AES, Diffuse), modules to encrypt data, like Field Encrypt and File Encrypt and other modules for more specific use cases, like Pubkey Encrypt.

File Encrypt

Link: https://www.drupal.org/project/file_encrypt

This module focuses on the file system, it performs a check of the encryption on all files.

Field Encryption

Link: https://www.drupal.org/project/field_encrypt

This module encrypts data at the field level, that is, it encrypts field values.

 DevOps (Developer Operations)

190919 drupal security 004

The development process is critical to proactively maintaining the security. You should always use code repositories and pull requests for all your files. Other measures imply performing regular code reviews, tag each one of your code releases, keep the site code always up-to-date (this includes JS libraries), and try always to avoid manual procedures because these entail mistakes. Always try to automate your scripts and use a tool like DRUSH.

Some of the relevant modules in this category are:

Coder

Link: https://www.drupal.org/project/coder

This module has PHP Code Sniffing extensions to test the code on your site and compare it against the coding standards of Drupal.org. Coder will not do anything on your UI. It is rather a command-line tool.   

Hacked

Link: https://www.drupal.org/project/hacked

The Hacked module scans the code of your core and contrib folders and compares it against the code hosted at Drupal.org. It shows the differences between both codebases, so you can take the proper measures regarding your code. 

Backup and migrate

Link: https://www.drupal.org/project/backup_migrate

This is a classic among Drupal modules. Backup and migrate performs regular backups of the codebase and of the database, so you can restore them, for example on a fresh installation. This is very useful if your system has been compromised, and you want to restore it. 

Environment

Securing the infrastructure, in which the system is hosted, is as important as securing Drupal itself. Try always to mitigate attacks before they happen. This module list is supposed to help you with that purpose. 

  1. Use a coding workflow - making sure that the best code ends at the production environment. 
  2. Make a very detailed analysis of the logs - there are very useful tools for this matter, like Splunk or the ELK stack.
  3. If it is possible, try to use cloud-based environments - these are more secure than hosted environments. 
  4. Try to use CDNs every time you can - this acts as a firewall preventing malicious attacks early in the process.
  5. Make sure you have an up-to-date failover environment and test what would happen in case of a failover. 

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.
Sep 16 2019
Sep 16

Your local websites are always developed within the same operating system, that is the operating system of your machine (Windows, OSX, Linux). However, the online version of your site is probably hosted on some type of Linux server. Vagrant allows developers to have the conditions to replicate these systems within a Vagrant box. There are multiple kinds of boxes since Vagrant is a very popular alternative amongst developers. One of these boxes is called Scotch Box. Scotch Box is a preconfigured Vagrant Box with a LAMP (Linux, Apache, MySql, PHP) or a LEMP (Linux, Apache/Ngnix, MySql/MongoDB, PHP) stack in it.

This tutorial will explain the basic installation of these tools. Keep reading to learn how!

Required Tools

  1. Vagrant
  2. VirtualBox
  3. Git
  4. Scotch Box  

Step #1. - Install Vagrant

  • Download the Vagrant installer for your operating system
  • Double click or whatever you do to install applications on your system

190917 drupal vagrant

After installation, open the terminal application of your system and type:

vagrant -v

190917 drupal vagrant 001

Step #2. - Install Virtualbox

  • Download the Virtualbox installer for your operating system
  • Install this application on your system too

190917 drupal vagrant 003

If you type virtualbox -v on your terminal, it will open Virtualbox. That means it has been installed correctly. You can now close Virtualbox.

Step #3. - Install Git

Git has pretty much the same installation procedure. So here is a link to the downloads page.

Step #4. - Clone Scotch Box

Once you have downloaded and installed everything required, go to the terminal application of your system and head over to your Projects folder and type:

git clone https://github.com/scotch-io/scotch-box mydrupalbox


mydrupalbox is the name of the project (or the box), so you can replace this name with your own project name.

190917 drupal vagrant 004

  • cd mydrupalbox
  • ls

190917 drupal vagrant 005

Take a look at the contents of the project folder, and you will see the same files as in the Github repository (from where you actually have cloned them).

  • Type vagrant up

190917 drupal vagrant 006

This will take some time depending on the speed of your internet connection. Take into consideration that your box is going to contain a whole operating system.

Once the installation process has finished, open your browser and type in the address bar:

192.168.33.10

You can scroll down and take a look at the configuration defaults of Scotch Box.

190917 drupal vagrant 007

Step #5. - Access Scotch Box via Terminal

  • Type in your terminal: 

vagrant ssh

190917 drupal vagrant 008 

You are now inside a Ubuntu 16.04 LTS system.

 Step #6 - Create a Database

  • Type:   mysql -u root -p

Enter root as password (you won’t see any characters rendered on the screen). Since this is a local development environment, this is no problem at all.

190917 drupal vagrant 009

To create the database and assign permissions to a user on it, 

  • type these 3 commands in order:

create database my_drupal_8;

grant all privileges on my_drupal_8.* to admin identified by '1234';

flush privileges 

You can assign your own user names and passwords for your databases. I like those for my local machine.

190917 drupal vagrant 010

Type exit to leave mysql.

190917 drupal vagrant 011

Step #7 - Install Drupal

  • Type cd /var/www/public

This is the public folder of your local server, just like the public_html folder at your hosting provider.

Type the following commands one after the other: 

wget https://www.drupal.org/download-latest/tar.gz

This will download the latest Drupal version in a file called tar.gz

tar xzvf tar.gz

This command decompresses the downloaded file 

rm index.php

Deletes the default index.php file (the configuration defaults screen you saw on your browser on Step #4)

cp -r drupal-8.7.7/* .

To copy all the files and folders inside the decompressed drupal-8.7.7 folder one level up to the public folder.

rm -rf drupal-8.7.7/

To delete this folder

rm tar.gz

To delete the compressed file

composer install

Adds Composer to your Drupal installation

190917 drupal vagrant 013

cd sites/default

To access the default folder

cp default.settings.php settings.php

Copies the default settings and creates a new settings file

Now go to your browser and type again in the address bar:  192.168.33.10 

You will see the Drupal installation screen. 

  • Choose your language and click Save and continue
  • Select an Installation profile and click Save and continue
  • Verify the requirements and click Continue
  • Enter the required fields to connect the database to Drupal (you created these in step #6)
  • Click Save and continue

190917 drupal vagrant 015

The Drupal installation will begin.

  • Provide the required information for your site 
  • Click Save and continue

190917 drupal vagrant 016

You will see the home page of your site.

Congratulations, you have just installed Drupal on top of a Vagrant box called Scotch box.

The virtualization occurs through Virtualbox. All this happens in the background through an API which communicates Vagrant with Virtualbox. The virtual boxes are stored in the home directory of your system (OSX, Linux) inside a folder called VirtualBox VMs.

To shut down the virtual machine, type:

exit to leave the ssh mode 

vagrant halt

More about Vagrant here.

Please, leave us your comments 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 09 2019
Sep 09

Some different modules and plugins can alter the display of a view in Drupal, for instance, to alternate the order of image and text every new row, or to build some kind of stacked layout. 

It is possible to alter the display of a view with just some lines of CSS code instead. This approach has many advantages, being the fact of not having to install and update a module, the most relevant one.

Keep reading to learn how!

Step #1. - The Proposed Layout

190828 theming views

As you can notice, we can divide the layout into six columns and five rows. There are empty cells in the grid, whereas other cells contain one item of the view across many cells (grid area). The Drupal view shows a list of articles and their titles. The view format is unformatted list.

Step #2. - Create an Image Style

To ensure that all images are squared, it is necessary to configure an image style and set it as display style in the view.

  • Click Configuration > Image styles
    190828 theming views 001
  • Click Add image style
    190828 theming views 002
  • Give the new image style a proper name, for example, Crop 600x600.

It is always a good idea to include some reference about the dimension or the proportion of the image style. That helps when having multiple image styles configured.

  • Click Create new style
  • Select Crop from the dropdown
  • Click Add
    190828 theming views 003
  • Set height and width for the crop effect (make sure both dimensions are equal)
  • Leave the default crop anchor at the center of the image
  • Click Add effect
    190828 theming views 004
  • Make sure the image effect was recorded properly and click Save
    190828 theming views 005

Step #3. - Create the View

You can read more about rewriting results in Views here.

  • Save the view
  • Click Structure > Block layout
  • Scroll down to the Content section
  • Click Place block
    190828 theming views 013
  • Search for your block
  • Click Place block
  • Uncheck Display title
  • Click Save block
    190828 theming views 014
  • Drag the cross handle and place the block above the Main content
  • Scroll down and click Save blocks

Step #4. - Theming the View

There are 3 classes you need to target to apply the layout styles to the view:

  • .gallery-item  (each content card will be a grid)

  • #block-views-block-front-gallery-block-1 .view-content

  • #block-views-block-front-gallery-block-1 .view-row

We set the specificity of the CSS styles on the block. The classes .view-content and .view-row are default Views classes. Theming only with these would break the layout of other views on the site, for example, the teaser view on the front page.

Hint: I am working on a local development environment with a subtheme of Bartik. There is much more about Drupal theming at OSTraining here.
If you don’t know how to create a subtheme in Drupal yet, and you are working on a sandbox installation, just add the code at the end of the file and please remember always to clear the cache.

/core/themes/bartik/css/layout.css 

Let’s start with the content inside the .gallery-item container. It will be a grid with one column and 4 rows. The image will cover all 4 rows, whereas the title text will be located on the last row. To center the title on its cell, we declare the link tag as a grid container too.

  • Edit the CSS code:
.gallery-item {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
}
 
.gallery-item a:first-of-type {
    grid-row: 1 / span 4;
    grid-column: 1;
}
 
.gallery-item a:last-of-type {
   grid-row: 4;
   grid-column: 1;
   display: grid; /* Acting as a grid container */
   align-content: center;
   justify-content: center;
   background-color: rgba(112, 97, 97, 0.5);
   color: white;
   font-size: 1.2em;
}

 Make the images responsive.

  • Edit the CSS code:
img {
   display: block;
   max-width: 100%;
   height: auto;
}

As already stated, we need a grid with 5 rows and 6 columns. After declaring it, map every position in the grid according to the layout with an area name. The empty cells/areas will be represented with a period. 

  • Edit the CSS code:
#block-views-block-front-gallery-block-1 .view-content {
 display: grid;
 grid-template-columns: repeat(6, 1fr);
 grid-template-rows: repeat(5, 1fr);
 grid-gap: 0.75em;
 grid-template-areas:
 ". thumb1 main main main thumb2"
 ". thumb3 main main main thumb4"
 ". thumb5 main main main thumb6"
 "secondary secondary thumb7 thumb8 thumb9 ."
 "secondary secondary . . . .";
 max-width: 70vw;
 margin: 0 auto;
}

Now it’s time to assign each grid item to its corresponding region.

  • Edit the CSS code:
#block-views-block-front-gallery-block-1 .view-content > .views-row:nth-of-type(1) {
   grid-area: main;
}
 
#block-views-block-front-gallery-block-1 .view-content > .views-row:nth-of-type(2) {
   grid-area: secondary;
}
 
#block-views-block-front-gallery-block-1 .view-content > .views-row:nth-of-type(3) {
   grid-area: thumb1;
}
#block-views-block-front-gallery-block-1 .view-content > .views-row:nth-of-type(4) {
   grid-area: thumb3;
}
#block-views-block-front-gallery-block-1 .view-content > .views-row:nth-of-type(5) {
   grid-area: thumb5;
}
#block-views-block-front-gallery-block-1 .view-content > .views-row:nth-of-type(6) {
   grid-area: thumb2;
}
#block-views-block-front-gallery-block-1 .view-content > .views-row:nth-of-type(7) {
   grid-area: thumb4;
}
#block-views-block-front-gallery-block-1 .view-content > .views-row:nth-of-type(8) {
   grid-area: thumb6;
}
#block-views-block-front-gallery-block-1 .view-content > .views-row:nth-of-type(9) {
   grid-area: thumb7;
}
 
#block-views-block-front-gallery-block-1 .view-content > .views-row:nth-of-type(10) {
   grid-area: thumb8;
}
#block-views-block-front-gallery-block-1 .view-content > .views-row:nth-of-type(11) {
   grid-area: thumb9;
}

I think this is a practical way to layout Views items the way you want without the need of installing extra modules, which could unnecessarily affect the performance of your site. 

The Media Queries

The layout will break at around 970px, because of the font size. 

  • Edit the CSS code:
@media screen and (max-width: 970px) {
 .views-row > div .gallery-item > a:nth-child(2) {
   font-size: .9em;
 }
}

To change the layout, just add a media query with a new grid-template-areas distribution, and of course, we have to change the way the rows and columns are distributed The items are already assigned to their respective areas.

  • Edit the CSS code:
@media screen and (max-width: 700px) {
 .view-content {
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(10, auto);
   grid-template-areas:
     "main main"
     "main main"
     "thumb1 thumb2"
     "thumb3 thumb4"
     "secondary secondary"
     "secondary secondary"
     "thumb5 thumb6"
     "thumb7 thumb8"
     "thumb9 thumb9"
     "thumb9 thumb9";
 }
}

This layout will work even with the smallest device screen.

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.
Aug 29 2019
Aug 29

Masonry is a very popular JavaScript library, that stacks items in columns and rows, like a masonry brick wall.

The items reorder themselves according to their size as the viewport size changes with a nice animation effect. For some examples, take a look at the official Masonry site.

It is possible to create a view in Drupal with this style of layout. Keep reading to learn how!

Example of the Masonry layout

Step #1. Install the required modules

  • Open the Terminal application of your PC and type:

composer require drupal/masonry

Type the composer installation command

composer require drupal/masonry_views

Type this command

This will download the required modules. Masonry API and Masonry Views. The API provides integration between the Masonry JavaScript libraries and Drupal. Masonry Views defines the style of the view (its layout).

There are two more libraries to install for the proper functioning of the modules:

  • Create the /libraries folder in the root of your site
  • Inside this folder create two more folders called /masonry and imagesloaded
  • Right-click on the masonry library page and select Save As
  • Place this file (masonry.pkgd.min.js) inside the /masonry folder
  • Do the same with the imagesloaded.pkgd.min.js file.

Create the folders and move the files

  • Click Extend
  • Select Masonry API and Masonry Views
  • Click Install.

Click Install

The system will prompt you to enable also the Libraries module.

  • Click Continue.

Step #2. Create the View

For this tutorial, I’ve generated some dummy content with the Devel Generate module.

Some dummy content

Some more dummy content

Use this module only on development stages. I generated 50 articles with their images. These images have different width and height values.

  • Click Structure > Views > Add View
  • Select Create a block
  • Show Content of type Article
  • Display format: Masonry of fields
  • Items per block: 12
  • Click Save and edit

Click Save and edit

  • In the Fields section click Add

Click Add

  • In the Category Content, select the fields Body and Image
  • Click Add and configure fields

Click <i>Add and configure fields

  • Change the Formatter and set a character limit for the text
  • Click Apply and continue

Click Apply and continue

  • Leave the default image style
  • Link the image to the content
  • Click Apply.

Click Apply

  • In the Fields section click the dropdown and select Rearrange
  • Put the image between title and body
  • Click Apply.

Click Apply

  • Save the view

Step #3. Place the Block

  • Click Structure > Block Layout
  • Scroll down to the Content section
  • Click Place block.

Click Place block

  • Search for the block you created in the last step
  • Click Place block.

Click Place block

  • Hide the title
  • Click Save block.

Click Save block

  • Rearrange the block above the Main page content
  • Scroll down and click Save blocks.

Scroll down and click Save blocks

If you used the Devel module to generate content like I did, you will notice that the body text is not trimmed. Apart from that, you will see the content inside the block neatly organized in a mason grid.

You will see the content inside the block neatly organized in a mason grid

Step #4. Theming the Grid

There are two classes you can target in your stylesheet to change the appearance of the container and the items inside it:

  • .masonry-layout
  • .masonry-item

The two CSS classes to target

More on Drupal theming at OSTraining here. 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.
Aug 15 2019
Aug 15

Extensive nodes (or other types of entities) with many text fields, such as biographies, often remain unread because of the huge (and discouraging) amount of text.

The Drupal 8 "Field Group" module allows you to group fields and to present them in containers like vertical or horizontal tabs, accordions or just plain wrappers. It lets you group fields in the frontend of your site, and in the backend as well.

Keep reading to learn how to use this module!

Step #1. - Install the Required Module

According to the project page, Drupal versions above 8.3 require the 8.3 branch of the module. You have to force Composer to download this specific version.

  • Open the Terminal application of your PC
  • Go to the root of your Drupal installation (the composer.json file is located inside this directory)
  • Type the following command:

composer require "drupal/field_group:^3.0"

Type the following command

  • Click Extend
  • Scroll down until you find the Field Group module and check it
  • Click Install

Click Install

Step #2. Create the Content Type

For the purpose of this tutorial, you will create a content type with this structure.

  • Content type title: Vertebrate
    • Field Image
    • Text field (Introduction)
    • Field Image
    • Text field (First Part)
    • Field Image
    • Text field (Second Part)
    • Field Image
    • Text field (Conclusion)
  • Click Structure > Content types > Add Content type
  • Give the Content type a proper name, click Save and manage fields

Give the Content type a proper name and click Save

  • Click Add field
  • From the dropdown select Image and write a proper label
  • Click Save and Continue

Click Save and Continue

  • Leave the defaults and click Save field settings
  • Click Save settings
  • Click Add field
  • Select Text (formatted long) and give it a proper label
  • Click Save and continue

Click Save and continue

  • Click Save field settings
  • Click Save settings
  • Repeat the process 3 more times for the image and text fields
  • Delete the Body field

The "Manage fields" screen on your computer should look more or less like this:

The Manage fields screen on your computer should look more or less like this

Step #3. Group the fields

The "Field Group" module works on the display of the node and in the form display as well.

  • Click Manage form display > Add group

Click Manage form display and then click Add group

  • Select Fieldset
  • Click Save and continue

Click Save and continue

  • Click Create group
  • Repeat the process and create 3 more Fieldset groups

Repeat the process and create 3 more Fieldset groups

  • Rearrange the items according to the image using the cross handles
  • Click Save

Click Save

  • Click Manage display > Add group

Click Manage display and then click Add group

  • This time, select Tabs
  • Click Save and continue

Click Save and continue

  • Change the direction to Horizontal
  • Click Create Group

You can add an ID and CSS classes to the container to ease the styling process.

You can add an ID and CSS classes to the container to ease the styling process

  • Click Add group
  • Select Tab and give it a proper label
  • Click Save and continue

Click Save and continue

  • Select Default state OPEN (for the first tab, the other tabs will have Default state CLOSE)
  • Click Create group
  • Repeat the process with the other three tabs

Repeat the process with the other three tabs

  • Hide the image labels
  • Rearrange the items, take care of the indentation
  • Click Save

Click Save

Step #4. Create Content

  • Click Content > Add Content > Vertebrate

The form fields are now grouped in four fieldsets. This is very practical for editors.

  • Fill out the form, upload images and click Save

Fill out the form, upload images and click Save

Take a look at the node. All content is grouped in horizontal tabs. Users will definitely have a better reading experience.

Take a look at the node, all content is grouped in horizontal tabs

Users will definitely have a better reading experience

Please, leave us your comments 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.
Aug 06 2019
Aug 06

Long articles with many sections often discourage users from reading. They start reading and usually leave before reaching half of such articles.

To avoid this type of user experience, I recommend to group each section in your article into a collapsible tab. The article reader then will be able to digest the text in smaller pieces.

The Collapse Text Drupal 8 module adds editor filter plugin to your editor. You then will be able to create collapsible text tabs with a tag system similar to HTML.

Read on to learn how to use this module!

Step #1. Install the Required Module

  • Open the terminal application of your computer
  • Go to the root of your Drupal installation (the composer.json file is located inside this directory)
  • Type the following command:

composer require drupal/collapse_text

Type composer installation command

  • Click Extend
  • Scroll down until you find the Collapse Text module and enable it
  • Click Install

Click Install

Step #2. Create an Editor Role

  • Click People > Roles > Add role

Add Collapsible Blocks to Text-Heavy Nodes in Drupal 8

  • Enter the Role Name Editor and click Save
  • Click the dropdown besides Editor and select Edit permissions

Click the dropdown besides Editor

  • Check these permissions:
    • Comment
      • Edit own comments
      • Post comments
      • View comments
    • Contact
      • Use the site-wide contact form
    • Filter
      • Use the Full HTML text format
    • Node
      • Article: Create new content
      • Article: Delete own content
      • Article: Delete revisions
      • Article: Edit own content
      • Article: Revert revisions
      • Article: View revisions
      • Access the Content overview page
      • View published content
      • View own unpublished content
    • System
      • Use the administration pages and help
      • View the administration theme
    • Taxonomy
      • Tags: Create terms
      • Access the taxonomy vocabulary overview page
    • Toolbar
      • Use the toolbar
    • User
      • Cancel own user account
      • View user information
  • Click Save permissions

Click Save permissions

Step #3. Create a User with the New Editor Role

  • Click People > Add user
  • Create a user with the Editor role
  • Click Create new account

Click Create new account

Step #4. Add the Plugin to the Text Format

  • Click Configuration > Text formats and editors

Click Configuration > Text formats and editors

  • Click the Configure button for the Full HTML format

Click the Configure button

  • Enable the Collapsible text blocks filter and check that it comes after the other two filters specified in the description

Enable the Collapsible text blocks filter

The Full HTML format has these two filters disabled by default, so we are good to go.

  • Click Save configuration

Click Save configuration

Step #5. Create Content

  • Log out and log back in as the user with the Editor role

Log out and log back in

  • Click Content > Add content
  • Write a proper title for the node

The Tabs Structure

Each tab is declared between a pair of tags.

To show an opened tab (not collapsed at all) you put the text between the [collapse] and [/collapse] tags.

To show a collapsed tab you put the text between the [collapsed] and [/collapsed]tags.

The opening [collapse] and [collapsed] tags support two “attribute values”:

  • title
  • class

If you don’t specify a title attribute, the module will take the first title available between the [collapse]/[collapsed] tags.

If you don’t specify a title attribute, the module will take the first title available

It is possible to nest collapsible tabs.

It is possible to nest collapsible tabs

  • Finish editing the node form and click Save

Finish editing the node form and click Save

The image is floated, that is a Bartik specific style. Let’s apply some CSS.

Step #6. Basic Styling

Hint: I’m going to edit the original core theme files because I’m working on a sandbox environment. That is not recommended on a production server. As a matter of fact, it is not a good practice at all. If you want to improve your Drupal theming skills, take a look at this OSTraining class.

  • Open the file core/themes/bartik/css/components/field.css
  • Add this code to the end of the file:
@media all and (min-width: 560px) {
 .node .field--type-image {
   float: none;
 }
  • Open the file core/themes/bartik/css/components/node.css
  • Add this code to the end of the file:
/* Collapse Text Styles */
.open,
.shut {
font-family: sans-serif;
}

.open {
background: black;
color: white;
}

.shut {
background: #444;
color: #CCC;
}

summary {
background-color: red;
color: transparent;
}

.nested1 {
background-color: rgba(224, 110, 108, 0.25);
}
  • Save both files
  • Click Configuration > Performance > Clear all caches
  • Refresh the site

Click Configuration > Performance > Clear all caches

Refresh the site

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.
Aug 05 2019
Aug 05

Creating a faceted search in Drupal implies some configuration steps. This can be overwhelming to people new to Drupal.

The MixItUp Views Drupal 8 module allows you to create a simplified version of a faceted search based on the taxonomies of the content type. It also provides a nice animation, that makes the user experience even better.

This could be, for example, a good alternative to small commerce sites or other types of online catalogs at their initial state.

Screenshot of an e-commerce catalogue with a filtered search of products

Let’s start!

Step #1. Install the required modules

  • Open the terminal application of your computer
  • Go to the root of your Drupal installation (the composer.json file is located inside this directory)
  • Type the following command:

composer require drupal/mixitup_views

Type in the installation command

  • Go to the vendor folder of your Drupal installation
  • Locate the /patrickkunka directory
  • Move its whole content to the /libraries directory (you will have to create a libraries directory if you do not have one already):

Move the directory

  • Leave the empty /patrickkunka directory inside the /vendor folder
  • Make sure that mixitup.js and mixitup.min.js files are inside /libraries/mixitup/dist

Make sure the JS files are inside the proper folder

  • Click Extend
  • Scroll down until you find the MixItUp Views module and check it
  • Click Install

Click Install

Step #2. Create the Taxonomy Terms

For this example, it is necessary to create 3 vocabularies and their respective terms according to this structure.

  • Color
    • Black
    • Red
    • Blue
    • Grey
    • Lightblue
    • Orange
    • White
    • Yellow
  • Brand
    • Brand A
    • Brand B
  • Type
    • Long Sleeve
    • Short sleeve
  • Click Structure > Taxonomy > Add vocabulary

Click Structure > Taxonomy > Add vocabulary

Once you have created the first vocabulary, you have to add terms to it.

  • Click Add term

Click Add term

  • Enter each one of the Color terms and click Save each time

Click Save each time

  • Once you have added all Color terms, repeat the process for the other 2 vocabularies and their terms

Repeat the process for the other 2 vocabularies and their terms

Repeat the process for the other 2 vocabularies and their terms

Step #3. Add the Taxonomy Fields to the Article Content Type

  • Click Structure > Content types > Article > Add field

Click <i>Structure > Content types > Article > Add field

  • Select the "Taxonomy" term from the dropdown and give this field a proper name. It makes sense to use the same vocabulary name.
  • Click Save and continue

Click Save and continue

  • Set the Allowed number of values to Unlimited (only for the Color taxonomy term)
  • Click Save field settings

Click Save field settings

Note: This is because a shirt can have more than one color, but it cannot have long and short sleeves at the same time.

  • Select by each Reference type the corresponding vocabulary and click Save settings

click Save settings

  • Repeat this process for the other 2 taxonomy terms

This is just an example. For a real product node, you would need other fields like a price field and a link to the cart.

For a real product node, you would need other fields like a price field and a link to the cart

  • Click the Manage form display tab
  • Locate the Color field and change the field widget to Check boxes/radio buttons
  • Click Save

Click Save

  • Click the Manage display tab
  • Rearrange the taxonomy fields and hide their labels
  • Disable the Tags field by dragging it to the Disabled section
  • Click Save

Click Save

Step #4. Create Content

  • Click Content > Add content > Article
  • Enter proper text and images. Make sure you select a value for each taxonomy field. This makes sense since we want to filter the results of the view according to the taxonomy terms (you could have made these fields required to avoid empty fields here)
  • Click Save

Click Save

  • Repeat the process for each one of the nodes

Repeat the process for each one of the nodes

Step # 5. Create the View

  • Click Structure > Views > Add view

Click <i>Structure > Views > Add view

  • Show Content of Type Article
  • Check Create a page
  • Under Page Display Settings select MixItUp of Fields (you can use Teasers as well)
  • Click Save and edit

Click Save and edit

  • Click the Add button in the Field section of the Views UI

Click the Add button in the Field section of the Views UI

  • In the search box type: "appears in: article" (without the double quotes)
  • Check the fields Image, Color, Brand, and Type
  • Click Add and configure fields

Click Add and configure fields

  • For each one of the taxonomy terms click Apply
  • Change the dimensions of the image field and link it to the Content
  • Click Apply

Click Apply

  • In the Format section, click the MixItup Settings

In the Format section, click the MixItup Settings

This is where you can configure settings, such as the animation of the elements of the view, the aggregation type, and other additional sorting and filtering options. You should take a look at each one of these configurations and read their description.

  • Leave the defaults and click Apply
  • Save the view

Go to the page and test the filtered search

Go to the page and test the filtered search

Go to the page and test the filtered search

Congratulations! You have just added another practical module to your site-builder knowledge base. 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 30 2019
Jul 30

The Intense Drupal 8 module provides a nice whole screen zoom of the images on your site. Keep reading if you want to learn how to install and use this module with a practical example.

Step #1. Download and Install the Required Modules

  • Open the terminal application on your PC
  • Go to the root of your Drupal installation (the composer.json file is inside this directory)
  • Type the following command:

composer require drupal/intense

Enter the composer command

  • Click Extend
  • Scroll down, search and check the following modules:
    • Blazy
    • Blazy UI
    • Intense images
  • Click Install
  • The System will install the core Media module, which is required
  • Click Continue

Click Continue

After installing the modules, it is necessary to download, unzip and place the required libraries in place.

  • Create a libraries directory on the root of your Drupal installation (the core directory is there)
  • Download the Intense library from this GitHub page.

Download the Intense library

  • Place the zip file inside the libraries folder
  • Extract it
  • Rename the extracted directory to intense
  • Repeat the process with the Blazy library
  • Rename it to blazy
  • At the end you should have the following file structure:

At the end you should have the following file structure

Step #2. Add a Field to the Article Content Type

Our site is promoting fishing trips, so a price field is required.

  • Click Structure > Content types > Article
  • Click Manage fields

Click Manage fields

  • Click Add field
  • Select Number (decimal)
  • Give the field a proper label
  • Click Save and continue

Click Save and continue

Click Save field settings

Click Save field settings

  • Check this field as Required
  • Add the prefix ‘$ ‘ (don’t forget the quotation marks)
  • Click Save settings

Click Save settings

Step #3. The Intense Image Configuration

  • Click Structure > Content types > Article > Manage display
  • Look for the Image field Format and select Blazy from the dropdown
  • Click the cogwheel on the right
  • Select the Media Switcher option and choose Image to Intense
  • Click Update

Click Update

  • Place the Price field right over the Comments field
  • Click Save

Click Save

If you want to have this effect on the teasers of your articles, just edit the Teaser view mode with the same configuration options.

Edit the Teaser view mode with the same configuration options

Step #4. Create Content

  • Click Content > Add content > Article
  • Write proper content
  • Upload an image
  • Click Save

Click Save

You should see a cross over the image if you hover with your cursor over it. The cursor will turn itself into a cross too.

You should see a cross over the image

Click the image, it will zoom and cover the whole screen.

Click the image, it will zoom and cover the whole screen

You can pan over the image by moving your mouse. The image closes when clicking once again.

I hope you liked reading this tutorial and putting it in practice (of course)!

Thank you and stay tuned for more Drupal content.


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 30 2019
Jul 30

Sites with long pieces of content or with a long landing page often have a little arrow at the bottom, which helps you get back to the top of the site instead of scrolling the whole way back.

The Back To Top Drupal 8 module helps site-builders who are not yet ready to work with templates or JavaScript to place this kind of button on their sites.

Keep reading to find out how.

Step #1. Download and Install the Required Module

  • Open the terminal application on your PC
  • Go to the root of your Drupal installation (the composer.json file is inside this directory)
  • Type the following command:

composer require drupal/back_to_top

Type the composer command

  • Click Extend
  • Scroll down and search the Back to top module, check it
  • Click Install

Click Install

Step #2. The Module Configuration

  • Click Configuration > User Interface > Back to Top
  • Check Prevent on administration pages and node edit
  • Change the Button text
  • Leave the default PNG 24 image button
  • Click Save configuration

Click Save configuration

Step #3. Replace the Button Image

The image file is called backtotop.png and is located at /modules/contrib/backtotop.

  • Rename the file backtotop.png to backtotop1.png
  • Paste a new image file (70px wide, 70px high) called backtotop.png into this directory
  • Paste another image file with the same dimensions called backtotop3.png.

This file will be used to achieve a hover effect.

This file will be used to achieve a hover effect

The backtoto2x.png is for retina displays there. You can replace this file with the same method. Make sure the file is this time 140px wide and 140px high.

Step #4. Edit the CSS Code

To display the green arrow when hovering over the yellow arrow you have to edit the CSS code of the module.

The CSS file is located at /modules/contrib/back_to_top_css.

  • Open this file in the code editor of your liking
  • Edit the #backtotop:hover selector
  • Add the following code:
#backtotop:hover { background: url(../backtotop3.png) no-repeat center center; bottom: 20px; cursor: pointer; display: none; height: 70px; position: fixed; right: 20px; text-indent:-9999px; width: 70px; z-index: 300; }

Add this code

  • Click Configuration > Performance > Clear all caches
  • Important! Clear also the cache of your browser

Head over to a long article on your site and scroll down. The yellow arrow should appear.

Head over to a long article on your site and scroll down. The yellow arrow should appear

Hover over it to see how the other image gets pulled.

Hover over it to see how the other image gets pulled

If you click on this button the page will scroll back to the top.

The Text/CSS Button

I was not able to edit the colors of the button through the user interface. However, you can tweak the look and feel of it by editing the CSS file located at /modules/contrib/back_to_top/css/back_to_top_text.css.

You can tweak the look and feel of the button

You can tweak the look and feel of the button

I hope you liked reading this tutorial. Stay tuned for more Drupal content. 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.
Jul 18 2019
Jul 18

Sometimes, you would want to restrict access to certain pages on your site to users who do not have a specific role. You would want users to upgrade to a paid plan. Or you would just want to collect some more information from them.

The Rabbit Hole module controls what should happen when a user clicks the link to the entity or enters a URL in the address bar. It redirects such users to another page in the site.

The Rabbit Hole module works with different types of entities. They could be nodes, users, taxonomy terms and files, to name a few.

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

Step #1. Download the Required Modules

  • Open the terminal application on your PC
  • Go to the root of your Drupal installation (the composer.json file is inside this directory)
  • Type the following command:

composer require drupal/rabbit hole

Enter the composer installation command

  • Click Extend
  • Scroll down and check Rabbit Hole and Rabbit Hole nodes
  • Click Install:

Click Install

Step #2. Create the VIP Role

You need a VIP role in your site for paid users that are allowed to view this content. Users without a paid memberships will be authenticated users.

  • Click People > Roles > Add Role:

Click People > Roles > Add Role

  • Give this role a proper name
  • Click Save:

Click Save

Step #3. Create Users

For this tutorial, you are going to create one authenticated user and one VIP user.

  • Click People > Add user
  • Enter the user data and give them the role of VIP
  • Click Create new account:

Click Create new account

Notice that I’m working within the development environment. You should always be careful with passwords and make them as strong as possible.

  • Create another user, this time with the role of Authenticated. The People page should now look like on the screenshot below:

The People page should look like this

Step #4. Create the VIP Content Type

  • Click Structure > Content Types > Add Content type:

Click Structure > Content Types > Add Content type

  • Give the content type a proper name and description
  • Scroll down and click the Rabbit Hole vertical tab
  • Leave the Allow these settings to be overridden for individual entities option checked. This will allow administering (as the admin user) permissions on a node basis
  • Choose the Page redirect option
  • Enter the URL of the site you want the users to redirect to (in case they are not paying users). It can be an external URL too.
  • Change the Response code to 303
  • Click Save and manage fields:

Click Save and manage fields

  • Just for your practice, add an image field and place it above the body field on the content type display settings
  • Click Save:

Click Save

Step #5. Set Access Permissions

The users with the VIP role will have to be able to bypass the Rabbit Hole control.

  • Click People > Roles
  • Locate the VIP role and click the dropdown arrow
  • Click Edit permissions:

Click Edit permissions

  • Look for the Rabbit hole permissions
  • Check the Bypass Rabbit Hole action for Content permission
  • Scroll down and click Save permissions:

Scroll down and click Save permissions

  • Click Configuration > Performance > Clear all caches

Step #6. Create Content

  • Click Content > Add content > VIP Content
  • Create a node
  • Click Save:

Click Save

Notice that as the admin user, you can choose another Rabbit hole behavior for that particular node. You left this option checked in Step #4.

Step #7. Testing the Rabbit Hole module

  • Copy the node URL
  • Log in as our authenticated user:

Log in as an authenticated user

  • Go to the Home page and click the Teaser title of the VIP Content
  • You will be redirected to the access-denied page:

You will be redirected to the access-denied page

  • Now paste the URL you copied into the address bar. The system will redirect you to the same page.
  • Log out and log back in as the VIP user:

Log out and log back in as the VIP user

  • Go to the home page and click the teaser title
  • You will be able to access the node:

You will be able to access the node

There you have it! Thanks for reading. Please leave us your comments and suggestions below.


About the author

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

The Embedded Google Docs Field allows the site administrator to change the display of normal file fields, making them viewable directly on the node with the help of the Google Docs Viewer.

This tutorial will explain the usage of this module through an example.

Let’s start!

Hint: Google has to be able to locate your site on the web, in order to embed the viewer. This module will not work in a local environment.

Step # 1. Install the required modules

  • Open the terminal application on your computer
  • Place the cursor on the root of your Drupal installation (the composer.json file is located there)
  • Type:

composer require drupal/gdoc_field

Add the composer command

  • Click Extend
  • Scroll down until you find the module and enable it
  • Click Install

Click Install

Step #2. Add a File Field

  • Click Structure > Content types
  • Click Manage fields in order to create a new file field in the Basic Page content type

Create a new file field in the Basic Page

  • Click Add field
  • Select a field from type File and give it a proper label
  • Click Save and continue

Click Save and continue

  • Click Save field settings in order to leave the default values

Click Save field settings

  • Add the proper help text to be shown to the editor when creating the node
  • Mark this field as required
  • Add some more file extensions (only text documents would be boring)
  • Click Save settings

Click Save settings

  • Open the dropdown options for the Basic Page content type and select Manage display

Select Manage display

  • Hide the file field label
  • Select the Embedded Google Documents Viewer as formatter
  • Click Save

Click Save

Step #3. Create the Content

  • Click Content > Add content > Basic Page
  • Write a proper title and body text
  • Click the Select button in order to upload a document

Click Select button

You will see the link to the document once it has been uploaded.

  • Click Save

Click Save

Take a look at the node, the document should be displayed in an iframe right after the body text.

Take a look at the node

Step #4. Theming the Viewer

To add styles to the embedded iframe, it is necessary to target the gdoc-field class. Furthermore, you can customize the viewer even more by using template overrides. The default template is called gdoc-field.html.twig.

The default template is called gdoc-field.html.twig

I really hope that your design taste is much better than mine.

I also hope this tutorial will help you broaden your site-builder skills by adding this simple but useful module to your personal knowledge base. Please, leave us your comments and suggestions 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.
Jun 26 2019
Jun 26

The Drupal 8 Pager module provides simple pager navigation in a block to ease up the navigation between nodes of the same content type or between nodes with a common taxonomy tag.

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

Step #1. - Download and enable the module

  • Open your terminal application and go to the root of your Drupal installation (where the composer.json file is located)
  • Type:

composer require drupal/pager

Use this command

  • Click Extend
  • Scroll down to the Pager module and check it
  • Click Install

Click Install

No further modules are required.

Step #2. - Create Content

For the purpose of this tutorial, you are going to create six pieces of content. Their content type will be Article.

Each one of these articles will describe a country in Europe. Three of these countries will have the taxonomy term Central Europe, whereas the other three will have the taxonomy term Southern Europe.

Title Body Image Tags Spain Your text Country Flag Southern Europe Italy Your text Country Flag Southern Europe France Your text Country Flag Central Europe Netherlands Your text Country Flag Central Europe Germany Your text Country Flag Central Europe Greece Your text Country Flag Southern Europe


Click Save each time you create an article

  • Click Save each time you create an article, in order to create the next one

Content created and listed

Step #3. - Place the Pager Block

  • Click Structure > Block Layout
  • Scroll down to the Content section
  • Click Place block.

Click Place block

  • Use the search box to look for the Pager block
  • Click Place block.

Click Place block one again

  • Change the “Previous” and “Next” texts
  • Leave the default Image field and image style.

Leave the default Image field and image style

  • Choose the theme template pager--block.html.twig
  • Select the Article content type
  • Check both taxonomy terms
  • Leave the default direction
  • Make sure you leave the Maintain term checkbox unchecked.

Make sure you leave the <i>Maintain term</i> checkbox unchecked

  • Leave the default End Behavior
  • Click Save Block.

Leave the default End Behavior. Click Save Block

Head over to one of your articles. You will see the pager at the bottom of the Content region. If you notice, the pager does not make any difference between the nodes with the taxonomy term Central Europe and the ones with the taxonomy term Southern Europe.

You will see the pager at the bottom of the Content region

In order to paginate over articles with a common taxonomy term, it is necessary to check the Maintain term option within the block configuration.

  • Click Structure > Block layout
  • Scroll down to the Pager block and click Configure
  • Look for the Maintain term option and check it
  • Scroll down and click Save block.

Scroll down and click Save block

Go back to your site and you will be able only to paginate across articles with one particular taxonomy term. In the case of Germany for example, you will be only able to paginate over the other two nodes with the tag Central Europe.

Go back to your site and you will be able only to paginate across articles with one particular taxonomy term

In order to change the appearance of the pager, configure the block once again and select the other theme template (pager--wings.html.twig).

Configure the block once again

Check your site again after saving the block and you will see the other pager style. It’s up to you to adjust the CSS in order to match the pager’s style to the style of your site.

Check your site again after saving the block and you will see the other pager style

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.
Jun 13 2019
Jun 13

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

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

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

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

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

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

manage fields

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

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

Next, add the following Link fields:

  • LinkedIn
  • Facebook
  • Personal Website

fields user profile

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

manage display user fields

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

view drupal user information

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

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

drupal user profile

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

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

drupal article writer

Finally, see how this appears to a new user:

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

new user registration

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

Want to Learn More?

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


About the author

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

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.
Jun 13 2019
Jun 13

This is actually quite a common question from our students. They start building their Drupal site. Then they go to work with their blocks or menus.

Then they accidentally disable the "Log in" menu link. There is no "Log in" link displayed on the site anymore. Neither for them nor for their visitors.

In this short tip, you will learn how to login to your Drupal admin page in such situation. 

The image below shows the normal Drupal login link. When you first install Drupal it usually appears in the top right-hand corner of your site.

login link displayed

For example, you may accidentally disable it in your Drupal admin dashboard:

login menu link disabled

Then, the "Log in" link disappears.

login link gone

How can you now log in back to your site and get the "Log in" link back to its place?

So here's what you do. Use one of these URLs:

Visit one of those URLs and you should see a login screen like the one below:

login block

Once you are back to your admin panel, simply enable the menu link, and you are all set.

\
Jun 12 2019
Jun 12

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.
Jun 08 2019
Jun 08

One of Drupal’s big advantages is its possibility to structure content with the use of fields. However, from time to time you will want to link a file to your content without the need of adding a field to the database for that purpose.

The D8 Editor File Upload module provides this functionality by adding a button to the toolbar of the rich text editor (in this case CKEditor). This way it is possible to upload a file and present it within the content as a link. This tutorial will expĺain the usage of this module.

Let’s start!

Step #1. - Install the Required Module

  • Open your terminal window
  • In the root of your Drupal installation type:

composer require drupal/editor_file

type the composer command

No further modules are required.

  • Click Extend
  • Scroll down to the D8 Editor File Upload module and enable it
  • Click Install:

Click Extend

Step #2. - Configure the Text Format

  • Click Configuration > Text formats and editors:

Click Configuration

You can configure and add text formats to be used by different user roles on your site. By default, there are four formats.

  • Click Configure beside the Full HTML format
  • Scroll down to the Toolbar configuration area and click Show group names
  • Click the Add group button in order to create a new group and call it File:

Click Add group

  • Drag the paper clip button to the newly created group:

Drag the Paper clip button to the newly created group

  • Scroll down to the vertical tabs and add more file extensions to the Allowed file extensions (by default only txt):

add more file extensions to the Allowed file extensions

  • Click Save configuration.

Step #3. Adding a File Link to the Content

  • Click Content > Add content > Basic page
  • Make sure the text format is set to Full HTML, otherwise you will not be able to see the paper clip button
  • Add some dummy text and click the paper clip button
  • Click the Select/Browse File button and upload a file:

Click the Select/Browse File button

  • After uploading the file click Save:

Click Save

The link to the file will be shown in blue.

  • Click Save in order to save the node:

Click Save

Now you have a link to the file inserted into your content and you didn’t have to create an extra field for that. The link will open the file in the browser or it will download the file to your computer.

The link will open the file in the browser

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 28 2019
May 28

Since 2018, European site-builders have a legal obligation to meet a specific requirement. Their sites must display a banner to inform people about the use of cookies.

This European requirement is mandatory in order to comply with the GDPR (General Data Protection Regulation).

In other words, you must ask user permission if you want to store cookies on the browser of a European (EU) citizen.

The EU Cookie Compliance D8 module provides an easy way to manage this type of functionality. In this tutorial, you will learn about the installation and basic configuration of this module.

Let’s start!

Step #1. - Install the Required modules

Perhaps the most popular method to download Drupal modules is Composer

  • Open your terminal application and type:

composer require drupal/eu_cookie_compliance

How to Display a Cookie Compliance Banner in a Drupal 8 Site

After downloading the module, it is necessary to enable it.

  • Click Extend.
  • Scroll down until you find the EU Cookie Compliance module and check it.
  • Click Install.

You don’t need to install any further modules.

Step # 2. Configuring the Module

  • Click Configuration > System > EU Cookie Compliance.

This screen has multiple configurations. Let’s take them one by one.

  • The first configuration allows you to enable/disable the banner. After that, you can choose if you want to display this banner only to anonymous users, only to authenticated users or for both. By default, all these options are checked.

  • After that comes the Consent section. This is the most important part, if you want your site to be GDPR compliant, you have to check the second option (opt-in) Opt-in. Don't track visitors unless they specifically give consent. (GDPR compliant)

Be aware that you won’t be able to collect information from users who don’t accept the use of cookies by their web browsers. That is the law.

  • The third section deals with JavaScripts that will not load if the user has not given her consent. If you use the opt-out method, scripts will load until the user chooses to opt out.

You have to enter the full path to the scripts, each in one separated line into the text area. One example here is the Google Analytics script.

  • If you scroll down, you will find the Whitelisted cookies section. You can enter here the cookies that are mandatory for your site and have to be installed, despite the fact that the user has denied her consent. These cookies do not have anything to do with the personal information of the user or their browser.

  • The next section deals with the storage of the users, who have given their consent. The default option is Do not store. If you choose Basic Storage, the following information will be saved to your database:
    • User ID.
    • IP address.
    • Timestamp.
    • Consent method.
    • The actual revision of the privacy policy page.

  • The next section lets you configure the text to be displayed on the banner. You can also have a different version of these texts to make them look better on mobile screens. Pay attention to the HTML tags you are allowed to use (those are more than enough, to be honest). Let’s change these texts!

Cookie information banner message: <h2>Yes, we use cookies too</h2><p>By clicking <strong>any</strong> link on this page you agree with this.</p>

Consent button label: That's ok with me

Cookie policy button label: Our policy

Disagree button label: No way!

  • According to the GDPR, people have to be able to withdraw their consent in an easy way. That is why this module provides a floating tab that displays after the user has given her consent. Make sure the floating privacy settings tab option is checked. You are free to change these texts if you want to.

  • The Thank you Banner section lets you configure a banner that will be displayed right after the user gives her consent. I’m going to uncheck this option.

  • After the Thank you Banner section you will find the input field for the Privacy policy page of your site. You can enter the link to that page here.

  • In the Appearance section, you can tweak the look of the banners to match the colors of your site. Notice that the only mandatory value is the width of the banners. Feel free to play around with these options.

  • If you want to display the Cookie Compliance Banner only in European countries, you will have to install the smart_ip module or enable the geoip_country_code_by_name() PHP function on your Drupal installation. That goes out of the scope of this tutorial.

  • The Advanced settings section lets you exclude domains and paths you don’t want to be tracked. The /admin path is by default excluded. You can also set the domain of the cookie to a specific (global) URL in case you have multiple domains and want to track them in a consistent manner. I’m going to leave the default values here since I’m working on a development environment. The only two mandatory options here are:
    • Banner sliding animation time
    • Cookie lifetime (how long the cookie is going to be stored

  • Click Save Configuration

Step #3. - Testing the module

  • Open your site in a new browser as an anonymous user
  • The cookie compliance banner will appear on top of the site
  • Click the “opt-in” Button

The banner will disappear and the private settings floating tab will be visible on top of your browser (you’ll have to refresh the page if this does not happen).

  • Click the Privacy settings tab
  • Click Withdraw consent

This will make the banner disappear. It will appear again after 100 days (or the time you set in the cookie lifetime option). The cookie will not be tracked anymore.

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.
May 07 2019
May 07

The Field Permissions module in Drupal 8 allows you to set permissions (enter, edit or view) on a Drupal field, based on the role the user belongs to.

In order to demonstrate how this module works, we are going to create a content type called "Essay" for the website of a school.

There will be 2 roles:

  • Freshman
  • Sophomore.

The Freshmen permission will not be allowed to choose the subject of the essay, whereas the Sophomores will have the possibility to choose between literature and history. However, there will be no possibility to change the subject once a student has made a choice.

Let’s start!

Step #1. Install the required modules

There are many ways to install a Drupal module. One of them is to use Composer.

  • Type into your terminal application:

composer require drupal/field_permissions

Define Role Based Field Permissions in Drupal 8

  • Click Extend.
  • Scroll down until you find the Field Permissions module and mark the checkbox.
  • Click Install.

Step #2. Create the Roles

  • Click People.
  • Click the Roles tab.
  • Click Add role in order to add the Freshman role.

  • Enter the role name.
  • Click Save.

  • Repeat the process for the Sophomore role.

Step #3. Create the Users

You have to create two users, one for the Freshman role and one for the Sophomore role

  • Click People > Add User.
  • Create a user and check the Freshman box.
  • Click Create new account.

  • Repeat the process for the Sophomore role.

  • Click the Permissions tab.
  • Mark the following permissions for both roles you just created:
    • Essay: Create new content
    • Essay: Edit own content (students are able to change their essays, however, they will not be able to change the subject choice once they save the form the first time)
    • Access the content overview page
    • Use the administration pages and help
    • Use the Toolbar
  • Click Save permissions.

Step #4. Create the Essay Content Type

The Essay content type will have only two fields:

  • Body
  • Subject choice.

The field Subject choice will be only available to the Sophomore role, however, once a student has made a choice, they won’t be able to change it anymore.

  • Click Content > Content types > Add content type.
  • Add a proper Name and leave the default values.
  • Click Save and manage fields.

  • Click Add field.
  • Select List (text) as the field type.
  • Click Save and continue.

  • Enter the two possible values in the Allowed values list.
  • Leave the default allowed number of values (1).
  • Click Save field settings.
  • Mark this field as required.
  • Check the Custom permissions radio button.

Sophomores will be able to enter a value for this field, to view it and to view the subject choice of other sophomore students. Freshmen will only be able to view the choice of their elder classmates.

  • Mark the corresponding checkboxes.
  • Click Save settings.

Step # 5. - Create Content

  • Log out from the site and log back in as a Sophomore.

  • Click Content > Add content.
  • Enter a proper body.
  • Choose one of the two available subjects.
  • Click Save.

You can now see the node. Let’s suppose the student wants to change the content of her essay.

  • Click the Edit tab.

You will see that the subject choice field is not available anymore.

  • Log out and log back in as a Freshman student.
  • Click Content > Add content.
  • Enter a proper body.
  • Click Save.

As you can see, this role does not have the possibility to make a subject choice. If you go back to the homepage of your Drupal installation, you will see both teasers.

  • Click the “Sophomore” essay.

The Freshman student is able to view the subject choice of his sophomore classmates.

I hope you liked this tutorial and it will help you improve your site building skills. The Drupal 8 Field Permissions module works not only with nodes but with other entities like users too.

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.
Apr 16 2019
Apr 16

An OSTraining member asked us if it was possible to connect Webforms to their content.

I can imagine a lot of use-cases for this. For example, if you have an "Events" content type, you might want a form so visitors can contact the event organizer. Or if you have a "Business" content type, it might be useful for people to contact the business.

This can be done thanks to a module called "Webform Extra Field" and in this tutorial I'll show you how.

Step #1. Install the modules

You'll need to install and enabled 3 modules to follow this tutorial:

Step #2. Create your webform

Go to Structure > Webforms. The Webform module will provide a default "Contact" form but you can also create your own webform here.

created webforms

Step #3. Add the field

  • Go to Structure > Content types.
  • Click "Manage fields" for the content type you want to connect to your Webform. For example, choose the "Article" content type.
  • Choose the "Webform" field type:

add webform field

  • After clicking to the second page of settings, choose your Webform from the dropdown list:

webform field settings

  • You can also configure the default settings for the form. If you have the Token module installed, you can prepopulate the fields in the Webform:

webform settings

Step #4. Create the content

Once you have created your field, go to Content > Add content. You can create the content as you normally would, but there will now be a contact form automatically attached to your published content.

webform node


About the author

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

Websites will run into problems. Whether you're using Drupal or any other software, there will be problems at some point.

Drupal runs on PHP and when PHP has problems, it reports them to you. 

However, often these errors will appear on your site and will be visible to visitors, as in the image below:

PHP Notices on Your Drupal Site

In this tutorial, we're going to give you a quick introduction to these errors. We'll explain the different types that might appear on your site and how you can stop them from showing.

There are three main ways in which PHP will report problems: notices, warnings and errors.

What are PHP Notices?

These are the least important. According to the official PHP website, notices are generated when:

"the script encountered something that could indicate an error, but could also happen in the normal course of running a script."

What are PHP Warnings?

Warnings are more serious, but probably won't break your site. According to the official PHP website, warnings are:

"non-fatal errors. Execution of the script is not halted."

What are PHP Errors?>

Errors are the most serious type of problem and may break your site. According to the official PHP website, warnings are:

"Fatal run-time errors. These indicate errors that can not be recovered from, such as a memory allocation problem. Execution of the script is halted."

Solution #1: Disable Error Reporting on Your Drupal Site

One solution is to simply stop the errors from showing.

  • Go to Configuration > Logging and Errors.
  • You have three choices:
    • None will disable all error reporting.
    • Errors and warnings will display on the most serious problems.
    • All messages will display all problems and is probably only useful for developers.
Disabling Error Reporting on Your Drupal Siteg

Solution #2: Fix the Problem

Yes, yes, I know this is a controversial idea. Fixing a problem is definitely harder than hiding a problem.

Here are some suggestions to help you fix the problem. Please backup your site before trying any of these.

  • Make sure your Drupal site and all your modules and themes are up-to-date.
  • Search Google and Drupal.org for anyone who has reported the same message. See if they have found a solution.
  • Read the message itself for hints about the problem. For example, the problem in the image at the top of this tutorial is all/modules/calendar/includes/calendar_plugin_display_page.inc on line 47. This tells that the problem may well be with the Calendar module, because the error is coming from the Calendar module folder. If the problem is serious, you might consider disabling the problematic module or theme.

About the author

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

The Drupal 8 "Flickr" module allows you to insert Flickr images or photosets (albums) on your site, without the need of keeping the images on your server. This has a couple of advantages (we won’t discuss the disadvantages in this tutorial):

  • Less use of resources on your own server
  • Improvements on the performance of the site
  • You avoid copyright issues in your site, Flickr takes care of that
  • Make use of thousands of Flickr images available under CC License.

The user (editor) types a shortcode in the text editor of the node and the Flickr module connects to the Flickr API, which retrieves the images from Flickr and sends them to your site.

This tutorial will explain how to install the Drupal 8 Flickr module and to configure Flickr API, to retrieve the images of one of your Flickr albums.

Step #1 - Install the module

If your site installation is not based on composer:

  • download the module from its project page
  • place it in the modules folder of your Drupal installation
  • enable it in your Drupal backend

If your site installation is based on composer, type:

composer require drupal/flickr

How to Display Flickr Images on Your Drupal 8 Site

  • Click Extend
  • Scroll down to the FLICKR section
  • Check Flickr, Flickr API Integration
  • Flickr Filter
  • Click Install.

Step #2 - Configure the module

After enabling the modules,

  • Open the Flickr API integration description
  • Click The Configure link.

You will be prompted to get an API key, so click this link, in order to be redirected to Flickr.

  • Read both info cards carefully.
  • Request a non-commercial key (your screen should be in English).

  • Give your application a proper name and description
  • Check both checkboxes
  • Click Submit.

Flickr creates a Secret and another key in order to integrate your site with the Flickr platform.

  • Copy both keys and paste them on the Flickr configuration screen of your Drupal site under Configuration > Media > Flickr API Settings
  • Click Save configuration.

Step #3 - Create a Media Editor Role

This person (or these persons) will have the special permission to embed Flickr images with a shortcode in the Drupal site.

  • Click People > Roles > Add role.

  • Add a proper role name
  • Click Save.

Step #4 - Configure the Text Format for the Media Editor

  • Click Configuration > Text formats and editors.

  • Give the text format a proper name according to the role you created in Step #3
  • Select the Media attendant role
  • Select CKEditor from the dropdown list.

  • Enable and rearrange the filters shown on the image
  • Choose to display captions
  • Leave the default image size (single image) by 75px
  • Click Save configuration.

Your Text formats configuration screen looks like this:

Step #5 - Create a New User

  • Click People > Add user
  • Assign a user name and password
  • Assign this user the Media attendant role
  • Click Create new account.

Step #6 - Set permissions

  • Click People > Roles
  • Click the dropdown arrow beside Media attendant
  • Select Edit permissions
  • Check the following permissions:
    • Filter
      • Use the media attendant text format
    • Node
      • Article: Create new content
      • Article: Delete own content 
      • Article: Edit own content 
      • View published content 
      • View own unpublished content
    • System
      • View the administration theme
      • Toolbar
      • Use the administration toolbar
  • Click Save permissions
  • Click Configuration > Performance > Cache rebuild.

Step # 7 - Create an Article with a Flickr Shortcode

Open a different browser and log in as the user you created in step # 5.

  • Click Shortcuts on the administration toolbar
  • Click Add content
  • Give the node a proper title
  • Select the Text format you created in Step # 4
  • Write this shortcode into the editor:

[flickr-photo:id=9315513698]

  • Make sure that the photo is open to the public and doesn’t have any view restrictions. You get the photo ID from its URL at Flickr.

  • Finish the node and click Save.

Notice that you did not specify a size for the image, so it takes the default configuration of 75px. In order to set a specific size for the image, click the edit tab and change the shortcode like this:

[flickr-photo:id=9315513698, size=q]

The image will double its size to a 150px square.

  • Click the Edit tab once again.

Instead of one photo, you’re going to display a whole album, so you need the album ID.

You get the ID of the album from its URL at Flickr.

  • Edit the shortcode

[flickr-photoset:id=72157634694871388, size=n]

You can read more about image sizes in Flickr here. Notice that the sizes Slideshow and Basic Slideshow are not available for Drupal 8.

The Drupal 8 Flickr module allows you to embed single images and albums from Flickr in a Drupal 8 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.
Jan 30 2019
Jan 30

One of our OSTraining members asked how it was possible to make multiple displays for Drupal 8 slideshows.

In this tutorial, I will show you how to build a slideshow that uses your article content type to make a slideshow with a teaser.

Step #1. Installing the Slick modules and libraries

First, we need to install the modules and libraries needed for our slideshow.

Install and enable the modules listed below. I would recommend Ddrush for installation "drush -y en slick slick_views slick_extras blazy" or manually:

Now your "Extend menu" should look like this:

1 enabled modules

Next, we need to install the library for slick

2

  • Extract the folder you just downloaded.
  • Rename the folder to /slick/
  • Upload the files to the /libraries/ folder in the root of your site. This is different from Drupal 7, so be careful.
  • When you're finished, your folder structure will look like this:

3

Step #2: Create the Slideshow

Now we're going to use Views to create our slideshow:

  • Go to Structure > Views > Add new view.
  • Enter a "View name".
  • Click "Create a block".
  • For "Display format", choose "Slick carousel" of "fields".
  • Click "Save and edit".

4

In the fields section, add the other fields we want to use. In this case, we will be adding image, body and "Global: custom text".

5

For the image field, select "link image to" and set it to content. Clicking on the image will now take us back to the content.

6

For the body field, select "Formatter" and set it to Slick Text.

7

Go down to "Rewrite Results" and set the "Trim". In this example, I am going to use 300. This is how long the body text will be under the slideshow.

8

Now set the "title", "image", and "body" to be excluded from display. Because of the way Slick handles displays, we are going to use the "Global: custom text" to determine the order of our content.

9

Now set the "custom text". Add:

 {{ title }}

{{ body }}

10

Now we need to configure Slick. The red arrows point to the settings that you are most likely to update:

11

12

13

14

15

Now that we have finished configuring Slick, we need to alter the default pager options. Change the number of "items" to "0", because this is all handled by Slick.

16

Step #3. Place the Slideshow Block

Now we have a slideshow that displays 3 articles at a time with a teaser of content that links back to our full content. Let's add our block to the Block layout.

  • Go to Structure > Block layout.
  • Choose the region you want to use for your slideshow. In my example, I'll use "Content":

17

18

Now make sure to save the block layouts.

19

Step #4. Optimize the Images

Now that we have our slideshow working, let's optimize the images so it is more consistent. You could now create an image style specifically for your slideshow which is explained here in our slideshow tutorial.

Or simply apply one of the predefined styles. Since we already have it documented, I will simply select one of the predefined styles.

Open the view to edit.

Select the image field and update the "image style":

20

Now all the images should be restricted to a 220x220 display making the slideshow a lot cleaner. 

21


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.
Jan 30 2019
Jan 30

The "Imagepin" module allows you to create pins inside an image and display descriptive text when you hover over those pins.

This is useful because the image will not appear clogged with lots of descriptive text. From the other hand, since users like (unconsciously) this kind of interaction, it will help promote your content and increase the click rate of the “calls to action” of your page.

How to Pin Images in Drupal 8

Let’s start!

Step #1. - Install the Imagepin Module

If your Drupal installation is not based on Composer:

  • Download the module, uncompress it and place it in the /modules directory.

If your Drupal installation is based on Composer:

  • Open your terminal window
  • Go to the root (where the core folder is) of your Drupal installation and type

composer require drupal/imagepin

  • Click Extend, enable the module and click Install.

This module has no additional dependencies.

Step #2. - Create a Content Type

For the purpose of this tutorial, you will create a content type called Shoes. This content type has 5 fields (listed as they are displayed to the user):

  • Shoe image (image field type)
  • Body (text field type)
  • Color (list field type)
  • Price (number-decimal field type)
  • Buy link (link field type)
  • Click Structure > Content types > Add content type.

  • Click Add field in order to add the image field
  • Click Save field settings and Save settings
  • Click Add field
  • Select List (text)
  • Click Save and continue
  • Enter proper allowed values in the format key|value. The key part is intended for the machine to associate this field to the database. The value is the human-readable name when editing the node form and presenting the content
  • Click Save field settings
  • Click Save settings.

After the “color selection” field, you need to add the price field.

  • Click Add field
  • Select Number (decimal) from the dropdown
  • Click Save and continue
  • Leave the defaults (Precision 10, Scale 2)
  • Click Save field settings
  • Scroll down to the Prefix option and enter a dollar sign followed by a space ‘$ ‘ (without quotes)
  • Click Save settings.

  • Repeat the process with a Link field.

This will be the button that adds the item to the cart (in this particular example).

Your fields configuration screen should look like this:

  • Click the Manage display tab
  • Hide the labels for all fields
  • Click Save.

Step #3. - Configure Imagepin

  • Click the cogwheel on the right of the image field
  • Click the checkbox “Enable users to pin widgets on this image”
  • Click Update
  • Click Save.

Step #4.- Add Pins to Your Images

  • Click Content > Add content > Shoes
  • Enter a title, description, price, link text, and a link
  • Upload an image
  • Click the button Pin widgets on this image.

  • An overlay with the image will appear
  • Scroll down, in order to create a new widget
  • Enter a proper text
  • Click Add.

  • Repeat this procedure to create as many widgets as you need
  • Click the first widget in the AVAILABLE section
  • You will see an orange dot at the top left part of the image
  • Drag it and place it where you see the text fits
  • Repeat the process with the other widgets
  • Click Save these positions.

You go back to the node edit form by closing the overlay or by clicking the Esc key on your keyboard.

  • Click Save in order to save the node.

Take a look at the image and hover your mouse over the pins.

Well done!

The Drupal 8 "Imagepin" module allows you to place visual hints (pins) with descriptions on images. It can be applied to a countless group of use cases. Add this module to your site builder’s toolbelt.

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.
Jan 23 2019
Jan 23

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. We can rewrite the results, regardless of what display the view is using (table, list, grid, etc).

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.

You can install the module via the Drupal admin area, or you can use Composer. If you're using Composer, type in your terminal the following line:

composer require drupal/linked_field

Regardless of which install option you choose, go to your Drupal admin area:

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

Step #2. Create the Content Type

Let's create the content type that we'll use for this guide:

  • 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).

Add the following fields

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

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

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

Click Save and continue

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

Write an alt text for this image

  • Change the file directory to pdf-files.

Change the file directory to pdf-files

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

Click Manager form display

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

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 Update

  • Rearrange the fields.
  • Click Save.

Click Save

Step #3. Create the Content

Now let's use the content type we just created. We'll add some new nodes to our site:

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

Create three or more nodes

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

Your Content listing screen should look more or less like this

Step #4. Create the View

Finally, we've reached the point where we can 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 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 Add and configure fields

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

Click Apply

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

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 the File Download

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

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 how it's done.

Step #5. Rewrite Results

Finally, we've reached the last step! We have created our View. Now we can rewrite the output.

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


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 20 2019
Jan 20

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

In Drupal 7, the popular choice was the Fivestar module, but that's still not ready for Drupal 8.

In this tutorial, I'll show you how to use the Votingapi Widgets module in Drupal 8. This module makes use of a “Rating” field, which you can customize and insert into your content.

Step #1. Install the Voting System Module

With so many Drupal users relying on Composer now, we're going to give you two sets of instructions: with and without Composer.

  • If your Drupal installation is not based on Composer, then download the jQuery Bar Rating Plugin from Github.
  • Uncompress it.
  • Place it in the /libraries folder in the root of your installation.
  • Download the Votingapi Widgets 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

Whether you used Composer or not, make sure you enable the Voting API and Votingapi Widgets modules:

Enable the Voting API and Votingapi Widgets

Step #2. The Voting API Settings

Now that we have the modules and libraries we need, let's configure the settings.

  • Click Configuration > Voting API Settings.

Click Configuration

These are the default settings for 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 Voting Widgets

In this step, we'll create the widgets that can later be added to our content.

  • Click Structure > Content types.
  • Click "Manage fields" in 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 the 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 of 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

Now that you've created your widget, it's time to test.

  • Click Content > Add content > Article.
  • Create an article.
  • Make sure both votes fields are marked as "Open".
  • Click "Save".

Click Content

  • You should now see the published node with the voting widgets just above the Comments section.
  • Click them to verify they work correctly.

Test the voting widgets

Step #5. Configure Access Permissions

Finally, now that our voting widgets are working correctly, let's control who can vote. We're going to give voting access to all our site's visitors.

  • Click People > Permissions.
  • 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

Step #6. Find the Voting Results

To display the results of the voting, we’ll need to make a View.

  • Click Structure > Views > Add view.
  • Show Content of type Article.
  • Create a page.
  • Display format: Unformatted list of fields.
  • Click "Save and edit".

Click Save and edit

  • Click the "Add" button in the FIELDS section of the 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 click "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.
Jan 20 2019
Jan 20

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

The Animations module makes it easy to include animations on your Drupal site. 

There's a full list of the animations on the module page, but they include such wonderfully named animations as swing, tada, wobble, jello, bounceIn, bounceOut, fadeIn, rollOut, zoomIn, slideInRight and more.

In this tutorial, I'll show how to install and use the required libraries and the Animations module..

Step #1. Download the libraries

The Animations module relies on three external libraries that we have to install.

  • 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

How to Create CSS and Javascript Animations 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

Now 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. In the example below, I we're using the ROTATEINUPRIGHT effect. 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 (click on each image to enlarge it). You can see the ROTATEINUPRIGHT effect for the block, and the RUBBERBAND for the page title.

animations sequence

animations sequence

animations sequence

animations sequence

animations sequence

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.
Jan 20 2019
Jan 20

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.

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.
Jan 20 2019
Jan 20

How do I get started with Drupal development?

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

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

The Skills You Need

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

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

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

drupal 8 skills

Learn Drupal 8 Theming

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

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

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

Learn Drupal 8 Module Development

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

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

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


About the author

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

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.

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.
Jan 17 2019
Jan 17

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

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

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

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

Drupal Roles and Permissions Explained

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

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

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

Creating an Article Writer

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

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

Following are those four steps.

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

drupal roles

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

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

  • Click the Permissions tab to see the permissions available:

drupal permissions tab

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

drupal permissions tab

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

drupal permissions boxes

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

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

drupal node permissions

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

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

drupal article permissions

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

drupal admin toolbar permisisons

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

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

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

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

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

drupal create article writer

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

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

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

drupal low permissions

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

drupal create article

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

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

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

drupal masquerade

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

drupal user masquerade module

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

Creating a Moderator

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

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

Next, we'll set up the permissions:

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

drupal create moderator

  • Scroll down until you find the Forum module and check the "Administer forums" box in the Moderator column. This allows the Moderator to rearrange the forum boards if needed.
drupal administer forums
  • Scroll down until you find the Node section.
  • Give Moderator permission to create, delete any, and edit any Forum nodes.

drupal forum permissions

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

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

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

Now it's time to test the account:

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

drupal edit delete links

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

drupal user name

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

drupal edit user

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

Video on Drupal Permissions

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

[embedded content]

Want to Learn More Drupal 8?

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

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


About the author

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

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.
Nov 15 2018
Nov 15

In this blog post, I'm going to show you to enable Drupal users to select entities using the "Entity Browser" module.

This tutorial was requested by an OSTraining customer who is building a book review site. The customer wanted to use Entity Browser so that they can create this feature:

  • The site has two content types: Books and Book Reviews.
  • When users create a new Book Review, they can use a view to search for and select the book they're reviewing. For example, if they're reviewing "War and Peace", they can search for the exisiting "War and Peace" node.
  • When the book review is published, the selected node will be embedded inside the book review.

This customer request can be achieved with the help of the Entity Browser module. This module provides a browser that Drupal users can use to embed nodes into other parts of their site.

This tutorial will take you through the site-building exercise and show you how to use the Entity Browser module.

Step #1. Install the required modules

In order to use Entity Browser, you have to install the following modules: Entity Browser and Chaos Tools.

Use your preferred method to download and install these modules. I’m using Composer:

composer install drupal/entity_browser
composer install drupal/ctools

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

This will place the modules in your Drupal installation. After that click Extend, search for both modules, enable them and click Install.

Step #2. Create the Taxonomy terms

In this example, books are categorized by their genre, so we will need a vocabulary called "Book genre".

  • Click Structure > Taxonomy > Add vocabulary.
  • Give the vocabulary a proper name and description.
  • Click Save.

  • On the List tab, click Add term.

Add the following terms:

  • Adventure
  • Cookbook
  • Drama
  • Fantasy
  • Horror

Step #3. Create the Book content type

Next we'll create the content type for our books. We'll use the Book Genre taxonomy that we created in the previous step.

  • Click Structure > Content types > Add content type.
  • Create a content type called Book and add these fields with their default settings:

table

  • Click Add field once again.
  • In the dropdown list under Reference, select Taxonomy term and give it a proper label.
  • Click Save and continue.

  • Leave the Allowed number of values at 1 and click Save field settings
  • Scroll down to the bottom of the Edit screen and choose the vocabulary you want to reference in your content type. In this case: Book Genre
  • Click Save settings

  • Click the Manage form display tab.
  • Look for the Book genre field and change its widget to Check boxes / radio buttons.
  • Click Save.

Step #4. Create the Book content

Now it’s time to create 5 to 10 books and assign each one of them to a particular genre.

  • Click Content > Add content > Book.

Step #5. Create a View

After creating some sample content, you are ready now to create the view. This view will be displayed on the entity browser so you can pick a book while you are creating a book review.

  • Click Structure > Views > Add view.
  • Create a view with the title Available Books.
  • Show content of type Book.
  • Leave the Page and Block settings unchecked.
  • Click Save and edit.

  • Click the Add button under the DISPLAYS section.
  • Select Entity Browser.

  • Click Rearrange besides the SORT criteria and remove the Content: authored on desc criterion.
  • Click Apply.
  • Click ADD besides the FILTER criteria and select the Book genre field.
  • Click Add and configure filter criteria.

  • Make sure the Book genre Vocabulary is selected.
  • Change the Selection type to Dropdown.
  • Click Apply and continue.

  • Check Expose this filter to visitors, to allow them to change it.
  • Make sure the Operator is selected as Is one of.
  • Click Apply.

  • Add the Title field to the SORT criteria.
  • Leave the default configuration Sort ascending and click Apply.

This will present the books in the view in alphabetical order. You have to insert some more fields to be displayed on the view. At the moment, there is only the node title available.

  • Click the Add button on the Fields Section.
  • Look for the book cover field and click Add and configure fields.

  • Select Image style (Thumbnail 100x100) and click Apply.
  • Click Add once again in order to add the Entity browser bulk select form field.
  • Click Add and configure fields.

  • Click Apply.

The use of this field is mandatory if you want to use Entity Browser, so pay special attention to this.

  • Change the format of the view, for example to Grid.
  • Click Apply twice.

The configuration of the view in Views UI should look like the image below. Click Save in order to save the View.

Step #6. Configure the Entity Browser module

In this step, we'll choose the setting the key module in this tutorial: Entity Browser.

  • Click Configuration > Entity browsers

  • Click Add Entity browser.
  • Give it a proper label, for example, Book browser.
  • As display plugin select iFrame.
  • Click Next.

  • Check Auto open Entity browser and click Next.

  • Click Next two more times until you land at the Widgets configuration page.
  • Click the dropdown list in order to select the View widget plugin.
  • Change the label of the widget, for example: “Choose a book”.
  • Select the view you configured in the Step #5.
  • Click Finish.

Step #7. Create the Book review content type

Our site is nearly complete. Before we finish, we do need to create the content type that book reviewers can use:

  • Click Structure > Content types > Add content type.
  • Name this content type Book review.
  • Add a new field, from the Reference section choose Content.
  • Give this field a proper label, for example, The book.
  • Click Save and continue.
  • In the Type of item to reference option select Content.
  • Click Save field settings.

  • Click Save settings.
  • Click the Manage form display tab for this content type.
  • Locate the reference field and change its widget to Entity browser.
  • Click the cogwheel on the right and select Book browser (or whatever you called the browser you just created in Step #6.
  • Click Update.
  • Click Save.

Notice that you also have the option to display only the Entity label or the Full rendered entity. You could use view modes (e.g. Teaser) to present the entity on this new Book review content type.

Step #8. Create the book reviews

Now our site is nearly ready to use. Let's create a book review and see if everything is working correctly.

  • Click Content > Add content > Book review.
  • Give this node a proper title and body texts.
  • Scroll further down and you will find a collapsed section called THE BOOK (that is the name of the field).
  • Click this field and you will see the Entity Browser where you can select the Book you are referencing in this Book review.
  • Furthermore, there is an exposed filter on top so you can select books only pertaining to one genre.
  • Select a genre and click Apply.

The browser will show you only books within this genre.

  • Select a book and click Select entities.

  • After embedding the entity click Save and you will see the referenced Book entity on the Book review node.

Final result

This tutorial has demonstrated the power of the "Entity Browser" module for Drupal 8. I hope you liked it. 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 07 2018
Nov 07

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.

Step #1. Install the Charts Module and the Library

I'm going to walk you through how to install the Charts module and the library you'll need.

  • 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

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:

05 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
  • Add the required fields to match your data:

add required fields

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

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

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

10 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. Save the view when you've finished.

play with configuration options

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 Full 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 Use the CKEditor Accordion in Drupal 8

Conclusion

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

Thanks for reading!


About the author

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

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

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

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

Entity Reference Views in Drupal 7

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

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

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

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

Entity Reference Views Widget

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

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

[embedded content]

Entity Reference Views in Drupal 8

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

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

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

The setting Views: Filter by an entity reference view

About the author

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

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

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

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

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

Step #1. Create a content view

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

add field

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

03 add field

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

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

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

About the author

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

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

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

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

Three menu levels

Step #1. Install the module and libraries

First, let's install the module:

Now, let's install the libraries:

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

 Superfish module file structure

Step #2. Create the menu structure

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

Click Add menu button

  • Enter the menu title and click the Save button:

Add site title and click Save

Step #3. Add the menu links

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

Click Add link button

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

Create menu link and click Save

Once you have created all the links:

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

Match the menu structure and click Save

Step #4. Place the menu

Menus in Drupal 8 are rendered as block entities.

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

Click Place block button

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

Click Place block button

Step #5. Finalize the Superfish configuration

  • Uncheck the Display title checkbox:

Uncheck Display title checkbox

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

Block settings

Advanced settings

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

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

You have a multi level dropdown menu now

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


About the author

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

Pages

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web