Planet Drupal

DrupalCon LA 2015 Video: Pantheon Interview

On Wednesday’s blog post, we debuted our first interview from DrupalCon. If you missed the Roundtable Interview, you can catch the first episode here. The interviews first appeared during our weeklong live broadcast with Periscope and Twitter.

Our latest interview features Pantheon. We are proud partners of Pantheon, which is where our Drupal Distribution, Open Enterprise, is hosted. Kyle Taylor, our Drupal Developer, meandered through the exhibit hall and gathered some interviews from our friends at Pantheon. They share their opinion on hosting Drupal 8, and working with Drupal.

Pantheon Interview

Note: The video is available in 1080p HD format.

Don't have time to watch? Listen to ALL of the interviews on our Podcast: iFX Podcast!

Want to hear more podcasts? Perhaps more interviews on Drupal? Let me know in the comments!

DrupalCon LA 2015: Roundtable Interviews

A few weeks ago, the team was in Los Angeles for DrupalCon 2015. Our very own Kyle Taylor took his iPad and mic and interviewed developers, freelancers, and some of the top Drupal Agencies that attend the week long event. 

We previously wrote a blog about Periscope: Social Media: Using Periscope at Events. Well we followed our tips and used it to video interviews. If you were not able to join our live feed from DrupalCon, we downloaded the interviews for everyone to watch them again!

Roundtable Interviews

Kyle interviewed a group of Drupalers in this video. They share their opinon on Drupal 8 and working with Drupal.

Note: The video is available in 1080p HD format.

Liked watching interviews like this one? Stay tuned for the rest of the interviews conducted throughout the week during DrupalCon!

​Don't have time to watch? Listen to ALL of the interviews on our Podcast! iFX Podcast

How to use Drupal Bootstrap with Webforms

If you are sub-theming Drupal Bootstrap, you are probably spoiled by all of the awesome functionality that comes with the Bootstrap framework and the Drupal Bootstrap theme. One place where you can’t easily throw a row and col class around your divs through the admin UI is if you are creating a Webform.

I came up with a quick solution to this that, with a little setup, allows the user to leverage Bootstrap through the Webform UI.

What we’re going to accomplish:

Let’s say we’ve built a webform like this:

default webform

However, we want the First name, Last name, Email, and Company to be in a two column layout, and Fields 1-3 to be in a three column layout below the body. Using the webform-form.tpl.php file, we will make the form look like this:

desired webform

How we’re going to do it:

If you check out the webform directory, you’ll see the default webform-form.tpl.php in the templates directory (at something like sites/all/modules/contrib/webform/templates/webform-form.tpl.php). Copy and paste this file into your theme’s directory at [my-subtheme]/templates/webform-form.tpl.php. As the tpl.php says:

  // Print out the main part of the form.
  // Feel free to break this up and move the pieces within the array.
  print drupal_render($form['submitted']);

What we’ll do is decide upon some Field Keys that will serve as the columns that will contain the fields. Then if we place fields within fieldsets given those Field Keys, they will be displayed within the column. This may not be clear until you look at the code and how it will be used with Webform. In our webform-form.tpl.php, if we use the following code:

<div class="row">
  <div class="col-md-6">
    <?php print drupal_render($form['submitted']['field_top_left']);?>

  <div class="col-md-6">
    <?php print drupal_render($form['submitted']['field_top_right']); ?>

And then in the webform, create two new fieldsets, Field Top Left and Field Top Right. Make sure to set the Field Key to the field name you used in the webform-form.tpl.php

field top left webform

field top left webform field key

Nest the First name and Last name fields in Field Top Left fieldset and the Email and Company fields in the Field Top Right fieldset.

nest fields webform

I’ve left the fieldset names to display so it’s more clear what’s going on here. Save and view your webform and bam your fields are now in 2 columns.

Display fields webform bootstrap

So the webform-form.tpl.php is picking up the form's Field Keys from the Webform UI that match what is in the template file, and then wrapping them with the necessary Bootstrap markup. We can follow this same pattern for the three column layout. For example in our webform-form.tpl.php, we can use this code:

<div class="row">
  <div class="col-md-4">
    <?php print drupal_render($form['submitted']['field_lower_third_1']);?>
  <div class="col-md-4">
    <?php print drupal_render($form['submitted']['field_lower_third_2']); ?>
  <div class="col-md-4">
    <?php print drupal_render($form['submitted']['field_lower_third_3']); ?>

Following the pattern above, we can create 3 fieldsets with Field Keys of field_lower_third_1, field_lower_third_2, and field_lower_third_3, and then nest Fields 1-3 in these fieldsets. Alternatively, if you aren't going to add more fields to these fieldsets, you can just give the fields 1-3 the field keys field_lower_third_1 through field_lower_third_3.

three column webform bootstrap

If you’re following along, you may notice that any fields you haven’t placed in these fieldsets or given these pre-defined Field Keys are getting pushed to the bottom of the webform, regardless of how they are arranged in the Webform UI.

webform fields at bottom bootstrap

This is because anything not explicitly declared in the tpl.php is being printed at the bottom in the section that reads:


// Always print out the entire $form. This renders the remaining pieces of the
// form that haven't yet been rendered above.
print drupal_render_children($form);


Right now this webform-form.tpl.php will also be applied to ALL webforms on the site. There are two ways you can go with this - if you just want to use it for just one webform, rename it webform-form-[nid].tpl.php. However, I think it’s nice for it to be available for all webforms since it’s a handy way to build forms using the Bootstrap layout through the Webform UI.

If you’re going to use it for all forms, you will probably want to wrap your columns in some logic so that the markup is only printed out if these Field Keys are being used. Otherwise you’ll get a lot of empty divs. So we’ll do that for the 2 column:

<?php if((array_key_exists('field_top_left', $form['submitted'])) ||
  (array_key_exists('field_top_right', $form['submitted']))): ?>
  <div class="row">
    <div class="col-md-6">
      <?php print drupal_render($form['submitted']['field_top_left']);?>

    <div class="col-md-6">
      <?php print drupal_render($form['submitted']['field_top_right']); ?>
<?php endif; ?>

and you can see how then you would do the same for the 3 column layout. 

Now we just want to add the Field Key that will contain our Text field at the top of the page

<?php if(array_key_exists('field_top', $form['submitted'])): ?>
  <div class="row fullwidth">
    <div class="col-xs-12">
      <?php print drupal_render($form['submitted']['field_top']);?>
<?php endif; ?>

webform top

and the Field Key that will contain lower body field

<?php if(array_key_exists('field_middle', $form['submitted'])): ?>
  <div class="row fullwidth">
    <div class="col-xs-12">
      <?php print drupal_render($form['submitted']['field_middle']);?>
<?php endif; ?>

webform body

Since we only have 1 field (Body or Texfield) in our full width Field Key elements, we don’t need to use Fieldsets, but can instead just give the Body and Textfields the Field Keys that match with our webform-form.tpl.php. 

Check out the webform now, and you’ll see it’s all pretty and Bootstrap-y. Nice.

final form

Have any questions or a different solution? Leave all comments below!

How To Fine Tune Drupal's Editorial Controls with Workbench Access

If you're building a Drupal website with a lot of content for a community of users, chances are you'll need to set up some editorial controls. Starting with the Workbench and Workbench Moderation modules, you can create editorial workflows for content types. Nodes pass through different 'States', like Draft, Needs Review, and Published. Different User Roles control the flow of nodes through these different states. For example, you could create a Contributor role, who has permission to create new nodes and promote them to the Needs Review state. Content in the Needs Review state isn't published, so you could also create an Editor role, who can then promote nodes in the Needs Review state to Published, or reject nodes in the Needs Review state by setting them back to Draft. Drupal has fairly extensive documentation on working with Workbench and how to set up Moderation. 

Workbench Moderation works very well for high-level editorial controls, but if you need more granular control of your content, you should check out the Workbench Access module. For this example, we are going to enforce content moderation where only certain users can edit or moderate changes to Membership pages while other users can edit or moderate changes to Career pages. I like working with examples and screenshots (videos and screenshares make my eyes glaze over) so here is the basic setup.

