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

How to Set Permissions for Fields 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.
Oct 15 2018
Oct 15

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

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

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

Step #1. Create a Bootstrap Subtheme

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

Once you've done that, we can move on to the next part of the subtheme setup.

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

Configure the libraries file

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

Create an empty script.js file

Step #2. Rearrange the Block Layout

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

Drag and drop the block

Step #3. Add the CSS

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

Identify the CSS selector

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

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

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

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

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

This code will resize the search box

Search box resized

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

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

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

Step #4. Add the jQuery

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

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

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

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

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

  • Save the file.
  • Refresh the site.

Refresh the site

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

Add the sbox CSS class

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

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

Final result

What's Next?

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


About the author

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

Sometimes we're able to give really clear advice: "Do this!" or "Don't do that!"

This is not going to be one of those blog posts.

Drupal gives you the ability to re-use fields. If you have an "Image" field, you could choose to use that same field on every content type on your site. However, it's not always clear whether re-using fields is a good idea. Sometimes it is, sometimes it isn't.

Here's an overview of the advantages and disadvantages to consider before re-using Drupal fields.

General advice on re-using fields

You can choose the "Re-use existing field" feature whenever you go to "Structure", then "Content types" and click "Manage fields" for a content type.

reuse drupal fields

The Drupal.org documentation use to officially recommend that you do not re-use fields:

It is recommended to create new fields, rather than reusing existing ones, unless you have a clear reason to do so.

However, that advice has become more nuanced in recent years, and Drupal officially says that are both advantages and disadvantages.

The Drupal Field UI documentation has a detailed section called "Reusing Fields":

There are two main reasons for reusing fields. First, reusing fields can save you time over defining new fields. Second, reusing fields also allow you to display, filter, group, and sort content together by field across content types. For example, the contributed Views module allows you to create lists and tables of content. So if you use the same field on multiple content types, you can create a View containing all of those content types together displaying that field, sorted by that field, and/or filtered by that field. There is one main reason to not reuse a field: different permissions. For example, you may need different user roles to have different levels of access to a field, depending on the content type to which it has been added. This can be difficult if you reuse a field.

Advantage: re-using fields can make your simpler

Yes, there can be a speed boost, but the time-savings are very small. A more compelling advantage is that re-using fields can sometimes make site administration simpler. Web Initiative sum this up nicely:

Reuse of fields can also reduce the system’s complexity. Instead of creating and maintaining 10 different fields, Drupal admins maintain only two fields and their documentation. Database administrators only need to improve performance of two extra tables. KISS is always a good principle.

It definitely would be easier to apply permissions, setting and design elements to one re-used field rather than 10 unique fields.

Advantage: some content works well with re-used fields

Back to the Drupal Field UI documentation again:

reusing fields also allows you to display, filter, group, and sort content together by field across content types. For example, the contributed Views module allows you to create lists and tables of content. So if you use the same field on multiple content types, you can create a View containing all of those content types together displaying that field, sorted by that field, and/or filtered by that field.

One comment writer on the Drupal.org documentation makes the same point about Views. They point out that Views can combe content in sophisticated ways. So, if you have multiple different content types, with different date fields, then Views can combine them into a single view. However, they also point out that Views isn't so sophisticated with sorting. So, if you have multiple different content types, with different date fields, then Views will struggle to sort the content on all those different date fields.

Disadvantage: Re-used fields are inflexible

Brandon Williams on Twitter summed this up nicely: 

at first it's a good idea, but give it a few weeks, reqs change, you end up creating separate ones anyway

To a large degree, if you choose re-used fields, you are limiting the changes you can easily make to your data later. It is also much more time-consuming to make updates because you need to edit each field individually.

Disadvantage: Re-used fields make data harder to export or migrate

Re-using fields could become an issue when you need to export your data or when you need to migrate to a new version of Drupal or another platform.

Each Drupal field has it's own database table, as shown below. Extracting that data can be tough. The Features module (the most common way to export Drupal data) struggled for a long time with shared fields, although current versions can handle them more effectively.

media_1392150946256.png

This advice is similar to our thoughts on using multi-sites. Whenever you start to build dependencies between codebases or database tables, you add complexity to your site.

Advantage or disadvantage? Performance

The Drupal documentation outlines one possible benefit of re-using fields:

Reusing fields not only makes Drupal run faster, it also makes your project easier to maintain.

This thread on Stack Overflow has a very relevant discusion on performance. It includes this comment:

A real problem however is the number of fields you have. Because currently in Drupal 7, the complete field configuration of all fields, no matter if they're loaded or not, is fetched from the cache on every single request. I've seen sites with 250+ fields, where loading and unserializing the field configuration takes 13MB+ memory."

So, re-using fields could possibly give small performance improvements by letting us have a lower total number of fields.

However, those small improvements may lost elsewhere. This from Web Initiative again:

[fields] extra complexity to a Drupal system. When creating a new field, the field’s definition is added to the field class table and the field’s configuration is added to the field instance table; meanwhile, a new table is added to the Drupal database to store the field data. Database tables add complexity to the system. In addition, queries of nodes will incur JOINexpressions of tables to field data. Multiple JOINs will impact database performance since MySQL responds poorly to queries with multiple JOINs of tables if not properly configured.

Summary

Sorry that we don't have an easy answer to this question. This is a question where you will benefit from reading around the issue and understanding the pros and cons. If you're doing a real site build, it will be worth constructing the site in a test environment to learn more about how these pros and cons impact your site's needs.


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

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

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

Another option is the Fullcalendar View module. This module is by far not as popular as Calendar, but it does its work well. This tutorial will explain how to use the Fullcalendar View module.

Step #1. Install and Enable the Module

  • Use your favorite method to install the module. You can manually install the module via your admin area, but the recommended Drupal 8 approach is using Composer.

composer install drupal/fullcalendar_view

  • Go to your Drupal admin area and enable the module:

Enable the Full Calendar Module

Step #2. Create the Content Types

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

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

Content types for the Full Calendar Module in Drupal 8

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

Create content for the Full Calendar Module in Drupal 8

Step #3. Create the Content

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

How to Use the Fullcalendar View Module in Drupal 8

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

Your content overview page should look like this:

Step #4. Create the Calendar View

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

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

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

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

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

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

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

  • Click Apply.

  • Save the view and go to its URL.

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

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

Thanks for reading! As you can see, the Full Calendar module lets you easily integrate a fully functional event calendar into your Drupal site.


About the author

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

Let me give credit where credit is due. The Drupal community is really getting organized in 2018.

In years gone by, Drupal has succeeded despite not having a clear direction. Everything was done in a stereotypically "open source" way with loose roadmaps. The apex of this was the development of Drupal 8 which dragged on for over 5 years.

This disorganizaton continued even after the release of Drupal 8. Early last year, I wrote a post asking, "When is Drupal 7 End-of-Life?" Unfortunately, no-one knew the answer. The deeper I looked, the more messy and confusing Drupal's plans became. The release cycles for Drupal 7, 8 and 9 were all vague and undefined.

