Drupal 8 modules

Design System Integration with PatternKit

April Sides — Mon, 21 May 2018 13:33:47 +0000

Design System Integration with PatternKit

The UI Patterns module is gaining a lot of traction as an effective way to integrate design patterns and components with Drupal 8, but what if you are still using Drupal 7? The PatternKit module is a viable solution for your site.

Traditionally, integrating components from Pattern Lab or another design system solution requires a developer to create Drupal templates that map data to components. With PatternKit, the data mapping is handled in the Drupal UI. The user can select the type of component they wish to add to a page and complete the available fields for that element, cutting out the creation and maintenance of an intermediate template file.

Besides the fact that these modules are currently available for different versions of Drupal, there is also a difference in the way the UI Patterns and PatternKit modules are integrating design systems. The UI Patterns module turns your design patterns into plugins for your Drupal 8 site, which will create fields even if the component is not used on the site. The PatternKit module is focussed specifically on data mapping in the UI, so that fields and entity types are only created when a component is used.

When PatternKit is ported to Drupal 8, the mapping approach might make this module a better choice for enterprise level sites.

Additional Resources
Inclusive Development: Using Style Guides to Improve Website Accessibility | Blog
UX Design Evolution: Top UI/UX Design Trends for 2018 | Blog

April Sides Mon, 05/21/2018 - 09:33

Tags

UI Patterns

Modules

pattern kit

Drupal 8 modules

Drupal 8

Drupal 7

Top Drupal 8 Modules: Drupalcon 2018 Edition

Jay Callicott — Tue, 08 May 2018 12:18:51 +0000

Top Drupal 8 Modules: Drupalcon 2018 Edition

Welcome to the latest edition of the top modules for Drupal 8! Below I recap my newest list that I presented at Drupalcon, Nashville along with updated descriptions. I have also included labels to indicate which modules are best suited for intermediate users versus modules that are universally easy to install and configure.

As an added bonus I now have all of these modules and dependencies available through Github/Packagist for easy setup.

Just run “composer create-project mediacurrent/mc_top_modules” to get started in minutes, enjoy!

ESSENTIALS LIST

Admin Toolbar (Beginner) - The admin toolbar. It’s a module that you might think would just be in core. We use this on every project because navigating through menus in Drupal is a real pain without rollover menus.
Component Libraries (Intermediate) - If you are doing any Twig theming this module is going to help you with your Twig file includes.
Devel (Intermediate) - Devel can help you debug problems in Twig templates. Another feature that is handy is the ability to generate dummy content.
Entity Browser / Media Entity Browser (Beginner) - The Media Entity Browser module gives you the ability to use a nice little library pop-up to upload, browse and search for different types of media.
Field Group (Beginner) - This is a helpful module for cleaning up your content types. You can organize fields into tabs, accordions, etc. to give your content editors a better experience.
Google Analytics (Beginner) - Google Analytics is a simple module that allows site admins the ability to easily add basic tracking.
Linkit (Beginner) - This module gives you an autocomplete popup inside of Wysiwyg for adding links.
Metatag (Beginner) - Maintained by Mediacurrent’s very own Damien McKenna, this module lets you configure all of your meta tags for SEO purpose.
Panels / CTools / Page Manager (Intermediate) - Panels is a great site building tool for creating custom layouts with a drag and drop interface.
Paragraphs / Entity Reference Revisions (Intermediate) - The paragraphs module is a Mediacurrent favorite for a couple of reasons. Paragraphs are like mini-content types that can handle a variety of use cases.
Pathauto / Token (Beginner) - The pathauto module lets you set up clean alias patterns for all of your content. If you want all of your blogs to have the path /blog/[title of the blog with hyphens instead of spaces] - this will be the module that you use.
Redirect (Beginner) - Almost every new site needs to incorporate 301 redirects for old page URLs. The redirect module gives site admins an easy interface for creating those redirects in Drupal.
Search API (Intermediate) - The Search API suite of modules is a fantastic way to configure your site searches. By default this Search API DB is enabled but you can easily swap out for Apache Solr. The Search API Pages module is also handy for getting a site search up and running quickly.
Simple Sitemap (Intermediate) - A pretty easy to configure module for creating XML sitemaps for search engines.
Stage file proxy (Beginner) - A great module for downloading images to your local environment auto-magically rather than having to continually migrate those images manually.
Webform (Beginner) - This module is awesome because it makes it easy to make any and all kinds of forms on your site. This is a must-have module if you plan on managing forms within Drupal.

