Sep 09 2019
Sep 09

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

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

Keep reading to learn how!

Step #1. - The Proposed Layout

190828 theming views

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

Step #2. - Create an Image Style

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

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

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

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

Step #3. - Create the View

You can read more about rewriting results in Views here.

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

Step #4. - Theming the View

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

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

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

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

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

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

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

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

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

 Make the images responsive.

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

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

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

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

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

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

The Media Queries

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

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

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

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

This layout will work even with the smallest device screen.

I hope you liked this tutorial. Thanks for reading!


About the author

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

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

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

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

Example of the Masonry layout

Step #1. Install the required modules

  • Open the Terminal application of your PC and type:

composer require drupal/masonry

Type the composer installation command

composer require drupal/masonry_views

Type this command

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

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

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

Create the folders and move the files

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

Click Install

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

  • Click Continue.

Step #2. Create the View

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

Some dummy content

Some more dummy content

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

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

Click Save and edit

  • In the Fields section click Add

Click Add

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

Click <i>Add and configure fields

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

Click Apply and continue

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

Click Apply

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

Click Apply

  • Save the view

Step #3. Place the Block

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

Click Place block

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

Click Place block

  • Hide the title
  • Click Save block.

Click Save block

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

Scroll down and click Save blocks

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

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

Step #4. Theming the Grid

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

  • .masonry-layout
  • .masonry-item

The two CSS classes to target

More on Drupal theming at OSTraining here. I hope you liked this tutorial. Thanks for reading!


About the author

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

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

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

Keep reading to learn how to use this module!

Step #1. - Install the Required Module

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

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

composer require "drupal/field_group:^3.0"

Type the following command

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

Click Install

Step #2. Create the Content Type

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

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

Give the Content type a proper name and click Save

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

Click Save and Continue

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

Click Save and continue

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

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

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

Step #3. Group the fields

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

  • Click Manage form display > Add group

Click Manage form display and then click Add group

  • Select Fieldset
  • Click Save and continue

Click Save and continue

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

Repeat the process and create 3 more Fieldset groups

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

Click Save

  • Click Manage display > Add group

Click Manage display and then click Add group

  • This time, select Tabs
  • Click Save and continue

Click Save and continue

  • Change the direction to Horizontal
  • Click Create Group

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

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

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

Click Save and continue

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

Repeat the process with the other three tabs

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

Click Save

Step #4. Create Content

  • Click Content > Add Content > Vertebrate

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

  • Fill out the form, upload images and click Save

Fill out the form, upload images and click Save

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

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

Users will definitely have a better reading experience

Please, leave us your comments below. Thanks for reading!


About the author

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

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

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

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

Read on to learn how to use this module!

Step #1. Install the Required Module

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

composer require drupal/collapse_text

Type composer installation command

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

Click Install

Step #2. Create an Editor Role

  • Click People > Roles > Add role

Add Collapsible Blocks to Text-Heavy Nodes in Drupal 8

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

Click the dropdown besides Editor

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

Click Save permissions

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

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

Click Create new account

Step #4. Add the Plugin to the Text Format

  • Click Configuration > Text formats and editors

Click Configuration > Text formats and editors

  • Click the Configure button for the Full HTML format

Click the Configure button

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

Enable the Collapsible text blocks filter

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

  • Click Save configuration

Click Save configuration

Step #5. Create Content

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

Log out and log back in

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

The Tabs Structure

Each tab is declared between a pair of tags.

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

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

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

  • title
  • class

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

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

It is possible to nest collapsible tabs.

It is possible to nest collapsible tabs

  • Finish editing the node form and click Save

Finish editing the node form and click Save

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

Step #6. Basic Styling

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

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

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

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

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

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

Click Configuration > Performance > Clear all caches

Refresh the site

I hope you liked this tutorial. Thanks for reading!


About the author

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

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

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

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

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

Let’s start!

Step #1. Install the required modules

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

composer require drupal/mixitup_views

Type in the installation command

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

Move the directory

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

Make sure the JS files are inside the proper folder

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

Click Install

Step #2. Create the Taxonomy Terms

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

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

Click Structure > Taxonomy > Add vocabulary

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

  • Click Add term

Click Add term

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

Click Save each time

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

Repeat the process for the other 2 vocabularies and their terms

Repeat the process for the other 2 vocabularies and their terms

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

  • Click Structure > Content types > Article > Add field

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

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

Click Save and continue

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

Click Save field settings

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

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

click Save settings

  • Repeat this process for the other 2 taxonomy terms

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

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

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

Click Save

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

Click Save

Step #4. Create Content

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

Click Save

  • Repeat the process for each one of the nodes

Repeat the process for each one of the nodes

Step # 5. Create the View

  • Click Structure > Views > Add view

Click <i>Structure > Views > Add view

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

Click Save and edit

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

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

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

Click Add and configure fields

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

Click Apply

  • In the Format section, click the MixItup Settings

In the Format section, click the MixItup Settings

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

  • Leave the defaults and click Apply
  • Save the view

Go to the page and test the filtered search

Go to the page and test the filtered search

Go to the page and test the filtered search

Congratulations! You have just added another practical module to your site-builder knowledge base. Thanks for reading!