Now in 2018, the future looks much clearer.

Back in April, Drupal got a product roadmap for the first time

Then, at Drupal Europe this year, Dries gave the keynote and provided a clear roadmap for future Drupal versions:

  • Drupal 7 will be end-of-life when Drupal 9 releases in 2020, but there will be commercial support options for at least another year.
  • Drupal 8 will be end-of-life by November 2021.
  • Drupal 9 will be released in 2020, and "it will be an easy upgrade".

Dries has a post called "Drupal 7, 8 and 9" which explains these timelines in detail. He includes this image which sums up Drupal's plans:

drupal 7 will be supported until november 2021

Perhaps, in restrospect, the increased discipline started with the release of Drupal 8. This image below is taken from Dries's talk at Drupal Europe:

drupalcon releases

Yes, I've been criticial of Drupal's previous project management, but the community is making great strides.

I don't know the story behind this shift (if you do, please contact me or leave a comment), but Drupal now has a whole new approach to product management.

Drupal 8.6 was a great release. There are real roadmaps, clear plans, and logical explanations. Kudos to the Drupal team. 


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.
Sep 06 2018
Sep 06

Drupal releases major updates only twice per year: in March/April and also in September/October.

Drupal 8.6 is the major update for September 2018.

Let's dive in and discover what new features we'll see. Some of the Drupal 8.6 improvements are outstanding!

New Feature #1. Demo Data

For the very first time, you can install Drupal and get a whole demo site to explore. If you install Drupal using your browser, you'll see a new option: "Demo: Umami Food Magazine". 

choose umami in Drupal 8.6

After you complete your Drupal installation, your site will be populated with dummy content for a food magazine.

umami screenshot

There are about 20 sample content items in the Umami demo. Many of them are in a sample content type called "Recipe". It looks like the demo data was chosen to give a good overview of multiple different field types.

umami content type in Drupal 8.6

There also a couple of landing pages, created with sample Views. All-in-all the demo data is short and sweet but it does look much better than a plain Drupal install.

umami recipes in Drupal 8.6

New Feature #2. Media Library

Finally we're getting somewhere with media in Drupal! For many years, Drupal has shipped with almost no media handling. This is the most commonly requested feature whenever we do Drupal training. 

Since the release of Drupal 8.4 in late 2017, Drupal has had some new media handling features. But, they were still very limited. With Drupal 8.6, we take a big step forward. There is now a "Media Library" module in the core. It is in the "Experimental" stage, so you'll need to enable the module:

media library drupal

To use the new library, create a field using the "Media" type. It will show as an "Entity reference".

media reference field

When you go to create content using this field type, you can click "Browse media" or "Add media".

media library

You'll be able to search through all the images uploaded to your site and choose the file you need. This is a huge - and long overdue - step forward for Drupal. This Media library is created using Views, so you can customize this screen however you wish.

media library with images

New Feature #3: YouTube and Vimeo Embeds

In addition to the new media library, Drupal 8.6 also has improved support for remote embeds. 

  • Create a field using the "Media" type and select the "Remote video" option.

media youtube

  • Go to Content > Media > Add media.
  • Click "Remote video".
  • Enter a YouTube or Vimeo URL.
  • Click "Save".

add remote video

  • Now when you go to create content with a video field, you can click "Browse media":

youtube embeds

  • You can choose the video that you added earlier:

choose media embed

The idea is that you save your content and see the URL automatically turned into a video on the front of your site. However, in my testing, I wasn't able to successfully select videos and click "Select media". Perhaps the bugs will be squeezed out before the final release.

However, in addition to the bugs, the workflow for this embedding is still clunky. You have to add the video before you create content, which is a significant hurdle for content creators.

New Feature #4. Layouts

Drupal's layout builder features continue to get better, although the two key modules are still experimental: Field Layout and Layout Builder. Enable both of those modules if you want to test the layout options.

field layout

You can enable the layout features for each content type individually.

  • Go to Structure > Content types.
  • Edit a content type and click "Manage display".
  • Check "Use Layout Builder.
  • Check "Allow each content item to have its layout customized."
  • Click the "Manage layout" button.

drupal layout options in Drupal 8.6

You'll now be taken to the front of your site, where you control the layout for this content type.

  • Click "Add Section" and you'll be able to choose from "One column", "Two column" and other options.

choose a layout in Drupal 8.6

In this image below, I've chose a new "Two column" layout. Confusingly, you will now see an "Add Block" link. This is confusing because, as we'll see, you can actually add much more than just a block.

add sections in Drupal 8.6

When you click "Add Block", you'll be able to choose from almost all the data on your site. You can add fields, user data, forms, views and much, much more. This option allows you add almost any site feature to your new layout.

choose blocks in Drupal 8.6

One of the most interesting things about this layout option applies to much more than just content types. You can use these layouts for media, contact forms, taxonomy, users, and more. I'm in the camp that feels that WordPress' Gutenberg editor is a good idea with poor execution. In contrast, the Drupal team seems to have done an outstanding job with this new layout builder. If you're a WordPress user, this new Drupal layout editor feels closer to a full-page designer like Beaver Builder or Elementor than it does to Gutenberg.

New Feature #5. Workspaces

The Workspaces feature allows you to prepare and preview your entire page before publishing it. Workspaces is still in the experimental stage, so you will need to actively enable the module. Two things to note about this feature:

  1. It's not yet compatible with Drupal 8's content moderation features. You do need to remove some key moderation features before enabling Workspaces.
  2. Don't confuse "Workspaces" and "Workflows". Workflows is a different feature, related to content moderation.

Let's see how to use Workspaces.

  • After enabling Workspaces, go to a URL on the front of your site. You'll see a green "Live" button in the top-right corner.

workspaces in Drupal 8.6

  • Click the green "Live" link.
  • Click the "Stage" link on the left-side of the black banner.

stage button in Drupal 8.6 workspaces

  •  Now you can activate the "Stage" workspace. Be careful because the "Cancel" button is where you'd expect the "Confirm" button to be.

activate stage in Drupal 8.6

  • Make changes to your content on this page. Any changes will not be publicly visible, even if you save them.
  • Click the orange "Stage" button.
  • Click the "Deploy content" button and you can make your changes live on your site.

deploy content in Drupal 8.6

I did find some bugs with this Workspaces feature, and the UI is a little clunky. You can see some mistakes in the image above. But overall, this is another excellent new feature in Drupal 8.

Bonus: Migration

Drupal 8's migration modules are almost all stable! The one exception is new "Migrate Drupal Multilingual" module which is new and experimental.

This is way too late of course. Drupal 8 launched three years ago and only now do we have a stable migration path. It seems fair to guess that this significantly slowed the adoption of Drupal 8. 

migration

My Drupal 8.6 Summary

Gabor Hojtsy, who's heavily involved with Drupal development, called this the biggest update in Drupal 8's history. He's not wrong. If you want to compare, check out our recaps of previous releases, Drupal 8.1Drupal 8.2Drupal 8.3Drupal 8.4 and Drupal 8.5.

