Author

Upgrade Your Drupal Skills

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

See Advanced Courses NAH, I know Enough
Oct 08 2020
Oct 08

From its conception, the fundamental (ground) idea of the internet was the exchange of information through code snippets of a markup language. This is still the ground principle that moves the internet these days. There are, of course, a lot of other things you can do over the internet, but it all comes down to an exchange of information.

With this kind of freedom, it is not surprising, that people abuse this for their own benefit. Spam comments are a form of abusing this privilege.

The combination of the Drupal modules Honeypot and Antibot will ensure that your site is “almost” 100% protected from spam (at least the ones produced by robots).

Keep reading to learn how to Control Spam in Drupal with Honeypot and/or Antibot!

 Step #1. - Install the Required Modules

  • Open the terminal application of your computer.
  • Place the cursor on the root of your Drupal installation.
  • Type:

composer require drupal/honeypot

composer require drupal/antibot

These two commands will install the codebase of both modules on your site.

Control Spam with Honeypot and Antibot in Drupal

Now it is time to enable them.

  • Click Extend and look for the Honeypot and Antibot modules.
  • Click Install.

Control Spam with Honeypot and Antibot in Drupal

Step #2. - Configure Honeypot

  • Click Configuration > (Content authoring) > Honeypot configuration.

Honeypot uses two methods to detect whether a form is filled by a human being or a pre-written script (also known as robot or just bot):

  1.  A hidden field (added by Honeypot). You can label this field whatever you want, but it makes sense to give it a unique “sticky” name, like “homepage” or “url” - this field is mandatory. Since people are not able to see this field, they also will not be able to fill it out. Bots will fall into the trap, and the form will be filed out; therefore detected as spam.
  2. The timestamp. If the form is filled out in less than 5 seconds, Honeypot will assume that it is being filled out by a robot, since people usually need more time to fill out a form on the internet. You can configure the time in seconds or leave this setting disabled at all if you prefer - with 0.

Notice: Pages containing honeypot-protected forms will NOT be cached.

  • Check Log blocked form submissions.

Consider it some kind of “best practice” to get as much information as possible about what is happening within your Drupal system. Always use and check the logs.

  • Leave the default “Honeypot default element” value.
  • Leave the honeypot time limit of 5.
  • Select the forms you wish to be protected by Honeypot
  • Click Save configuration.

Control Spam with Honeypot and Antibot in Drupal

Step #3. - Honeypot Permissions

It is possible to bypass the Honeypot method by assigning the right permissions to certain roles.

  • Click People > Permissions
  • Locate the Honeypot permissions.
  • Make the required changes.
  • Scroll down and click Save permissions.

Control Spam with Honeypot and Antibot in Drupal

Step #4. - Configure Antibot

Antibot checks if the browser has JavaScript enabled. If not, it will ask the user to enable it. Since bots do not use graphical browsers, it is very unlikely for the bot to fill out the form in the first place.

If it has JavaScript enabled, Antibot will check for a keypress, a mouse movement, or a swipe gesture. This determines the human nature of the user once again.

Control Spam with Honeypot and Antibot in Drupal

Antibot uses JavaScript in the same way to prevent bots from submitting data remotely to the forms on your site via cURL for example. cURL is a command-line program used to transfer files over networks, e.g. over the internet. It adds a unique key to the form values. This key is also generated via JavaScript.

The code of Antibot runs statically, so page caching will be not be disabled on pages containing antibot-protected forms.

  • Click Configuration > User Interface > Antibot.

You can configure the forms protected by Antibot on this interface. To protect multiple forms with the same base URL, add a ‘*’ character.

Control Spam with Honeypot and Antibot in Drupal

Summary

It is possible to control computer-generated spam either with the Drupal Honeypot, or the Drupal Antibot modules. You can also use a combination of both modules if you prefer on all forms or using one of them to particular forms on your site. It all depends on your needs and the ones of your web site..

Thanks for reading!


About the author

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

Sometimes, when developing a site with many content types, it can happen that your Drupal system may slow down “a little bit”. In most cases, that has nothing to do with Drupal itself, but it lies in the lack of resources of your local environment.

In those cases, it helps to save time by avoiding one or two clicks (that implies one or two page-loads) on the backend of your Drupal site.

The Drupal Coffee module provides a floating text box, which filters the results of the backend menus, according to the user’s input, whereas the Admin Toolbar module turns the default Drupal Toolbar into a dropdown menu.

Keep reading, to learn how to use these modules!