We have three Content Types that we want to moderate with Workbench:

  1. Webinars: custom content type with date, time, and location.
  2. Internships: custom content type with dates, location, and description.
  3. Pages: Drupal's page content type out-of-the-box. This website has hundreds of pages, divided into many sections. For simplicity's sake, we'll just sat there are three sections: Membership, Careers, and Professional Interests.

We have three levels of access on this site:

  1. Administrators: can pretty much do anything and everything, and can publish any new content or edits to existing content without asking anyone’s permission.
  2. Content Editors: are in charge of moderating content. They are the ones who have the final say in terms of approving new content for publication, as well as approving new edits to existing content for publication. In Workbench-ese, editors can promote nodes in the 'Needs Review' state to 'Published' or reject nodes in the 'Needs Review' state by setting them back to 'Draft'.
  3. Content Contributors: can edit content, but need their edits to be approved by editors before they are published. In Workbench-ese, contributors can only create new 'Drafts' and then submit them for review by editors by promoting nodes to the 'Needs Review' state. 

These three levels of access work well for specialized content types (for example, Webinars and Internships) where we can set permissions and editorial controls globally on a content-type basis. All contributors can create new Webinars and edit all Webinars, and all editors can approve Webinars for publication. This system breaks down for the page nodes. We need a way to differentiate the editorial controls of the pages in the Membership section from the pages in the Careers section and the Professional Interests section. This isn’t something Workbench Moderation does out of the box, so we will need to add Workbench Access for this granular control of the different sections.

I'm going to skip the Workbench Moderation setup, as this was pretty straightforward and is covered already pretty well in the Drupal documentation. 