Drupal 8.6 really shows the potential of Drupal 8's release cycle and is full of useful, well-executed improvements.

What features are you excited to use in 8.6?


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.
Aug 30 2018
Aug 30

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

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

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

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

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

Highlighted menu item

Highlighted menu item

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

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

Step #1. Create the Content Types

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

Click Add content type

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

Click Save and manage fields

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

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

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

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

Step #2. Configure the Menu Structure

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

Edit the Main Navigation Menu

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

Click Save and repeat the process so many times as needed

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

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

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

Click Add menu

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

Click Save

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

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

Step #3. Configure the URLs

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

composer require drupal/pathauto

I’m using Composer

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

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

  • Click Configuration > URL aliases:

Click Configuration and then URL aliases

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

Click Add Pathauto Pattern

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

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

Use the available tokens widget

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

regions/alaska/[node:title]

Repeat the process for the Alaska Region Content

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

Click Update

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

Step #4. Place the Secondary Menu Block

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

Click Place block

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

Click Place block

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

Click Save block

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

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

Step #5. Install the Menu Trail by Path module

  • Download and enable the module with your preferred method:

composer require drupal/menu_trail_by_path

composer command

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

The menu item Alaska has an active state now

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

That is the real flexibility provided by this module!

Step #6. CSS for the Secondary Menu

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

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

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

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

Add styles

Add styles


About the author

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

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

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

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

Step #1. Checking the Status of the Solr Server

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

Check your Apache Solr status

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

Apache Solr configuration

Step #2. Installing the Drupal Module

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

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

Installing Drupal Apache Solr module

Step #3. Configuring Solr

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

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

Configuring Drupal Apache Solr

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

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

Create a collection for Drupal Apache Solr

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

Integrating Drupal Apache Solr

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

How to use Search API Solr Search in Drupal 8

Step #4. Enabling the Search API Solr Module

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

Enabling Drupal Apache Solr module

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

Enabling Drupal Apache Solr Defaults module

Step #5. Configuring the Search API

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

Configuring Drupal Apache Solr module

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

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

Drupal Apache Solr configuration

Server and index are ready to use.

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

Drupal Apache Solr uninstall

Step #6. Testing the Search API Solr Module

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

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

Testing the Drupal Apache Solr module

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

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

Thanks for reading, please leave your comments below.


About the author

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

Over the last few months we've worked with more and more Drupal 8 sites. Those projects all had one thing in common ... they used the Drupal Paragraphs module.

Paragraphs is a very popular module for handling content in Drupal 8.

Paragraphs works in a similar way to content fields, but also provides a wide range of options for the design, layout and grouping of your content. 

If you want to learn Paragraphs, this is ultimate guide! Read, watch and follow along with all 10 parts of this tutorial. By the end, you'll be using Paragraphs for all your sites too!

Part #1. Why use the Drupal Paragraphs module?

[embedded content]

Paragraph Types can be anything from a simple text block or image to a complex and configurable slideshow.

Instead of putting all their content in one WYSIWYG body field, end-users can choose on-the-fly between pre-defined Paragraph Types. You can create multiple advanced features and end-users can choose which one they want to use.

This makes it much easier for users to add advanced content. For example, users might understand how to add a pull quote into a content body, but it might not end up centered or formatted quite correctly. They may also want to do something more complex such as include an call-out box inside an article, but have no idea how to add the required styles.

The Drupal Paragraphs module can make processes like these much more manageable for non-technical users while also giving developers the ability to control the formatting and appearance of such specially formatted elements at the theme level.

In practice, Paragraphs allows us to insert elements much like content fields, but instead of adding these around the body of any given piece of content, they are effectually inserted throughout the body.

For this guide, we’ll imagine we are creating a website called “Life Advice for Free,” which offers informational content in the form of articles. You can follow along on any other development website if you wish, making minor adjustments as necessary.

Part #2. Installing the Drupal Paragraphs Module

We recommend using a blank Drupal 8 test site for this project.

Drupal Paragraphs Module install

Part #3. Creating Your First Paragraphs

[embedded content]

Paragraphs works by allowing us to create what are called “Paragraphs types” that in our case will collectively replace the Body field of any given content type with which we want to use these Paragraphs types.

In order to begin taking advantage of Paragraphs, you must first create at least one Paragraphs type, and then you have to add that Paragraphs type to a content type. This process can seem confusing at first, but it is easy to become familiar with once you set up one or two Paragraphs types.

In our demonstration, we’ll replace the Body field of the default Article content type with a handful of Paragraphs types.

Important: If you are testing this on a site that already has content of type Article, do not delete the Article content type’s Body field as we are about to do in this demonstration. If you do, you will lose the body of all Articles on your website. If you are working on a site in which the Article content type has already been used, you should create a new content type on which to test out the Paragraphs module.

On our "Life Advice for Free" site, we will begin configuring Paragraphs by editing the Article content type. 

  • Go to Structure > Content types.
  • Click the “Manage fields” button in the Article row.
  • You will now be on the “Manage fields” page for the Article content type. On this page, click the dropdown arrow next to the “Edit” button on the Body row, and click Delete.
  • Confirm deletion on the next page.

delete row for use with the Drupal Paragaphs Module

Now we will create our first Paragraphs type.

  • Navigate to Structure > Paragraphs types.
  • Click “Add paragraphs type.”
  • On the next page, we need to provide a label for this paragraphs type. For our demonstration, we’ll call this one “Body text,” since we are going to use it as the body of our content.
  • Click “Save and manage fields.”
  • On this “Manage fields” page, click “Add field.”
  • In the following “Add a new field” dropdown list, scroll down, and under “Text,” select “Text (formatted, long, with summary)”. This is similar to the default Body field that the Article content type often uses—a long-form text area with a WYSIWYG editor.
  • On the following “Add field” page, we’ll label this particular field “Body text” as well.
  • Click “Save and continue.”
  • Next we are taken to this field’s “Field settings” tab. For any of these fields, we may specify an allowed number of values. It can be useful to allow more than 1 value for some fields—particularly those that accept individual discreet pieces of information, such as dates, image files, or short-form text fields for information such as names—but for long-form text areas, it is often unnecessary to provide additional values since paragraphs can simply be placed one after the other in a single text area. In this example, let's leave the default settings at “Limited” and 1.
  • Click “Save field settings.”
  • On the following “Body text settings for Body text” page, we can keep all of the defaults. Notice that users will still have all of the formatting options that they normally would with the text area’s WYSIWYG editor. We are not taking anything away from them. What we’ll be doing instead is giving them an additional, improved method of adding certain types of elements to their content.
  • Click “Save settings.”
  • You'll now see your new fields inside your new Paragraph Type:

manage fields new paragraph type in the Drupal Paragraphs Module

  • On this next page, click the “Manage display” tab.
  • Currently this Paragraphs type has only one field—the Body text field. We don’t want a label to appear along with the text from this field, so select “Hidden” under the Label column for this field. Format should stay as Default.
  • Click “Save.”

display fields Drupal Paragraphs Module