NOTABLE MENTIONS

Below are a list of notable mentions that didn’t make the essentials list but are still worth checking out.

CKEditor Media Embed (Beginner) - A lot of content out there on the web includes social media callouts. This module makes it a lot to easier to include that content inside of your Wysiwyg.
Colorbox (Beginner) - The Colorbox module integrates is a popular lightbox library of the same name with Drupal Views and fields. You will need to download the Colorbox library to your libraries folder, otherwise this module is very easy to set up.
Commerce (Intermediate) - If you have done any e-Commerce you have probably heard about the Commerce suite of modules for Drupal. This allows you to add products to your site and checkouts, payment options and more.
DropzoneJS (Intermediate) - Pretty much everywhere you go on the web you see a drag and drop upload option. So why not have that in your Drupal project? This module makes it relatively easy to do so but there is some configuration required along with the need to download the DropzoneJS library.
Entity embed / Embed (Intermediate) - This module lets you embed any Drupal entity anywhere. The most common use case for this is embedding media within Wysiwyg. When paired with the Media Entity Browser, for example this gives editors a powerful tool for embedding media from a library. Both the Lightning & Thunder distributions have good examples of this implementation.
External Links (Beginner) - Over the years we have seen that most clients want the option to force external links to open up in a new window or tab. This module makes that feature request very easy. All you do is check one checkbox and essentially you are done.
Focal point / Crop (Intermediate) - The problem we are trying to solve with these modules is supporting different kinds of crops from the same source image. This solution is probably the easiest I’ve found both on the developer and the content editor. This module tries to crop around the focus of the image rather than just arbitrarily cropping from the center.
Geolocation (Beginner) - I like that the Geolocation module makes it simple to add a point on a map and have that map render in a field. Easy to input and easy to format, with plenty of options for configuration.
Honeypot (Beginner) - Do you ever get spam? While there are a lot of options for anti-spam measures (including captches) this solution has an algorithm that does not burden the end user and is pretty effective.
Lightning Install Profile (Beginner) - Lightning is a general purpose Drupal distribution that focuses on the media and editorial enhancements. Not only is it a good started distribution for Drupal development, it is also a good learning tool. It often is easier to learn how to configure and use a module by examining how it’s implemented on a pre-configured distribution like Lightning.
Scheduler (Beginner) - The scheduler module lets you schedule the publishing and unpublishing of your content. Note that it is going to use cron to make this happen so you need to verify that your cron is configured correctly.
Slick / Slick views / Slick media (Intermediate) - The Slick suite of modules adds functionality to allow site builders to create slideshows and carousels. There are several related modules that integrate with every aspect of Drupal. The hardest part is the initial setup of library dependencies. Once that is done these modules are very easy to configure within the Drupal admin.
Taxonomy Access Fix (Beginner) - This project addresses the fact that core doesn’t have granular enough permissions. The Taxonomy Access Fix module therefore adds in additional permissions to fill in the gaps.
Viewsreference (Beginner) - Last but not least the Viewsreference module gives editors the ability to select a View from a field. At Mediacurrent we combine this field with a Paragraph type to give editors an easy, flexible interface for embedding Views onto a page.

Did I miss any modules you think should have made this list? Let me know on Twitter at @drupalninja!

Additional Resources
Top Drupal 7 Modules: Final Edition | Blog
Top Drupal Marketing Automation Modules | Blog
Top Reasons to Choose Drupal | Blog

Jay Callicott Tue, 05/08/2018 - 08:18

Services

Tags

Redirects

/blog/mediacurrent-top-drupal-8-modules-drupalcon-2018-edition/

Autocomplete Deluxe Released for D8

Edward Chan — Thu, 07 Sep 2017 15:11:07 +0000

Autocomplete Deluxe Released for D8

I am excited to announce that the D8 port of the Autocomplete Deluxe module has been released in “beta”!

What does it do?

The Autocomplete Deluxe module provides a widget that enhances the default autocomplete field in Drupal. It uses jQuery UI autocomplete and provides a slick visual element for content editors to reference terms - displaying them inline, drag-n-drop reordering, and creation of new terms from the field itself. It works out-of-the-box and no 3rd party libraries are needed.

Installation and setup

Installing this module is straightforward - especially for Drupal 8. Simply run:

composer require drupal/autocomplete_deluxe;