About the author

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

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

Step #1. Download and Install the Required Modules

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

composer require drupal/intense

Enter the composer command

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

Click Continue

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

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

Download the Intense library

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

At the end you should have the following file structure

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

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

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

Click Manage fields

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

Click Save and continue

Click Save field settings

Click Save field settings

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

Click Save settings

Step #3. The Intense Image Configuration

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

Click Update

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

Click Save

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

Edit the Teaser view mode with the same configuration options

Step #4. Create Content

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

Click Save

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

You should see a cross over the image

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

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

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

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

Thank you and stay tuned for more Drupal content.


About the author

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

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

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

Keep reading to find out how.

Step #1. Download and Install the Required Module

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

composer require drupal/back_to_top

Type the composer command

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

Click Install

Step #2. The Module Configuration

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

Click Save configuration

Step #3. Replace the Button Image

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

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

This file will be used to achieve a hover effect.

This file will be used to achieve a hover effect

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

Step #4. Edit the CSS Code

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

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

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

Add this code

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

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

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

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

Hover over it to see how the other image gets pulled

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

The Text/CSS Button

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

You can tweak the look and feel of the button

You can tweak the look and feel of the button

I hope you liked reading this tutorial. Stay tuned for more Drupal content. Thanks!


About the author

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

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

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

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

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

Step #1. Download the Required Modules

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

composer require drupal/rabbit hole

Enter the composer installation command

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

Click Install

Step #2. Create the VIP Role

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

  • Click People > Roles > Add Role:

Click People > Roles > Add Role

  • Give this role a proper name
  • Click Save:

Click Save

Step #3. Create Users

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

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

Click Create new account

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

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

The People page should look like this

Step #4. Create the VIP Content Type

  • Click Structure > Content Types > Add Content type:

Click Structure > Content Types > Add Content type

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

Click Save and manage fields

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

Click Save

Step #5. Set Access Permissions

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

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

Click Edit permissions

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

Scroll down and click Save permissions

  • Click Configuration > Performance > Clear all caches

Step #6. Create Content

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

Click Save

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

Step #7. Testing the Rabbit Hole module

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

Log in as an authenticated user

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

You will be redirected to the access-denied page

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

Log out and log back in as the VIP user

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

You will be able to access the node

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


About the author

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

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

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

Let’s start!

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

Step # 1. Install the required modules

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

composer require drupal/gdoc_field

Add the composer command

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

Click Install

Step #2. Add a File Field

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

Create a new file field in the Basic Page

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

Click Save and continue

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

Click Save field settings

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

Click Save settings

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

Select Manage display

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

Click Save

Step #3. Create the Content

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

Click Select button

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

  • Click Save

Click Save

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

Take a look at the node

Step #4. Theming the Viewer

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

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

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

I also hope this tutorial will help you broaden your site-builder skills by adding this simple but useful module to your personal knowledge base. Please, leave us your comments and suggestions below.

Thanks for reading!


About the author

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

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

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

Step #1. - Download and enable the module

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

composer require drupal/pager

Use this command

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

Click Install

No further modules are required.

Step #2. - Create Content

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

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

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


Click Save each time you create an article

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

Content created and listed

Step #3. - Place the Pager Block

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

Click Place block

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

Click Place block one again

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

Leave the default Image field and image style

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

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

  • Leave the default End Behavior
  • Click Save Block.

Leave the default End Behavior. Click Save Block

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

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

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

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

Scroll down and click Save block

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

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

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

Configure the block once again

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

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

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


About the author

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

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

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

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

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

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

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

manage fields

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

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

Next, add the following Link fields:

  • LinkedIn
  • Facebook
  • Personal Website

fields user profile

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

manage display user fields

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

view drupal user information

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

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

drupal user profile

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

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

drupal article writer

Finally, see how this appears to a new user:

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

new user registration

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

Want to Learn More?

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


About the author

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

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

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

Step #1. Download the Required Modules

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

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

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

Drupal Google Maps Composer output 1

Drupal Google Maps Composer output 2

Drupal Google Maps Composer output3

Step #2. Configure the Styled Google Map Settings

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

Get your Drupal Google Maps API Key

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

Create a project name

  • Copy the generated key.
  • Click Done.

Click Done for Drupal Google Maps

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

Click Save configuration

Step #3. Create a Content Type with a Location

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

Click Save and add fields

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

Click Save and continue

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

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

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

Step #4. Configure the Content Type Display

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

Click Save

Step #5. Configure the Form Display

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

geofield map

Step #6. Create a Node

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

Click Save

Step #7. Configure The Map Design

There are lots of map designs on this site.

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

Copy the JavaScript code on the left

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

Paste the code you selected into the textbox

  • Click Update.
  • Click Save.

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

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

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

Take a look at this style wizard application in Github

Additional Reading: 

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


About the author

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

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

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

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

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

login link displayed

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

login menu link disabled

Then, the "Log in" link disappears.

login link gone

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

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

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

login block

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

\
Jun 12 2019
Jun 12

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

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

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

Step #1. Create a Telegram Account

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

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

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

Enter your phone number and the code provided by Telegram

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

Step #2. Get the JavaScript Code

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

Click Next

