Upgrade Your Drupal Skills

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

See Advanced Courses NAH, I know Enough
Oct 09 2020
Oct 09
How would you like to be able to set up an ecommerce platform on your drupal site in less than 60 seconds? You can! In this video, I want to share with you my little frustration with drupal and drupal e-commerce. It's really hard to set up!  However,  there's a fantastic e-commerce platform called ecwid that allows you to set up your store in no time.  Then you can literally have it embedded on your Drupal site in less than 60 seconds. People will never know the difference, because everything stays on your Drupal site! Let's check it out.

"Welcome to OSTips from OSTraining. My name is Rod Martin.

I'm here on a brand new installation of Drupal with nothing else on it as you can probably tell.  You'll see that this is exactly what it sounds like: a module for the ecwid shopping cart system. We're going to:
  • copy the tar 
  • install the module
  • enable the module 
You'll notice that there's a brand new menu up here in the navigation. 
  • click on the ecwid menu item
  • click setup
  • Click connect button, (if you already have an ecwid account created)
If you do NOT have an ecwid account created, you can click on the text link below the button and create one now. I happen to have one, so i'm going to:
  • click connect button
  • log into my account
  • click accept
Now my store is completely integrated into my drupal website. You'll notice in the top bar there's an ecwid menu as i mentioned and this is actually my ecwid store on my drupal site.  I can see
  1. my sales
  2. my catalog
  3. my marketing
  4. the storefront
There's my store, right inside my Drupal site!  I can't imagine an easier way to get a shopping cart into your Drupal site. And everything stays right on your Drupal site.  One of the great things with ecwid is that they're running a deal right now as well. If you're watching this in 2020, their business plan is FREE until January of 2021. Now I'm going to let you check that out, because pricing changes so head over to ecwid.com and take a look at what they're doing there.

Thanks for watching. This has been OStips from OS Training, and I'm Rod Martin."

 

[embedded content]


About the author

Rod holds two masters degrees and has been training people how to do "things" for over 25 years. Originally from Australia, he grew up in Canada and now resides just outside Cincinnati, Ohio.
Oct 08 2020
Oct 08

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

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

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

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

 Step #1. - Install the Required Modules

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

composer require drupal/honeypot

composer require drupal/antibot

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

Control Spam with Honeypot and Antibot in Drupal

Now it is time to enable them.

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

Control Spam with Honeypot and Antibot in Drupal

Step #2. - Configure Honeypot

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

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

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

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

  • Check Log blocked form submissions.

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

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

Control Spam with Honeypot and Antibot in Drupal

Step #3. - Honeypot Permissions

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

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

Control Spam with Honeypot and Antibot in Drupal

Step #4. - Configure Antibot

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

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

Control Spam with Honeypot and Antibot in Drupal

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

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

  • Click Configuration > User Interface > Antibot.

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

Control Spam with Honeypot and Antibot in Drupal

Summary

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

Thanks for reading!


About the author

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

I don't know about you, but as a site builder when I add a date field to a content type in Drupal, and I tell it I do NOT want the time just the date and then I go to a node, and I enter the date, and it shows me both the date AND the time... it kind of drives me crazy!

How do we fix it? In this video, I'm going to show you how to create new date & time formats in Drupal sites, so you don't have to worry about getting a time and a date when you only want the date.  And, as a bonus, you'll get it in the format that you want.

Let's get started!

"Welcome to OSTips from OSTraining. My name is Rod Martin.

I've just added a date field to my article content type, and you'll note I've set it to date only.

Well, you know the problem.  When I have a node that uses this field, it's automatically going to show the time even though I did not ask for it, and I did not enter a time.   

If I go ahead and manage display for that field, you'll note that the format has the time. Click on the gear.   I'm really limited here as to what kind of format I can choose.  Let's say I want the long date so: Tuesday June 23rd 2020, but without the time.  There's no format for that!

Let's take a look at how to change that.

  • head over to configuration / regional / language / date and time formats