To set up a field called “Tags" to use the Autocomplete Deluxe widget to set
values from the “Tags” taxonomy:

Navigate to “Administration” > “Modules” and enable the “Autocomplete Deluxe” module.
Navigate to “Administration” > “Structure” > “Content types” and select “Manage fields” of the content type you wish to edit.
Add a new field of "Term reference" named "Tags".
Select the “Tags” vocabulary and save field settings.
Under the “Manage form display” tab, select the "Autocomplete Deluxe" widget type in the dropdown menu for your field and save.
Customize or keep the default Autocomplete Deluxe widget field settings.

And that’s pretty much it!

When you visit your node’s add or edit page, you will see the terms referenced displayed in the Autocomplete Deluxe widget:

Additional information can be found in the README.

Contributions and attributions

As of this blog post, there are 14,374 sites using the module (with 159,221 downloads) on D7 and I anticipate that number will continue to ascend as more D8 sites use it.

The D8 port of the module started with an issue created in June 2016 and has been made possible through contributions from several members of the community - notably @idtarzanych, Mediacurrent’s own @LNakamura, and myself. Working from the initial patch provided by @idtarzanych, we were able to make some minor updates to ensure D8 standards were followed and was rid of PHPCS errors.

Mediacurrent acquired maintainership status of the Autocomplete Deluxe module from the module creator, Epiqo, in July 2017 - and we’ve been committing to the effort of assuring the issue queue is groomed, up-to-date, and responding to issues in a timely manner. Lee Nakamura and I are excited to continue to keep this module up to its full potential.

We hope that you will be able to make use of this wonderful module on your D8 sites and look forward to working on making it better through community contributions and feedback.

Edward Chan Thu, 09/07/2017 - 11:11

Tags

Integrating Amazon Alexa With a Drupal 8 Site

Sam Seide — Wed, 16 Aug 2017 12:31:04 +0000

Integrating Amazon Alexa With a Drupal 8 Site

If you’ve ever used Alexa, it may seem like it must be extremely complicated to get her to respond like she does. However, if you have your content inside Drupal, it’s not terribly difficult to get her to utilize that data for your own custom Alexa skill. Let’s take a look at how to accomplish that.

Add the Alexa module to your website

To have your website talk to Amazon, it has to be seen by Amazon’s servers. With that said, your site will have to be outward facing with an https domain. This isn’t an endorsement for them but for this example, we’ll be using a Pantheon hosted site, which allows for free Drupal dev sites to be quickly spun up. To implement this, the first thing we will need to do is add the Alexa module to our Drupal 8 site.

Set up an Alexa Skill on the Amazon Developer site

After your site is up and you have the module installed, it’s time to start setting up the Amazon side of things. You’ll first need to create a developer account at https://developer.amazon.com. Next, you’ll need to set up a new Alexa Skill.

Once you’ve created a new Alexa skill, it’s time to start configuring it to be able to reach our site. The first thing to note is the Application ID that Amazon provides to you. That will need to be copied into the Alexa modules config located on your site at /admin/config/services/alexa

Next, back on the Amazon Development site, give your app a Name and an Invocation Name. The Invocation Name is what the end user will have to utter in order to activate the skill. For our example, we’ll be using the Invocation Name of ‘world publish’.

Next, click on Interaction Model. This is where we will begin to setup our custom commands that Alexa can respond to. These commands are called intents. Here we have setup 2 custom intents, readArticle and WorldPublish.

The other four listed are the default intents that Amazon provides to all Alexa apps and won’t require any setup on this side from us (though we will set a custom value for the AMAZON.HelpIntent when we are writing our custom module).

Our WorldPublish intent here will be used to ask Alexa what the five latest articles are on our site.

To have a better chance the user utters the right intent, you can add more phrasings of this same question to make sure Alexa still will respond appropriately. In our custom module, we will set up the actions required for Alexa to respond back to this question by reading out the titles of the latest articles by date.

Once Alexa has given the user the names of the newest articles, the user may want one of those articles read to them. In our readArticle intent, we create two ways for the user to get an article read back to them. This intent also shows how we can use variables in our command. This variable will be sent to our custom module where we can use that to pull in the name of the article we want Alexa to read back to us.

Create custom module for your responses

Now that we have some intents for Alexa to use, it’s time to start writing some code for what happens when a command is sent to your website. We’ll be naming the module demo_alexa.

In the demo_alexa.info.yml file put in the following:

name: Alexa Latest Articles Demo
type: module
description: Demonstrates an integration to Amazon Echo.
core: 8.x
package: Alexa
dependencies:
 - alexa

Be sure to add the Alexa module as a dependency. Next, we need to create the file that will do all the heavy lifting in our custom module. Create a file inside src/EventSubscriber/ and call it RequestSubscriber.php

Let’s break down what code goes into this file. First, we need to create a namespace and our use statements.

namespace Drupal\demo_alexa\EventSubscriber;

use Drupal\alexa\AlexaEvent;
use Symfony\Component\EventDispatcher\EventSubscriberInterface;
use Drupal\paragraphs\Entity\Paragraph;

Next, we need to make our main class and a function that gets the event.

/**
 * An event subscriber for Alexa request events.
 */
class RequestSubscriber implements EventSubscriberInterface {

  /**
   * Gets the event.
   */
  public static function getSubscribedEvents() {
    $events['alexaevent.request'][] = ['onRequest', 0];
    return $events;
  }

Now we can make the function that gives responses for each of our intents. Here’s the code for that:

/**
 * Called upon a request event.
 *
 * @param \Drupal\alexa\AlexaEvent $event
 *   The event object.
 */
public function onRequest(AlexaEvent $event) {
  $request = $event->getRequest();
  $response = $event->getResponse();

  switch ($request->intentName) {
    case 'AMAZON.HelpIntent':
      $response->respond('You can ask "what are the latest articles" and I will read the titles to you');
      break;
    case 'WorldPublish':
      $latestArticles = current_posts_contents();
      $response->respond($latestArticles);
      break;

    case 'readArticle':
      $article = $request->getSlot('Article');
      $articleResponse = current_post_body($article);
      $response->respond($articleResponse);
      break;

    default:
      $response->respond('Hello World Publish User. I can tell you the latest articles.');
      break;
  }
}

Here you can see the name of our two custom intents that we created earlier, WorldPublish and readArticle. You can also see how this can be used to set values for the default intents such as AMAZON.HelpIntent where when the user asks Alexa for help, we now have a custom response that Alexa will respond back to the user with. This function also gives us the ability to set a default response for if Alexa doesn’t understand what the question was. This is a good place to give the user the phrasing needed to get the proper response from Alexa.

Let’s take a look in more detail at the two custom intents we have in the code above. First off we have the WorldPublish intent.

  case 'WorldPublish':
    $latestArticles = current_posts_contents();
    $response->respond($latestArticles);
    break;

If the WorldPublish intent is the one the user uttered, then we’ll run a custom function named current_posts_contents and then Alexa will respond back with the response from that function. Here is what that custom current_posts_contents function is doing:

/**
 * Get latest articles function.
 *
 * Set beginning and end dates, retrieve posts from database
 * saved in that time period.
 *
 * @return array
 *   A result set of the targeted posts.
 */
function current_posts_contents() {
  $query = \Drupal::entityQuery('node');
  // Return the newest 5 articles.
  $newest_articles = $query->condition('type', 'article')
    ->condition('status', 1)
    ->sort('created', 'DESC')
    ->pager(5);

  $nids = $query->execute();

  $fullstring = 'Here are the five latest articles from WorldPublish, ';
  foreach ($nids as $nid) {
    $node = \Drupal::entityTypeManager()->getStorage('node')->load($nid);
    $name = $node->getTitle();
    $fullstring = $fullstring . ' ' . $name . ',';
  }

  $fullstring = $fullstring . '. You can have me <phoneme alphabet="ipa" ph="ɹˈiːd">read</phoneme> you one of the articles by saying, Alexa read, and then the title of the article.';
 
  return($fullstring);
}

This function does a query of the content type named ‘article’, with the condition that the status is set to publish, ordered by when the article was created and set to return the first five results. This query will give us an array of nid’s that we can use in a foreach loop . We then load the title of the nid and append that title to a string that will be Alexa’s response.

Another thing to note in this code is that sometimes, Alexa won’t get the phonetic pronunciation of words correct. In the statement “You can have me read you one of the articles”, Alexa was saying “red” instead of “reed” when pronouncing “read”. To correct that we can use the Speech Synthesis Markup Language to directly tell Alexa how to pronounce a specific word. To get the correct sounds, you can use the phoneme alphabet that is provided on Amazon’s help site.

<phoneme alphabet="ipa" ph="ɹˈiːd">read</phoneme>

By using the phoneme alphabet in this code, Alexa will change her pronunciation to the correct way to say the word “read” in this sentence.

Now that we have had Alexa read us a list of the five latest articles, let’s take a look at the readArticle case:

  case 'readArticle':
    $article = $request->getSlot('Article');
    $articleResponse = current_post_body($article);
    $response->respond($articleResponse);
    break;

So here we can see where our ‘Article’ variable we set in our intent on the Amazon Developer site comes into play. We’re first grabbing that value from what the user tells Alexa and storing it inside of $article. Then we’re sending that value to a custom function called current_post_body to get our article for Alexa to read. Here’s what’s inside that function:

/**
 * Get body of an article.
 *
 * Get body of article based on title.
 *
 * @return array
 *   A result set of the targeted posts.
 */
function current_post_body(&$article) {

  $query = \Drupal::entityQuery('node');
  // Return the newest 5 articles.
  $article_query = $query->condition('type', 'article')
    ->condition('status', 1)
    ->condition('title', $article, 'CONTAINS')
    ->sort('created', 'DESC')
    ->pager(1);

  $nids = $query->execute();

  if ($nids) {
    foreach ($nids as $nid) {
      $node = \Drupal::entityTypeManager()->getStorage('node')->load($nid);
      $name = $node->getTitle();
      $foo = '';
      foreach ($node->field_paragraph as $item) {
        $target_id = $item->target_id;
        $paragraph_node = Paragraph::load($target_id);
        $addition = $paragraph_node->field_wysiwyg->value;
        // Remove html tags from value.
        $addition = strip_tags($addition);
        $foo = $foo . $addition;
      }
    }
    $response = $response . 'Here is the article, ' . $name . '. ' . $foo;
  }
  else {
    $response = 'I do not see an article by that name. To have me list the latest 5 articles, say, alexa what are the latest articles.';
  }

  return($response);
}

First thing this code does is it runs a query looking through the published article nodes looking for a title that contains the string that the user input. It will then return the latest article it can find that contains that string. From there if we found a piece of content that matches up, we then grab all the values from the paragraph fields inside our article. Just a note that if you aren’t using paragraph fields for your content then this is where you could return whichever fields you wanted Alexa to read back. Lastly, our code then strips out any html tags from the created string so all that is left is the text of the article. This string is now ready to be given back to Alexa for her response.

Now that we have our code for our responses back to Alexa, the last file we’ll need is demo_alexa.services.yml

services:
  alexa_demo.request_subscriber:
    class: Drupal\demo_alexa\EventSubscriber\RequestSubscriber
    tags:
       - { name: event_subscriber }

This should be all the code you’ll need to now test out your Alexa skill. Be sure to enable your demo Alexa module and then head back over to the Amazon Developer site.

Test the responses from the Amazon Developer Site

Back at developer.amazon.com click on the Test tab and make sure your skill is enabled for testing on your account.

As of the time of this blog posting, there’s currently an issue with the test text simulator not working correctly but there’s an easy workaround for that. Be sure on “Use Service Simulator to test your HTTPS endpoint” that your web domain is listed in the box. Then you should be ready to enter in an Utterance into the text box. Type “help” into the box and this will send that to our code we just wrote. When you click the submit button it should send the AMAZON.HelpIntent request to our code and our code will respond back with the custom response we gave.

As you can see though, it looks like it didn’t work. This is the issue that Amazon is aware of and is currently fixing. We can get by this though by copying everything inside the Service Request box and then pasting it into the Json Request box in the JSON tab.

You can then click on ‘Listen’ and you’ll hear Alexa repeat back what the website sent as the response! You can try it again by asking Alexa ‘What are the latest articles’ and if you have articles on your site it should list out the articles for you.

Here’s a quick video showing this custom module working using an Amazon Echo Dot. This shows off how to activate the demo on the Echo, the commands for listing the articles, reading the article specified and also one of the built in default commands to stop Alexa talking. Be warned that if you have an Echo in your room with you, it will also try to respond to the commands said in this video as well!

So that’s it! With this code, you have a good example of how easy it can be to get Alexa to talk to your website. This could easily be used to create lots of different, fun interactive ways for your users to access all of the various content on your Drupal website.

Additional Resources
Building Rest Endpoints with Drupal 8 | Blog
Creating Content with YAML Content Module | Blog
Mediacurrent's Drupal Theme Generator | Blog

Sam Seide Wed, 08/16/2017 - 08:31

Tags