The setup assumes the following:

  • You have downloaded and enabled Workbench, Workbench Moderation, and Workbench Access.
  • You have already configured workbench (admin/config/workbench/moderation) in terms of the states (draft, needs review, published) you need.
  • You have set up permissions correctly for Workbench Moderation so the correct roles can edit and approve different content types for publication.
  • You have made sure that any content type you want to moderate with Workbench has been set up correctly (admin/structure/types/manage/[content-type). Make sure to select the Enforce Workbench Access control option.

workbench access

OK, now on to getting Workbench Access configured. 

Set permissions

Contributors need to be able to be assigned to sections and view access information. Editors need to be able to administer all settings for Workbench Access while Contributors need to be able to access Workbench Access sections. 

workbench access permissions

Also, confirm contributors and editors have necessary page node permissions - we want Editors and Contributors to be able to edit any page node. Workbench Access will then add the most granular control of which pages (Membership vs Careers) they can edit. 

workbench access node permissions

Editorial Section Taxonomy

Set up the Taxonomy you will be using for enforcing editorial controls. Workbench Access can use either Menus or Taxonomies for editorial sections, but to me a taxonomy seems more straightforward. This taxonomy isn’t used for tagging content, so doesn’t need to be assigned to any content type. You will be associating the taxonomy with the desired content types in Workbench Access. For this example, I have created an 'Editorial Sections' taxonomy with 2 terms, Membership and Careers.

Configure Workbench Access settings.

This is the first thing we'll do at  admin/config/workbench/access/settings. In this case, we’ll be using our newly created Editorial Sections Taxonomy on Page nodes.

workbench access settings

Add roles and users to the Editorial Sections

When adding roles or users to different Editorial sections, it’s important to realize that we are just assigning users to these sections - what the users can do in these sections (edit, approve edits for publication etc) is still controlled by Workbench Moderation and permissions. We’re adding a layer on top of the content moderation provided by Workbench Moderation. Add the administrator roles to all sections at /admin/config/workbench/access/roles - adding it to the whole taxonomy will then add it to all terms within this taxonomy. Click on the '0 roles' and then add all administrators and save. Back on the Roles tab you can now see one role has been assigned to all Editorial Sections.

Now we want to individually assign users to be able to edit or moderate pages in different editorial sections of the website. For demonstration purposes, I’ve created 4 users - Member Editor, Member Contributor, Career Editor, and Career Contributor. Here is how we're going to use Workbench Access:

  • Member Editor and Career Editors are both Content Editors, so can promote nodes in 'Needs Review' to 'Published.  
  • Member Contributor and Career Contributor are both Content Contributors, so can create new nodes and submit the for review. 
  • Member Editor and Member Contributor will only have rights to edit/moderate pages in the Members section
  • Career Editor and Career Contributor will only have rights to edit/moderate pages in the Careers section.

Click on the Editors tab, and then the 0 roles link next to the Membership section. Add the users in the auto-complete field and then hit save. Don't get confused by Workbench Access' terminology - when it says 'Editors' that is just the individual users who will be able to edit or moderate a section. It has no relationship with the Editors and role we have set up previously. 

workbench access add editors

Do the same for Editors of the Careers section, and you'll see now that 2 editors are assigned to each of these sections. 

workbench access editors

Add pages to sections

Now that we’ve got our Editorial sections set up and users and roles assigned to these sections, we need to add pages to these sections. Remember, we only set up the Taxonomy that will be used to divide the pages into different Editorial sections. We haven’t assigned pages to these sections yet. We can see this if we go to any of the pages on the site - they still say Editorial Section: Unassigned

There are two ways to assign pages to Editorial sections. You can edit the individual node, and select your Editorial Section in the new field that Workbench Access has added, or you can do a batch update through the Content Overview page at admin/content. After you've done that, now if you view one of the node you have updated, it should have the Workbench Access section assigned:

Confirm it's working

To make sure the controls are working the way you want, try logging in as the different editor and contributor users. You will see that the Career Editor/Contributors can only edit and moderate any nodes you have assigned to the Career section, and only the Membership Editor/Contributor users can only edit and moderate node assigned to the Membership section. 

Important note: until pages have been assigned to an Editorial Section, Workbench Access isn’t being enforced. So, if we view a page node as the Member Contributor and it says ‘Editorial Section: Unassigned’ we will be able to edit that page

Another important note: If you want to take this another step and integrate Workbench Access with rules, you will need to apply this patch (see issue This patch will then give you the ability to set conditions using Workbench Access. 

Five Drupal Modules That Will Save You from Mobilegeddon

Mobilegeddon has arrived. I hope your site was one of the survivors. In case you missed it, in April, Google changed their rankings algorithms to preference mobile sites. Their blog announced that any sites that did not pass a mobile-friendly test by April 21st would see their search rankings negatively affected.

I haven't seen major shakeups in the mobile search environment yet, but these things take time to work their way though every website on the planet. There's still time to make your site more mobile-friendly and prepare for the next round of changes that are inevitably on their way.

Here are my top 5 mobile-friendly modules pre-built in Drupal to help sites survive in this new mobile-first world.

  1. Breakpoints – Google didn't say you had to go with responsive design. Their mobile design guide specifies responsive, dynamic serving, or separate URL's for now, but that could easily change with their next release. This module helps in the implementation of responsive design by setting standards for breakpoints in height, width, and resolution that match up with different device types. It's now in the Drupal 8 core along with its companion Picture module.
  2. Picture Module – Not everyone is on 3G or 4G. You have to consider how images are going to be handled at low-bandwidth. Time to load is another area that Google is using to test mobile readiness. If it takes more than a second or two, not only will Google ding your rankings, but mobile customers are going to bounce. I rely on this module as one of the best ways to handle images quickly and simply. It turns any image you use into an adaptive one and you just have to set the breakpoints. 
  3. FitVids – Another mobile-friendliness category that Google's bots are looking for is the effective use of video instead of text-heavy copy. You'll need a module like this to automatically resize embedded videos to any mobile screen or browser. This module is especially good at handling videos from the big sites that already come with specific sizing, like YouTube and Vimeo. It uses JavaScript to scale the video into the container that your specify.
  4. Fences – Theming your site can be pretty code-intensive, but it doesn't have to be. I've found that this module saves me from having to re-configure an HTML element every time I want to display a field. It does away with all the heavy field markup you would expect. Whenever I want to edit a field, it gives me the option to choose the kind of markup I want to wrap field contents.
  5. Bootstrap or Zurb Foundation - We know this isn't a module, but this is a great first step into transitioning to a mobile-first site. If you aren't a fan of either of these, there are plenty of other themes to choose from like Zen or Omega. A mobile-based theme would cover most of your woes caused by Mobilegeddon.

It's actually a good thing that Google is emphasizing  how important mobile has become. Believe it or not, many businesses still  don't have mobile-ready websites because they feel like they don't get  enough mobile traffic or that their business model is too complex for little  screens. Now everybody will have to have a mobile strategy before they  are left behind by the next wave of changes. If you want to learn more  on any of these topics, just drop us a line or plan on meeting up with  us during DrupalCon, May 11-15 at the Los Angeles Conventions Center.  We will be hosting three Birds of a Feather sessions on solving real-world  problems with Drupal.

Drupal 8 Makes A Strong Case For Your Enterprise

Deciding on an open source, flexible, enterprise-ready solution for your marketing efforts, is a daunting task. Should you build custom solutions leveraging a framework, or adopt a pre-built CMS? What are the costs involved? Can you live with limitations or being boxed in? How well can it be supported?

What if there was a world-class CMS that fully embraced an enterprise framework so that you could have the best of both worlds? What if that solution not only covered your website marketing needs, but could also be a full blown API for your mobile, POS systems, CRM and other marketing channels? What if that solution was open source so that you were no longer handcuffed to someone else's development roadmap and were not forced to pay $100k+ licensing fees just to use the software?

As a marketer, you could free up licensing fees for more important initiatives. You could leverage pre-built CMS solutions while maintaining the flexibility to build completely custom solutions. You could leverage data across different channels and/or combine channel data to build a truly remarkable hub for all of your marketing efforts.


Symfony 2 adds class(es) to your enterprise

Symfony, Drupal’s newly adopted object-oriented framework, provides strict compliance and more structure to the underlying application, making it more easily accessible, maintainable and scalable. Developers that understand object-oriented programming (OOP) patterns, or that have worked with Symfony in the past, can begin contributing more easily without having to learn a non-standard, "hacky" CMS-centric way of developing a website.

While Drupal 7 is widely known as a resource "hog", Symfony was designed to load only the resources it needs upon each page load. This should decrease the amount of resources needed to run a Drupal 8 site. Other benefits include:

  • Improved security
  • Better upgrade paths
  • Built in version control
  • Improved language support
  • Mobile-first design


"This "success" is due to many factors but probably because we were one of the first frameworks to recognize and embrace the changes of the web and PHP: PHP 5.3 vs PHP 5.2, Git vs SVN, components vs a monolithic framework, Twig vs PHP, dependency injection, ... Symfony2 is a revolution, not just a big evolution of the platform."



Drupal 8 will also adopt Twig as its template engine, which provides several advantages over its predecessor, PHPtemplate. Front-end developers now have a easier theme system, more freedom to innovate and reduced overhead; all of which translate to a better user experience for your consumers, more flexibility for your designers, and more profits for your department. Simply put, you can do a lot more with a lot less.

REST Easy With This API

You'll gain the most benefit from Drupal 8’s uncoupling of its data and presentation layers – leveraging a fully, built-in RESTful interface. This powerful change allows developers to more easily implement Angular.js, Ember.js or other client-side MVCs to share/display content and data across different marketing channels.

Marketing campaigns are no longer limited to your website or social media pages. Marketing data can be consumed by and shared easily with CRM, Marketing Automation Systems, POS systems, native mobile applications, wearables, desktop applications and more.

Imagine being able to change content on your website, mobile application, POS system or any other connected application, through one, and only one, system - Drupal.

The world is becoming a more connected place at every turn. Drupal proves to be leading the way into a bright future. How can more structure (and more flexibility) help your organization?

DrupalCamp PHX Session: Drupal as an Inbound Marketing Platform

A few weeks ago, Brent Bice attended DrupalCamp PHX to host a session on Drupal as an Inbound Marketing Platform. The video of the PowerPoint presentation of the session, along with audio were made available for everyone to visit and listen to this session.

The session was targeted towards marketers and business owners, demonstrating many of the available modules and web services integration that make Drupal an ideal platform for inbound marketing and smart website design. Drupal allows marketers and business owners to attract visitors to their website through SEO and social media tools, convert them to leads through call-to-actions and landing pages, and close them through CRM and lead nurturing solutions.

Best of all, Drupal is open source and much more flexible than HubSpot, Marketo, and other marketing systems. In this session, the audience learned why they should use Drupal as their CMS platform, but also how they could use Drupal as their marketing platform. 

The session can be viewed following this link:

Part 2: More Videos That Will Help You Get Started with Drupal

If you are new to Drupal, take a look at our previous blog New To Drupal? These Videos Will Help You Get StartedIf you just got started in Drupal, how about we provide you these short but thorough tutorial videos on Working with Content.

Introduction to nodes tutorial

In this tutorial, we take a 20,000 foot look at what nodes are and how they get imbedded into a site. To get you creating content as quickly as possible, we're only going to look at the basics, and leave the more complex elements to later videos. This foundation is vital for orienting yourself for doing common adding and editing tasks.

Adding and editing content in Drupal 7

Drupal makes it easy to add and edit content on your website. In this tutorial, we'll cover the fundamentals of how to add basic pages and articles, and how to go back later and edit them. We'll conclude by reviewing Drupal's built-in tools for finding content, which comes in pretty handy, particularly in larger websites.


Drupal 7 node displays tutorial

Nodes on a Drupal site can be displayed in several different modes. Each useful in a different context. For each mode, we can configure what content gets displayed and how it is formatted. In this tutorial we look at the different node modes and how to manage how they are displayed. Drupal provides several different display modes for nodes.

Drupal Node publishing controls tutorial

Drupal can handle some pretty advanced publishing scenarios. The core installation provides us with a handful of settings that enable us to control many aspects of how nodes are published. In this video we dig deeper into node publishing and the revision options.


We'll explore advanced content work flows in a later blog post, but for now, what do you think about our videos? Helpful? Have something to add? Leave them in the comments below!

New To Drupal? These Videos Will Help You Get Started

These videos are part of our tutorial series which can be found here: Getting Started with Drupal 7

Drupal 7 Overview:

In this course, we will show you how to start building next generation websites using the world’s most popular open-source enterprise-ready web platform Drupal.

Drupal 7 Installation Requirements and Options

In this tutorial, we will review the requirements for installing Drupal and provide some hints to assure your installation runs well. Web servers runs a set of services that put together to produce web pages.

Essential Webmaster Tools

In this video, we're going to review some of the applications that you should keep in your webmaster toolkit. Each of the applications we're going to review in this video are open source and can be downloaded and installed for free on your computer.

Now that you have viewed the first three essential videos getting started with Drupal 7, what if I were to tell you that we have a faster and easier way to create new Drupal sites in minutes? No coding knowledge necessary. Our Drupal Distribution Open Enterprise gives you everything you need right out of the box to get your site up and running. Learn more about Open Enterprise here.

Have questions about Open Enterprise? Or anything Drupal? Let us know in the comments below!

Drupal 8 Videos You Need To Watch

I searched far and wide to bring you great Drupal 8 presentations. These videos provide great examples of where Drupal is headed, why change is important and what you can expect from Drupal 8 and beyond.

Dries' Austin Keynote

Dries provides insight into the future of the web and why we must adapt our systems to shifts in consumer purchasing patterns.



Speakers MorenDK, FabianX and JoelPittet provide a fantastic overview (DrupalCon Amsterdam) of Drupal's existing theme challenges and how they are being addressed with Drupal 8.



Overview of Drupal 8

Jeff Geerling, Sr. App Developer at Mercy, provides a good overview of Drupal 8's enhancements.




Angie Byron provides a great presentation of Spark and the authoring experience for Drupal 7,8 and beyond at DrupalCon Austin.



Building with Ember.js and Headless Drupal