You can either edit one of the top three, but I don't want to choose that, or you can create a new format. There's two ways to do this:

  1. I can start from scratch 
  2. I can click Edit and copy an existing one

I am choosing option #2.

  • copy one that is almost what I need
  • create a new one: long date with no time 
  • paste that string in

Now what's giving me the time is H : I.  It's worth looking at the PHP manual here, so you can see all of the different options. You can create a date and time stamp to reflect pretty much anything you want. For example:

  1. 12 hour format
  2. 24 hour format
  3. day /month /week
  4. ordinal suffix for a day

I'm gonna change this. I'm going to remove the dash and the time. 

  • L is going to be the day
  • F is going to give me the month
  • j is going to give me the days of the month without the leading zeros
  • S after the J
  • Y is for the four-digit year

Let's take a look. Your format is going to be:  Tuesday June 23rd 2020

Now all I have to do is update my display to structure content types article and manage display.

  • head over to my date (and my new date format with no time is there)
  • click update
  • click Save
  • look at the node

And there it is: Tuesday June 23rd 2020

Well that's it! It was pretty simple. With just a little bit of PHP and some help from PHP net, you can build whatever date and time formats you need for your Drupal website. 

Thanks for watching. This has been OStips from OS Training, and I'm Rod Martin."

 

[embedded content]


About the author

Rod holds two masters degrees and has been training people how to do "things" for over 25 years. Originally from Australia, he grew up in Canada and now resides just outside Cincinnati, Ohio.
Sep 10 2020
Sep 10

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

Notice: This module is not for creating ebooks.

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

Keep reading to learn how to use this module!

How to use the Drupal book module

Step #1. - Enable the Module

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

How to use the Drupal book module

Step #2. - The Book Content Type

  • Click Structure > Content types.

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

  • Click Manage fields.

How to use the Drupal book module

Add an image field with the default settings.

How to use the Drupal book module

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

How to use the Drupal book module

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

How to use the Drupal book module

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

How to use the Drupal book module

Step #3. - The Book Outline

  • Click Structure > Books.

How to use the Drupal book module

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

  • Click the Settings tab.

You have two settings here:

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

How to use the Drupal book module

Step #4. - Create a Book

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

How to use the Drupal book module

How to use the Drupal book module

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

How to use the Drupal book module

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

How to use the Drupal book module

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

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

How to use the Drupal book module

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

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

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

How to use the Drupal book module

  • Click Save.

How to use the Drupal book module

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

How to use the Drupal book module

How to use the Drupal book module

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

How to use the Drupal book module

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

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

To check the finished outline,

  • Click Structure > Books > Edit order and titles.

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

  • Click Save book pages after you are finished editing.

How to use the Drupal book module

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

How to use the Drupal book module

I hope you liked this tutorial. Thanks for reading!


About the author

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

How to Display Flickr Images on Your Drupal 8 Site

Jan 31 2019
Jan 31

How to Build Drupal Slideshow Using Views and Slick

Jan 30 2019
Jan 30

How to Pin Images in Drupal 8

Jan 30 2019
Jan 30

How to Rewrite the Output of Views Fields in Drupal

Jan 23 2019
Jan 23

How to Create a Voting System in Drupal 8

Jan 20 2019
Jan 20

How to Create CSS and Javascript Animations in Drupal 8

Jan 20 2019
Jan 20

How to Create a Contact Form in Drupal 8

Jan 20 2019
Jan 20

Videos to Get you Started with Drupal Development

Jan 20 2019
Jan 20

Build a Mega Menu with Ultimenu and Bootstrap in Drupal 8

Jan 18 2019
Jan 18

How to Manage User and Role Permissions in Drupal 8

Jan 17 2019
Jan 17

How to Use Google Webfonts in Your Drupal 8 Site

Nov 16 2018
Nov 16

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

Nov 15 2018
Nov 15

How to Create Drupal Charts With Views