Click OPEN IN WEB

  • Click Start.
  • Follow the instructions.

Follow the instructions

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

Click Connect the site

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

Copy the JavaScript snippet

Step #3. Add the Javascript to Your Site

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

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

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

You can read more about creating a subtheme here.

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

Open the file in your text editor

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

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

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

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

Step #4 - Change the Logo of the Chat Window

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

Logo

Feel free to explore the different configuration options available.

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

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

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


About the author

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

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

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

Let’s start!

Step #1. - Install the Required Module

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

composer require drupal/editor_file

type the composer command

No further modules are required.

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

Click Extend

Step #2. - Configure the Text Format

  • Click Configuration > Text formats and editors:

Click Configuration

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

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

Click Add group

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

Drag the Paper clip button to the newly created group

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

add more file extensions to the Allowed file extensions

  • Click Save configuration.

Step #3. Adding a File Link to the Content

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

Click the Select/Browse File button

  • After uploading the file click Save:

Click Save

The link to the file will be shown in blue.

  • Click Save in order to save the node:

Click Save

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

The link will open the file in the browser

Thanks for reading!


About the author

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

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

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

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

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

Let’s start!

Step #1. - Install the Required modules

Perhaps the most popular method to download Drupal modules is Composer

  • Open your terminal application and type:

composer require drupal/eu_cookie_compliance

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

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

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

You don’t need to install any further modules.

Step # 2. Configuring the Module

  • Click Configuration > System > EU Cookie Compliance.

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

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

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

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

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

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

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

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

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

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

Consent button label: That's ok with me

Cookie policy button label: Our policy

Disagree button label: No way!

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

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

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

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

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

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

  • Click Save Configuration

Step #3. - Testing the module

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

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

  • Click the Privacy settings tab
  • Click Withdraw consent

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

I hope you liked this tutorial. Thanks for reading!


About the author

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

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

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

There will be 2 roles:

  • Freshman
  • Sophomore.

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

Let’s start!

Step #1. Install the required modules

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

  • Type into your terminal application:

composer require drupal/field_permissions

Define Role Based Field Permissions in Drupal 8

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

Step #2. Create the Roles

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

  • Enter the role name.
  • Click Save.

  • Repeat the process for the Sophomore role.

Step #3. Create the Users

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

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

  • Repeat the process for the Sophomore role.

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

Step #4. Create the Essay Content Type

The Essay content type will have only two fields:

  • Body
  • Subject choice.

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

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

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

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

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

  • Mark the corresponding checkboxes.
  • Click Save settings.

Step # 5. - Create Content

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

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

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

  • Click the Edit tab.

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

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

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

  • Click the “Sophomore” essay.

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

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

Thanks for reading!


About the author

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

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

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

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

Step #1. Install the modules

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

Step #2. Create your webform

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

created webforms

Step #3. Add the field

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

add webform field

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

webform field settings

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

webform settings

Step #4. Create the content

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

webform node


About the author

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

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

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

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

PHP Notices on Your Drupal Site

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

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

What are PHP Notices?

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

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

What are PHP Warnings?

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

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

What are PHP Errors?>

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

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

Solution #1: Disable Error Reporting on Your Drupal Site

One solution is to simply stop the errors from showing.

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

Solution #2: Fix the Problem

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

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

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

About the author

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

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

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

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

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

Step #1 - Install the module

If your site installation is not based on composer:

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

If your site installation is based on composer, type:

composer require drupal/flickr

How to Display Flickr Images on Your Drupal 8 Site

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

Step #2 - Configure the module

After enabling the modules,

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

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

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

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

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

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

Step #3 - Create a Media Editor Role

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

  • Click People > Roles > Add role.

  • Add a proper role name
  • Click Save.

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

  • Click Configuration > Text formats and editors.

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

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

Your Text formats configuration screen looks like this:

Step #5 - Create a New User

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

Step #6 - Set permissions

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

Step # 7 - Create an Article with a Flickr Shortcode

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

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

[flickr-photo:id=9315513698]

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

  • Finish the node and click Save.

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

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

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

  • Click the Edit tab once again.

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

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

  • Edit the shortcode

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

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

The Drupal 8 Flickr module allows you to embed single images and albums from Flickr in a Drupal 8 site.

Thanks for reading!


About the author

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

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

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

Step #1. Installing the Slick modules and libraries

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

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

Now your "Extend menu" should look like this:

1 enabled modules

Next, we need to install the library for slick

2

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

3

Step #2: Create the Slideshow

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

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

4

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

5

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

6

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

7

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

8

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

9

Now set the "custom text". Add:

 {{ title }}

{{ body }}

10

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

11

12

13

14

15

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

16

Step #3. Place the Slideshow Block

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

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

17

18

Now make sure to save the block layouts.

19

Step #4. Optimize the Images

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

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

Open the view to edit.

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

20

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

21


About the author

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

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

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

How to Pin Images in Drupal 8

Let’s start!

Step #1. - Install the Imagepin Module

If your Drupal installation is not based on Composer:

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

If your Drupal installation is based on Composer:

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

composer require drupal/imagepin

  • Click Extend, enable the module and click Install.

This module has no additional dependencies.