Now we need to add this Paragraphs type to the Article content type in order for that content type to be able to use it. Here's how we do that:

  • Navigate to Structure > Content types.
  • Click “Manage fields” for the Article content type.
  • Click “Add field.”
  • To use our new Paragraphs type with this field, open the “Select a field type” dropdown list and select “Paragraph” under “Reference revisions.”
  • After selecting “Paragraph,” provide the label “Body” because this is what we are using as the body of our content.
  • Click “Save and continue.”
  • On the next page, “Type of item to reference” should be set to “Paragraph".
  • “Allowed number of values should be “Unlimited.” By selecting “Unlimited,” we can insert this special field provided by our configured Paragraphs types as many times as we want. This will become helpful when we begin inserting other things besides text into the body of the content.
  • Click “Save field settings.”
  • On the following “Body text settings for Article” page, we need to make our previously created Paragraphs type available to this field. To do this, check the box next to “Body text” under “Type,” near the bottom of the page. This is how we make that particular Paragraphs type available in this field. As we add more Paragraphs types to our site, we can come back and make those available to this field as well.

Drupal Paragraphs Module body text

  • Click “Save settings,” and the site should take you back to the “Manage fields” page for the content type.

Now we’ve finished replacing the previous (default) Body field with our new Body field, which utilizes Paragraphs, and specifically the “Body text” Paragraphs type that we created. Now we’ll configure a few more settings so that it appears the way we want.

  • To start, we’ll click the “Manage form display” tab so that we can place the new Body field in a prominent location on the content creation page for Articles.
  • On this page, scroll down to find our new Body field, and drag it near the top of the list, just below Title.
  • Click “Save.”

Now we need to make sure the new Paragraph Type is available in the proper place for site visitors.

  • Click "Manage form display".
  • Again you’ll find Body at the bottom. Drag this near the top, just below Image. We’ll treat that image field as a large sort of introductory or lead-in image for our Articles and not part of the content itself.
  • Click “Save.”

Drupal Paragraphs Module field

At this point, we have completed the setup for our Article content type using this new Paragraphs field. Now it’s time to create some content to test it out.

  • Go to your site’s Content page, and click “Add content".
  • Click "Article".
  • You can enter any title for your article. For this example, let’s call our article “How to Make 100 Friends”.
  • Now, down to the Body field, you may have noticed that it looks slightly different, though it still uses the same long-form field with a WYSIWYG editor just like before. The difference now is that we have an encompassing Body field that currently contains one Body text field. Just below the Body text field, you should see an “Add Body text” button, which allows us to add multiple fields. At this point, that would be unnecessary because the long text field currently in use is perfectly suited for inputting long, multi-paragraph text, so we wouldn’t need to add an additional field when we could just add more text in the same field. Later, though, we’ll see that it becomes very useful to be able to add additional Paragraphs fields when you have implemented multiple Paragraphs types on your site. For now, just enter a paragraph or two of text into your Body text field.

using Drupal Paragraphs Module

Save your article and view the page as any visitor would see it. 

At this point, the new Body using Paragraphs looks no different from an article using the default Body field. With Paragraphs in place, though, we will soon be able to allow our content creators to add additional elements to the content without having to know how to style it properly.

Part #4. Adding Your CSS to Paragraphs 

[embedded content]

A big part of what makes Paragraphs so useful is that we can write CSS for specific in-content elements so that content creators don’t have to try manually styling as many of these elements themselves using the WYSIWYG editor or inline CSS. This means we’ll be customizing our site’s theme to make these elements appear exactly as we want.

In many real-world cases, you’ll likely be working with a custom theme or subtheme of your own, in which case you may edit it freely. For this tutorial, we are going to create a quick and easy subtheme of the default Bartik theme so that we can follow best practices and add our own CSS without editing the Bartik them itself. (We avoid editing Bartik—or any other core or contributed theme—directly because if we do so and then later apply a released update to that theme, our own modifications will be lost.) If you are unfamiliar with creating subthemes, that’s ok. We are not digging into the process extensively but instead are creating a direct copy of the theme, to which we will then apply some slight alterations. This is an easy process.

  • To create a subtheme, you first need to access the server on which your site is hosted, and navigate to your site’s root directory.
  • Once there, open the “themes” directory. This is where all custom and contributed themes and subthemes are placed. In this “themes” directory, create a new folder called “custombartik,” and navigate into this new directory.

Now we need to add a couple files to this new directory. The first will be the theme’s info file. Open up whatever code editing software you use for web development. These info files require several pieces of information: the name of the project (the name of our theme), the type of project (“theme” in this case), the machine name of the base theme if this is a subtheme (as ours is), a short description, and the major version of Drupal (7.x, 8.x, etc.) for which the theme is built. We will enter this information in the following form (type everything exactly as you see it):

name: Custom Bartik 
type: theme 
base theme: bartik 
description: A custom theme based on the core Bartik theme 
core: 8.x

Make sure the base theme name “bartik” remains un-capitalized—it is the case-sensitive machine-readable name that we need. With this information entered, save the file as “custombartik.info.yml”. It is important that you save it with exactly the same name as the folder you created followed by “.info.yml”.

Now we need to create our theme’s libraries file, where we will tell Drupal where to find the theme’s CSS and what version of the theme this is. More information can be provided, but this is all we need for our purposes.

  • Open a new file. In this file, pay close attention to the indentations here. Each indentation should be a two-space tab.
  • Enter the following information exactly as it appears:
global-css: 
  version: 0.1 
  css: 
    theme: 
      css/style.css: {} 
  • Save this file as “custombartik.libraries.yml”. This file essentially tells the website that this is version 0.1 of the theme (we could have given this any version number) and that there will be a stylesheet located inside our theme directory (“custombartik”) at css/style.css.

Now we need to go back to our info file to tell Drupal to use the information under the “global-css” container to find our stylesheet.

  • Open your custombartik.info.yml file, add a blank line under your “core: 8.x” line, and then add the following line of information, again keeping the indentation exactly as it appears below:
libraries:
   - custombartik/global-css

The whole file should now look like this:

name: Custom Bartik
type: theme
base theme: bartik
description: A custom theme based on the core Bartik theme.
core: 8.x
libraries:
  - custombartik/global-css

At this point, we are ready to add these two files to our theme. 

  • Upload or copy your custombartik.info.yml and custombartik.libraries.yml files into your custombartik folder.
  • Now add a folder called “css” inside your custombartik folder.
  • Go ahead and create a blank file called “style.css” and upload it to this directory. This will be our stylesheet.
  • Before we create our stylesheet, however, navigate to your website’s “Appearance” page.
  • Scroll to the bottom of the page, and under the “Uninstalled theme” section, you should see your Custom Bartik theme. If you do not see it, make sure that your custombartik folder and all of its files are present in the themes folder of your site’s file system.
  • Click “Install and set as default” under your custom theme so that your site will begin using your theme.
  • Once this is done, navigate to your homepage, and it should look almost exactly like Drupal’s default Bartik theme, with the exception that you will probably see a broken image icon in place of the Drupal logo. The theme looks just like Bartik because what we have created is a subtheme of Bartik with no customization yet in place. If your site does not look like Bartik, and especially if it looks like plain HTML with no CSS styling, go back to your two .yml files and make sure they look exactly as printed above.