Nov 07 2018
Nov 07

How to Use the CKEditor Accordion in Drupal 8

Nov 01 2018
Nov 01

How to Use Entity Reference Views in Drupal 7

Oct 30 2018
Oct 30

How to Use Entity Reference Views in Drupal 8

Oct 30 2018
Oct 30

Dropdown Menus in Drupal 8 with the Superfish Module

Oct 29 2018
Oct 29

How to Set Up Dropdown Menus in Drupal 8

Oct 29 2018
Oct 29

How to Import Data from CSV Files to Drupal with Content Import

Oct 23 2018
Oct 23

How to Create a Request Contact Form in Drupal 7

Oct 22 2018
Oct 22

How to Install CKEditor Plugins in Drupal 8

Oct 16 2018
Oct 16

How to Create a Search Box with a Sliding Effect in Drupal 8

Oct 15 2018
Oct 15

Should I Re-use Existing Drupal Fields?

Oct 04 2018
Oct 04

How to Use the Fullcalendar View Module in Drupal 8

Sep 20 2018
Sep 20

Finally! There's a Roadmap for Drupal 7, 8, and 9

Sep 17 2018
Sep 17
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

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.
Apr 25 2018
Apr 25

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.
Apr 16 2018
Apr 16
What's in the Drupal 8 Roadmap?

Every year we go to DrupalCon (this time it was in Nashville).

Every year, it's an excellent event.

Every year, Dries Buytaert gives his keynote address, known as the "Driesnote".

However, something was different this year.

In the past, Drupal's release cycles were vague and so the Driesnotes often focused of proposals and ideas. "It will be ready when it's ready" was a favorite quote.

That changes this year. In Nashville, Dries presented a detailed roadmap for where Drupal is headed. There has been an official roadmap page on Drupal.org since 2016, but it never had any real information. Now it full of information about what's coming to Drupal 8.

I'm going to give you a quick-start guide to every item the roadmap presented at DrupalCon, starting with the next release: Drupal 8.6 in September. This image belows show the roadmap from the Driesnote:

drupal 8 roadmap

What's planned for Drupal 8.6?

Content layouts: We have covered this a couple of times on the OSTraining blog, first when Drupal 8.5 was launched and then in a full tutorial. The best way to think about this could be, "Panels is now in core". This feature is already in the Drupal core now and ready for you to test! Click here to see the full Layout initiative.

drupal 8 layouts

A Drupal 8 demo: This is also known as the Out-of-the-Box initiative. Here's a quote explaining the goal of this project: "Installing Drupal currently gives you a mostly empty box. There is no demo content nor much preconfigured functionality. This makes for a weak first impression and makes it hard for the evaluator to connect the dots and find out what Drupal can do for them. The Out of the Box Experience initiative (OOTB) aims to improve this situation. The goal is to add sample content presented in a well designed theme, presented as a food magazine. Using recipes and feature articles this example site will make Drupal look much better right from the start and help evaluators explore core Drupal concepts like content types, fields, blocks, views, taxonomy, etc." Click here to see the issue for this new demo content.

YouTube support: This is part of the new Media features in Drupal 8. This basic Media module is already in the Drupal 8 core, but it's not very useful yet. The plan is that you will be able to add YouTube embeds to your site, alongside the more basic Media types: Images and Files.

Drupal 7 to Drupal 8 migration path: The migration path to Drupal 8 will finally become stable ... three years after the launch of Drupal 8. That's way too late, but at least it's almost done. In fact, if you read the official issue queue, the migration tools are stable now: "So the only thing blocking it from going stable at this point is that it depends on an unstable module. Meaning, migrate_drupal. Otherwise, the UI is now as stable should be considered Un-Officially stable!!! Go out and migrate using it." The main limitation at the moment seems to be with multi-lingual sites.

Support for JSON API specification: I'm not quite sure why this item made the list, as it's a more minor change. This update allows Drupal to show which version of the JSON API specs is currently supported.

