Upgrade Your Drupal Skills

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

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

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

Notice: This module is not for creating ebooks.

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

Keep reading to learn how to use this module!

How to use the Drupal book module

Step #1. - Enable the Module

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

How to use the Drupal book module

Step #2. - The Book Content Type

  • Click Structure > Content types.

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

  • Click Manage fields.

How to use the Drupal book module

Add an image field with the default settings.

How to use the Drupal book module

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

How to use the Drupal book module

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

How to use the Drupal book module

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

How to use the Drupal book module

Step #3. - The Book Outline

  • Click Structure > Books.

How to use the Drupal book module

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

  • Click the Settings tab.

You have two settings here:

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

How to use the Drupal book module

Step #4. - Create a Book

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

How to use the Drupal book module

How to use the Drupal book module

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

How to use the Drupal book module

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

How to use the Drupal book module

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

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

How to use the Drupal book module

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

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

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

How to use the Drupal book module

  • Click Save.

How to use the Drupal book module

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

How to use the Drupal book module

How to use the Drupal book module

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

How to use the Drupal book module

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

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

To check the finished outline,

  • Click Structure > Books > Edit order and titles.

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

  • Click Save book pages after you are finished editing.

How to use the Drupal book module

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

How to use the Drupal book module

I hope you liked this tutorial. Thanks for reading!


About the author

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

Mega menus are not a design trend anymore, but an essential part of most of the websites related to news or eCommerce.

The Menu Item Extras module for Drupal 8 improves the default menu system in Drupal, by allowing the site builder to add fields to the menu items. That way, it is possible to create a mega menu with a couple of simple steps.

Follow along to learn how to use this module. Let’s start!

Step #1: Install the Required Modules

In addition to the Menu Item Extras module, you will need to install Viewfield. Viewfield provides a field that holds a reference to a View and renders it whenever the entity containing the field is displayed.

  • Open the terminal application of your PC.
  • Type:
    • composer require drupal/viewfield
    • composer require drupal/menu_item_extras

200414 menu item extras 001200414 menu item extras 001

Enable both modules after downloading.

  • Click Extend.
  • Check both modules.
  • Click Install.

200414 menu item extras 003

Step #2: Create a Taxonomy System

Perhaps the word “system” is not very appropriate since we will only create one vocabulary with ten associated terms. However, this example will explain the basics, so you can work with more complicated taxonomy systems in the future.

  • Click Structure > Taxonomy > Add vocabulary.
  • Enter the name “Topics” and click Save.
  • Click Add term and add all terms detailed below one by one.
    • Topics
      • D8
      • Symfony
      • WP
      • Magento
      • CSS
      • HTML
      • JS
      • PHP
      • Python
      • DevOps

200414 menu item extras 004

Step #3: Create the Content Types

For the purpose of this tutorial, we are going to use 2 content types with the following fields:

  • Services
    • Service Image / Image / Allowed number of values: 1
    • Intro text / Text (formatted) / Allowed number of values: 1
    • Description / Default field

200414 menu item extras 005

  • Blog
    • Category / Taxonomy term / Allowed number of values: unlimited
    • Description / Default field

200414 menu item extras 006

Make sure you select the Reference type (Topics) when creating the Taxonomy field.

200414 menu item extras 007

Step #4: Create Content

We are going to create 3 nodes of type Service:

  • Tutorials
  • Videos
  • Books

Each one of these nodes will be associated with a second-level element in the mega menu. On the other hand, we are going to create about 10 nodes of type Blog with different terms associated with them. Make sure that you include 2 of the terms (ex.: D8, WP) with more frequency than the others.

200414 menu item extras 008

The Content screen should look at the end of this process more or less like the image below.

200414 menu item extras 009

Step #5: Create the Menu Items

The first level of the main menu will have the following menu items:

  • Home
  • About
  • Resources
  • Contact

Each one of the menu items will have an additional (extra) field. This field will be set at the second level of the menu, that is, each one of the card items in the mega menu. This field will allow us to present each one of the view blocks.

  • Click Structure > Menus.
  • Click Edit menu, to edit the Main navigation.

200414 menu item extras 010

  • Click Add link 3 times to add the missing first-level menu items.
  • Click Save each time you enter a menu item name.

Use the special tag to display only the link text.

200414 menu item extras 011

200414 menu item extras 012

Once you have created and rearranged the links of your menu,

  • Click Manage fields > Add field, to add a field to the menu items.
  • Select a field of type Viewfield.
  • Give it a proper name and label.
  • Click Save and continue.

200414 menu item extras 013

  • Set the Allowed number of values to Unlimited.
  • Click Save field settings

200414 menu item extras 014

You will have the option to link a default view to this particular field. Leave these fields empty.

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

200414 menu item extras 015

  • Hide the menu card label.
  • Click Save.

Step #6: Create the Views

  • Click Structure > Views > Add view
  • Show Content of type Services.
  • Create a block with an unformatted list of fields.
  • Choose to show 3 items per block.
  • Click Save and edit.