Step #2. - Create a Content Type

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

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

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

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

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

  • Repeat the process with a Link field.

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

Your fields configuration screen should look like this:

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

Step #3. - Configure Imagepin

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

Step #4.- Add Pins to Your Images

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

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

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

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

  • Click Save in order to save the node.

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

Well done!

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

Thanks for reading!


About the author

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

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

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

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

This tutorial will explain how to rewrite the results of any Views’ field. We can rewrite the results, regardless of what display the view is using (table, list, grid, etc).

Step #1. Download the Required Module

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

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

composer require drupal/linked_field

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

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

Step #2. Create the Content Type

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

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

Add the following fields

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

Click Save and Contine

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

Click Save settings

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

Click Save and continue

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

Write an alt text for this image

  • Change the file directory to pdf-files.

Change the file directory to pdf-files

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

Click Manager form display

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

Drag the Image field to the Disabled section

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

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

Click Update

  • Rearrange the fields.
  • Click Save.

Click Save

Step #3. Create the Content

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

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

Create three or more nodes

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

Your Content listing screen should look more or less like this

Step #4. Create the View

Finally, we've reached the point where we can create the View.

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

Click Save and edit

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

Click Add and configure fields

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

Click Apply

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

Click Apply

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

Click the File Download

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

Select the Image field

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

Your Fields section should look like in the following image

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

You achieve this through the use of tokens. It may sound complicated but it’s not. Let’s take a look at how it's done.

Step #5. Rewrite Results

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

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

Click Apply

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

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

Click Apply

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

Click one of the download icons to test if they work

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


About the author

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

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

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

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

Step #1. Install the Voting System Module

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

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

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

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

Place the yaml code

  • Download with Composer the library and the module

Download with Composer the library and the module

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

Enable the Voting API and Votingapi Widgets

Step #2. The Voting API Settings

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

  • Click Configuration > Voting API Settings.

Click Configuration

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

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

Choose the options that fit your site most

Step #3. The Voting Widgets

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

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

Click Save and continue

  • Choose "Fivestar rating" and click "Save field settings".

Choose Fivestar rating

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

Repeat the process

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

Click Update

Step #4. Test the Voting Widgets

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

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

Click Content

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

Test the voting widgets

Step #5. Configure Access Permissions

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

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

Click Save permissions

Step #6. Find the Voting Results

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

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

Click Save and edit

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

Look for the Voting Widget fields

  • Click the "Show results" checkbox and click "Apply" twice

Apply twice

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

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

Summary

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

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

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

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


About the author

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

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

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

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

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

Step #1. Download the libraries

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

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

How to Create CSS and Javascript Animations in Drupal 8

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

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

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

Step #2. Download and enable the module

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

composer require drupal/animations

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

Step #3. Configure the module

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

  • Click Configuration, Configure Animations (DEVELOPMENT section):

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

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

The idea behind these settings is simple.

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

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

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

  • Click Save changes.
  • Now go to the front page of your site and you should see both animations at work (click on each image to enlarge it). You can see the ROTATEINUPRIGHT effect for the block, and the RUBBERBAND for the page title.

animations sequence

animations sequence

animations sequence

animations sequence

animations sequence

Summary

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

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

I hope you liked this tutorial. Thanks for reading!


About the author

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

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

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

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

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

Step #1. Install the Webform module

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

composer require drupal/webform

01

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

02

Step #2. Create the Form

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

  • Click Structure > Webforms > Add webform.

03

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

04

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

05

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

06

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

07

  • Your screen should look like this:

08

Step #3. The checkboxes

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

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

09

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

10

  • Repeat the process with the other three checkboxes.

11

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

12

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

13

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

14

Step #4. The Conditional Emails

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

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

15

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

16

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

17

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

18

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

19

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

20

Step #5. Testing the Webform

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

21

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

22

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

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

Additional Reading

What's Next

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

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


About the author

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

How do I get started with Drupal development?

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

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

The Skills You Need

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

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

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

drupal 8 skills

Learn Drupal 8 Theming

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

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

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

Learn Drupal 8 Module Development

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

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

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


About the author

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

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

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

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

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

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

01

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

The Ultimenu Approach

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

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

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

A block containing regions containing blocks:

02

Step #1. Install the Module

  • Install the module with composer:

composer require drupal/ultimenu

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

03

Step #2. Create the menu

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

04

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

05

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

06

Step #3. Configure the Ultimenu block

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

07

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

08

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

Step #4. The Image Block

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

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

09

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

10

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

11

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

12

  • Click Block with Image:

13

  • Upload an image.
  • Click Save:

14

Step #5. The links block

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

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

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

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

  • Click Save.

15

Step #6. Place the Ultimenu block

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

16

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

  • Scroll down to the bottom of the page.

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

  • Click Place block:

17

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

18

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

19

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

Step #8. The CSS

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

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

/* Menu Links */

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

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

/* Image Block */

#block-megamenuimage {
width: 100%;
}

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

/* Links block */

#block-multicolumnblock {
width: 100%;
}

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

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

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

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


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

20

Summary

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

Thanks for reading!


About the author

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

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

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

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

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

Drupal Roles and Permissions Explained

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

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

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

Creating an Article Writer

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

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

Following are those four steps.

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