Media Library (experimental): Currently Drupal 8 does not have a browseable media library. You need to know the name of the file in order to find any media that you uploaded previously. Go to 44:50 of the Driesnote video and you'll see a preview of the new library. Click here to see the full Media Library issue.

drupal 8 media library

What's planned for Drupal 8.7?

Full-site previews: This is a really interesting new feature which introduces the ability to preview and stage changes. Drupal will have the option to create a new version of a page. You can work on this page in private, and then push it live. Drupal will call these "Workspaces", so you'll have a Staging and a Production workspace. This would be an ideal solution if you wanted to prepare landing pages to launch on a certain date, or get approval for updates to existing pages. Click here to read more about this initiative.

switcher UI compare

Auto-generated API docs: It's generally agreed the Drupal 8 API documentation is lacking. There's talk of a new project to overhaul all the documentation, but the API docs could be automatically generated as with Symfony.

Redesigned Javascript admin interface (experimental): Scroll down and watch from about 43:00 of the Driesnote for an introduction to this topic. The image below shows what the redesigned Drupal 8 could look like. You can find more images on this Drupal.org issue. This is part of a larger initiative called "Modernize Drupal's Javascript". It is 10 years now since Drupal added jQuery to the core, and it's now time to move on to alternatives such as React. The very ambitious goal for Drupal 8.7 is to "create an alternative admin experience for Drupal as a single-page React application".

new drupal 8 interface

What's on the Wishlist?

Automatic updates: There is an official initiative working on this. "Updating a Drupal site can be difficult, time-consuming, and expensive. While implementing an automatic updates system is a difficult problem, and not without its risks, it is a problem that has been solved by other platforms, and that Drupal can address." We wrote about the need for this in 2014. The short version of this after Drupalgeddeon 1 and Drupalgeddeon 2, Drupal can't afford to leave so many sites unpatched. Blaming the site owners is not a good strategy.

Redesigned data modelling tools: There's no information available at this project yet.

Support for GraphQL specification: This is part of the API-first initative. Working is being done in the GraphQL module which will form the basis of this project.

Hoverboard prototype: Honestly, this isn't needed. This problem was solved in 1989.

Watch the Driesnote from Nashville

Dries starts speaking around the 19 minute mark:

[embedded content]

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 06 2018
Apr 06
Getting Started With Drupal's Webform Module

One of our club members asked us how to create a survey form in Drupal 7. They wanted to achieve this without a need for custom coding.

The Webform contrib module is the perfect tool for the job. In this tutoral, you will learn how to use this module to survey what peanut butter, jelly and bread your site visitors prefer.

Webform is a module for making forms and collecting information from users in Drupal.

After a submission, you can send users a thank-you email as well as sending a notification to administrators.

Results can be exported into Excel or other spreadsheet applications. Webform also provides some basic statistical review and has an extensive API for expanding its features.

If you need to build a lot of customized, one-off forms, Webform is a more suitable solution than creating content types and using the CCK or Field modules.

Step #1. Download the Webform, CTools, Views, and Token Modules

Download the Webform module

Make sure you download the latest versions of the module for Drupal 7. They may have changed since we wrote this, so be sure to check.

Step #2. Install the Webform, CTools, Views, and Token Modules

tutuploadsStep_2._Install_the_Webform_Module.png

Note: if you don't see the Install new module link, please go to Modules and enable the Update manager module.

Step #3. Enable the Webform, CTools, Views, and Token Modules

tutuploadsEnable_the_module.png

  • Go to the Modules and enable the Webform module
  • Scroll down to Webform and click the checkbox.
  • Click Save configuration.

Step #4. Access the Form Fields

tutuploadsAccess_the_form_fields.png

  • Go to Structure  > Content types.

tutuploadsmedia_1317093423174.png

  • Scroll down to Webform.
  • Locate the edit, manage fields, manage display and delete links.