200414 menu item extras 016

  • Add the Service image field
  • Set the image style to Thumbnail and link the image to the Content.
  • Click Apply

200414 menu item extras 017

  • Add the Intro text field as well.
  • Rearrange the fields.
  • Click Save.

200414 menu item extras 018

  • Click Structure > Views > Add view
  • Show Content of type Blog.
  • Create a block with an unformatted list of fields.
  • Choose to show 1 item per block.
  • Click Save and edit.

How to Use the Menu Item Extras Module for Drupal 8

  • Add the field Category.
  • Click Add and configure fields.
  • Click the Multiple field settings.
  • Select Unordered list.
  • Set the number of values to display to 3.
  • Click Apply.

200414 menu item extras 020

  • Remove the Sort criterion
  • Click Apply.
  • Click Save to save the view.

Step #7: Add the View Blocks to the Menu Items

  • Click Structure > Menus
  • Edit the Main navigation.
  • Edit the menu item Resources.
  • Add the 2 blocks you created in step # 5.
  • Click Save.

200414 menu item extras 021

Step #8: The CSS Styles

I am not going to explain this code in detail since it is out of the scope of this tutorial. However, you can research more about Drupal Views and CSS Grid in this article. If you want to practice more with mega menus, take also a look at this article.

#block-bartik-main-menu a,
#block-bartik-main-menu li span {
background: transparent;
text-shadow: unset;
color: whitesmoke;
}

#block-bartik-main-menu .menu-level-0 {
display: grid;
grid-template-columns: repeat(4, 1fr);
}

#block-bartik-main-menu .field--name-field-menu-card .field__items {
display: flex;
}

#block-bartik-main-menu .menu-dropdown-0 {
position: absolute;
left: 0;
top: 166px;
width: 100%;
z-index: 10;
}

#block-bartik-main-menu a,
#block-bartik-main-menu li span {
background: transparent;
text-shadow: unset;
color: whitesmoke;
}

#block-bartik-main-menu .menu-item {
display: grid;
align-content: center;
justify-content: center;
}

#block-bartik-main-menu .menu-level-0 {
display: grid;
grid-template-columns: repeat(4, 1fr);
}

#block-bartik-main-menu .menu-dropdown-0 {
position: absolute;
left: 0;
width: 100%;
padding-top: 16px;
background-color: rgba(141,139,132, 0.9);
}

.view-tutorials .view-content {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

.view-tutorials .views-row {
display: grid;
justify-items: center;
}

.view-tutorials .views-row span > a {
font-size: 1.3rem
}

.view-tutorials .views-row .views-field-field-intro-text {
font-size: 1rem;
}

#block-bartik-main-menu a,
#block-bartik-main-menu li span {
background: transparent;
text-shadow: unset;
color: whitesmoke;
}

#block-bartik-main-menu .menu-level-0 {
display: grid;
grid-template-columns: repeat(4, 1fr);
}

#block-bartik-main-menu .field--name-field-menu-card .field__items {
display: flex;
}

#block-bartik-main-menu .menu-dropdown-0 {
position: absolute;
left: 0;
top: 166px;
width: 100%;
z-index: 10;
}

#block-bartik-main-menu a,
#block-bartik-main-menu li span {
background: transparent;
text-shadow: unset;
color: whitesmoke;
}

#block-bartik-main-menu .menu-item {
display: grid;
align-content: center;
justify-content: center;
}

#block-bartik-main-menu .menu-level-0 {
display: grid;
grid-template-columns: repeat(4, 1fr);
}

#block-bartik-main-menu .menu-dropdown-0 {
position: absolute;
left: 0;
width: 100%;
padding-top: 16px;
background-color: rgba(141,139,132, 0.9);
}