drupal roles

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

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

  • Click the Permissions tab to see the permissions available:

drupal permissions tab

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

drupal permissions tab

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

drupal permissions boxes

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

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

drupal node permissions

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

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

drupal article permissions

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

drupal admin toolbar permisisons

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

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

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

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

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

drupal create article writer

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

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

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

drupal low permissions

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

drupal create article

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

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

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

drupal masquerade

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

drupal user masquerade module

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

Creating a Moderator

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

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

Next, we'll set up the permissions:

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

drupal create moderator

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

drupal forum permissions

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

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

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

Now it's time to test the account:

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

drupal edit delete links

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

drupal user name

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

drupal edit user

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

Video on Drupal Permissions

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

[embedded content]

Want to Learn More Drupal 8?

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

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


About the author

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

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

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

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

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

Step #1. Enable the required module

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

font your face module

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

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

Drupal webfonts import

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

Drupal webfonts save configurations

Step #2. Create a Font Display

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

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

Drupal webfonts font selector

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

Drupal webfonts disable fonts

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

Drupal webfonts add font display

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

Drupal webfonts webfont display settings

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

Drupal webfonts selectors font display

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

several font displays

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

webfonts before after

Conclusion

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

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

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


About the author

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

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

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

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

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

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

Step #1. Install the required modules

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

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

composer install drupal/entity_browser
composer install drupal/ctools

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

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

Step #2. Create the Taxonomy terms

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

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

  • On the List tab, click Add term.

Add the following terms:

  • Adventure
  • Cookbook
  • Drama
  • Fantasy
  • Horror

Step #3. Create the Book content type

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

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

table

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

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

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

Step #4. Create the Book content

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

  • Click Content > Add content > Book.

Step #5. Create a View

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

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

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

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

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

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

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

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

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

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

  • Click Apply.

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

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

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

Step #6. Configure the Entity Browser module

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

  • Click Configuration > Entity browsers

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

  • Check Auto open Entity browser and click Next.

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

Step #7. Create the Book review content type

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

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

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

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

Step #8. Create the book reviews

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

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

The browser will show you only books within this genre.

  • Select a book and click Select entities.

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

Final result

This tutorial has demonstrated the power of the "Entity Browser" module for Drupal 8. I hope you liked it. Thanks for reading!


About the author

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

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

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

In this tutorial, you will learn the basic usage of the module in combination with the Google Charts library.

Step #1. Install the Charts Module and the Library

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

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

click install for Drupal charts

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

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

05 select google charts

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

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

  • Go to Structure > Content types > Add content type.
  • Create a content type for your Drupal charts
  • Add the required fields to match your data:

add required fields

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

08 final result

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

09 create countries

Step #3. Create the View for your Drupal charts

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

10 click save and edit

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

add and configure fields

click apply

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

in the format section click apply

  • Select the Charting library in the drop-down. 
  • Select the title as the label field, if it’s not been selected already.
  • Check your relevant data field as provided data.
  • Scroll down and change the Legend position to None.
  • Click Apply. 

Feel free to play with all the configuration options available here to match the chart you want or need. Save the view when you've finished.

play with configuration options

Step #4. Place Your Block

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

look at your site

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

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

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


About the author

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

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

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

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

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

Step #1. Install the required modules

  • Open your terminal window and type:

composer require drupal/ckeditor_accordion

Install Composer using your terminal

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

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

Click Install

Step #2. Configure the Module

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

Click Save Configuration

  • Click Configuration > Text formats and editors.

Click Text formats and editors

  • Locate the Full HTML format and click Configure.

Click Configure

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

Click the link Show group names

Click the link Show group names

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

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

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

Check Limit allowed HTML tags and correct faulty HTML

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

Click Save configuration

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

Step #3. Create the Content

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

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

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

Select accordion tab

There are now 3 accordion tabs.

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

You should see the accordion with three collapsed tabs.

You should see the accordion with three collapsed tabs

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

Step #4. Styling the Accordion

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

For example:

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

How to Use the CKEditor Accordion in Drupal 8

Conclusion

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

Thanks for reading!


About the author

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

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

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

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

Entity Reference Views in Drupal 7

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

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

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

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

Entity Reference Views Widget

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

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

[embedded content]

Entity Reference Views in Drupal 8

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

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

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

The setting Views: Filter by an entity reference view

About the author

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

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

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

Both Views and Entity Reference are now part of the Drupal 8 core. This made using Entity Reference Views in Drupal 8 much easier.

If you're a Drupal 7 user, read this version of the tutorial.

Step #1. Create a content view

  • Create a view of the content that you want content editors to choose from. In this example, I'm going to make a view by the name "List of Speakers":
Create a view of content in Drupal
  • At the top of the page, click "Add" then "Entity Reference":
Adding an entity reference view
  • Click "Add Fields":

add field

  • Set For to 'This entity_reference (override)
  • Add the fields you want to have displayed and searchable.

03 add field

  • Click "Settings" next to "Entity Reference list".
Click
  • Search fields: Choose the field(s) you want users to search by.
  • Click "Apply (this display)".
04
  • Check the preview to make sure your view is working:
The preview of our entity reference view