Finally, to fix the broken logo image, we’ll copy the logo straight from Bartik into our subtheme. This is OK because we aren’t actually changing anything in Bartik.

  • Navigate to your site’s root directory, and go to core/themes/bartik. In here, you’ll see a file called “logo.svg”.
  • Copy this file into your subtheme (the “custombartik” directory).
  • On your website, navigate to Configuration > Performance, and click “Clear all caches.” Now the logo should appear on your site.

Part #5. Styling Your Paragaphs Fields 

Now that we have a subtheme that we can safely edit, we can begin setting styling rules for the elements of our content controlled by Paragraphs. Before we do so, we should create a new Paragraphs type that requires special styling rules. We’ll follow our example of having a field that inserts a centered image in the midst of an article.

  • Navigate to Structure > Paragraphs types.
  • Click “Add paragraphs type.”
  • We’ll set the label for this one as “Centered image.”
  • Click “Save and manage fields.”
  • On the next page, click “Add field,” and select “Image” under “Add a new field.”
  • We’ll label this field “Centered image” as well.
  • Click “Save and continue.”
  • On the next page, we can retain all default values, so click “Save field settings.”
  • Then, on the “Centered image settings for Centered image” page, we’ll add a few simple restrictions. Set the Maximum image resolution to 650x450 and the minimum resolution to 50x50. Set the maximum upload size to 1 MB, and click “Save settings.” These specific settings are not necessary for the Paragraphs type to work properly; we are including them simply to mimic a real-world scenario.

Drupal paragraphs centered images

  • Now click on the “Manage display” tab, set the Centered image label as “Hidden,” and click “Save.”

At this point, we need to add this Paragraphs type to the Paragraphs field we have in our Article content type.

  • Go to Structure > Content types.
  • Click “Manage fields” next to “Article.”

You may be tempted to click “Add field” here for our new “Centered image” Paragraphs type, but remember, this is going to be intermingled with our custom Body field. So, instead, we will add Centered image to the Body field we created.

  • Click “Edit” next to “Body,” and scroll to the bottom of the page.
  • Here you’ll see “Centered image” available beneath our “Body text” Paragraphs type.
  • Check the box next to “Centered image” to make it available to this field, and save your settings.

Now we’ll add an image using this field.

  • Navigate to your Content page, and edit your “How to Make 100 Friends” article.
  • Let’s imagine we want to add a centered image somewhere in the middle of our article. Beneath the Body text field, you’ll again see the “Add Body text” button to add another Body text field within this Body field. However, if you click the dropdown arrow next to this button, you’ll see that “Centered image” is now also available. Click this button, and choose some image file to upload here. Then provide some alternative text, since that is required.

Now we’ve added the image to our content, but currently it is placed below all of the text. This is where we will make use of an additional Body text field.

  • Click “Add Body text.” Now we have, top-to-bottom, a field of body text, a centered image, and another field of Body text. Note that, though you shouldn’t need to do so at this point, you can freely move these around via the drag-and-drop arrows on the top left of the individual Paragraphs fields. To have the centered image appear sandwiched between article text, simply go to the first Body text field, select whatever text you would like to appear after the image, and cut that text from the field. Then scroll down and paste that cut text into the second Body text field (after your image).
  • Click “Save.”

When you view your article now, it will still not look quite correct. Since we have not yet added any styling rules to our theme, the image is likely to be floated left (as it is by default), rather than centered. However, it should appear after the text of the first Body text field and before the text of the second Body text field. Now we have an article on which we can test some custom styling rules.

drupal paragraphs left aligned image

Part #6. Controlling Paragraphs with CSS

We’ll go to our custom subtheme now to begin styling the output of the Paragraphs fields we’ve created. For now, we’ll target the “Centered image” field specifically, rather than the encompassing Paragraphs field from the content type. We’re doing this because we will want this field to be centered anytime, regardless of where it is. Thus, by setting rules directly for “Centered image,” we avoid setting unnecessary multiple rules for multiple contexts.

We do need to target the “node” class, however, because there will be, by default, some styling for this field targeted under the “node” class. Thus, we have to override those rules.

  • Open your “custombartik” subtheme’s stylesheet at custombartik/css/style.css.
  • The file should still be empty, but now we will begin adding rules to it. We’ll keep things simple for now. Add the following lines of code to your stylesheet:
.node .field--name-field-centered-image { 
  float: none; 
  text-align: center; 
} 
.node .field--name-field-centered-image img { 
  max-width: 100%; 
  max-height: 450px; 
}

With the first set of rules, we are simply centering the image horizontally within its field class and making sure no text or anything else floats next to it. The second set of rules is not strictly necessary, but is some common code to make sure images don’t end up larger than they should be in relation to the content area.

  • Once you’ve added this to your style.css file, save your changes (from here forward, any reference to saving changes in your subtheme also assumes uploading or otherwise copying the files to your server if you are not editing directly on the server on which your test site is located).
  • Then on your site, navigate to Configuration > Performance, and click “Clear all caches” to load the theme changes on your site.
  • Navigate back to the article on which you added the image to be centered (or refresh the page if you already have it open). 

The image placed through the “Centered image” Paragraphs type should now be centered with no text floated to either side of it. There may be further styling we’d like to add, but for the purpose of this tutorial, we’ve done what we want to do at this time—make sure that the output of this field is strictly controlled by CSS so that users adding content do not have to style anything themselves using the WYSIWYG editor or other inline styling methods.

drupal paragraphs center aligned image

Part #7. Paragraphs With Multiple Fields

We can also create Paragraphs types that themselves consist of multiple fields.

For example, instead of a “Centered image” type, we can create a “Centered image with caption” type, which would consist of an image upload field and an accompanying text field for any single element of that type. This, too, helps us remove the burden of layout from those adding content to the site so that we can control content display at the theme level.

Let’s create this “Centered image with caption” type to practice the process of creating a multi-field Paragraphs type. As you might expect, this process is going to be similar to that of creating a single-field type.

  • Navigate to Structure > Paragraphs types, and click “Add paragraphs type.”
  • Label this type “Centered image with caption,” and click “Save and manage fields.”
  • Click “Add field.”

Since our previously created “Centered image” field is exactly what we want for the image portion of our new Paragraphs type, instead of creating a new field, we can reuse the previous one. So, do not select anything under “Add a new field” on the “Add field” page.

  • Under “Re-use an existing field,” select “Image: field_centered_image”.
  • Keep the “Centered image” label, and click “Save and continue.”
  • We do need to configure our settings for the image’s size bounds on the next page. Let’s once again enter a maximum image resolution of 650x450 pixels, and a minimum of 50x50 pixels. Set the maximum upload size to 1 MB.
  • Click “Save settings.”