Step #1. - Install the Required Modules

  • Open the terminal application of your PC
  • Type:
    • composer require drupal/coffee   
    • composer require drupal/admin_toolbar

Once the modules are installed, you have to enable them.

  • Click Install Now.
  • Click Activate. 

Development Aids in Drupal with Coffee and Admin Toolbar

 Step #2. - The Coffee Module

The Coffee module provides a search box when pressing the shortcut alt+d.

  • Press alt+d
  • Type cache

You will be presented with all available options in the backend of your site, that are related to the cache. For instance, if you were working with theme templates, it will not be necessary to flush all caches, but only the twig caché.

Furthermore, you save time, since you do not have to click your way to the Performance screen (that is, Configuration > Performance > Clear all caches - 3 clicks).

Dev Aids in Drupal - coffee and Admin Toolbar

Another feature of the Coffee module is the ability to add nodes directly from the search box.

  • Type alt+d
  • Type :add

A dropdown will be displayed with a list of all possible content types that can be added.

Dev Aids in Drupal - coffee and Admin Toolbar

 Step #3. - The Admin Toolbar Module

As you might notice, the default toolbar now has a different look. Since we enabled the Admin Toolbar Module, there is an extra (drop) icon in the upper, left corner. If you hover over it, you will be presented with pure development options.

The link called Index leads you to a list of all administrative tasks available on your system.

Dev Aids in Drupal - coffee and Admin Toolbar

These links are provided by the Admin Toolbar Extra Tools module.

Another thing to notice is that the toolbar has turned itself into a dropdown menu. You get access to the different locations of your backend, by hovering over the menu items.

This helps you save valuable development time.

Dev Aids in Drupal - coffee and Admin Toolbar

Summary

As you already noticed, the Drupal modules Coffee and Admin Toolbar help you spare time during development and on production as well.

Use either of them or a combination of both to speed up your Drupal development.

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 09 2020
Jul 09

The reCAPTCHA module for Drupal 8 integrates the reCAPTCHA service provided by Google with your Drupal site. This service provides additional protection by detecting if the user accessing your site is a real person or a robot. 

Keep reading to learn how to use this module!

Step #1.- Install the Required Modules 

  • Open the terminal application of your PC.
  • Type: composer require drupal/recaptcha
  • Click Extend.
  • Scroll down and enable Captcha, Image Captcha, and reCAPTCHA.
  • Click Install

How to Use the Recaptcha Module in Drupal 8 

Step #2.- Configure the Module

  • Click Configuration > CAPTCHA module settings > reCAPTCHA.
  • Click the link register to reCAPTCHA.
  • Select v2 of reCAPTCHA.
  • Enter a valid domain name (this will not work on a local installation).
  • Accept the Terms.
  • Click Send / Ok.

How to Use the Recaptcha Module in Drupal 8

How to Use the Recaptcha Module in Drupal 8

You will get the Site Key and Secret Key. Paste them on the reCAPTCHA settings of your Drupal backend accordingly.

How to Use the Recaptcha Module in Drupal 8

How to Use the Recaptcha Module in Drupal 8

  • Scroll down and click Save configuration.
  • Click CAPTCHA Settings.
  • Change the default challenge type to reCAPTCHA.
  • Leave the other defaults.
  • Click Save configuration.

How to Use the Recaptcha Module in Drupal 8

Note: The image captcha module provides those “old-fashioned” challenges with an alphanumeric image.

How to Use the Recaptcha Module in Drupal 8

  • Click the Form settings tab.
  • Enable the Contact Message Feedback Form.
  • Click Edit.

How to Use the Recaptcha Module in Drupal 8

  • Add a proper name.
  • Select the reCAPTCHA challenge type.
  • Click Save.

How to Use the Recaptcha Module in Drupal 8

 Step #3.- Test the Contact Form

  • Use another browser to access the site as an anonymous user.
  • Navigate to yoursite/contact/feedback.

You should see the well-known “I’m not a robot checkbox”. If you click on it, you will get an image challenge to verify whether the user sending the form is human or not.

How to Use the Recaptcha Module in Drupal 8

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 23 2020
Jun 23

The default Content overview in Drupal is a view. You can perform actions on multiple nodes by selecting one of them from the dropdown and applying it in bulk.

 How to Use The Views Bulk Operations Module in Drupal 8

The Views Bulk Operations module for Drupal 8 enhances this list of actions by adding some more actions to it. For example, you can change the author or delete the comments of one or multiple nodes with just one click.

How to Use The Views Bulk Operations Module in Drupal 8

Keep reading to learn how to use this module!

Note: This example will not work if you generate content with the Devel module.