tutuploadsmedia_1317094660865.png

  • Click Edit.

You will be taken to the Webform module management page:

tutuploadsmedia_1317095178845.png

This is not the place where you will be creating forms. Editing here is exactly the same as editing Fields in Content Types, which is a way to make fields available to this content type.

From here you can edit fields, manage existing fields, the display and the comment functions by clicking on the appropriate tabs.

But creating the actual form is done by adding content in the same way you would add an article.

You won't need to do much here but review all your choices and see if there is anything you feel you must change.

The default values will work for the purposes of our demonstration. After you create your first form and understand the module you might want to revisit the configuration.

Now that the module is installed and the configuration is checked, you can begin building your survey form.

Step #5. Create a Web Form by Adding It as Content

tutuploadsStep_3._Create_your_first_webform_by_adding_it_as_content.png

  • Go to Content > Add Content > Webform.

tutuploadsCreate_the_basic_entry_form_and_configure_the_same_as_any.png

  • Give it a title and make the decisions on all basic options.
  • Save this with the Save button at the bottom of the page.

Step #6. Add the Form Components

tutuploadsStep_4._Start_adding_form_components.png

Now you will see the controls for creating and editing the rest of the form elements.

Let's start adding Form components using the WEBFORM tab.

tutuploadsStep_5._Make_a_pre-filled_username_field_using_a_Token.png

  • Make sure you are under the Webform tab.
  • Enter Name instead of the New component name text.
  • Choose the textfield.
  • Click Add.

We are surveying registered users, so we are going to automatically fill in their username.

A name is a basic text field, but we want our registered users to show up on the textfield, so we're going to make use of the Tokens. Using Tokens is just an optional feature.

tutuploadsmedia_1317148972326.png

  • Enter the %username token value in the Default value field. This will pull the username from the database and fill it in automatically.

Note: If you don't see the TOKEN VALUES, you probably don't have the Token module installed. You only need the %username token if you want to fill in the default values taken from the database.

If this is going to be a blank field that the user will fill in when they visit the page, you can just leave the Default value blank. I used the token value here to illustrate the possibilities available to you.

  • Scroll down the rest of the page and make any configuration selections you need.
  • Click Save component at the very bottom of the page.

Step #7. Create the Select options Fields

tutuploadsStep_6._Create_your_first_Select_field.png

Now let's create our first select field form component.

  • Enter Bread as the filed label.
  • Choose the Select options type from the drop-down. 
  • Click Add. 
  • On the next screen enter the options as displayed in the image below:

tutuploadsStep_7._Create_the_list_of_options_for_the_user_to_choose.png

  • Go to Options and create Key-Value pairs.

These pairs consist of a machine-readable key and a plain language value separated by a "|" - This character is called a "pipe" and you can find it by holding shift while pressing the backslash key "\" key on most keyboards.

Key-value pairs MUST be specified as "safe_key|Some readable option". Use of only alphanumeric characters and underscores is recommended in keys. Enter only one option per line.

  • Save the component.
  • Repeat this step for the flavor of the jelly and type of peanut butter.

tutuploads-_Default_choice_is_radio_buttons.png

When you are creating lists, the default type is radio buttons. If you want checkboxes or a list box the choices are farther down on the page.

You can also set the field as mandatory or optional. If you click the "Multiple" checkbox at the top, the list will appear as checkboxes.

If you choose the Listbox under DISPLAY you will have a drop-down box. Selecting Multiple and Listbox will allow users to make multiple selections from a drop-down box.

When you create the Jelly type, add Other as a choice. Then add a text field so people can write in their suggestions.

Step #8. Add a textarea Field

tutuploadsStep_8._Add_a_Text_field.png

  • Add a textarea field. It will be a large area used for entering more extensive written responses.

Other field types you might want to add for your purposes are an E-Mail field or Date field. You can choose these types from the drop-down Type box.

tutuploadsmedia_1317154370995.png

Step #9. Add a Preset Field Type for US States