Now we’ll add another field. Keep in mind we are still inside the settings for our new Paragraphs type, so once we add this second field, “Centered image with caption” will be one type with two fields.

  • Click “Add field,” and add a new field of type “Text (plain)”.
  • Label this field “Caption".
  • Click “Save and continue.”
  • Some longer captions might need to exceed the default 255-character limit, so change the maximum length for this field to 500. Keep the allowed number of values at “Limited” and 1, and save the settings.
  • The following caption settings defaults are all fine, so save the settings on that page as well.

drupal paragraph multiple fields

Now our new Paragraphs type has all of the fields it needs, so let's control the display.

  • Click the “Manage display” tab so that we can remove the field labels, which are unnecessary in this case.
  • Select “Hidden” under the “Label” column for both fields, and click “Save.”
  • If the two fields were out of order, we would rearrange them so that the caption field comes after the image field, but since we added the caption field last, it should already be positioned after the image field, just as we want it to be.

Now we’ll add the new type to our Article content type.

  • Navigate to Structure > Content types, and click “Manage fields” for Article. As was the case when we added our first “Centered image” Paragraphs type to the content type, we will add this new Paragraphs type within our custom Body field rather than adding a new field altogether.
  • On the “Manage fields” page for Article, click “Edit” for Body.
  • Scroll to the bottom of the page, and check the box next to “Centered image with caption” to make that type available within this Body field.
  • Click “Save settings.”
  • Now this new Paragraphs type will be available for those who are adding Articles to the site.

Let’s go ahead and create a new article using this field, and then we’ll add our styling to control its display.

  • Navigate to the Content page, click “Add content,” and click “Article.”
  • Let’s call this article “Learning to Play an Instrument May Improve Your Life.”
  • Click “Add Body text” to begin adding some text to the article. Enter a paragraph or two of text into this field.
  • Then, below the Body text field, click the dropdown arrow next to “Add Body text,” and select the newly available “Add Centered image with caption” option. Notice that we are now presented with two fields for data input, as we should expect—the “Centered image” and “Caption” fields that belong to this Paragraphs type.
  • Upload any image into the image field and provide some alternative text.
  • Then type, “The Les Paul is one of the most legendary guitars in rock and roll.”

Now we’ll add some of the rest of the article’s text after the image and caption.

  • Beneath the image and caption Paragraphs type, click “Add Body text” once again.
  • Add another paragraph or two of text.
  • Finally, click “Save and publish.”

Currently, the display of our “Centered image and caption” should be half correct. Since we reused the previous “Centered image” field, the image itself should already be centered just as it was for the previous field that consisted solely of an image to be centered. The caption text, of course, does not have any CSS rules yet, so it will appear left-aligned and look just liken the text of the rest of the article. So, we need to add some rules to our theme to style this caption text.

multiple field drupal paragraphs

This time, when writing our CSS, we will target the entire “Centered image with caption” Paragraphs type and then drill down to the caption field within that class, rather than targeting the caption text independent of its container, as we previously did with the centered image. We’ll take this approach because we might want to reuse this caption text field elsewhere, and it is likely that in some cases we will want it styled differently (such as being aligned left or right rather than centered) from how it is in this particular Paragraphs type.

We’ll center our caption text because its corresponding image is centered, and to provide a visual differentiation between this text and the text of the article, we’ll make it bold (italics would also provide that effect).

  • Add the following lines of code to your stylesheet, and save your changes:

{codecitation}.paragraph--type--centered-image-with-caption .field--name-field-caption {   font-weight: bold;   text-align: center; }{codecitation}

  • Then, to see our changes on the site, navigate to Configuration > Performance, and clear all caches.
  • Go back and refresh the recently created article, and you should see the new styling rules in effect. The caption text should now be bold and centered below the image.

We can of course apply some styling to this Paragraphs type as a whole. One reason to do this would be to separate the image/caption element from the surrounding text and to make it visually clear that it should be viewed as a single unit.

  • Add the following code to your stylesheet, and save your changes:

{codecitation}.paragraph--type--centered-image-with-caption {   border: 2px gray solid;   margin: 4px 0;   padding: 4px; }

Now clear your site’s cache once again, and refresh the article page. The image and caption should look mostly the same; however, now the entire image/caption unit is surrounded by a gray border and has small margins around the top and bottom. We could do more to improve the aesthetics here (and the border is likely not necessary), but this demonstrates our ability to provide styling for individual components of Paragraphs types as well as Paragraphs types as a whole.

multiple field drupal paragraphs with css

Now if a non-technical user is adding content to the site and wants to include a large, centered image with a caption, all they have to do is select this Paragraphs field while editing the article, upload an image, and enter the text into the caption field. The formatting will be automatically applied.

Part #8. Using Entire Nodes in Paragraphs 

At this point, we’ve seen some examples of the basic uses of Paragraphs. Now we’ll tackle a slightly more advanced example: using Paragraphs to place an entire node inside the body of a piece of content. One use case for this would be to place a related but standalone piece of supplementary information inside one of your articles (similar to something like a “Did You Know?” section that you might see accompanying a magazine article).

For our example, we’ll imagine we want to have the option to add what we’ll call “Info boxes” to our articles, and we’ll do so by placing a short piece of content entitled “A Short History of the Harp” within our previously created article about learning to play an instrument.

First, we need to create a content type for these “info boxes.”

  • Navigate to Structure > Content types, and click “Add content type.”
  • We’ll give this content type the name “Info box.”
  • For the description, write “Short pieces of information used to supplement articles.”
  • Click the “Display settings” tab, and uncheck “Display author and date information” because we don’t want author and date information showing up within our Info box content.
  • All of the rest of the default settings on this page should be fine. Click “Save and manage fields.”
  • On the “Manage fields” page, we already have a basic long-form “Body” field, and this is all we want for this content type, since all pieces of content of this type should be short and simple. No changes are therefore necessary here. Click “Add field.”

Now that our content type has been created, we need to create the Paragraphs type that will reference it.

  • Navigate to Structure > Paragraphs types, and click “Add paragraphs type.”
  • Give this type the label “Info box.”
  • On the “Manage fields” page, click “Add field".
  • Beneath “Add a new field,” select “Content,” found under the “Reference” header.
  • For the label, write “Info box,” and save.
  • All defaults are fine on the next page, so click “Save field settings” there.
  • On the next settings page, scroll down until you see the “Reference type” settings.
  • Since we want to use this Paragraphs type to reference and display Info box nodes, check the box next to “Info box” beneath the “Content types” header. You can leave “Sort by” set to “None” because the field will autofill based on what we type and is not a list of all content of this type. Click “Save settings.”
  • Back on the “Manage fields” page, click the “Manage display” tab.
  • As we’ve been doing so far, we’ll remove the label, so select “Hidden” under the label column for the Info box field.
  • Then, because we want to display the entire Info box node whenever we choose to include an Info box in one of our articles, we need to select “Rendered entity” in the column labeled “Format.”
  • Click “Save.”

It’s time to make this Paragraphs type available to our Article content type.

  • Navigate to Structure > Content types, and click the “Manage fields” button for the Article content type.
  • As we’ve been doing, click “Edit” for the Body field.
  • Scroll down and check the box next to “Info box” under the “Paragraph types” header. 
  • Save your settings.