Step #1. - Install the Required Modules

  • Open the terminal application of your PC and place the cursor in the root of your Drupal installation
  • Type: composer require drupal/views_bulk_operations

How to Use The Views Bulk Operations Module in Drupal 8

  • Click Extend
  • Scroll down and enable Views Bulk Operations and Actions Permissions
  • Click Install

How to Use The Views Bulk Operations Module in Drupal 8

The Actions Permissions submodule allows you as admin to allow or restrict access to the default (or custom) Views Bulk Operations actions to certain users, based on their role within the Drupal platform.

Step #2. - Create an Authenticated User

  • Click People > Add user

How to Use The Views Bulk Operations Module in Drupal 8

  • Enter the required data
  • Click Create new account

How to Use The Views Bulk Operations Module in Drupal 8

Step #3. - Create a View

Besides the 2 default content types in Drupal, I have created an extra content type called “Sponsored Article”. Furthermore, I have created 10 nodes between Articles and Pages as admin user.

  • Click Structure > Views > Add view
  • Give the view a proper name
  • Check Create a page
  • Change the number of items to display to 50
  • Click Save and edit

200609 drupal vbo 005

Let’s tweak the view a little bit.

  • Click Content under the FORMAT section and change the format to Table
  • Click Apply two times
  • Click the Add button under the FIELD section and add the Body field
  • Set the formatter to Trimmed with a limit of 150 characters
  • Click Apply

How to Use The Views Bulk Operations Module in Drupal 8

  • Add the field Authored by (Content)
  • Click Add and configure fields
  • Uncheck Link label to the referenced entity
  • Click Apply

How to Use The Views Bulk Operations Module in Drupal 8

  • Enable the Views bulk operations field
  • Click Add and configure fields

How to Use The Views Bulk Operations Module in Drupal 8

  • Scroll down under the Selected actions and select Change the author of content

Take a look at the other actions available. You might be wondering if there is a difference between Delete selected entities and Delete content item. For example, if you have a multilingual site, the entity would be the base article and the content items would be the translated articles. If you are editing an Italian translation, Delete selected entities would erase the whole entity from the database, whereas Delete content item would only eliminate the Italian article. This principle applies also in Drupal Commerce with Products and Product displays.

  • Click Apply

How to Use The Views Bulk Operations Module in Drupal 8

  • Rearrange the fields like in the image below
  • Click Apply

How To Use The Views Bulk Operations Module in Drupal 8

  • Edit the Table settings
  • Click the checkbox to make the Authored by field sortable
  • Click Apply

How to Use The Views Bulk Operations Module in Drupal 8

  • Save the view

Step #4. - Bulk of Editing Nodes

You can head over to the view page now. 

  • Click Authored by to sort by the author field (i only have one author in my installation)

The upper checkbox with gray background allows you to select all results on the page (not in the whole view), in case there were more than 50 results. 

  • Select 4 - 5 nodes
  • Select Change the author of content from the dropdown

How to Use The Views Bulk Operations Module in Drupal 8

You will only have this option since we selected only this action when configuring the field on step #3.

  • Click Apply to selected items
  • Scroll down and select the name of the authenticated user from Step #2. 
  • Click Apply

How to Use The Views Bulk Operations Module in Drupal 8

Those entities belong now to that particular user.

Let’s edit the view one more time. A blue-grey pencil will appear if you hover on the top right area of the view. Click that pencil to edit the view.

  • Add a filter
  • Search for and select the field Authored by
  • Click Add and configure filter criteria

How to Use The Views Bulk Operations Module in Drupal 8

  • Check Expose this filter to visitors, to allow them to change it
  • Click Apply

How to Use The Views Bulk Operations Module in Drupal 8

  • Save the view

Now you have a text box to filter out by the author of the content. 

How to Use The Views Bulk Operations Module in Drupal 8

In this tutorial, you learned how to sort content by column in a Views table, and how to filter it by a field with an exposed filter. You learned also the basic usage of the Views Bulk Operations module for Drupal 8. 

It is possible to code custom actions to meet the specific needs of the content and/or the site. This is out of the scope of this tutorial, but you can check the documentation of the Views Bulk Operations Example submodule, which comes with the main module by default.  

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

The Sidr module for Drupal 8 allows site builders and themers to add one or more sliding menus to their sites in a very uncomplicated way. It makes use of the open-source Sidr jQuery library. Keep reading if you want to learn this useful module!

Keep reading to learn how!

Step # 1.- Install the Required Modules

  • Open the terminal application of your system.
  • Place the cursor at the root directory of your Drupal installation (the composer.json file is there).
  • Type: composer require drupal/sidr

