Upgrade Your Drupal Skills

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

See Advanced Courses NAH, I know Enough
Jul 31 2020
Jul 31

One of the great things about Drupal's new media manager is the ability to easily see all the media you're using on your website.

What if you want to replace one of those images or even more likely a PDF that needs to be updated?

Well in this OSTip, I'm going to show you how.

Let's go!

 

[embedded content]

"Hi and welcome to OSTips from OSTraining. I'm Rod Martin.

Osborne is the creator of this module.  It installs like any other module, but here's the instructions you'll need to know to enable the module.

  • browse to the forum
  • display configuration for any file based media types
  • enable the replace file form display widget (usually put it right under the file or image widget)

This is how it works. I've already installed the media entity file replace.

  • head over to structure media types image
  • manage form display
  • grab replace file
  • drag it up under tags
  • click Save

Now under our media item, you'll see the replace file section where you can replace the file and update everywhere it's been embedded in one simple action.

All right well that's it.  It can't be much simpler than that, and it adds such amazing functionality to the media manager for Drupal 8.

This has been OStips from OS Training."


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.
Jul 10 2020
Jul 10

You can create your own Digital Asset Management System right inside your Drupal 8 website using nothing but core modules.  Watch our video and learn how!

 

[embedded content]

"Welcome to OSTips from OSTraining. My name is Rod Martin and in this video I'm going share with you how to build your own digital asset management system right inside your own Drupal website, using nothing but core modules. Let's go!

So to create our digital asset management system the first thing you need to do is install the media and media library modules in core under the extend menu.

Next, head over to content and media. I've uploaded some media items already just to get us started. While this might be a good start, that's all it is. We get a thumbnail, a media name and honestly how often do we name our media items well... the type it is, who the author is, status updated, and we get some operations. This isn't enough for an asset management system by any stretch. Let's add a taxonomy to it so that we can tag our images with appropriate terms. Easy to do! Head over to structure, taxonomy.

You can either do this through the tag system, but I recommend probably creating your own vocabulary and then defining all of the categories or tags you want for your images videos etc., so that they can be a little bit more controlled. For today, I'm going to just use the tagging system, and I've already added some tags: banner, hero office, animals, people.

Also, you might want to create a different taxonomy for videos, images, PDFs.

Next, head over to media types. Now you'll immediately notice media types are an entity which means they are "fieldable".

  • I'm going to head to image, and manage fields.
  • I'm going to add a field, you know where I'm going with this already.
  • I'm going to grab the taxonomy term field and I'm going to call this image tags. That's going to define the taxonomy just for my image media type and I'm going to make this unlimited.
  • Click Save field settings.

We'll choose the tags vocabulary and again depending on how you want to manage this, should a content editor be able to add new tags on the fly?

Generally I recommend against that simply because then it becomes pretty unwieldy, and you have typos and all other kinds of things. So we'll leave that unchecked. Save settings.

Well now I can head over to content media, and I can update my image with a new tag.

Kids are one of my tags and people are one of my tags. And there we go. Now again, this doesn't do us any good here because in this particular layout. We don't get to see any additional fields.

The next step is to update this view in order to see and filter by the tags that you've created. Structure, Views. Now in this case I'm just going to duplicate that media view because I don't want to really mess this up.

  • So I'm just going click duplicate and then I'm going to add a field called image tags.
  • And then I'm going to add a filter criteria - image tags.
  • I'm going to leave it as autocomplete.
  • I'm going expose this filter to visitors
  • We'll update that label just a little bit and save.

Head back over to content and media, and now you will notice that we've got two media tabs here. We could fix that in a little bit I just wanted to get through it quickly.

You'll note here there are the image tags added to this particular image and of course I can now filter by any tag!

And there you go. Well that's it! A digital asset management system inside Drupal, using core modules. Now there's a little bit more to it than that, so I'd encourage you to check out the class below. This is OSTips from OSTraining, thanks for watching, please subscribe. I'm Ron Martin. "

Learn more about the Drupal 8 Media Module Class here.


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

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

Keep reading to learn how to use this module!

Step #1.- Install the Required Modules 

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

How to Use the Recaptcha Module in Drupal 8 

Step #2.- Configure the Module

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

How to Use the Recaptcha Module in Drupal 8

How to Use the Recaptcha Module in Drupal 8

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

How to Use the Recaptcha Module in Drupal 8

How to Use the Recaptcha Module in Drupal 8

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