With the structure side of this implementation complete, we’ll now create some content to test it out. We’ll start by adding our site’s first “Info box.”

  • Navigate to the “Content” page, and click “Add content.”
  • Choose Info box.
  • For the title, enter “A Short History of the Harp.”
  • Enter two or three paragraphs of text into the Body field, and click “Save and publish.”

At this point we will divert briefly from Paragraphs. Currently the home page of our site lists all of our articles and info boxes, but we don’t want the latter to appear on the homepage; we want them only placed within other articles. So, let’s quickly edit the view for our homepage to exclude these pieces of content.

  • You can either click the “Edit view” icon (which is displayed as a pencil icon) on the top right corner of the view area of the homepage.
  • Navigate to Structure > Views, and edit the “Frontpage” view.
  • On the view’s settings page, next to the “Filter criteria” header, click “Add.”
  • Select “Content type,” and then click “Apply (all displays).”
  • For the filter criterion, select “Is not one of” under “Operator,” and under “Content types,” check “Info box.” Then click “Apply (all displays).” This, as you probably know, will exclude all content of type “Info box” from the Frontpage view.
  • Back at the view’s settings page, click “Save.”
  • Now when you view the homepage of your site, you will no longer see the “A Short History of the Harp” info box.

Now we’ll add our Info box to the “Learning to Play an Instrument” article.

  • Scroll down to the bottom of the Body Paragraphs field (the larger field encompassing all individual Paragraphs fields).
  • Click the dropdown arrow next to “Add Body text,” and select “Add Info box.” You can type in any piece of the title of your “A Short History of the Harp” Info box node into the autofill field, and that Info box should then be displayed as an option.
  • Select it to include that Info box in the body of this article.

adding info box paragraphs

With the Info box now included in our Body, we need to place it where we want it.

  • Drag and place it after the first Body text field and before the Centered image field.

With this new organization, we should probably have some text between the Info box and the Centered image. To simulate doing this in a real-world scenario, we’ll cut some of our current text and paste it into a new Body text field, as opposed to arbitrarily adding text to the article.

  • So that we have a field to paste our new text in, go ahead and click the “Add Body text” button beneath all of the Paragraphs fields.
  • Then scroll to the first Body text field and select and cut one or two paragraphs of text from the field (making sure to leave at least some text in the field).
  • Paste the cut text into the newly created (currently empty) Body text field.
  • Once this is done, drag the new Body text field, and place it after the Info box field and before the Centered image field.
  • Click “Save and keep published”.

Upon viewing the article, you’ll see that the referenced Info box node is displayed in its entirety within the larger article. (If all you see is the title of the Info box node, that means you forgot to select “Rendered entity” in the Format column Paragraph type’s “Manage Display” page.) As it currently is, the lack of styling on the referenced Info box is likely to be confusing to most viewers. We won’t go through the task of applying additional CSS to these Info box references because we already now how to do that, but it is important to note that, in practice, these references should be styled to appear significantly different from the containing article. It should be made extremely clear—through the use of some combination of background color, borders, text size, and font family—that the information contained in the Info box is not part of containing article and is simply supplementary information.

Part #9. Using Field Layout with Paragraphs

Just as the Field Layout module can be used to control the layout of nodes, it can also be used to control the layout of individual Paragraphs types. In some cases, this can be a viable alternative to controlling the layout via CSS, depending on the situation and on the developer’s (your) preference.

Important: As of this writing, Field Layout is an experimental module. As such, any implementation of Field Layout should be considered a risk. If you do decide to use the module during its experimental phase, it should be tested extremely thoroughly on a development site before being used on a production site. Otherwise, play it safe by considering this information useful for future situations after the module has graduated into non-experimental core.

Because Field Layout is a core module, it does not need to be downloaded.

  • Begin by navigating to your site’s Extend page.
  • Select the Field Layout and Layout Discovery (a dependency) modules, and click “Install.”
  • Then, if prompted, click “Continue.”

Let’s use Field Layout to control the layout of a new Paragraphs type in which we create a two-column unit of “Pros and cons” information.

  • Navigate to Structure > Paragraphs types, and add a new Paragraphs type.
  • Give it the label “Pros and cons,” and add a field.
  • For this field, select “Text (formatted, long),” and give this first field the label “Pros”.
  • Save and continue, and keep all of the default settings through the next two pages.
  • You are back at the “Manage fields” page. Add another field with a Text (formatted, long) input type, and label this one “Cons”.
  • Save, and continue through the subsequent settings pages, once again keeping all default settings.
  • Once you’re back at the “Manage fields” page, click the “Manage display” tab. This time we will keep the label (positioned above, as is default) for each field so that when visitors are reading them, they know that we are listing pros and cons accordingly.

If we look below the listed fields, we will see a new group of settings called “Layout settings.” This is made available by the Field Layout module. Click to expand these settings.

  • We have a handful of options here, and for our Pros and cons lists, we’ll select “Two column.”
  • Then click “Save,” and you’ll be taken back to the “Manage display” page.
  • Now we have additional layout areas to place our fields in for this Paragraphs type. In total, we have “Top” for the area spanning the width of the content space above our columns, “First” for the left column, “Second” for the right column, “Bottom” for the area spanning the width of our content space below the columns, and “Disabled” for fields we do not want to display.
  • Drag-and-drop your Pros and Cons fields so that Pros is in the “First” column and Cons is in the “Second” column, and save.

Now, as usual, we need to add the new Paragraphs type to our Article content type.

  • Navigate to Structure > Content types, and click “Manage fields” for Article.
  • Edit the Body field, scroll to the bottom of that field’s settings.
  • Check the box next to “Pros and cons” to add that Paragraphs type to this custom Body field. Then save.

Now we’re ready to begin using this “Pros and cons” Paragraphs type. Let’s use it in a new article.

  • Create a new article called “Swimming Is a Great Way to Stay in Shape.”
  • Add two or so paragraphs of Body text to this article.
  • Click the dropdown arrow next to the “Add Body text” button, and select “Add Pros and cons.” Notice that this Paragraphs type has two long-form text areas to fill in, one labeled “Pros” and the other labeled “Cons.”
  • Enter text for five or so pros, each separated by a simple line break (in other words, separated by pressing the Enter key). If you’d like, you can alternatively make these 5 bullet points. Do the same in the Cons field.
  • If you’d like to fill out this article a bit more, you can then add another field of Body text below the Pros and cons field.
  • Click “Save and publish.”

Viewing the article, you’ll see your comparison of pros and cons listed, with the pros listed in a left-hand column and the cons listed next to them in a right-hand column. You should also see your “Pros” and “Cons” labels above each list.

drupal paragraphs layout