How to Integrate a Sliding Menu in Your Drupal 8 Site

This will download the module from its project page on Drupal.org and place it inside the /modules/contrib folder. 

We need to download the JS library from its project page as well.

  • Download and uncompress the file. 
  • Create a libraries directory in the root of your Drupal installation, in case that there is no one available. 
  • Create a directory inside libraries called sidr.
  • Copy the whole content of the dist folder (inside the uncompressed file) into the sidr directory. 

How to Integrate a Sliding Menu in Your Drupal 8 Site

How to Integrate a Sliding Menu in Your Drupal 8 Site

  • Click Extend.
  • Enable Sidr.
  • Click Install.

How to Integrate a Sliding Menu in Your Drupal 8 Site

Step #2. - Create a Custom Region

I am assuming that you already know how to create a subtheme. If you do not know about subthemes yet, take a look at this tutorial and then come back here.

  • Open mysubtheme.info.yml
  • Create a custom region called sidr_container.
  • Open page.html.twig and include the region you created before in this template.
  • Save all files.

How to Integrate a Sliding Menu in Your Drupal 8 Site

  • Click Configuration > Performance > Clear all caches.

Step #3. - Place the Trigger Button

The module provides a block. This block triggers the hidden “sidr” container, so you can open or close the menu. First, we need to hide the region we declared in Step #2 with CSS.

  • Open the stylesheet of your theme.
  • Copy and Paste this code:
#sidr-container {
    display: none;
}
#sidr-container {
    display: none;
}
  • Click Structure > Block layout.
  • Click Place block in the Header region.
  • Locate the Sidr trigger button block.
  • Click Place block. 

The Sidr options will be displayed in a modal window.

  • Uncheck Display title.
  • Enter a proper label for the trigger text.
  • Add the region you want to display inside the Sidr container. 
  • Change the menu location to Right. 
  • Click Save block.

How to Integrate a Sliding Menu in Your Drupal 8 Site

  • Scroll down and click Save blocks.
  • Locate the Sidr Container region.
  • Click Place block.
  • Search for the Main navigation.
  • Click Display block.
  • Uncheck Display title.
  • Click Save block.
  • Scroll down and Click Save blocks.

How to Integrate a Sliding Menu in Your Drupal 8 Site