Step #2. Add a Field with the Entity Reference View

  • Go to Structure > Content types.
  • Add an "Entity Reference" field.
Adding an Entity Reference field in Drupal 8
  • Save and continue
  • Save field settings
06
  • Click "Add content" and the data entry for your field will use the View you created.
  • If you prefer a checkbox to autocomplete go to Administrator > Structure > Types > Manage > Speakers > Form-display and change the widget type.
07

About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.
Oct 29 2018
Oct 29

If you want to build a large, multi-level drop-down menu in Drupal 8, then the Superfish module is a great choice.

The Superfish module makes use of the jQuery Superfish menu plugin, which is useful for multi-level drop-down menus. Superfish has more features than most dropdown menus. It supports touch devices and keyboard interaction.

In this tutorial, we’re going to create a menu for a sports news site with three menu levels.

Three menu levels

Step #1. Install the module and libraries

First, let's install the module:

Now, let's install the libraries:

  • Download the Superfish library 2.x for Drupal 8.x.
  • Uncompress it to your [DRUPAL_ROOT]/libraries directory. If you don’t have the libraries directory yet, please create it
  • Download the jQuery Easing plugin (optional but recommended)
  • Uncompress it too to your [DRUPAL_ROOT]/libraries directory. 
  • Rename both directories, so that you have the following file/folder structure:

 Superfish module file structure

Step #2. Create the menu structure

  • Go to Structure > Menus.
  • Click the Add menu button:

Click Add menu button

  • Enter the menu title and click the Save button:

Add site title and click Save

Step #3. Add the menu links

  • Once the menu has been added, click the Add link button to create the menu links:

Click Add link button

  • Create the menu links according to the predefined structure. Notice that you have to link each menu item to a piece of content.
  • Click on the Show as expanded checkbox, so that the menu will appear expanded if it has children.
  • Click the Save button each time you create a menu item.

Create menu link and click Save

Once you have created all the links:

  • Use the handles to drag and drop the items in order to match the menu structure
  • Click Save:

Match the menu structure and click Save

Step #4. Place the menu

Menus in Drupal 8 are rendered as block entities.

  • Click Structure > Block layout.
  • Search the Primary menu region and disable the Main navigation default block.
  • Click the Place block button.

Click Place block button

  • Enter the name of your menu in the search box. You will find two “News site” menus.
  • Click the Place block button on the line with the Supefish category.

Click Place block button

Step #5. Finalize the Superfish configuration

  • Uncheck the Display title checkbox:

Uncheck Display title checkbox

There are several configuration options in this window. Particular attention deserves the Slide-in effect provided by the jQuery Easing plugin (which you downloaded at the beginning) and the ADVANCED SETTINGS where you can configure for instance the animation speed. Play with this options until you find the ones to your liking.

Block settings

Advanced settings

  • Click Save block and go to your homepage. You will have a multi-level drop-down menu now!

You have to tweak it with your own CSS, but the main menu functionality is there:

You have a multi level dropdown menu now

I hope you enjoyed reading this tutorial and making your own Superfish menu. Please leave your comments below.


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
Oct 29 2018
Oct 29

A few years ago, we published a very popular post called "How to Create Dropdown Menus in Drupal".

That post focused on Drupal 7, but some things have changed in Drupal 8.

Here's an updated explanation of how to set up dropdown menus for a Drupal 8 site.

Step #1. Choose a theme with dropdowns

Before you can use a dropdown menu, choose your theme carefully.

Many themes don't have dropdown menus built-in. That includes Drupal's core themes, such as Bartik. Unless you want to make major code changes, it is best to choose a theme that already have dropdowns available. To find out whether a theme does have dropdowns, read the theme's description and documentation on Drupal.org.

If your theme doesn't support dropdowns, we do have a guide to adding a dropdown menu using a module.

Step #2. Create the dropdown links

If you want dropdown menus, you'll need to arrange your menu links in a parent-child relationship:

  • Go to Structure > Menus > Main Navigation.
  • Drag-and-drop your menu links to that they are in a hierarchy:

menu indented in Drupal 8

Also, edit each menu link and check "Show as expanded". If you don't choose this option, the dropdown link will only show if you are on the page being linked to.

show as expanded

Step #3. Places the menu block

In Drupal, menus are normally placed by using blocks:

  • Go to Structure > Block layout.
  • Click "Demonstrate block regions"
  • You'll now see a layout of your theme's regions. It should be clear where your menu should be placed. In this case, use the "Navigation" region. 
  • In this example, move the Move the "Main navigation" block to the "Navigation" region.

Your dropdowns will not appear unless your menu block is in a block region that supports dropdowns.

breeze-regions

Step #4. Configure your menu block

This is the major change in Drupal 8 in regards to dropdown menus. You must configure your menu block.

  • Click "Configure" next to the "Main navigation" block.
  • Change "Maximum number of menu levels to display" to more than 1.

Editing the menu block in the Breeze Drupal 8 theme

Step #5. Check the end result

If you make the changes listed here, your dropdown menus should appear:

Dropdown menus in the Breeze Drupal 8 theme

If you want a more advanced dropdown menu, check out "Dropdown Menus in Drupal 8 With the Superfish Module".


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.
Oct 23 2018
Oct 23