How to Use the Recaptcha Module in Drupal 8

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

How to Use the Recaptcha Module in Drupal 8

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

How to Use the Recaptcha Module in Drupal 8

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

How to Use the Recaptcha Module in Drupal 8

 Step #3.- Test the Contact Form

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

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

How to Use the Recaptcha Module in Drupal 8

I hope you liked this tutorial. Thanks for reading!


About the author

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

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

 How to Use The Views Bulk Operations Module in Drupal 8

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

How to Use The Views Bulk Operations Module in Drupal 8

Keep reading to learn how to use this module!

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

Step #1. - Install the Required Modules

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

How to Use The Views Bulk Operations Module in Drupal 8

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

How to Use The Views Bulk Operations Module in Drupal 8

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

Step #2. - Create an Authenticated User

  • Click People > Add user

How to Use The Views Bulk Operations Module in Drupal 8

  • Enter the required data
  • Click Create new account

How to Use The Views Bulk Operations Module in Drupal 8

Step #3. - Create a View

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

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

200609 drupal vbo 005

Let’s tweak the view a little bit.

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

How to Use The Views Bulk Operations Module in Drupal 8

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

How to Use The Views Bulk Operations Module in Drupal 8

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

How to Use The Views Bulk Operations Module in Drupal 8

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

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

  • Click Apply

How to Use The Views Bulk Operations Module in Drupal 8

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

How To Use The Views Bulk Operations Module in Drupal 8

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

How to Use The Views Bulk Operations Module in Drupal 8

  • Save the view

Step #4. - Bulk of Editing Nodes

You can head over to the view page now. 

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

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

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

How to Use The Views Bulk Operations Module in Drupal 8

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

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

How to Use The Views Bulk Operations Module in Drupal 8

Those entities belong now to that particular user.

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

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

How to Use The Views Bulk Operations Module in Drupal 8

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

How to Use The Views Bulk Operations Module in Drupal 8

  • Save the view

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

How to Use The Views Bulk Operations Module in Drupal 8

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

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

Thanks for reading! 


About the author

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

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

Keep reading to learn how!

Step # 1.- Install the Required Modules

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

How to Integrate a Sliding Menu in Your Drupal 8 Site

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

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

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

How to Integrate a Sliding Menu in Your Drupal 8 Site

How to Integrate a Sliding Menu in Your Drupal 8 Site

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

How to Integrate a Sliding Menu in Your Drupal 8 Site

Step #2. - Create a Custom Region

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

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

How to Integrate a Sliding Menu in Your Drupal 8 Site

  • Click Configuration > Performance > Clear all caches.

Step #3. - Place the Trigger Button

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

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

The Sidr options will be displayed in a modal window.

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

How to Integrate a Sliding Menu in Your Drupal 8 Site

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

How to Integrate a Sliding Menu in Your Drupal 8 Site

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

Let’s add the logo image:

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

How to Integrate a Sliding Menu in Your Drupal 8 Site

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

I hope you liked this tutorial, thanks for reading.

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


About the author

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

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

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

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

Keep reading to learn how!

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

Step #1.- Create the Paypal Button

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

How to Embed a PayPal Button in Your Drupal 8 Site

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

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

How to Embed a PayPal Button in Your Drupal 8 Site

You will be redirected to another screen. 

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

How to Embed a PayPal Button in Your Drupal 8 Site

 Step #2.- Create the Product Content Type

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

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

How to Embed a PayPal Button in Your Drupal 8 Site

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

How to Embed a PayPal Button in Your Drupal 8 Site

 Step #3.- Enable Template Debugging

  • Open sites/default/services.yml

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

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

How to Embed a PayPal Button in Your Drupal 8 Site

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

 Step #4. - Create Content

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

How to Embed a PayPal Button in Your Drupal 8 Site

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

 Step #5. - Embed the PayPal Button

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

How to Embed a PayPal Button in Your Drupal 8 Site

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

How to Embed a PayPal Button in Your Drupal 8 Site

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

How to Embed a PayPal Button in Your Drupal 8 Site

  • Scroll down and click Save blocks.

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

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

You can recognize several things there: 

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

How to Embed a PayPal Button in Your Drupal 8 Site

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

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

How to Embed a PayPal Button in Your Drupal 8 Site

  • Click Configuration > Performance > Clear all caches.

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

How to Embed a PayPal Button in Your Drupal 8 Site

I hope you liked this tutorial. Thanks for reading! 


About the author

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

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.

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