Make sure that you use the right CSS selector (‘#’ if you are using the element id or ‘.’ if you are using its class instead). As you can see, you can make use of all Drupal blocks within the Sidr Container. Notice also that you are using 2 instances of the same menu block within 2 different regions of your site.

Let’s add the logo image:

  • Click Appearance and edit the settings of your theme.
  • Upload a logo image. 
  • Click Save configuration. 
  • Click Block layout.
  • Remove the Site Branding block from the Header region. 
  • Add the Site branding block to the Sidr region.
  • Scroll down and click Save blocks.

How to Integrate a Sliding Menu in Your Drupal 8 Site

You can enhance the look and feel of your sliding menu with CSS code. 

I hope you liked this tutorial, thanks for reading.

Check out my other blog on How to Create a Bartik Sub-Theme.


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 23 2020
Apr 23

There are cases, in which you do not need full e-commerce functionality (like Drupal Commerce) in your Drupal site, because you only sell a few products and the implementation of such a solution is financially and/or timely not viable.

PayPal allows you to create as many buttons as you like and embed them on your site through an HTML snippet.

This snippet will be then hardcoded at the template (theme) level on your Drupal system. This is not the most accurate solution for this problem, however, it is the quickest and simple to implement.

Keep reading to learn how!

Note: The creation of a subtheme is required. If you do not know how to create a subtheme in Drupal yet, take a look at this article.

Step #1.- Create the Paypal Button

  • Log in to your PayPal Account.
  • Click Manage Buttons (right column)

How to Embed a PayPal Button in Your Drupal 8 Site

The creation of a simple PayPal button has one required and two optional sections represented by accordion tabs. It is only necessary to fill out the first part of the interface to have a functional button.

  • Change the Button type.
  • Enter a proper description and price.
  • Click Create button.

How to Embed a PayPal Button in Your Drupal 8 Site

You will be redirected to another screen. 

  • Select and copy the code.
  • Paste the code in a text editor.

How to Embed a PayPal Button in Your Drupal 8 Site

 Step #2.- Create the Product Content Type

Let’s suppose we sell mugs to a cost of 6.95 USD. It makes sense to create a content type called Mug.

  • Click Structure > Content types > Add content type. 
  • Enter a proper name.
  • Click Save and manage fields.
  • Click Add field:
    • Field type: Number (decimal)
    • Title: Price
  • Click Save and continue.
  • Click Save field settings.
  • Add the suffix USD.
  • Click Save settings.

How to Embed a PayPal Button in Your Drupal 8 Site

  • Add an image field.
  • Rearrange the fields in the Manage display tab in this order:
    • Image
    • Body
    • Price
  • Hide the Body and Image labels.
  • Change the image style to Large 480x480.
  • Set the Price label to Inline.
  • Click Save.

How to Embed a PayPal Button in Your Drupal 8 Site

 Step #3.- Enable Template Debugging

  • Open sites/default/services.yml

In case the file services.yml is not available, copy sites/default/default.services.yml and rename it to services.yml.

  • Locate the twig.config section and change the value of debug: false to debug: true.

How to Embed a PayPal Button in Your Drupal 8 Site

  • Save the file.
  • Click Configuration > Performance > Clear all caches.

 Step #4. - Create Content

  • Click Content > Add content > Mug.
  • Add a proper description.
  • Enter the same price you set when configuring the button on your PayPal account.
  • Click Save.

How to Embed a PayPal Button in Your Drupal 8 Site

We only need to add the button to the theme template.

 Step #5. - Embed the PayPal Button

  • Log out from your PayPal account.
  • Click Structure > Block layout > Custom block library > Add Custom Block.
  • Give the block a proper title like PayPal Button - Mug.
  • Leave the Body field empty.
  • Click Save.
  • Click Block layout.

How to Embed a PayPal Button in Your Drupal 8 Site

  • Scroll down to the Content section.
  • Click Place block.
  • Look for the PayPal button block.
  • Click Place block.

How to Embed a PayPal Button in Your Drupal 8 Site

  • Uncheck Display title.
  • Restrict the block only to content types from type Mug.
  • Click Save block.

How to Embed a PayPal Button in Your Drupal 8 Site

  • Scroll down and click Save blocks.

You will see no difference if you go back to the node. However, the empty block is there.

  • Click Shift+Ctrl+I or F12 to open the HTML inspector of your browser.

You can recognize several things there: 

  • The presence of the block.
  • The Template suggestions, that is, the possible names you can choose to override the template of this particular block.
  • The location of the original template.

How to Embed a PayPal Button in Your Drupal 8 Site

Template suggestions go from most specific to less specific, being block.html.twig (the default block template marked by an “x”) the less specific one.

  • Create a directory called templates within your themes directory
    • themes/mytheme/templates or themes/custom/mytheme/templates
  • Copy the specific block template of the parent theme of your theme or copy it from core/themes/bartik/templates/block.html.twig.
  • Rename it to block--paypalbutton.html.twig (the most specific template suggestion).
  • Add the code provided by PayPal.
  • Save the file.

How to Embed a PayPal Button in Your Drupal 8 Site

  • Click Configuration > Performance > Clear all caches.

The PayPal button should appear on every node of type Mug. If you click on it, you wil be redirected to PayPal. Congratulations!

How to Embed a PayPal Button in Your Drupal 8 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.
Apr 23 2020
Apr 23

Subthemes inherit the theme resources of their parent theme. If you want to build your site with Bartik, which is the default theme in a Drupal installation, you will have to create a subtheme. That way, you can make CSS, JS or template overrides to the subtheme, without having to worry about losing those changes when the parent theme gets updated.

Keep reading to learn how!

Step #1.- Create the Basic File Structure

In order to create a subtheme in Drupal, you only need 2 files:

my_subtheme.info.yml

my_subtheme_libraries.yml

These files have to be placed in a folder called my_subtheme inside the themes directory of your Drupal installation.

bartikssen

You have 2 possibilities here:

/themes/my_subtheme/

/themes/custom/my_subtheme

Drupal will locate the theme anyway.

  • Create a folder called bartikssen inside the themes folder of your Drupal installation.
  • Create 2 empty files inside this directory called:
    • bartikssen.info.yml
    • bartikssen.libraries.yml

The only thing you need to know about .yml (YAML) files now is that they are cool because they are easy to understand and can be used to represent and map data.

bartikssen

Step #2.- Theme Inheritance

As you already know, the advantage of a subtheme is basically that you can use all features of a fully-fledged theme (coded for free by some nice person or persons) and customize it to your liking with your own CSS, JS, or template tweaks.

  • Open themes/bartikssen/bartikssen.info.yml in your preferred code editor.
  • Open core/bartik/bartik.info.yml.
  • Select the content of lines 14-47 of bartik.info.yml (Drupal version 8.8.5).
  • Copy and paste it inside bartikssen.info.yml
  • Close bartik.info.yml

bartikssen

  • Select lines 10-14 (ckeditor_stylesheets) and delete them.
  • Select line 5 (package) and delete it.
  • Uncomment the line ‘version’
  • Change the values according to the image below.
  • Save bartikssen.info.yml

bartikssen

Something to note here is that you could have let all regions out of this file and Drupal would have assigned its default system regions. Now you can work with all Bartik regions in your own theme, you can delete some of the regions and only work with the remaining ones, or you can even add more regions to your own theme than the ones available in Bartik (the regions in Bartik are more than enough, to be honest).

Notice also that Bartikssen’s base theme is Bartik, whereas Bartik’s base theme is Classy. That means that Bartikssen is a subtheme of a subtheme.

As you can see, you have declared a library called global-styling within the info.yml file. This library has to be included in the libraries’ file.

  • Open bartikssen.libraries.yml
  • Copy and paste this code: 
global-styling:
version: 1.x
css:
theme:
css/style.css: {}
js:
js/script.js: {}
global-styling:
version: 1.x
css:
theme:
css/style.css: {}
js:
js/script.js: {}

Keep in mind that indentation is one key aspect in .yml files, so preserve it as is like shown in the example code.

bartikssen

Step #3.- CSS and JavaScript Code

We still have to create the folder and file structure for the CSS and JavaScript code.

  • Create a folder called css and place an empty file called style.css inside it.
  • Create a folder called js and place an empty file called script.js inside it.

bartikssen

bartikssen

Step #4.- Enable the Subtheme

  • Click Appearance
  • Scroll down and look for Bartikssen.
  • Click Install and set as default.

bartikssen

  • Click the Settings tab.
  • Select the Bartikssen tab on the second level.
  • Upload a logo image.
  • Click Save configuration.

bartikssen

Step #5.- Adding CSS Styles

  • Open style.css.
  • Copy and paste this code: 
body {
font-family: sans-serif;
color: #616161;
}

h1 {
color: #616161;
}

#header,
.sidebar {
background-color: darkslategray;
background-image: none;
}

body {
font-family: sans-serif;
color: #616161;
}

h1 {
color: #616161;
}

#header,
.sidebar {
background-color: darkslategray;
background-image: none;
}

  • Save the file.
  • Click Configuration > Performance.
  • Click Clear all caches.
  • Go to the Home of your site.

bartikssen

Congratulations! You have created a subtheme of Bartik. With this same logic, you could create 2 subthemes of Batikssen called Bartikgrandssen_1 and Bartikgrandssen_2 and customize each one to your personal liking. That is the well-known flexibility of Drupal.

By the way, the same process applies to create a subtheme of any other theme in Drupal. To know more about subthemes in Drupal check here.

If you want to read more about Drupal’s default regions, in case you don't define them in the .info file, take a look at this page.

I hope you liked this tutorial. Thanks for reading!

Check out my other blog on How to Integrate a Sliding Menu.


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.
Dec 22 2019
Dec 22

One of OSTraining’s members wants to have a carousel slider in her site. She wants the carousel to show 3 image slides and some text below them, and the carousel to move only one position at a time when you click the “Next” button. 

This is possible to achieve, thanks to the Drupal Slick module which has several options and settings to customize this interaction with a couple of clicks. 

Keep reading in order to learn how to use this module!

191216 slick

Step #1. Install the Module

  • In order to build the carousel, we have to install two modules and their corresponding third-party libraries.

    • Open the Terminal application of your system 
    • Type: composer require drupal/slick 

191216 slick 000 

 Now, it is time to add the JS library for the slick module. You can use the file manager of your operating system or the terminal for the next operation: 

  • Type the following commands in order:

mkdir libraries 

This creates a directory called libraries in the root folder of your Drupal installation.

cd libraries

To access the directory.

wget https://github.com/kenwheeler/slick/archive/1.8.0.tar.gz

This command downloads the slick library from its GitHub repository in a compressed tar.gz file.

tar xzvf 1.8.0.tar.gz

To uncompress the tar.gz file.

191216 slick 001

mv slick-1.8.0/ slick

To change the name of the uncompressed folder.

cd ..

To go back to the root folder.

composer require “drupal/blazy:1.0-rc4”

This will download the specific version of Blazy, required for Slick to work properly, since the stable version of Slick works only with version 1.0 of Blazy.

191216 slick 003

mv blazy-master/ blazy

To change the name of the uncompressed folder.

rm *.zip && rm *.tar.gz

To delete both compressed files. 

191216 slick 004

You should at the end have the following folder structure:

191216 slick 005

The files slick.min.js and blazy.min.js are inside the slick and blazy folders respectively. 

cd ..

To go back to the root folder.

composer require drupal/slick_views

This will download the Slick Views module, which integrates Drupal Views with Slick.

  • Click Extend.
  • Enable the following modules:
    • Blazy
    • Blazy UI
    • Slick
    • Slick UI
    • Slick Views
  • Click Install.

191216 slick 007

We are now set and can proceed with configuring the Slick Optionset.

Step #2. The Slick Optionset

  • Click Configuration > Slick.

191216 slick 008

The first configuration screen shows the list of available Slick optionsets. Imagine optionsets as cassettes or CDs, which you can exchange in your player to get the right song (in this case the right carousel). The bottom half of the screen shows all different skins, that can be applied to the carousel. This functionality will be covered in a future tutorial. The UI tab has two options regarding the style of these skins.

  • Click Add slick optionset.

191216 slick 009

You will be presented with a lot of options, most of them are self-explanatory. Let’s take a look at some of them.

  • Give the optionset a proper label.
  • Replace the Previous and Next arrows text with the symbols “<” (less than) and “>” (greater than), so that the code reads like this:

<

  • Increase the number of Slides to show to 3.
  • Increase the speed to 900ms (making the slide effect slower).
  • Change the CSS override to swing.
  • Click Save.

191216 slick 010

Step #3. - Create the Carousel View

  • Click Structure > Views > Add view.
  • Enter a proper name for the view.
  • Show Content of type Article.
  • Select Create a block.
  • Choose Slick Carousel of fields.
  • Set the number of Items per block to 0.
  • Click Save and edit.

191216 slick 011

  • Click Add in the Fields section.
  • Enter Body in the search box.
  • Check the Body option.
  • Enter Image in the search box.
  • Check the Image option.
  • Click Add and configure fields. 

191216 slick 015

  • Change the Formatter option to Trimmed.
  • Set the number of characters to 150 as the Trimmed limit.
  • Click Apply and continue.

191216 slick 013

  • Change the Image style to Medium.
  • Link the image to the Content.
  • Click Apply.

191216 slick 014

  • Rearrange the fields in this order: 
    • Image
    • Title
    • Body
  • Click the Slick Carousel Settings.
  • Check Vanilla Slick.
  • Select the optionset you created before.
  • Click Apply.

191216 slick 015

  • Save the view

Step #4. - Place the Block

  • Click Structure > Block layout.
  • Scroll down to the Content section.
  • Click Place block.
  • Search for the view you have just created. 
  • Click Place block.

191216 slick 016

  • Drag the block behind the Main page content block.
  • Scroll down and click Save blocks.

Now you can take a look at one of your articles and test the carousel. Congratulations!

The rest is CSS styling. To improve the layout, for example with CSS Grid, take a look at this article.

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.
Dec 19 2019
Dec 19

Forums or message boards are an implementation of an early way of communicating, generating content and interacting through the internet, by creating threaded discussion boards, called bulletin boards. Despite the fact of being one of the most traditional ways to exchange information over the web, forums are still a very effective way to build a community around your website or web application. 

Drupal 8 offers by default the Forum module in Core. This module allows you to implement a basic forum on your Drupal site or web application. 

Keep reading, in order to learn how to use this module! 

Step #1. Enable the Module

  • Click Extend
  • Scroll down until you find the forum module, or use the search box to filter it out
  • Enable the module
  • Click Install

 191126 drupal forum  

No further modules are required.

 Step #2. - The Forum Settings

The Forum module has created a new content type called Forums.

  • Click Structure > Forums 

191126 drupal forum 001

The concepts to configure the module are the following: 

  • Topics are Drupal nodes posted into a forum. The comments to these nodes are the threaded replies to the forum topic.
  • Topics have to be always inside a forum. It is not possible to place a topic inside a container. 
  • Forums can contain unlimited forums and can even contain other forums, called child forums.
  • Containers are created to hold (wrap) a group of forums. It is possible to wrap a container around many forums, the same way a forum can hold one or multiple containers holding at the same time multiple forums.

As you can see, with the right planning, it is possible to create complex nested structures to categorize the content of users. 

  • Click Edit to configure the General discussion forum
  • Scroll down and click Delete

191126 drupal forum 002

  • Click Add container

 191126 drupal forum 003

If your site was about pets, then it is very probable that you would have a section for dogs and a section for cats, for example. To organize the forum content, it makes sense to create a global container for each one of these pets. 

  • Enter the required information
  • Click Save

191126 drupal forum 004

  • Click Add forum
  • Create as many forums as needed, according to your own categorization

These forums will be placed at the first level of the container

 191126 drupal forum 005 

Besides these forums on the first container level, we are going to create additional child forums, to preserve the information structure and be able to do comparisons between them later on.

191126 drupal forum 006

The final structure should look like the image below.

191126 drupal forum 007

Step #3. - Adding Topics to the Forum

  • Click on the root link, that is the link of the main container (in this case Dogs)

The system will send you to a page with the following URL pattern:

yoursite.com/forum/nid 

Notice that the column Topics on the table shows no results. That is because we have not added a topic to any of the forums. 

  • Click on the Food link below the parent forum Herding group

191126 drupal forum 008

  • Click Add new forum topic

191126 drupal forum 009

Check that you are placing the topic in the right place. 

  • Click Save

191126 drupal forum 010 

Each one of the comments to this new node will increase the count on the forums table.

191126 drupal forum 011

191126 drupal forum 012

If you click on the forum link, you will see a table with all the topic details of that particular forum. 

191126 drupal forum 013

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.
Dec 02 2019
Dec 02

With the Views module, it is possible to fetch pieces of data from a Drupal entity and display them according to a specific format. The Views module acts as a query builder, which generates the SQL code, in charge of retrieving the data from the database.

T191128 drupal relationships he first setting when creating a view allows you to choose the base table from which the aforementioned data will be recovered.

When you choose Content as the base table, you also have to specify the Content type, so it will not be possible to retrieve data from other content types and present it within the view unless you set a Relationship between those content types.

This tutorial will explain the concept of Relationships in Views with a basic example. 

Let’s start!

Step #1. The Content Types

For this exampĺe, the content types we will be using are:

  • Author
  • Book

The fields for each one of them are detailed in the tables below:

Content type: Author

Field

Field type

Required

Allowed values

Author image

Image

yes

1

Date of Birth

Date 

yes

1

Date of Death

Date

no

1

Body

Text (formatted, long, with summary)

no

1

Content type: Book

Field

Field type

Required

Allowed values

Cover image

Image

yes

1

Year of publication

Number (integer)

yes

1

Author

Content (Reference)

yes

Unlimited

Body

Text (formatted, long, with summary)

no

1

Notice that the Author field in the Book Content type references the Author Content type. This is how Drupal knows that these nodes are related. It is set to receive unlimited values since a book can have one or many authors.

191128 drupal relationships 001 

After creating the content types, create some dummy content. Make sure that you create the Authors first, and then the Books. That way, you will always select an existing node to reference to.

191128 drupal relationships 002

 Step #2. - Create the View

  • Click Structure > Views > Add view
  • Name the view Book listing
  • Show Content of type Book
  • Choose to Create a page
  • Select Table as the Display format
  • Uncheck Use a pager
  • Click Save and Edit

191128 drupal relationships 003

  • Add the following fields in the FIELDS section:
    • Cover image
    • Author image
    • Body
  • Click Add and configure fields

191128 drupal relationships 004

  • Set the Image style to Thumbnail on both image fields
  • Link the Image to the Content on both image fields
  • Set the Body Formatter to Trimmed with a limit of 200
  • Click Apply three times

191128 drupal relationships 005

191128 drupal relationships 006 

  • Rearrange the fields in the following order:
    • Title
    • Cover image
    • Body
    • Author image

If you scroll down to see the preview, you will notice that the Author’s image is not displaying. That’s because it belongs to another content type. We need to set a Relationship to the image field on the Author Content type.  

Step #3. - Add a Relationship

  • Click the ADVANCED link on the right of the Interface.
  • Click Add in the RELATIONSHIPS option.

Feel free to take a look at all the fields from other tables to which is possible to relate the view to. 

  • Select Content referenced from field_book_author
  • Click Add and configure relationships
  • Check Require this relationship
  • Click Apply

  191128 drupal relationships 007

  • Click Content: Author image (Author image) in the FIELDS section

You will see a new dropdown option on top called Relationship. 

  • Select (field_book_author: Content)
  • Click Apply

191128 drupal relationships 008

  • Save the view and take a look at the created page.

191128 drupal relationships 009

Relationships in Drupal help the site-builder to create complex views, by using data from different tables and presenting them in a logical manner. 

I hope you liked this tutorial. Thanks for reading!

Check out our Drupal 8 video courses here.


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