tutuploads-_Add_a_preset_field_type_-_an_added_feature_of_Webform.png

There is a convenience feature you may want to use. You can create pre-built option lists and add them to your form. The module comes with several default lists. 

  • Add one for the US States to see how this looks on your form.
  • Label it State.
  • Choose the Select Options type. 

tutuploadsmedia_1317151406971.png

  • Choose the US States from the drop down.
  • Click Save Component.

Step #10. Check Your Survey Form

tutuploadsStep_9._Check_your_form_and_fine-tune_the_view..png

At this point, your form will look similar to the one on the image above.

You can change the locations of the descriptions by clicking the WEBFORM tab and editing each item and making different configuration selections.

  • Order the form fields the way you like and all the questions and fields correct. You can use drag and drop to move form elements to different positions.

Next, let's configure the E-Mail Option.

tutuploadsStep_10.__Configure_the_E-Mail_options..png

  • Go back to the WEBFORM tab > E-mails tab.
  • Fill in an e-mail address. 
  • Click Add.

Good job. You just set the email address to receive an email when the form is submitted. If you wish, you can add multiple e-mail addresses.

tutuploadsmedia_1317152290926.png

There are lots of choices to make. Be sure you check every one of them so they are correct for your form. Be sure to save the changes.

Let's move on to the last step.

Step #11. Configure the Form Settings

tutuploadsStep_11._Configure_the_Form_Settings.png

  • From the WEBFORM tab click the Form settings sub-tab at the top of the page.
  • Check and modify settings as needed. 
  • Save your changes.

Step #12. Test Your Form

  • Now publish your form exactly like you would publish any other content item on your site.
  • Log out of your site.
  • Fill in our survey form as an anonymous user.
  • Now log in back to your site.

The Results tab

  • Click the Results tab.

Click the view link

  • On the next screen, click the view link.

The Submission screen

You will see the Submission #... screen, resembling the one, displayed on the image above. Job done! If you wish, you can also run a test as a logged in user.

Apr 04 2018
Apr 04
Check Out the New Page Builder in Drupal 8.5!

Earlier on the OSTraining blog, Steve Burge gave an introduction to the new Layout Builder in Drupal 8.

Many users have been eagerly waiting for this module and it was released in version 8.5.

In this tutorial, you will take a further look at how to work with this module. You will see how to use the Layout Builder to configure content types and nodes.

This module is one of the new major changes. I feel strongly it will really improve the usability of Drupal. Let’s try it out!

Step #1. Enable the Layout Builder Module

  • Click Extend.
  • Scroll down to the CORE (EXPERIMENTAL) section.
  • Check the Layout Builder module.
  • Click Install.

Click Install

  • The Layout Discovery module will be enabled as a requirement.
  • Click Continue.

Click Continue

Step #2. Create Content

For the purpose of this tutorial, I’m going to generate five articles with the Devel module. This is a handy module that will help you with development tasks.

  • Install the Devel module.
  • Enable both the Devel and Devel Generate parts of the plugin.
  • Click Install.

Click Install

  • Click Configuration > Generate content in order to generate five articles.
  • Click Generate.

Click Generate

  • Click Content and you’ll see the generated articles.

Step #3. Configure the Layout of the Article Content Type

  • Click Structure > Content types.
  • To the right of the Article content type click the dropdown list.
  • Choose Manage display.

Choose Manage display

You’ll be presented with a different interface than the one you’re used to.

  • Click the Manage layout button.

Click Manage layout

This drag-and-drop interface will allow you to configure the layout of all nodes of the Content type Article. Please notice that the layout capabilities refer to the Content itself (i.e. the Content region).

This drag-and-drop interface will allow you to configure the layout of all nodes

  • Click the Add Section link at the top.

You will see a slide menu on the right with different layout options.

  • Choose one of them, for example, the 3 “equal” columns layout.

Choose 3 equal columns