Sometimes you may need to import data from a CSV file into Drupal.

We've spoken with OSTraining users who need to import from another CMS, and uses who need to import from a business spreadsheet.

There is no easy way do this import using the Drupal 8 core. To import your data from a CSV file, you need to install and enable the Content Import module.

In this tutorial, I'll walk you through the process of importing data with Content Import.

In this example, we'll import data into a "Customer" content type. This Customer content type will have the following five fields:

Field Name Field Description Field Type Title

The name of the customer / this is the default Drupal title field for each content type

Plain text Body Customer information Long text Contract Date The date when the contract with the customer was signed In the mm/dd/yy format Customer Picture The picture of the customer Image Discount This field indicates if the customer qualifies for an extra discount at the end of the year Boolean (Yes/No)

Step #1. Create the Customer content type

After creating the Customer content type and adding fields, you will have the following starting point:

Starting point

There are some details that you have to take into account to run this process without complications:

  • The date field has to be set as Date and time (this is related to the Unix timestamp. You can read more about this here).

Setting the Date Type

  • When creating the Customer Picture image field, configure the file directory for the images as [MACHINENAMEOFYOURCONTENTTYPE/images] You’ll upload your images to this directory with the help of the IMCE module or some kind of FTP software

Configure the file directory for the images

  • Set the On and Off labels in your Discount boolean field to Yes and No respectively

Set the On and Off labels

Step #2. Prepare your spreadsheet for import

You can use the spreadsheet application of your liking for this. I’m using Google Spreadsheets. The langcode column is mandatory

Importing to Drupal from Google Spreadsheets

  • Save your spreadsheet as a Comma Separated Values file. Once you do, your file will have a .csv file extension.

Save file in CSV format

Step #3. Upload the profile pictures to the specified directory

With the IMCE module:

  • Go to yoursite/imce in order to open the IMCE browser
  • Create the /customer folder inside the public directory
  • Create the /images sub-folder inside the /customer folder
  • Upload the profile pictures to this folder by clicking the Upload button on the top (/customer/images folder in our case)

New folder

Upload button

Uploaded profile pictures

Step #4. Import your content from the CSV file

  • Click Configuration > Content Authoring > Content Import

You will see a screen with two options.

  • Select the Customer option for the Select Content Type
  • Click on the Upload File button
  • Select the CSV file on your hard drive
  • Click Import

Click Import

Congratulations! If you followed along with my instructions, you should now see the Content screen of your Drupal installation with your newly imported content. 

Troubleshooting Your Drupal CSV Import

While importing content, you may run into the following error on the white page:

"The website encountered an unexpected error. Please try again later."

To deal with this error, please do the following:

  • In your Drupal site root go to modules > contentimport > src > form
  • Open the contentImport.php file in your text or code editor
  • Find the following two lines (around line 275):

$dateTime = \DateTime::createFromFormat('Y-m-d h:i:s', $data[$keyIndex[$fieldNames[$f]]]);
$newDateString = $dateTime->format('Y-m-d\Th:i:s');

Replace them with the following two lines:

$dateTimeStamp = strtotime($data[$keyIndex[$fieldNames[$f]]]);
$newDateString = date('Y-m-d\TH:i:s', $dateTimeStamp);

You’ll find more information about this error here.

I hope you enjoyed this tutorial.

If you want to learn more Drupal, join OSTraining now. You'll get access to a vast library of Drupal training videos, plus the best-selling"Drupal 8 Explained" book!


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
Oct 22 2018
Oct 22

An OSTraining member has asked us how to create a request form in Drupal 7. They needed to process requests using this workflow:

  1. A customer fills out a form to send their request for repair or service on a specific piece of equipment.
  2. A customer service agent comments on the request to either approve or deny it.
  3. The customer gets an automatic email after his request has been processed.

In this tutorial, I'll show you how to create a form like this.

When the member asked this question, my first thought was to collect the requests with the Webform module. My plan was to convert this data into nodes, so it could then be displayed in Views. This plan is possible with the help of the Rules and the Webform Rules module.

However, there’s a less complicated alternatives - allow your customers create a node. The main advantage is that you avoid the complex conversion step in the first place.

It also makes no sense to mix up your form submissions with your content, it’s easier to create a node instead of creating a submission and converting it into a node.

Step #1. Create a "Support Request" Content type

  • Click Structure > Content types > Add content type.
  • Uncheck Published and Promoted to the front page.
  • Close comments.
  • Leave the Author and date information (this is relevant information since you’re letting your customer create the node).
  • Leave the Main menu as default.

Content type for Request Contact Form in Drupal 7

  • Click Add field and follow this structure:
 Field name  Type  Widget  Values  Device  List (text)  Select list

1) Dishwasher

2) Oven

3) Refrigerator

 Request status  List (text)  Select list

1) Pending*

2) Approve

3) Denied

 Required field.

* Default value.

 Additional comments  Text  Text field  Max length is 3000

settings for Request Contact Form in Drupal 7

Step #2. Restrict access to certain fields

You certainly don’t want your customer to change the status of the request.

Also, the field additional comments are meant to be used by your employees.

To hide this fields from the user, you’ll have to download and enable the Field Permissions module.

  • Download and enable the module with your preferred method.