In most cases you would likely want to apply some CSS to these elements via your stylesheet. Again, we won’t take the time do so here because you have seen how that works. Some styling suggestions might be to add a vertical border between the lists of pros and cons (and potentially borders surrounding the entire Paragraphs type) and to make the “Pros” and “Cons” labels more prominent. Additionally, you may consider going back and editing the Pros and cons Paragraphs type to add a title field which can be displayed in the “Top” area above both columns. In this case, such a field might read, “Some Pros and Cons of Swimming for Exercise.”

Part #10. Permissions for the Paragraphs Module

[embedded content]

At this point, we’ve set up all of our Drupal Paragraphs types and integrated them the way we want, aside from some styling we would need to apply to the Info box and Pros and cons types. However, we have not yet configured any permissions pertaining to Paragraphs. This is an important step. Currently, if an anonymous visitor were to view our site, they would not be able to see any of the content entered via Paragraphs types (which is all of the content we have entered in this tutorial) because by default, only administrators have permission to view such content. You can see this for yourself by logging out of the site in its current state and trying to view the content. You will see the titles of articles but none of the body content.

Additionally, we want to have a “Content creator” (or similar) role on the site so that not everyone adding content has full access to all administrative configuration on the site. These users need permission not only to view Paragraphs content but to create, edit, and delete it.

We’ll start by giving everyone permission to view Paragraphs content.

  • Navigate to your site’s People page, and click on the “Permissions” tab.
  • Scroll down until you see the “Paragraphs Type Permissions” section. Beneath this header, find “Body text: View content,” and check the boxes for Anonymous User and Authenticated User.
  • Do the same for the “View content” permission of all the rest of the Paragraphs types we created: Centered image, Centered image with caption, Info box, and Pros and cons.
  • Click “Save permissions”.

At this point, all users can view all Paragraphs content. Feel free to log out and view the site as an anonymous visitor to confirm.

Now to create a new role for those who will be adding and editing content on our site.

  • Navigate to People, click the “Roles” tab, and click “Add role.”
  • Call this role “Content creator.”
  • Back on the Roles page, click the dropdown arrow next to the Content creator role, and select “Edit permissions.”
  • There are quite a few permissions we will need to give users of this role. Some of these are unrelated to Paragraphs, but we’re including them anyway to mimic a real-world scenario. Additionally, it will be difficult to test the new role reliably if it does not have all the permissions it would have in practice. Note also that we’re granting these permissions assuming that our content creators are all working in-house. That is, we don’t have large numbers of technically authenticated but still pseudo-anonymous users creating content on our site, so we do feel we can safely grant these users permission to do things like use the Full HTML text format, which in other cases would cause some security concerns.

Here is the list of permissions the Content creator role should be given:

Comment

  • Edit own comments
  • Post comments
  • Skip comment approval
  • View comments

Contact

  • View the site-wide contact form
  • Use users’ personal contact forms

Filter

  • Use the Basic HTML text format
  • Use the Full HTML text format
  • Use the Restricted HTML text format

Node

  • Access the Content overview page
  • Administer content
  • View own unpublished content
  • Revert all revisions
  • View all revisions
  • View own unpublished content
  • Article: Edit any content
  • Article: Edit own content
  • Article: Revert revisions
  • Article: View revisions
  • Info box: Create new content
  • Info box: Edit any content
  • Info box: Edit own content
  • Info box: Revert revisions
  • Info box: View revisions

Paragraphs Type Permissions

Grant all permissions in this section except for “Bypass paragraphs type content access control.”

Search

  • Use advanced search
  • Use search

System

  • Use the administration pages and help
  • Use the site in maintenance mode
  • View the administration theme

Taxonomy

  • Edit terms in Tags

Toolbar

  • Use the administration toolbar

User

  • View user information

Make sure you click “Save permissions” when you are done.

A few notes about some of the permissions we did and did not grant here: We did not grant permission to administer Paragraphs types because we do not want them creating new Paragraphs types or changing the way that existing Paragraphs types work. They will simply be entering information using the Paragraphs types that we as the developers have created for them. Additionally, though in some cases it is wise to avoid granting non-administrative roles the ability to delete content (in most cases, it is sufficient that they can unpublish content, and deleting content makes it nonrecoverable), we do need  to give them permission to delete Paragraphs types content under “Paragraphs Type Permissions.” This is necessary because if they are unable to delete this type of content, and if they accidentally click to add any content via Paragraphs type that they do not actually need in a given article, there will be no way for them to remove that unit of content from the article. It would be similar to disallowing use of the Backspace key.

To test our new permissions, we’ll create a new user of the Content creator role and go through the process of adding a new article as that user.

  • Navigate to People, and click “Add user.”
  • Create a user named Mary (you can skip the email address), with a password you can easily remember.
  • Make sure the user’s status is marked as “Active,” and, most importantly, make sure you check the “Content creator” role for this user.
  • Then click “Create new account.”
  • Log out, and log back in as Mary. If permissions were assigned correctly, you should have access to the admin toolbar.
  • Click “Manage” in the toolbar if you do not see the administrative links (“Content,” “Structure,” etc.).
  • Then navigate to Content, and add a new piece of content of type Article. Y
  • ou can title this article “Broccoli Is Great for You”.
  • Add a Body text field, and enter some text.
  • You should then go through and try to add content of each Paragraphs type we have created: Centered image, Centered image with caption, Info box, and Pros and cons.
  • After doing so, save the article, and view it. This full process should be the same as when we did so as a site administrator, and you should then be able to view all content with no problem.

If you do not have the option to add one or more of these, or if you encounter other problems while trying to do so, you probably missed one or more of the necessary permissions when granting them to the Content creator role. Go back to the permissions for Content creator, and make sure you gave them all of the permissions as listed above—especially those under the “Paragraphs Type Permissions” header.

Wrapping up the Paragraphs Tutorial

Once you’ve confirmed that you can create and view content using Paragraphs content as a Content creator, you’ve completed this tutorial. At this point, you should have an understanding of why and how to use the Paragraphs module.

To recap, the usefulness of this module lies in its ability for us to define special in-article content components, such as boxes of supplementary information and centered images with captions, without forcing content creators to try styling things on their own.

With Paragraphs, they are simply asked to provide the content for these parts of our articles, and we as the developers can write site-wide rules (using CSS) for how that content should be displayed. This makes the content creation process easier for non-technical users, and it makes the appearance such content more consistent for technical and non-technical users alike.


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.
May 08 2018
May 08
How to Build User Profiles With Fields in Drupal 8

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:

How to Build User Profiles With Fields in Drupal 8

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.
Apr 25 2018
Apr 25
Logos of Drupal and Telegram

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

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

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

Step #1. Create a Telegram Account

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

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

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

Enter your phone number and the code provided by Telegram

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

Step #2. Get the JavaScript Code

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

Click Next

Click OPEN IN WEB

  • Click Start.
  • Follow the instructions.

Follow the instructions

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

Click Connect the site

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

Copy the JavaScript snippet

Step #3. Add the Javascript to Your Site

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

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

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

You can read more about creating a subtheme here.

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

Open the file in your text editor

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

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

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

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

Step #4 - Change the Logo of the Chat Window

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

Logo

Feel free to explore the different configuration options available.

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

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

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


About the author

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

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