You’ll see the newly created layout surrounded by blue dashed lines:

You’ll see the newly created layout surrounded by blue dashed lines

  • You can click on each of the Add Block links to place Drupal’s default and custom blocks within this new layout regions, for example, within a block specifying the language of the content:

You can click on each of the Add Block links

  • Drag and drop each of the fields of the Content type inside each one of the layout regions.
  • For example, place the image on the left column, the body text on the middle column, the tags on the right column and the comments in the bottom part (footer) of this particular section:

Place the image on the left column, the body text on the middle column, the tags on the right column and the comments in the bottom part

  • When you’re finished with the configuration for your desired layout, scroll to the top of the page.
  • Click Save Layout.
  • If you leave some part empty, it won’t display in the node:

If you leave some part empty, it won’t display in the node

  • All your articles have the same layout now. Take a look at them!

All your articles have the same layout now

All your articles have the same layout now

Step #4 - Configure the layout of a single node

  • Once again, click Structure > Content types.
  • Choose Manage display from the drop-down of the article content type.
  • Check the Allow each content item to have its layout customized checkbox.
  • Click Save.

Click Save

  • Click Content.
  • Choose one of your articles.
  • You’ll see a new tab above the content called Layout: 

You’ll see a new tab above the content called Layout

  • Click this tab. You’ll be presented with the same interface.

The process is the same as the one I described above. The only difference is that you’re configuring the layout just for this article. You can add blocks or even an additional image the same way as explained before.

ou can add blocks or even an additional image

This layout capabilities make Drupal even more accessible for site builders, who don’t know how to override templates or just to speed up the development time.

As already stated, this module is in the experimental phase. Please, don’t use it in your production sites yet. Play with it and send your feedback to Drupal.org if you find any bugs.

I hope you liked reading this tutorial. Thank you and please leave your comments below!

Additional Reading

What's Next?

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.
Mar 29 2018
Mar 29
Theming and Layouts in Drupal 8

One of the most frequently asked questions among our Drupal students is "How do you control the look and feel of Drupal sites?"

If you really would like to be in control of layouts, you need to learn theming.

We've created a "Drupal 8 Theming and Layout" video class to help you. In this post, you will take a look at the class and what you can learn while watching the lessons.

This is not a course for Drupal beginners. Before starting it, you should know how to:

  • Navigate the administration area to manage essential tasks.
  • Set up a basic Drupal site.
  • Install and configure modules.
  • Set up content types with fields and manage their display.

In the first few videos, you will learn how to set up your Drupal 8 learning environment. This is really important.

You are encouraged to not just watch these videos, but to do all the tasks along with the class instructor. It will really solidify the training for you.

  • Module 1 will introduce you to Drupal theming fundamentals. You will create a theme from a clean slate, and we'll provide some great resources to help you along the way.
  • In Module 2 you will work with customizing a theme using template and function overrides.
  • In Module 3 we will introduce you to sub-theming and explore some great base themes at Drupal.org.
  • In Module 4 you will take a design mockup provided by our graphic designer and create an entire Drupal theme to match it. This is really at the heart of this course.
  • In Module 5 we will give you some homework, to help you solidify all the training.

Since this is a video course, we encourage you to use the Pause and Rewind buttons. There will be times when you may want to pause the video, to read something or finish the task before you move on.

There might also be a time when you would just need to see or hear a concept over again before you continue. This is very easy to do and that's the best part of the video training.

We do encourage you not only to watch but practice. We've structured each section of this class with an introduction to the presentation, a demonstration and then a setup task to be done.

You will learn more and it will stay with you longer if you do the tasks.

Are you ready for the "Drupal 8 Layout and Theming" class? Sign up now.


About the author

Born from Ukrainian mother and Russian father, Alex migrated to the United Kingdom in 1999. He is a self-taught Microsoft Certified Professional. He enjoys learning content management systems and helping web site developers make the most of them.
Mar 26 2018
Mar 26

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.

\

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