.view-tutorials .view-content {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

.view-tutorials .views-row {
display: grid;
justify-items: center;
}

.view-tutorials .views-row span > a {
font-size: 1.3rem
}

.view-tutorials .views-row .views-field-field-intro-text {
font-size: 1rem;
}

200414 menu item extras 022

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 17 2020
Jan 17

Drupal is well known for its flexibility in managing and presenting content. Drupal View Modes allow you to render (display) a Drupal entity or entities (like nodes) in a certain way, based on a particular context. 

This tutorial will demonstrate the usage of Drupal View Modes with an example. We will install and also use the modules Field Group and Display Suite.

Let’s get started!

Step #1. Install the Required Modules

  • Open terminal application and place the cursor in the root of the Drupal installation.

  • Type:

composer require “drupal//field_group:^3.0"

composer require drupal/ds

What are View Modes in Drupal 8

What are View Modes in Drupal 8 

  • Click Extend.

  • Enable Display Suite and Field Group.

  • Click Install.

What are View Modes in Drupal 8

The system will prompt you to enable the Layout Discovery module.

  • Click Continue.

No further modules are required.

Step #2. The Content Type

For the purpose of this tutorial, we am going to create a content type called ‘Famous person’ with the fields detailed in the table below. Follow along with the same content type or create another one, like ‘Author’, ‘Patient’ or even another entity type like ‘Member’, for example — remember, view modes can be applied to all kinds of entities, not just nodes

Field name

Field type 

Allowed number of values

Additional info

Image

Image

1

 

Born

Date

1

Date only - Field group Personal data

Died

Date

1shu

Date only - Field group Personal data

Known for

Text (formatted long)

1

Field group Personal data

Early life

Text (formatted long)

1

 

Lifework

Text (formatted long)

1

 

Death

Text (formatted long)

1

 

Trivia

Text (formatted long)

1

Bulleted list

File download

File 

Unlimited

Additional files to download / Allowed file extensions: txt, pdf, doc, xls, xlsx, docx, jpg, png

Related links

Link

Unlimited

Link to other resources

 The fields:

  • Born

  • Died

  • Known for

will be grouped in a field group called Personal data.

What are View Modes in Drupal 8

Step #3.  Create the Field Group

  • Click Manage display > Add field group.
  • Select Fieldset in the dropdown.
  • Add a proper label.
  • Click Create group.

What are View Modes in Drupal 8

  • Drag the fieldset below the Image field. 

  • Hide the Image label.

  • Group the fields inside the fieldset by indenting them.

  • Make the labels within the fieldset inline.

  • Click Save.

What are View Modes in Drupal 8

Notice, that we are already configuring one of the two active view modes in Drupal (Default and Teaser).

The Default view mode shows the whole node, whereas the Teaser view mode shows the teaser display of articles on the front page of Drupal.

Step #4. Create Content

  • Click Content > Add Content > Famous person

  • Create 4 to 5 nodes

What are View Modes in Drupal 8

 Step #5. Create Custom View Modes

  • Click Structure > Content types.

  • Select Manage display for the ‘Famous person’ content type.

What are View Modes in Drupal 8

  • Scroll down and click Custom display settings.

  • Click Manage view modes.

Here we can configure existing view modes across different entity types (bundles). We can also create custom view modes to match our design or information requirements. 

  • Click Add view mode. 

What are View Modes in Drupal 8

  • Click Content.

  • Give the view mode a proper name.

  • Click Save.

200106 view modes 010

  • Create 2 more view modes.

I used these names:  Lifework view mode   -   Trivia view mode

What are View Modes in Drupal 8

  • Click Structure > Content types.

  • Select Famous person > Manage display.

  • Scroll down and click Custom display settings once again.

  • Check the 3 view modes you have just created.

  • Click Save.

What are View Modes in Drupal 8

  • Click the Personal data view mode.

  • Scroll down and select Two column layout (under the Display Suite options) from the dropdown.

  • Click Save.

  • Click Save again (eventually) to move fields to the new column.

  • Drag the Personal data fieldset to the top of the left column.

  • Place the three corresponding fields accordingly.

  • Place the image on the right column.

  • Change the Image style to medium.

  • Click Update.

  • Drag all other fields to the Disabled section.

  • Scroll down and click Save.

What are View Modes in Drupal 8

  • Repeat the process with the other two view modes Using the layout options:

    • Three-column equal width

    • Three-column 25/50/25

What are View Modes in Drupal 8

What are View Modes in Drupal 8

Step #6. Create a View

  • Click Structure > Views > Add view.

  • Give the view a proper name. 

  • Select Content of type Famous person.

  • Check Create a block.

  • Change the number of Items per block to 1.

  • Check Use a pager.

  • Click Save and edit.

What are View Modes in Drupal 8

  • Click the Fields option under the Format section. 

  • Select Content.

  • Click Apply.

What are View Modes in Drupal 8

  • Select the first view mode. 

  • Click Apply.

  • Click Save.

What are View Modes in Drupal 8

  • Click the Advanced section on the right of Views UI.

  • Click on Use AJAX: No.

  • Check Use AJAX.

  • Click Apply.

  • Click Save.

What are View Modes in Drupal 8

  • Create 2 more blocks with the same process. The only setting that will differ will be the view mode in the Format section.

What are View Modes in Drupal 8

What are View Modes in Drupal 8

Step #7. Place the Blocks

  • Create an article with just the title.

  • Click Save.

What are View Modes in Drupal 8

  • Click Structure > Block layout.

  • Scroll down to the Content section.

  • Click Place block.

  • Search for all 3 blocks.

What are View Modes in Drupal 8

  • Click Place block.

  • Uncheck Display title. 

  • Restrict the block to the article we just created.

  • Click Save block.

What are View Modes in Drupal 8

  • Repeat the process with the other 2 blocks.

  • Rearrange the blocks beneath the title.

  • Click Save blocks.

What are View Modes in Drupal 8

Head over to the article and take a look.

What are View Modes in Drupal 8

Drupal coolness! Congratulations!

Please tell us how you plan to use this useful Drupal feature. 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 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.

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