03

  • Click People > Permissions > Roles. 
  • Click edit permissions on the authenticated user line.

permissions for the Request Contact Form in Drupal 7

  • Look for the Support request: Create new content permission and check it.

05

  • Click Save permissions.
  • Your customer can now create nodes of type Support request on your site.
  • Click Reports > Field list > Permissions.
  • Look for the fields you want to revoke.

06

  • Click on each link (both fields).
  • Choose Custom permissions.
  • Click Save settings.

07

Your customer can now create a node (in the frontend of the site). Notice that the customer won’t have access to the backend because you haven’t granted those permissions.

  • Create an authenticated user and log in to another browser.
  • Click the Add new content link.
  • Fill out the node “form” and click Save.
  • Check the Content link in the browser you’re logged in to the site.

Excellent! The first part of the task is accomplished! Let’s move on.

Step #3. Retrieving and processing the nodes

You can filter all support requests in the content view page, this is ok if you have 10 nodes.

But if you have more requests and some of them have already been approved or denied, then it’s not a practical way to select only nodes with status “Pending”.

For that purpose, you’ll have to create a view. Install and enable Views and Views UI if you haven’t done yet.

  • Click Structure > Views > Add new View.
  • Create the view Support requests - Older first.
  • Click Continue & edit.

08

  • In the Filter Criteria section click Content: Published and set its value to No.
  • Click the Add link.

09

  • Search for the Request status field and choose it.

10

  • Click Apply (all displays).
  • Choose Is one of and Pending.

11

  • Click Apply (all displays) again.
  • Save the view.
  • Now you have access only to those requests with pending status.

12

The employee can click on the link to have access to the full node, from where they can edit it. They have to approve/deny the request.

Otherwise, it will still be appearing in this view. So it’s a good thing if this view is empty (if you trust your employees).

13

14

Good job! That was the second part of the task.

Step #4. Send the customer an email with Rules

  • Install the Rules module and all its dependencies.
  • Enable Rules and Rules UI.
  • Click Save Configuration and Continue.

15

  • Click Configuration > Rules > Add new rule.
  • Give your rule a proper name.
  • Choose React on Event > After updating existing content.
  • Restrict by type > Support request.
  • Click Save.

16

  • You have now an Event.
  • Click Add condition.
  • Leave Data comparison.
  • Click Continue.

17

  • The Data selector value is node:field-request-status.
  • Click Continue.
  • Test the Approved value first.
  • Click Save.

18

  • Add another condition testing the Denied value.

19

  • Now click Add action.
  • Select Send mail from the dropdown list.
  • Configure the action with the help of tokens (replacement patterns).
  • Click Save.

20

From now on, your Drupal site will send the corresponding user an email, each time a support request is processed. Congratulations!

Additional Reading

If you want to learn more Drupal, join OSTraining now. You'll get access to a vast library of Drupal 7 training videos, plus the best-selling"Drupal 7 Explained" book!


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
Oct 16 2018
Oct 16

CKEditor is the WYSIWYG editor that you'll see in Drupal 8.

The default installation of CKEditor has a lot of options, but you can also add more features. CKEditor is an open source editor and has a wide range of extra plugins.

One of our customers asked how they could add 'color",  "text" and "font family" buttons to their CKEditor. This tutorial will explain how to add these buttons to the editor.

Step #1. Install the Required Modules and Libraries

You will need three modules to follow along with this tutorial:

  1. CKEditor Font Size and Family
  2. CKEditor Panel Button
  3. CKEditor Color Button

Next, you'll need to install the CKEditor plugins from the official CKEditor site:

  • Create a folder called libraries inside the root of your Drupal installation.
  • Download the plugin files from the CKEditor site to the libraries folder.
  • Uncompress the files.

You can find the three libraries at these links:

  1. Color Button
  2. Panel Button 
  3. Font Size and Family

How to Install CKEditor Plugins in Drupal 8

The folder structure in your Drupal installation should look like this:

  • Log in to your Drupal site and click Extend.
  • Scroll down to the CKEDITOR section of your modules’ page.
  • Enable the 3 downloaded modules.
  • Click Install.

Step #2. Add Plugins to the Editor

In this part of the tutorial, we'll link our new plugins to our version of CKEditor.

  • Click Configuration > Text formats and editors.
  • Click configure next to the Full HTML format.

  • Scroll down and click Show group names, in order to add a group of buttons to the editor top button bar or second level button bar.

  • Create a new group called Font.
  • Click Apply.

  • Drag and drop the “Font” buttons to the group you created.

  • Add another button group and give it the name Color.
  • Drag the two color-related buttons to the newly created group.

  • Scroll down to the end of the page and click Save configuration.

Step #3. Test the Editor

Now we'll see if everything is installed correctly.

  • Click Content > Add content > Article.
  • Add some text and test the newly added buttons.
  • Make sure that the text format is Full HTML.

  • Click Save when you’re done editing and head over to the published article.

Summary

The CKEditor WYSIWYG core module in Drupal 8 can be enhanced with some additional plugins. They will greatly increase your efficiency as you work on your Drupal 8 content.

Thanks for reading!


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.

Pages

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web