Dec 04 2018
Dec 04

We are thrilled to have had three of our sessions chosen for DrupalCon Seattle in April 2019. You’ll find us at the booth, in the hallway, and out and about in Seattle, but make sure to visit us in our three Builder Track sessions:

Keep Living the Dream! How to work remotely AND foster a happy, balanced life

Virtual. Remote. Distributed. Pick your label. This style of organization is becoming wildly more in demand and popular among many Drupal shops. While many folks have gone remote, some people find the experience quite isolating and disconnected.

In this session we will talk about how to be the best remote employee, as well as provide ideas if you are a leader of a remote team. We will talk about key tactics to keep you (and all other staff) inspired, creative, productive and most importantly, happy!

Presenter: Anne Stefanyk

Date: Thursday, April 11, 2019 Time: 3:15pm-3:45pm 

Deep Cleaning: Creating franchise model efficiencies with Drupal 8

COIT offers cleaning and 24/7 emergency restoration services. Their 100+ locations serve more than 12 million homes & businesses across the United States and Canada.

It had been years since the COIT site had been updated, and it posed a host of technical challenges. Franchise content optimizations resulted in redundant updates for the SEO team. The mobile experience wasn’t optimized for conversions. There was a mountain of custom technical debt. And despite the current content administrative challenges, the localized experience lacked the level of context-awareness that consumers have come to expect. It was time for COIT to clean up its own mess.

In this case study we will cover the more technical parts of this Drupal 8 implementation: how we kept a multinational but distinctly separate brand presence with geolocative features, maintained custom promotions tailored to each franchise location, and kept the existing hard-won SEO and SEM business drivers intact.

Presenters: Anne Stefanyk and Katherine White 

Date: Thursday, April 11, 2019 Time: 9:45am-10:15am
Nov 28 2018
Nov 28
Go to the profile of Moshe Weitzman

Jul 23, 2018

I recently worked with the Mass.gov team to transition its development environment from Vagrant to Docker. We went with “vanilla Docker,” as opposed to one of the fine tools like DDev, Drupal VM, Docker4Drupal, etc. We are thankful to those teams for educating and showing us how to do Docker right. A big benefit of vanilla Docker is that skills learned there are generally applicable to any stack, not just LAMP+Drupal. We are super happy with how this environment turned out. We are especially proud of our MySQL Content Sync image — read on for details!

Pretty docks at Boston Harbor. Photo credit.

Docker compose

The heart of our environment is the docker-compose.yml. Here it is, then read on for a discussion about it.

Developers use .env files to customize aspects of their containers (e.g. VOLUME_FLAGS, PRIVATE_KEY, etc.). This built-in feature of Docker is very convenient. See our .env.example file:

MySQL content sync image

The most innovative part of our stack is the mysql container. The Mass.gov Drupal database is gigantic. We have tens of thousands of nodes and 500,000 revisions, each with an unholy number of paragraphs, reference fields, etc. Developers used to drush sql:sync the database from Prod as needed. The transfer and import took many minutes, and had some security risk in the event that sanitization failed on the developer’s machine. The question soon became, “how can we distribute a mysql database that’s already imported and sanitized?” It turns out that Docker is a great way to do just this.

Today, our mysql container builds on CircleCI every night. The build fetches, imports, and sanitizes our Prod database. Next, the build does:

That is, we commit and push the refreshed image to a private repository on Docker Cloud. Our mysql image is 9GB uncompressed but thanks to Docker, it compresses to 1GB. This image is really convenient to use. Developers fetch a newer image with docker-compose pull mysql. Developers can work on a PR and then when switching to a new PR, do a simple ahoy down && ahoy up. This quickly restores the local Drupal database to a pristine state.

In order for this to work, you have to store MySQL data *inside* the container, instead of using a Docker Volume. Here is the Dockerfile for the mysql image.

Drupal image

Our Drupal container is open source — you can see exactly how it’s built. We start from the official PHP image, then add PHP extensions, Apache config, etc.

An interesting innovation in this container is the use of Docker Secrets in order to safely share an SSH key from host to the container. See this answer and mass_id_rsa in the docker-compose.yml above. Also note the two files below which are mounted into the container:

Configure SSH to use the secrets file as private key Automatically run ssh-add when logging into the container

Traefik

Traefik is a “cloud edge router” that integrates really well with docker-compose. Just add one or two labels to a service and its web site is served through Traefik. We use Traefik to provide nice local URLs for each of our services (www.mass.local, portainer.mass.local, mailhog.mass.local, …). Without Traefik, all these services would usually live at the same URL with differing ports.

In the future, we hope to upgrade our local sites to SSL. Traefik makes this easy as it can terminate SSL. No web server fiddling required.

Ahoy aliases

Our repository features a .ahoy.yml file that defines helpful aliases (see below). In order to use these aliases, developers download Ahoy to their host machine. This helps us match one of the main attractions of tools like DDev/Lando — their brief and useful CLI commands. Ahoy is a convenience feature and developers who prefer to use docker-compose (or their own bash aliases) are free to do so.

Bells and whistles

Our development environment comes with 3 fine extras:

  • Blackfire is ready to go — just run ahoy blackfire [URL|DrushCommand] and you’ll get back a URL for the profiling report
  • Xdebug is easily enabled by setting the XDEBUG_ENABLE environment variable in a developer’s .env file. Once that’s in place, the PHP in the container will automatically connect to the host’s PHPStorm or other Xdebug client
  • A chrome-headless container is used by our suite which incorporates Drupal Test Traits — a new open source project we published. We will blog about DTT soon

Wish list

Of course, we are never satisfied. Here are a couple issues to tackle:

Nov 28 2018
Nov 28

Variety of content and the need for empathy drive our effort to simplify language across Mass.gov

Go to the profile of EOTSS Digital Services

Oct 4, 2018

Nearly 7 million people live in Massachusetts, and millions more visit the state each year. These people come from different backgrounds and interact with the Commonwealth for various reasons.

Graphic showing more than 3 million visitors go to Mass.gov each month.

We need to write for everyone while empathizing with each individual. That’s why we write at a 6th grade reading level. Let’s dig into the reasons why.

Education isn’t the main factor

The Commonwealth has a high literacy rate and a world-renowned education network. From elementary school to college and beyond, you can get a great education here.

We’re proud of our education environment, but it doesn’t affect our readability standards. Navigating the Women, Infants, and Children (WIC) Nutrition Program might be challenging for everyone.

Complexity demands simplicity

People searching for nutrition services are doing so out of necessity. They’re probably frustrated, worried, and scared. That affects how people read and retain information.

Learn about our content strategy. Read the 2017 content team review.

This is the case for many other scenarios. Government services can be complicated to navigate. Our job is to simplify language. We get rid of the white noise and focus on essential details.

Time is not on our side

You don’t browse Mass.gov in your free time. It’s a resource you use when you have to. Think of it as a speedboat, not a cruise ship. They’ll both get you across the water, just at different speeds.

Graphic showing desktop visitors to Mass.gov look at more pages and have longer sessions than mobile and tablet visitors.

Mass.gov visitors on mobile devices spend less time on the site and read fewer pages. The 44% share of mobile and tablet traffic will only increase over time. These visitors need information boiled down to essential details. Simplifying language is key here.

Exception to the rule

A 6th-grade reading level doesn’t work all the time. We noticed this when we conducted power-user testing. Lawyers, accountants, and other groups who frequently use Mass.gov were involved in the tests.

These groups want jargon and industry language. It taught us that readability is relative.

Where we are today

We use the Flesch-Kincaid model to determine reading level in our dashboards. It accounts for factors like sentence length and the number of syllables in words.

This is a good foundation to ensure we consistently hit the mark. However, time is the most important tool we have. The more content we write, the better we’ll get.

Writing is a skill refined over time, and adjusting writing styles isn’t simple. Even so, we’re making progress. In fact, this post is written at a 6th grade reading level.

Nov 28 2018
Nov 28

Authors are eager to learn, and a content-focused community is forming. But there’s still work to do.

Go to the profile of Julia Gutierrez

Oct 10, 2018

Video showing highlights of speakers, presenters, and attendees interacting at ConCon 2018.

When you spend most of your time focused on how to serve constituents on digital channels, it can be good to simply get some face time with peers. It’s an interesting paradox of the work we do alongside our partners at organizations across the state. Getting in a room and discussing content strategy is always productive.

That was one of the main reasons behind organizing the first ever Massachusetts Content Conference (ConCon). More than 100 attendees from 35 organizations came together for a day of learning and networking at District Hall in Boston. There were 15 sessions on everything from how to use Mayflower — the Commonwealth’s design system — to what it takes to create an awesome service.

Graphic showing more than 100 attendees from 50 organizations attended 15 sessions from 14 presenters at ConCon 2018.

ConCon is and will always be about our authors, and we’re encouraged by the feedback we’ve received from them so far. Of the attendees who responded to a survey, 93% said they learned about new tools or techniques to help them create better content. More so, 96% said they would return to the next ConCon. The average grade attendees gave to the first ever ConCon on a scale of 1 to 10 — with 1 being the worst and 10 the best — was 8.3.

Our authors were engaged and ready to share their experiences, which made for an educational environment, for their peers as well as our own team at Digital Services. In fact, it was an eye opening experience, and we took a lot away from the event. Here are some of our team’s reflections on what they learned about our authors and our content needs moving forward.

We’re starting to embrace data and feedback

“The way we show feedback and scores per page is great but it doesn’t help authors prioritize their efforts to get the biggest gain for their constituents. We’re working hard to increase visibility of this data in Drupal.”

— Joe Galluccio

Katie Rahhal, Content Strategist
“I learned we’re moving in the right direction with our analysis and Mass.gov feedback tools. In the breakout sessions, I heard over and over that our content authors really like the ones we have and they want more. More ways to review their feedback, more tools to improve their content quality, and they’re open to learning new ways to improve their content.”

Christine Bath, Designer
“It was so interesting and helpful to see how our authors use and respond to user feedback on Mass.gov. It gives us a lot of ideas for how we can make it easier to get user feedback to our authors in more actionable ways. We want to make it easy to share constituent feedback within agencies to power changes on Mass.gov.”

Embedded tweet from @MassGovDigital highlighting a lesson on good design practices from ConCon 2018.

Joe Galluccio, Product Manager
“I learned how important it is for our authors to get performance data integrated into the Drupal authoring experience. The way we show feedback and scores per page is great but it doesn’t help authors prioritize their efforts to get the biggest gain for their constituents. We’re working hard to increase visibility of this data in Drupal.”

Our keynote speaker gave a great use case for improving user journeys

Bryan Hirsch, Deputy Chief Digital Officer
“Having Dana Chisnell, co-founder of the Center for Civic Design, present her work on mapping and improving the journey of American voters was the perfect lesson at the perfect time. The page-level analytics dashboards are a good foundation we want to build on. In the next year, we’re going to research, test, and build Mass.gov journey analytics dashboards. We’re also spending this year working with partner organizations on mapping end-to-end user journeys for different services. Dana’s experience on how to map a journey, identify challenges, and then improve the process was relevant to everyone in the room. It was eye-opening, enlightening, and exciting. There are a lot of opportunities to improve the lives of our constituents.”

Want to know how we created our page-level data dashboards? Read Custom dashboards: Surfacing data where Mass.gov authors need it

Embedded tweet from @epubpupil highlighting her positive thoughts on Dana Chisnell’s keynote presentation on mapping and improving the journey of American voters.

The Mayflower Design System is a work in progress

“It’s great to see there’s a Mayflower community forming among stakeholders in different roles across state government. ”

— Minghua Sun

Sienna Svob, Developer and Data Analyst
“We need to work harder to build a Mayflower community that will support the diversity of print, web, and applications across the Commonwealth. Agencies are willing and excited to use Mayflower and we need to harness this and involve them more to make it a better product.”

Minghua Sun, Mayflower Product Owner
“I’m super excited to see that so many of the content authors came to the Mayflower breakout session. They were not only interested in using the Mayflower Design System to create a single face of government but also raised constructive questions and were willing to collaborate on making it better! After the conference we followed up with more information and invited them to the Mayflower public Slack channel. It’s great to see there’s a Mayflower community forming among stakeholders in different roles across state government. ”

All digital channels support content strategy

Sam Mathius, Digital Communications Strategist
“It was great to see how many of our authors rely on digital newsletters to connect with constituents, which came up during a breakout session on the topic. Most of them feel like they need some help integrating them into their overall content strategy, and they were particularly excited about using tools and software to help them collect better data. In fact, attendees from some organizations mentioned how they’ve used newsletter data to uncover seasonal trends that help them inform the rest of their content strategy. I think that use case got the analytics gears turning for a lot of folks, which is exciting.”

Authors are eager and excited to learn and share

“I’d like to see us create more opportunities for authors to get together in informal sessions. They’re such a diverse group, but they share a desire to get it right.”

— Fiona Molloy

Shannon Desmond, Content Strategist
“I learned that the Mass.gov authors are energetic about the new content types that have been implemented over the past 8 months and are even more eager to learn about the new enhancements to the content management system (CMS) that continue to roll out. Furthermore, as a lifelong Massachusetts resident and a dedicated member of the Mass.gov team, it was enlightening to see how passionate the authors are about translating government language and regulations for constituents in a way that can be easily and quickly understood by the constituents of the State.”

Fiona Molloy, Content Strategist
“Talking to people who came to ConCon and sitting in on various sessions, it really struck me how eager our content authors are to learn — whether from us here at Digital Services or from each other. I’d like to see us create more opportunities for authors to get together in informal sessions. They’re such a diverse group, but they share a desire to get it right and that’s really encouraging as we work together to build a better Mass.gov.”

Embedded tweet from @MassGovDigital highlighting a session from ConCon 2018 in which content authors offered tips for using authoring tools on Mass.gov.

Improving content and author support is a continual process

Adam Cogbill, Content Strategist
“I was reminded that one of the biggest challenges that government content authors face is communicating lots of complex information. We need to make sure we understand our audience’s relationships to our content, both through data about their online behavior and through user testing.”

Greg Derosiers, Content Strategist
“I learned we need to do a better job of offering help and support. There were a number of authors in attendance that didn’t know about readily-available resources that we had assumed people just weren’t interested in. We need to re-evaluate how we’re marketing these services and make sure everyone knows what’s available.”

Embedded tweet from @MassGovDigital highlighting the start of ConCon 2018.

Thinking about hosting your own content conference? Reach out to us! We’d love to share lessons and collaborate with others in the civic tech community.

Nov 27 2018
Nov 27

If you’re evaluating CMS platforms for an upcoming project, Drupal should be one platform that you consider. It was built for generating content and also has robust ecommerce abilities through the Drupal Commerce module. If you only need to publish content, it’s great for that. If you only need ecommerce, it’s great for that, too. The fact that it does both very well is a winning combination that will always be available to you, now or down the road. This post takes a look under the hood of Drupal to show you why you might want to take a first, or second, look at the Drupal CMS.

Drupal for Content

As mentioned in the introduction, Drupal was built for content creation and it is very good at that. But, if you’re unfamiliar with Drupal, you probably wouldn’t understand WHY it works so well for this. Here are some of the things that really separate Drupal from other platforms.

Content Types

At the core of Drupal content creation is something called a Content Type. A content type is a collection of fields that are used to generate a certain type of content, such as a general page, landing page, blog post, press release, etc. It’s one of the first pieces of a new Drupal site to be configured.

Demo Drupal Commerce today! View our demo site.Configuring content types is mostly done through Drupal’s admin user interface (UI). Through the interface, you add fields. If you think of any website form that you’ve seen in the past, the form is made up of fields for you to enter in your information. This is the same for Drupal, but you’re actually creating the fields that are used to generate content. For example, a blog post typically contains a title (text field), body (textarea field), header image (image field), publish date (date field), author and category (reference fields). For the blog content type, all of these fields would be added as well as any other that you need. The field options available a many. If you don’t see a field that you need, chances are someone has already created it and you just need to install a module that adds it in.

After all of the fields have been added, you then configure how the fields are displayed to your content creators and to the end user viewing the content. I won’t get into details here, but many fields have options for how that content gets rendered on the page. Using an image field as an example, you can choose to render the image as the original image, or as a processed image (like a thumbnail), or as the url path to the image on the server. Each option has its uses once you start theming the site.

Regions and Blocks

Keeping with the blog post example, when viewing a blog post you typically see other elements on the pages such as a subscribe form, list of recent posts, and call to actions. It doesn’t make sense to manually add these things to every single blog post, so instead we place this content in something called a Block and assign the block to a Region.

Regions are added to your page templates and are there for you to place blocks into. When adding a block into a region, each block can be configured independently of one another so that you can assign blocks to specific pages, content types, access levels (i.e. anonymous vs. logged in users), etc. A block can be many different things, but one type of block is similar to a content type in that you can add fields that are used to make up the block.

Views

A View is a powerful tool within Drupal for creating dynamic content based on other content. Views allow you to take existing content, manipulate it, and display it in another way. They can be used to create both pages and blocks.

Again, using the blog as an example, if you look at a page that is listing all of your blog posts at one time, this is most likely a view. The view is taking content generated using the blog content type, manipulating each post so that you’re only seeing specific information such as a date, title and introduction, and then adding a ‘Read More’ link after the introduction. Not only is the view manipulating each post like this, it’s also displaying the 10 most recent posts and showing you a ‘Load More’ button afterwards to load the next 10 posts.

This is a pretty simple example, but as you can see it’s quite powerful. You can use as much or as little of the content information as you need and it gives you fine-grained control to use and re-use your content in new ways. 

Metatags

Any serious content platform needs to include a robust set of metatag options. The built in metatag module for Drupal is excellent in this regard. You can set default options for every content type and override those defaults for individual pieces of content if needed. You can choose if your content should be crawled by search bots or not, how your post would appear on social media if shared, and more.

Workflows

This might not apply to you if you’re the only one creating content for your website, but, if you have a team of content creators, workflows let you assign specific permissions to your teammates. For example, you can allow your writers to draft content, your editors to approve the content, and finally a publisher can publish the content. Instead of explaining it all here, here’s a separate article and video that shows you how it works.

Modules

Anything that adds new functionality to the base Drupal platform is called a module. A module can be small (such as adding a new field type) or big (such as adding ecommerce functionality). You can separately Google “best modules for Drupal” and see a whole bunch of popular modules, but one of our favorites that I want to mention for content creation is the “Paragraphs” module. This module lets you create reusable sections of content that can be used within your content types and product pages. So, instead of just a body of text you can add cta straps, rich media, image galleries, forms, etc., all within your content. We use it on our own site to quickly make unique page layouts for our content.

Theming

Drupal’s theming engine enables your designers and front end developers to implement anything they can dream up. You have broad control over the look and feel of your site so that everything is consistent, but you can also create totally unique pieces of content or individual pages that may break away from your normal styleguide.

Say you have a new product lineup that you’re launching. You’re store branding is one thing, but this product has its own unique branding and personality that you want to convey. Well, you can give your designers full control over how the product should appear on your website and your front end developers can make it happen using the granular template override system.

Drupal for Commerce

The Commerce module for Drupal turns your Drupal site into a fully fledged ecommerce platform that is 100% capable of running any size of ecommerce site you throw at it. And remember, this is adding functionality to Drupal, so you still maintain the ability to do all of the content side of things mentioned above. 

In fact, not only can you still generate other content, but all of the things that make content creation great on Drupal also apply to the ecommerce side of your site. Your product pages are totally fieldable and themable, just like the content. You can assign blocks to your project pages. You can use views to set up your catalog and create blogs that filter out featured products or related products. Everything is fully customizable. 

There are also many modules available specifically for Commerce that give you even more functionality and integrations, and this is actually where ecommerce on Drupal becomes a “big deal”. Drupal Commerce is API first, which means that it was made to be able to connect to other services. So while you might run your ecommerce store on Drupal Commerce, you will most likely also use other software for your business accounting, marketing and customer relations, to name a few. Drupal Commerce can integrate with these services and share information in order to automate tasks.

We have a whole article that drills down on this topic and explains why ecommerce platforms like Drupal Commerce can be a great fit for your business. I would recommend reading it here.

Content and Commerce

We’ve really only scratched the surface on what Drupal can do from both a content and commerce perspective. I hope you’re beginning to see the whole picture. 

The truth is that most ecommerce platforms don’t do both content and commerce well. You can definitely find many great content creation platforms out there, but can they also do ecommerce? Likewise, there are a ton of ecommerce platforms that will sell your products, but how well can you create other content and do you have the flexibility to customize one or all product pages in the way that works best for your products. And, can you integrate that platform with other services?

These are all important questions to ask even if you don’t think you need a robust content platform or an ecommerce component now. If you think you might need it in the future, planning ahead could save you a headache later. While there are a lot of options out there and I encourage you to explore them, Drupal should be high on your list of possible options.

Try A Demo

It’s one thing to say Drupal is great at all of these things, but why not give it a try. We’ve actually created a complete Drupal demo that showcases both content and commerce together. Click the link below to check it out and see what you think. If you’re interested in exploring how Drupal can fit with your business, feel free to Contact Us. We’d be happy to have that discussion with you.

Demo Drupal Commerce today! View our demo site.

Nov 23 2018
Nov 23

It’s been almost one month since I wrote the blog post, “DrupalCamp Organizers Unite: Is it Time for Camp Organizers to Become an Official Working Group” and a ton of things have transpired that will catapult us into 2019 with some great momentum. With the support of the many Drupal evangelists, over 50 Drupal event organizers from around the world signed up to attend our first official / unofficial video call.

Then on Friday, November 8, a few hours leading up to the video call, The Drupal Governance Taskforce 2018 Proposal was released. This proposal was put together by the Governance Taskforce in an effort establish a community directive that helps create the next generation of Drupalers. One of the recommendations in this proposal was to provide in-person events, more support, and to establish a Drupal community events working group. The timing of the proposal was perfect for our call. It was really great to see that us organizers were not the only ones who acknowledged that our community events are crucial to Drupal adoption.

Are you a Drupal Event Organizer? Well, join us at our next meeting on Tuesday, January 8, 2019, at 12 pm (EST). Register Here

When the time came to start the call I was a little nervous that not very many people would attend and then all of a sudden the chimes started going off and faces appeared on the screen. After 5 minutes we had 25 people on the call. It was inspirational to be a part of something big. It felt like we were the United Nations :).

Flags of all the Countries that were represented

Countries Represented
Canada, Mumbai, Netherlands, Switzerland, United Kingdom, United States.

Drupal Events Represented
BADCamp(2), Drupal Association(2), Drupal North, Drupal Camp Asheville, DrupalCamp Atlanta, Drupal Camp Chattanooga, DrupalCamp Colorado, DrupalCorn(2), Drupaldelphia, Drupal Mountain Camp, Drupal Camp Mumbai, DrupalCamp New Jersey, Florida Drupal Camp (2),Frontend United, GovCon, MidCamp(2), NED Camp(4),Victoria BC Meetup.

Major Points from the November 9th Meeting

  1. The next meeting will be held on Tuesday, January 8, 2019, at 12 pm (EST). Register Here
  2. Comment on Governance Taskforce Proposal Issue
    To help Dries Buytaert, prioritize the recommendation of creating a Community Events Working Group, we need as many people as possible to comment on this issue. Please view the issue and indicate why you believe this working group is critical to the success of Drupal. Comment now!
  3. DrupalCamp Website Starter Kit
    Out of all of the discussions, the common pain point is that the website takes up too much of our limited resources. The idea of an event starter kit, instead of a distribution, was really intriguing to us all. We also discussed all of the events donating funding to hire a professional project manager to scope out what a starter kit would look like.
  4. Drupal.org Events Website
    Many of us use the great Drupical to let us know what events are happening. But if you don’t know about that website there is nowhere on Drupal.org that is easily accessible that promotes Drupal events. The idea that was brought to the table was to design a new section of the community page that is a space specifically for promoting and producing Drupal events.
  5. A Centralized Drupal Event Statistics Hub
    Another website related item that was brought up was the idea of centralized data hub that event organizers could submit crucial data of events (attendance, budget, programing etc.) so that Drupal.org could display the data and allow for data manipulation. For example, it would be great to know how many people attended Drupal events in one year. This data would be extremely powerful as it could help organizers to compare events, drive corporate sponsorships and adoption, and get more people involved with Drupal.
  6. DrupalTV — A website with all Drupal Videos
    The topic around Drupal video content came up and one of the biggest issues was that videos are all over the place and are not organized. To solve this problem, the idea of a centralized website (DrupalTV) where videos were tagged by topic, presenter, module, etc.. would allow for content to be easily found. This idea was started before our meeting and you can see a proof of concept here.

I was very happy to be a part of this first meeting and I hope that Drupal leadership also sees the work we do as critical and will make us an official working group. There were a lot of great conversations that took place so I am sure that I have missed something. Feel free to comment and let me know and I will update the post.

Nov 20 2018
Nov 20

A while ago we introduced a Live Component Guide to our corporate website that gives our designers and content creators and quick way to lay out content on new and existing pages. It’s worked out great so far and has generated quite a bit of interest. A couple months old now, that initial blog post explaining why we did it and how it works has had over 400 views and the recorded demonstration on YouTube has been watched for more than 1500 minutes. Not bad considering it’s a very Drupal specific, niche post.

While I was working on our corporate site components, others at Acro Media were working away on adding similar components to our internal Drupal 8 framework. Our corporate website is currently running on Drupal 7, and so, in some of the feedback that we received, people naturally wanted to see an example of the Live Component Guide in Drupal 8. After all, that’s the latest version of the Drupal platform that all new Drupal sites are being built using it.

I’m happy to announce now that those components have made their way into Acro Media’s Drupal Commerce demo site, Urban Hipster! Want to see it? I know you do. Check out the video demonstration below or go straight to the Urban Hipster’s Live Component Guide and take look for yourself.

Demo Drupal Commerce today! View our demo site.

Nov 15 2018
Nov 15

This is Part 2 of a three part series about choices you can make with the news of Drupal 9’s release. Part 1 is an overview. Part 2 is what to do if you choose to stay on Drupal 7. Part 3 is what to do it you choose to upgrade to Drupal 8. 

With the recent news of the release date of Drupal 9, and that Drupal 7 & 8 will be end of life Nov 1, 2021, our Director of Engineering Kat White wrote Part 1 of a blog post series with an overview of how you should next approach your Drupal site . . . is it best to stay on Drupal 7? Or should I upgrade now to Drupal 8?

In that article, Kat outlined the pros and cons of going from D7 to D9, or upgrading now to D8.

In Part 2 of this series, let’s assume you’ve decided to stay on Drupal 7 for now. What next?

The average lifetime of a website is three years. So if you have had your Drupal 7 site for a three years, hurrah! You’ve done well with your return on that investment. And Drupal 7 is robust and supported enough that there’s still a lot of growth and life in your site. So unless there’s a specific module or item that only D8 can offer, you can feel confident that your D7 site will be solid for a few more years.

But this also means you have about two years to maintain that D7 site: in Fall of 2020, you’ll need to start prepping for that Drupal 9 upgrade (or — gasp! — switching to another CMS). This also buys you two years to secure funding, and get all the stakeholders on the same page for the next upgrade.

Need long-term support for your Drupal 7 site? Contact us

So here are some of the incremental bites we recommend you take over the next two years of maintenance:

  • Review your website strategy: assuming you built your site a few years ago around business goals, how is the site working towards those goals? Have your goals shifted? Does your site still achieve your mission? It’s always good to revisit your strategy to ensure any changes you make are on the right path.
  • Always audit your content: Content has a way of getting out of control quickly if there are multiple editors and the lines of governance get blurred. Archive or delete unnecessary content. Also review it for your authority voice and mobile strategy.
  • Review your SEO: In addition to keywords, make sure your content is mobile-focused, that your URL structures are meaningful, and schemas are used to describe the content of a page.
  • Code Quality: How clean are your code standards? Are the styles that drive the look and feel of the site well-structured and easy to extend? Is there good documentation? Completing a code audit would be smart to make sure your code is as quality as possible and fits your goals.  
  • Optimize your user experience: There are many tweaks that can be made to a site to make sure users are finding things. Can you run a usability test on a red button vs a blue one? How about using heatmap software to see where users are clicking and scrolling, and tweaking accordingly? Between surveys, interviews with users, looking at analytics, and testing, you can constantly improve the user experience of your site.  

If you’re a more visual person, I gave a talk at BADCamp just last month about going from D7 to D9 if you prefer video.

And if you need extra help with nurturing and growing your existing D7 site, we can help. Kanopi Studios has a dedicated Support Team that currently maintains over 75 Drupal 7 sites, and will be taking on new Drupal 7 support clients at anytime. Additionally, we will be an official long-term Drupal 7 support provider once the application on Drupal.org is available.

If you want help or want to talk through anything do with your Drupal 7 site, please call Anne directly at 1-888-606-7339 or contact us online.

Nov 12 2018
Nov 12

The Paragraphs module in Drupal 8 allows us to break content creation into components.  This is helpful for applying styles, markup, and structured data, but can put a strain on content creators who are used to WYSIWYG editors that allow them to click buttons to add, edit, and style content.

The Drupal Paragraphs Edit module adds contextual links to paragraphs that give you the ability to  edit, delete and duplicate paragraphs from the front end, giving editors a quick, easy and visual way to manage their content components.

Installing

Install and enable the module as you normally would, it is a zero configuration module.  It works with Drupal core’s Contextual Links and/or Quick Links module. I did have to apply this patch to get the cloning/duplication functionality working though.

Editing

To use, visit a page and hover over your content area.  You will see an icon in the upper right corner of the Paragraphs component area.   

When you click the Edit option, you are taken to an admin screen where you can edit only that component.

Make your changes and click save to be taken back to the page.

In components that are nested, like the Bootstrap Paragraphs columns component, you will see one contextual link above the nested components.  If you click this, you will be taken to the edit screen where you can modify the parent, and the children.  That is the Columns component, and the 3 text components inside.

Duplicating/Cloning

The term that is used most often for making a copy of something in Drupal is to “Clone” it.  This is a little more complicated because it is technically complicated, but once you get the hang of it, it will become second nature.

Hover over a contextual link and click Clone.

On the edit screen, you are presented with a new Clone To section.  In this section you can choose where to send this clone to, whether that be a Page or a Paragraph.  In this example, I want to duplicate this component to the same page.

  • Type: Content
  • Bundle: Page
  • Parent: (The page you are on)
  • Field: (The same field on that page.)

You can also make any edits you want before saving.  For example, you could change the background color. Click save, and your new component will appear at the bottom of the page, with the new background color.

There are a bunch of possibilities with this way to duplicate components.  To clone to another page, change the Parent. To clone to a nested paragraph component, change the Type to Paragraphs and configure the settings you need.

Deleting

Deleting a component is as you’d expect.  Once you click delete, you are taken to a confirmation screen that asks you if you want to delete.

Conclusion

The Paragraphs Edit module is a simple and powerful tool that gets us a bit closer to inline editing and making our content creator’s lives easier and allows them to be more productive.  Give it a try on your next project and spread the word about this great little helper module!

Need help with your Drupal site? Contact us

Nov 09 2018
Nov 09

Last week, the Children’s Hospital of Philadelphia (CHOP) Vaccine Makers Project (VMP) won a PR News Digital Award in the category “Redesign/Relaunch of Site.” The awards gala honors the year’s best and brightest campaigns across a variety of media. 

PR News Award on a table.

Our CEO, Alex, and our Director of Client Engagement, Aaron, along with members of the Vaccine Makers team attended the event at the Yale Club in New York City.

Screenshot of a Tweet posted by the PR News. Source

The Vaccine Makers Project (VMP) is a subset of CHOP’s Vaccine Education Center (VEC). It’s a public education portal for students and teachers that features resources such as lesson plans, downloadable worksheets, and videos. 

The Vaccine Makers team first approached us in need of a site that aligned with the branding of CHOP’s existing site. They also wanted a better strategy for site organization and resource classification. Our team collaborated with theirs to build a new site that’s easy to navigate for all users. You can learn more about the project here.

Screenshot of a Tweet from Vaccine Makers team. Source

We’d like to thank CHOP and the Vaccine Makers team for giving us the opportunity to work on this project. We’d also like to thank PR News for recognizing our work and hosting such a wonderful event. 

Finally, we’d like to congratulate our incredible team for their endless effort and dedication to this project. 
 

Nov 08 2018
Nov 08

Now that the excitement of BADCamp has worn off, I have a moment to reflect on my experience as a first-time attendee of this amazing, free event. Knowing full well how deeply involved Kanopi Studios is in both the organization and thought leadership at BADCamp, I crafted my schedule for an opportunity to hear my colleagues while also attending as many sessions on Accessibility and User Experience (UX) as possible.

Kanopi’s sessions included the following:

The rest of my schedule revolved around a series of sessions and trainings tailored toward contributing to the Drupal community, Accessibility and User Experience.

For the sake of this post, I want to cover a topic that everyone who builds websites can learn from. Without further ado, let’s dive a bit deeper into the accessibility portion of the camp.  

Who is affected by web accessibility?

According to the CDC, 53 million adults in the US live with some kind of disability; which adds up to 26% of adults in the US. Issues range from temporary difficulties (like a broken wrist) to permanent aspects of daily life that affect our vision, hearing, mental processing and mobility. Creating an accessible website allows you to communicate with 1 in 4 adults you might otherwise have excluded.

What is web accessibility?

Accessibility is a detailed set of requirements for content writers, web designers and web developers. By ensuring that a website is accessible, we are taking an inclusive attitude towards our products and businesses. The Web Content Accessibility Guidelines (WCAG) are a globally acknowledged set of standards that help us publish content that fits within the established success criteria. These guidelines are organized into the following four categories.

WCAG Categories:

  • Is your website perceivable? This applies to non-text content, time-based media (audio and video), color contrast, text size, etc.
  • Is your website operable? This ensures that content is easy to navigate using a keyboard, that animations and interactions meet real-user requirements, buttons are large enough to click, etc.
  • Is your website understandable? This means that text content is easy to read for someone at a ninth grade reading level, that interactions follow design patterns in a predictable manner, that form errors are easy to recover from, etc.
  • Is your website robust? This means that content should be easy to interpret for assistive technologies, such as screen readers.

The World Wide Web Consortium (W3C) is an international community whose mission is to lead the Web to its full potential. They have also published a checklist to aid our efforts in meeting WCAG success criteria.

Need help with making your site accessible? Contact us.

How can we be successful in making the web accessible?

Industries have varied requirements when it comes to web accessibility. WCAG has three levels of compliance, ranging from A to AA to AAA. A conformity has the lowest set of requirements and AAA has the strictest set of requirements; so strict, in fact, it may be impossible to achieve across an entire site.

Efforts to meet these standards fall on every individual involved in the process of creating a website. Although there are many tools that aid in our journey, we reach accessibility through a combination of programmatic and manual means.

The most important thing to keep in mind is the fact that achieving success in the world of accessibility is a journey. Any efforts along the way will get you one step closer towards a more inclusive website and a broader audience base.

Please Remember: Once Kanopi helps you launch an accessible site, it’s your job to maintain it. Any content you add moving forward must be properly tagged; images should have proper alt text and videos should have captions. Users come to your site because they love your content, after all! The more you can make your content accessible, the more you will delight your users.

Interested in making your site more accessible? Check out some of the resources I linked to above to join in learning from my peers at BADCamp. If you need more help getting there, let’s chat!

Nov 07 2018
Jay
Nov 07

Determining how content on your site should be cached isn't a simple topic. Last time, I covered cache contexts and tags. Today, I'd like to get into a couple more advanced topics: The use of custom cache tags and of max-age.

Custom Cache Tags

Drupal's built-in selection of cache tags is large, and some contributed modules add additional tags appropriate to what they do, but for really refined control you might want to create your own custom cache tags. This is, surprisingly, quite easy. In fact, you don't have to do anything in particular to create the tag – you just have to start using it and, somewhere in your code, invalidate it:

 \Drupal\Core\Cache\Cache::invalidateTags(['my_module:my_custom_tag']);

 As an example, to continue the scenario from part one about a page showing recent articles, there is one thing about this page that the tags we've already looked at don't quite cover. What if a new article gets created with a publish date that should be shown on your page? Or, maybe an article which isn't currently displayed has its publish date updated, and now it should start showing up? It's impractical to include a node-specific tag for every article that might possibly have to show up on your page, especially since those articles might not exist yet. But we do want the page to update to show new articles when appropriate.

The solution? A custom cache tag. The name of the tag doesn't matter much, but might be something such as my_module:article_date_published. That tag could be added on the page, and it could be invalidated (using the function above) in a node_insert hook for articles and in a node_update anytime that the Date Published field on an article gets changed. This might invalidate the cached version of your page a little more frequently than is strictly necessary (such as when an article's publish date gets changed to something that still isn't recent enough to have it show up on your custom page), but it certainly shouldn't miss any such updates.

This is a simple example of a custom cache tag, but they can be used for many other situations as well. The key is to figure out what conditions your content needs to be invalidated in and then start invalidating an appropriate custom tag when those conditions are met.Ready to get the most out of Drupal?  Schedule a free consultation with an Ashday Drupal Expert. 

Rules for Cache Max-Age

Setting a maximum time for something to be cached is sort of a fallback solution – it's useful in situations where contexts and tags just can't quite accomplish what you need, but should generally be avoided if it can be. As I mentioned in a previous article, a great example of this is content which is shown on your site but which gets retrieved from a remote web service. Your site won't automatically know when the content on the remote site gets updated, but by setting a max-age of 1 hour on your caching of that content, you can be sure your site is never more than an hour out of date. This isn't ideal in cases where you need up-to-the-minute accuracy to the data from the web service, but in most scenarios some amount of potential "delay" in your site updating is perfectly acceptable, and whether that delay can be a full day or as short as a few minutes, caching for that time is better than not caching at all. 

However, there is one big caveat to using max-age: It isn't directly compatible with the Internal Page Cache module that caches entire pages for anonymous users. Cache contexts and tags "bubble up" to the page cache, but max-age doesn't. The Internal Page Cache module just completely ignores the max-age set on any parts of the page. There is an existing issue on Drupal.org about potentially changing this, but until that happens, it's something that you'll want to account for in your cache handling.

For instance, maybe you have a block that you want to have cached for 15 minutes. Setting a max-age on that block will work fine for authenticated users, but the Internal Page Cache will ignore this setting and, essentially, cause the block to be cached permanently on any page it gets shown on to an anonymous user. That probably isn't what you actually want it to do.

You have a few options in this case.

First, you could choose to not cache the pages containing that block at all (using the "kill switch" noted in part one). This means you wouldn't get any benefit from using max-age, and would in fact negate all caching on that page, but it would guarantee that your content wouldn't get out of date. As with any use of the "kill switch," however, this should be a last resort.

Second, you could turn off the Internal Page Cache module. Unfortunately, it doesn't seem to be possible to disable it on a page-by-page basis (if you know a way, please drop us a line and we'll update this post), but if most of your pages need to use a max-age, this may be a decent option. Even with this module disabled, the Internal Dynamic Page Cache will cache the individual pieces of your page and give you some caching benefits for anonymous users, even if it can't do as much as both modules together.

My preferred option for this is actually to not use a max-age at all and to instead create a custom, time-based cache tag. For instance, instead of setting a max-age of 1 hour, you might create a custom cache tag of "time:hourly", and then set up a cron task to invalidate that tag every hour. This isn't quite the same as a max-age (a max-age would expire 1 hour after the content gets cached, while this tag would be invalidated every hour on the hour) but the caching benefits end up being similar, and it works for anonymous users.

Up Next

Now that we've gotten an overview of how to determine what rules you should use to cache content on your site, it's time to get a little bit more technical. Next time, I'll be taking a look at how Drupal stores and retrieves cached data, which can be immensely useful to understanding why the cache works the way it does, and it's also quite helpful to know when fixing any caching-related bugs you might encounter. Watch this blog for all the details!

Offer for a free consultation with an Ashday expert

Nov 02 2018
Nov 02

You Can’t Put a Price Tag on Visibility, Creditability, and Collegiality

Go to the profile of Kaleem Clarkson

Nov 2, 2018

“pink pig” by Fabian Blank on Unsplash

Organizing a DrupalCamp takes a lot of commitment from volunteers, so when someone gets motivated to help organize these events, the financial risks can be quite alarming and sometimes overwhelming. But forget all that mess, you are a Drupal enthusiast and have drummed up the courage to volunteer with the organization of your local DrupalCamp. During your first meeting, you find out that there are no free college or community spaces in the area and the estimated price tag is $25,000. Holy Batman that is a lot of money!

Naturally, you start thinking about how we are going to cover that price tag, so you immediately ask, “how many people usually attend?” Well unless you are one of the big 5, (BADCamp, NYCCamp, Drupal GovCon, MidCamp or FloridaCamp) we average between 100 and 200 people. Then you ask, “how much can we charge?” You are then told that we cannot charge more than $50 because camps are supposed to be affordable for the local community and that has been the culture of most DrupalCamps.

Are you interested in attending the first online DrupalCamp Organizers Meeting, on Friday, November 9th at 4:00pm (EST)? RSVP Here.

If Drupal is the Enterprise solution why are all of our camps priced and sponsored like we are still hobbyist in 2002?

Why Don’t We Treat DrupalCamps Like It’s the Enterprise Solution?

Drupal is the Enterprise solution. Drupal has forgotten about the hobbyist and is only concerned about large-scale projects. Drupal developers and companies make more per hour than Wordpress developers. These are all things I have heard from people within the community. So if any of these statements are valid, why are all the camps priced like it is 2002 and we are all sitting around in a circle singing Kumbaya? In 2016 for DrupalCamp Atlanta, we couldn’t make the numbers work, so we decided to raise the price of the camp from $45 to $65 (early bird) and $85 (regular rate). This was a long drawn out and heated debate that took nearly all of our 2 hours allotted for our google hangout. At the end of the day, one of our board members who is also a Diamond sponsor said,

“when you compare how other technology conferences are priced and what they are offering for sessions, DrupalCamps are severely under-priced for the value they provide to the community.”

Courtesy of Amaziee.io Labs

If a camp roughly costs $25,000 and you can only charge 150 people $50, how in the world are DrupalCamps produced? The simple answer, sponsors, sponsors, and more sponsors. Most camps solely rely on the sponsors to cover the costs. One camp, in particular, BADCamp has roughly 2,000 attendees and the registration is FREE. That’s right, the camp is completely free and did I forget to mention that it’s in San Francisco? Based on the BADCamp model and due to the fact the diamond sponsorship for DrupalCon Nashville was $50,000, getting 10 companies to sponsor your camp at $2,500 will be no sweat. Oh and don’t forget Drupal is the enterprise solution, right?

With all of your newfound confidence in obtaining sponsorships, you start contacting some of the larger Drupal shops in your area and after a week nothing. You reach out again maybe by phone this time and actually speak to someone but they are not committing because they want some more information as to why they should sponsor the camp such as, what other perks can you throw in for the sponsorship, are we guaranteed presentation slots, and do you provide the participant list. Of course, the worst response is the dreaded no, we cannot sponsor your conference because we have already met our sponsorship budget for the year.

At this point, you feel defeated and confused as to why organizations are not chomping at the bit to fork over $2,500 to be the sponsor. Yep, that’s right, twenty-five hundred, not $25,000 to be the highest level, sponsor. Mind you many Drupal shops charge anywhere between $150 — $250 an hour. So that means donating 10–17 hours of your organizations time to support a Drupal event in your local community. Yes, you understand that there are a lot of DrupalCamps contacting the same companies for sponsorship so you ask yourself, what has changed from years past?

Are you interested in attending the first online DrupalCamp Organizers Meeting, on Friday, November 9th at 4:00 pm (EST)? RSVP Here.

What Do Companies Expect to Gain From DrupalCamp Sponsorships?

At DrupalCon Nashville, I got an awesome opportunity to participate in a session around organizing DrupalCamps. It was really interesting to hear about how other organizers produce their camp and what were some of the biggest pain points.

Group Photo — DrupalCon 2018 Nashville by Susanne Coates

During this session, we were talking about a centralized sponsorship program for all DrupalCamps (that I personally disagree with and will save that discussion for another blog post) and an individual asked the question,

“why should my company sponsor DrupalCamp Atlanta? There is nothing there for me that makes it worth it. We don’t pick up clients, you don’t distribute the participant list, so why should we sponsor the camp?”

Needless to say, they caught me completely off guard, so I paused then replied,

“DrupalCamp Atlanta has between 150–200 people, most of them from other Drupal shops, so what is it that you are expecting to get out of the sponsorship that would make it worth it to you? Why do you sponsor any DrupalCamps?”

Have Drupal Companies Outgrown the Need to Sponsor DrupalCamps?

On the plane ride back to the ATL it got me thinking, why does an organization sponsor DrupalCamps? What is the return on their investment? I started reminiscing of the very first DrupalCamp that I attended in 2008 and all the rage at that time (and still is), was inbound marketing and how using a content strategy and or conference presentations can establish your company as thought leaders in the field, therefore, clients will find your information useful and approach you when its time to hire for services. Maybe this is why so many camps received a ton of presentation submissions and why it was easy to find sponsors, but that was over 10 years ago now and some of those same companies have now been established as leaders in the field. Could it be, that established companies no longer need the visibility of DrupalCamps?

What happens to DrupalCamps when companies no longer need the visibility or credibility from the Drupal community?

The Drupal community thrives when Drupal shops become bigger and take on those huge projects because it results in contributions back to the code, therefore, making our project more competitive. But an unintended consequence of these Drupal shops becoming larger is that there is a lot more pressure on them to raise funding thus they need to spend more resources on obtaining clients outside of the Drupal community. Acquia, the company built by the founder of Drupal, Dries Buytaert, have made it clear that they are pulling back on their local camp sponsorships and have even created their own conference called Acquia Engage that showcases their enterprise clients. Now from a business perspective, I totally understand why they would create this event as it provides a much higher return on their investment but it results in competing with other camps (ahem, this year’s DrupalCamp Atlanta), but more importantly the sponsorship dollars all of us depend on are now being redirected to other initiatives.

Are you interested in attending the first online DrupalCamp Organizers Meeting, on Friday, November 9th at 4:00 pm (EST)? RSVP Here.

Why Should Established Companies Sponsor a DrupalCamp?

The reality of the situation is that sponsoring these DrupalCamps are most likely not going to land your next big client that pays your company a $500,000 contract. So what are true reasons to sponsor a DrupalCamp:

  • Visibility
    When sponsoring these DrupalCamps most of us organizers do a pretty good job of tweeting thanks to the company and if the organization has presenters we usually promote the sessions as well. In addition, most camps print logos on the website, merchandise, and name after parties. Yes, its only a little bit but the internet is forever and the more you are mentioned the better off you are. But you are from a well established Drupal shop so you don’t need any more visibility.
  • Credibility
    Even the companies who are have been established need their staff to be credible. There will always be some amount of turnover and when that happens your clients still want to know if this person is talented. And if your company is new, being associated with Drupal in your local community does provide your company a sense of credibility.
  • Collegiality
    I saved the best for last. Collegiality is highly overlooked when looking at sponsoring camps. Most companies have a referral program for new hires and when the time comes for you to hire, people tend to refer their friends and their professional acquaintances. There is no better place to meet and interact with other Drupalist than a DrupalCamp. What about employee engagement? In a recent focus group I participated in with a Drupal shop, many of the staff wanted more opportunities for professional development. These local camps are affordable and can allow staff to attend multiple events in a year when you have small budgets.

I must end by saying, that there are so many great Drupal companies that I have had the pleasure to work with and if it were not for the Acquia’s of the world Drupal wouldn’t exist. I understand that CEO’s are responsible for their employees and their families so I don’t want to underestimate the pressures that come with making payroll and having a client pipeline. The purpose of this post was to explain how it feels as a volunteer who is doing something for the community and the frustrations that sometimes come with it.

Nov 01 2018
Nov 01

BADCamp 2018 just wrapped up last Saturday. As usual it was a great volunteer organized event that brought together all sorts of folks from the Drupal Community.

Every year Kanopi provides organizational assistance, and this year was no exception. We had Kanopian volunteers working on; writing code for website, organizing fundraising, general operations planning, assisting as room monitors, and working the registration booth.

An event like this doesn’t happen without a lot of work across a lot of different areas and we’re very proud of Kanopi’s contributions.

Personally, Kanopi was able to send me down from Vancouver, Canada to spend time doing a day long training course, as well as doing the regular conference summits and sessions.

The course I chose was “Component-based Theming with Twig” which was really informative. We covered the basics Pattern Lab and then worked on best practice methods to integrate those Pattern Lab tools in to a Drupal theme.

Some of the takeaways:

  • The Gesso (https://www.drupal.org/project/gesso) theme is a great starting place for getting Pattern Lab in to your project.
  • Make sure you are reusing all your basic html components and make the templates flexible. Resist the urge to simply copy and paste markup into a new template.
  • The best way to map Pattern Lab components in Drupal is to use Paragraph types and their display modes.
  • To get the most out of Twig template, make sure you are using the module Twig Tweak (https://www.drupal.org/project/twig_tweak)

For the regular conference sessions, the most interest seemed to lie in the possibilities of GatsbyJS (https://www.gatsbyjs.org/). All the developers with whom I spoke are focused on the performance and security perspective, as it can be completely decoupled from Drupal, allowing for fewer security issues. One interesting talk on Gatsby was this one by Kyle Mathews.

Kanopi was also fortunate enough get four sessions selected:

All in all BADCamp 2018 was a great experience. It’s terrific to meet our distributed co-workers as well as see friends from other parts of the Drupal community.

Oct 31 2018
Jay
Oct 31

Leveraging Drupal's cache effectively can be challenging at first, but the benefits for your site's performance make it well worth the effort. It all starts with figuring out what sort of rules your site should use to cache its content. The improved page load times that come from properly handling caching rules can help improve SEO and are generally more appealing to those that visit the website. In the right hands, the techniques outlined in this article can get a website into a much more specialized caching system.

I previously covered the fundamentals of how caching works in Drupal 8, including what the two core caching modules do and what cache tags, contexts, and max-age are for. If you're familiar with those things, then this post is for you; otherwise, check out my previous article and get up to speed before we dive into a slightly more in-depth topic: Figuring out how you should set up caching on your site.

If you're using a simple Drupal installation with no custom code and with well-maintained contributed modules, Drupal's Internal Page Cache and Dynamic Internal Page Cache modules will likely cover your caching needs. This article focuses on some more complex and custom scenarios which, nonetheless, come up with some frequency. 

The Guiding Principle

Perhaps the most frequent issue custom code has when it comes to caching is that it doesn't account for caching at all. This isn't ideal if you want to take advantage of Drupal's caching system to optimize your site's speed, and it points to one principle which can be tricky to learn and is critical to master: If you write custom code, always think about its caching implications. Always. 

Often, the implications will be minimal, if there are any at all. It's important not to assume that every bit of custom code will cache perfectly on its own - that's a mistake that could lead to something being cached either for too long or not at all. 

When to Disable the Cache 

Most everything Drupal renders as output (to a web browser, to a RESTful web service, etc.) can be cached. However, sometimes the development time to ensure that your custom code handles caching precisely outweighs the performance benefits that caching might provide. So the first question when you're writing custom code is, should this be cached at all?

Ready to get the most out of Drupal?  Schedule a free consultation with an Ashday Drupal Expert. 

If you're building something like an administrative page that only a few users with special permissions will ever see, it may not be worth the time and effort to make sure it is cached perfectly, especially if the rules for doing so would be complicated. For these scenarios, Drupal has a "page cache kill switch" that can be triggered in code:

 \Drupal::service('page_cache_kill_switch')->trigger();

Calling the kill switch will stop both the page cache and the dynamic page cache from doing any caching on that page.

This should be used with caution though, and only as a last resort in situations where figuring out proper caching logic isn't worth the time. It should never be used on a page which is expected to be viewed by a large number of your website's visitors.

Rules for Cache Contexts

You should consider using a cache context if your content should look different when displayed in different situations. Let's look at a couple scenarios that benefit from using a cache context:

Say you have a site which can be accessed from two different domains and you want to display something a little different depending on which domain someone is looking at. Perhaps the site's logo and tagline change a little. In this case, the block containing the logo and tagline should be given the url.site context. With this context in place, Drupal will cache a separate version of the block for each domain and will show each domain's visitors the appropriate one.

Or, perhaps a block contains a bit of information about which content the currently logged-in user has permission to edit. This sounds like an excellent case for using the user.permissions context to indicate to Drupal that the block is different for each possible combination of permissions that a user might have. If two users have the same permission, the same cached version can be used for both of them.

There are many other contexts are available as well; take a look at the full list to see if one or more of them is applicable to your code.

Rules for Cache Tags 

Cache tags are probably the most important caching mechanism available to custom code. Drupal includes countless cache tags which can be used to invalidate a cache entry when something about your site changes, and it is also very easy to create your own cache tags (which we'll get to in a minute). For now, I'm going to focus on some of the cache tags Drupal has by default.

Say you're creating a page which shows the top five most recently published articles on your site. Now, Drupal sites can often make use of the Views module for this sort of thing, but depending on your exact requirements Views may not be the best approach – for instance, maybe part of the content has to come from a remote service that Views can't readily integrate with. The most obvious tags needed for this page are the tags for the specific pieces of content that are being shown, which are tags in the format of node:<nid>, for instance, node:5 and node:38. With these tags in place, whenever the content gets updated, the cache entry for your page gets invalidated, and the page will be built from scratch with the update information the next time somebody views it.

But that's not all there is to think about. Perhaps this page also shows what categories (using a taxonomy structure) each article is in. Now, the articles each have an entity reference field to their categories, so if a user changes what categories the article is in, the relevant node:<nid> tags already added to your page will get cleared. Easy enough. But what if somebody changes the name of the category? That involves editing a taxonomy term, not the article node, so it won't clear any node:<nid> tags. To handle this situation, you'd want to have appropriate taxonomy_term:<id> tags. If an article with ID 6 has terms with IDs 14 and 17, the tags you'd want are node:6, taxonomy_term:14, and taxonomy_term:17, and you'll want to do this for every article shown on your page.

Fortunately, most of the time, you don't need to worry about the specific tag names. Nodes, terms, and other cacheable objects have a getCacheTags() method that gets exactly whatever tags you should use for that object.

These are all simple entity-based tags, but there are many more available as well. There are tags for when various aspects of Drupal configuration changes as well as for things such as when certain theme settings get changed. Unfortunately, since the available cache tags vary from site to site, there isn't a ready-made list of them available for you to use as a reference. You can, however, look at the "cachetags" table in your Drupal database to see a list of all the tags that have been invalidated at least once on the site. This will be pretty minimal if your site is brand-new, but as people use the site it will start filling up.

The basic idea of tags is this: If you render something on a page, and there's a chance that something displayed on it might change in the future, there should be an appropriate tag in place to watch for that change.

Up Next

This is a big topic, but it looks like we're out of time for today. Next time, we'll delve a bit deeper into cache tags by seeing how to create custom ones that perfectly fit your site's needs and will also cover how to use max-age, including one important gotcha that makes them more complicated than they look. You can check that one out here.

Offer for a free consultation with an Ashday expert

Oct 29 2018
Oct 29

At this year's BADCamp, our Senior Web Architect Nick Lewis led a session on Gatsby and the JAMstack. The JAMStack is a web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup. Gatsby is one of the leading JAMstack based static page generators, and this session primarily covers how to integrate it with Drupal. 

Our team has been developing a "Gatsby Drupal Kit" over the past few months to help jump start Gatsby-Drupal integrations. This kit is designed to work with a minimal Drupal install as a jumping off point, and give a structure that can be extended to much larger, more complicated sites.

This session will leave you with: 

1. A base Drupal 8 site that is connected with Gatsby.  

2. Best practices for making Gatsby work for real sites in production.

3. Sane patterns for translating Drupal's structure into Gatsby components, templates, and pages.

This is not an advanced session for those already familiar with React and Gatsby. Recommended prerequisites are a basic knowledge of npm package management, git, CSS, Drupal, web services, and Javascript. Watch the full session below. 

[embedded content]

Oct 27 2018
Oct 27

If the community is a top priority then resources for organizing DrupalCamps must also be a top priority.

Go to the profile of Kaleem Clarkson

Oct 27, 2018

“Together We Create graffiti wall decor” by "My Life Through A Lens" on Unsplash

Community, community and more community. One of the common themes we hear when it comes to evaluating Drupal against other content management systems (CMS), is that the community is made up of over 100,000 highly skilled and passionate developers who contribute code. And in many of these application evaluations, it’s the community, not the software that leads to Drupal winning the bid. We have also heard Dries Buytaert speak about the importance of the community at various DrupalCons and he is quoted on Drupal.org’s getting involved page:

“It’s really the Drupal community and not so much the software that makes the Drupal project what it is. So fostering the Drupal community is actually more important than just managing the code base.” — Dries Buytaert

My First Encounter with the Drupal Community

With this emphasis on community, I tried to think back to how and when I first interacted with the community. Like so many others, my first introduction to Drupal was at a local Meetup. I remember going to this office building in Atlanta and the room was packed with people, plenty of pizza, soda and, of course, laptops. It was a nice relaxed atmosphere where we introduced ourselves and got a chance to know each other a little bit. Then the lights dimmed, the projector turned on and the presentations kicked off, highlighting some new content strategy or a new module that can help layout your content. After that first meetup, I felt energized because until that point, I had never spoken with someone in person about Drupal and it was the first time that I was introduced to Drupal professionals and companies.

Are you interested in attending the first online DrupalCamp Organizers Meeting, on Friday, November 9th at 4:00pm (EST)? RSVP Here.

DrupalCamps Play An Integral Role in Fostering Community

After attending a few meetups, I joined the email list and I received an email announcing DrupalCamp Atlanta was going to be held at Georgia Tech and the call for proposals was now open for session submissions.

2013 DrupalCamp Atlanta photo by Mediacurrent

I purchased a ticket for a mere $30 and added it to my Google calendar. On the day of the event, I remember walking in the front door and being blown away by the professionalism of the conference as there were sponsor booths, giveaways, and four concurrent sessions throughout the day. But it wasn’t until I was inside the auditorium during the opening session and saw the 200 or so people pile in that made me realize this Drupal community thing I heard about was for real. Over the next couple of years, I decided that I would attend other camps instead of DrupalCon because the camps were more affordable and less intimidating. My first camp outside of Atlanta was Design4Drupal in Boston, DrupalCamp Charlotte, DrupalCamp Florida and BADCamp were all camps I went to before attending a DrupalCon. All of these camps were top notch but what I really loved is that each camp had their own identity and culture. It’s exactly what I think a community should be and for the very first time, I felt that I was a part of the Drupal community.

Why Establish the DrupalCamp Organizers Council?

As provided in my previous examples, one of the advantages of Drupal comes from the great community and DrupalCamps are an important aspect in fostering this community. Running any event can be challenging, but to pull off a respectable DrupalCamp you have consider so many things such as the website, credit card processing, food, accepting and rejecting sessions, finding a keynote speaker, the afterparty, pre-conference trainings, oh and did I mention the website? You get my drift, it's a lot of work. Many of these tasks just roll off my tongue from past experience so ask yourself;

  • Where can I share my knowledge with other people who organize camps?
  • What if there was some way that all of us DrupalCamp organizers could come together and implement services that make organizing camps easier?
  • How could we provide camp organizers with resources to produce great camps?

During the #AskDries session at DrupalCon Nashville (listen for yourself), Midwest DrupalCamp Organizer Avi Schwab asked Dries the following question;

“... giving the limited funding the Drupal Association has, where should we go in trying to support our smaller local community events?” — Avi Schwab

Dries then responded with:

“That’s a great question. I actually think its a great idea what they (WordCamp) do. Because these camps are a lot of work. ...I think having some sort of central service or lack of a better term, that helps local camp organizers, I think is a fantastic idea, because we could do a lot of things, like have a camp website out of the box, ... we could have all sorts of best practices out of the box .” — Dries Buytaert

DrupalCamp Slack Community was the first time that I was provided a link to a spreadsheet that had the camp history dating back to 2006 and people were adding their target camp dates even if they were just in the planning stages. As a camp organizer I felt connected, I felt empowered to make better decisions and most of all I could just ask everyone, hey, how are you doing this?

Are you interested in attending the first online DrupalCamp Organizers meeting, on Friday, November 9th at 4:00pm (EST)? RSVP Here.

Earlier this year I volunteered for the Drupal Diversity and Inclusion Initiative (DDI) and was inspired when I heard Tara King on the DrupalEasy podcast, talk about how she just created the ddi-contrib channel on the Drupal slack and started hosting meetings. All jazzed up and motivated by that podcast, I reached out to over 20 different camp organizers from various countries and asked them if they would be interested in being on something like this? And if not, would they feel represented if this council existed?

Here are some quotes from Camp Organizers:

“I think a DrupalCamp Organizers Council is a great idea. I would be interested in being a part of such a working group. Just now I’m restraining myself from pouring ideas forth, so I definitely think I’m interested in being a part.”

“I am interested in seeing something that gathers resources from the vast experiences of current/past organizers and provides support to camps.”

“I definitely would appreciate having such a council and taking part. I’ve now helped organize DrupalCamp four times, and this was the first year we were looped into the slack channels for the organizers.”

“I really like the idea — what do we need to do to get this started?”

What are the Next Steps?

Based on the positive feedback and the spike in interest from other camp organizers I have decided to take the plunge and establish our first meeting of DrupalCamp Organizers on Friday, November 9th at 4:00pm (EST). This will be an online Zoom video call to encourage people to use their cameras so we can actually get to know one another.

The agenda is simple:

  • Introductions from all callers, and one thing they would like to see from the council.
  • Brainstorm the list of items the council should be advocating for.
  • Identify procedures for electing people to the Council: ways to nominate, eligibility criteria, Drupal event organizer experience required etc.
  • Outline of a quick strategic plan.
Oct 24 2018
Oct 24

 Drupal Module Spotlight: Paragraphs

I really don’t like WYSIWYG editors. I know that I’m not alone, most developers and site builders feel this way too. Content creators always request a wysiwyg, but I am convinced that it is more of a necessary evil and they secretly dislike wysiwygs too. You all know what wysiwygs (What You See Is What You Get) are right? They are those nifty fields that allow you to format text with links, bolding, alignment, and other neat things. They also can have the ability to add tables, iframes, flash code, and other problematic HTML elements. With Drupal we have been able to move things out of a single wysiwyg body field into more discrete purpose-built fields that match the shape of the content being created and this has helped solve a lot of issues, but still didn’t cancel out the need for a versatile body field that a wysiwyg can provide.

Content creators yearn for the flexibility of creating a page that matches their vision for how they want the layout. Front-end developers and designers want to be able to rigidly style a site that always looks good, and that clashes with the unexpected markup that a WYSIWYG can produce. These differing priorities can resulting in a real mess of a page. It’s been a struggle as old as the CMS itself.

Solutions of the Past

As I mentioned above, the Drupal solution to runaway WYSIWYG markup is purpose-built fields to catch all specific sections of content that you can.Instead of allowing the whole page to be created in one WYSIWYG field, we would have a field for an image, a summary, some various highlight sections, etc. One problem still remains, content creators want to be creative and have various patterns of content depending on what they are writing about. This includes images floating in every which-way, videos in the middle of an article, quote blocks, content in columns, and the list goes on. You can’t just build a bunch of types of fields for this problem. In the past, I tried using Field Collections and custom form alters to build a user interface that allowed them to select and only see the relevant fields, but this still proved to be too rigid.

The Modern Solution

Enter Paragraphs, the Drupal contributed module that can ultimately solve this problem. I started using Paragraphs with Drupal 7 back around 2014 and it really changed the way I thought about editing and creating content on a Drupal site.

With Paragraphs you can define little entities of fields much like the Field Collection module but less static. The difference is that you can access all or some of the different paragraph entity types from a single field on your content type. This single Paragraph content field will replace your body content wysiwyg field entirely. The Paragraph content field will allow you to endlessly add in different paragraph types and provides a method to reorder after creation. Working with your content creators, you can determine an unlimited number of content patterns that they would like to use. For example, you can create paragraphs with the fields required to make a slideshow, embedded video block, accordion content, or another that is an entity reference field to related articles, and one more that is simply a text area field. With this toolkit of content patterns your content creators can build content in any array of patterns they wish.

Paragraphs will satisfy the creative control that the editors of your site desire and will make them finally admit that they too hate that weird little wysiwyg field. When the situation arises that they want to do something new, it’s just a small revision to create a new paragraph type. Your frontend developers and designers will also be happy that they can strictly control the visual aspects of the individual Paragraphs with specific template files and targeted SASS styling.

Extending the Concept

An overlooked but very powerful use of Paragraphs is using it without any fields at all. Let's say that you want to add a newsletter signup form in the middle of your article. Simply define a paragraph called Newsletter signup then with a bit of custom code write a signup form, you could even have it automatically pass the signup source of the article in a hidden field. Next, all the article writer needs to do is drop the Newsletter signup Paragraph wherever they want it to appear within the article content. Another example of a field-less paragraph that we have used in the past is an about the author section. There are no fields needed, just add the paragraph and write code to look up the article’s author and write a template file to display a bit of author info with a headshot, simple as that.

I could write on and on about the possibilities and use cases for paragraphs, but you should really just download it and give it a test drive. It’s like introducing a mini block system into an individual article of content. If you are planning a new build or have an existing Drupal site, don’t hesitate to add Paragraphs. Your content creators and editors will love you for it.

Oct 24 2018
Oct 24

Award Program Showcases Outstanding Examples of Digital Experience Delivery

Vienna, VA – October 24, 2018 – Mobomo today announced it was selected along with NOAA Fisheries as the winner of the 2018 Acquia Engage Awards for the Leader of the Pack: Public Sector. The Acquia Engage Awards recognize the world-class digital experiences that organizations are building with the Acquia Platform.

In late 2016, NOAA Fisheries partnered with Mobomo to restructure and redesign their digital presence. Before the start of the project, NOAA Fisheries worked with Foresee to help gather insight on their current users. They wanted to address poor site navigation, one of the biggest complaints. They had concerns over their new site structure and wanted to test proposed designs and suggest improvements. Also, the NOAA Fisheries organization had siloed information, websites and even servers within multiple distinct offices. The Mobomo team was and (is currently) tasked with the project of consolidating information into one main site to help NOAA Fisheries communicate more effectively with all worldwide stakeholders, such as commercial and recreational fishermen, fishing councils, scientists and the public. Developing a mobile-friendly, responsive platform is of the utmost importance to the NOAA Fisheries organization. By utilizing Acquia, we are able to develop and integrate lots of pertinent information from separate internal systems with a beautifully designed interface.

“It has been a great pleasure for Mobomo to develop and deploy a beautiful and functional website to support NOAA fisheries managing this strategic resource. Whether supporting the work to help Alaskan Native American sustainable fish stocks, providing a Drupal-based UI to help fishing council oversight of the public discussion of legislation, or helping commercial fishermen obtain and manage their licenses, is honored help NOAA Fisheries execute its mission.” – Shawn MacFarland, CTO of Mobomo 

More than 100 submissions were received from Acquia customers and partners, from which 15 were selected as winners. Nominations that demonstrated an advanced level functionality, integration, performance (results and key performance indicators), and overall user experience advanced to the finalist round, where an outside panel of experts selected the winning projects.

“This year’s Acquia Engage Award nominees show what’s possible when open technology and boundless ambition come together to create world-class customer experiences. They’re making every customer interaction more meaningful with powerful, personalized experiences that span the web, mobile devices, voice assistants, and more,” said Joe Wykes, senior vice president, global channels at Acquia. “We congratulate Mobomo and NOAA Fisheries and all of the finalists and winners. This year’s cohort of winners demonstrated unprecedented evidence of ROI and business value from our partners and our customers alike, and we’re proud to recognize your achievement.”

“Each winning project demonstrates digital transformation in action, and provides a look at how these brands and organizations are trying to solve the most critical challenges facing digital teams today,” said Matt Heinz, president of Heinz Marketing and one of three Acquia Engage Award jurors. Sheryl Kingstone of 451 Research and Sam Decker of Decker Marketing also served on the jury.

About Mobomo

Mobomo builds elegant solutions to complex problems. We do it fast, and we do it at a planetary scale. As a premier provider of mobile, web, and cloud applications to large enterprises, federal agencies, napkin-stage startups, and nonprofits, Mobomo combines leading-edge technology with human-centered design and strategy to craft next-generation digital experiences.

About Acquia

Acquia provides a cloud platform and data-driven journey technology to build, manage and activate digital experiences at scale. Thousands of organizations rely on Acquia’s digital factory to power customer experiences at every channel and touchpoint. Acquia liberates its customers by giving them the freedom to build tomorrow on their terms.

For more information visit www.acquia.com or call +1 617 588 9600.

###

All logos, company and product names are trademarks or registered trademarks of their respective owners.

Oct 23 2018
Oct 23

PHP 5.6 will officially be no longer supported through security fixes on December 31, 2018. This software has not been actively developed for a number of years, but people have been slow to jump on the bandwagon. Beginning in the new year, no bug fixes will be released for this version of PHP. This opens the door for a dramatic increase in security risks if you are not beginning the new year on a version of PHP 7. PHP 7 was released back in December 2015 and PHP 7.2 is the latest version that you can update to. PHP did skip over 6; so don’t even try searching for it.

Drupal 8.6 is the final Drupal version that will support PHP 5.6. Many other CMS’s will be dropping their support for PHP 5.6 in their latest versions as well. Simply because it is supported in that version does not mean that you will be safe from the security bugs; you will still need to upgrade your PHP version before December 31, 2018. In addition to the security risks, you have already been missing out on many improvements that have been made to PHP.

What Should You Do About This?

You are probably thinking “Upgrade, I get it.” It may actually be more complicated than that and you will need to refactor. 90-95% of your code should be fine. The version your CMS is may affect the complexity of your conversion. Most major CMS’s will handle PHP 7 right out of the box in their most recent versions.

By upgrading to a version of PHP 7, you will see a variety of performance improvements; the most dramatic being speed. The engine behind PHP, Zend Technologies, ran performance tests on a variety of PHP applications to compare the performance of PHP 7 vs PHP 5.6. These tests compared requests per second across the two versions. This relates to the speed at which code is executed, and how fast queries to the database and server are returned. These tests showed that PHP 7 runs twice as fast and you will see additional improvements in memory consumption.

How Can Mobomo Help?

Mobomo’s team is highly experienced, not only in assisting with your conversion, but with the review of your code to ensure your environment is PHP 7 ready.  Our team of experts will review your code and uncover the exact amount of code that needs to be converted. There are a good number of factors that could come into play and affect your timeline. The more customizations and smaller plugins that your site contains, the more complex your code review and your eventual conversion could be. Overall, depending on the complexity of the code, your timeline could vary but this would take a maximum of 3 weeks.

Important Things to Know:

  1. How many contributed modules does your site contain?
  2. How many custom modules does your site contain?
  3. What does your environment look like?
Oct 21 2018
Oct 21

Wouldn’t it be nice if you could add any block you want to your paragraphs?

Go to the profile of Kaleem Clarkson

Oct 20, 2018

In years past, layout for Drupal has been in the hands of front-end developers, but over time various modules were developed that provided site-builders the ability to adjust the layout. An improvement yes, but there still wasn’t a clear cut option that empowered content editors to alter the layout during the editorial process.

Look out! Here comes the Paragraphs Module. This module has been taking the Drupal community over by storm because it allows content editors to add pre-designed components which gives each page the option to have different layouts. One of the limitations of the Paragraphs module, is that each paragraph can only be used once, and only for the current node you are editing. This means that you can’t re-use a common paragraph such as a call to action block, email signup or contact us form, so you end up finding yourself duplicating a lot of work if you want the same block on numerous pages. While the Drupal community has been working to help solve this problem by allowing the re-use of paragraphs, there are still going to be plenty of situations where you want to insert custom blocks, views, or system blocks such as the site logo or login block.

How do you allow your site editors to add re-used blocks into their content during the editorial process?

Let me introduce you to the Block Field Module. Maintained by the one and only Jacob Rockowitz (you know the webform guy ), you can be assured that the code follows best practices and that there will be support. The block field module allows you to reference any block regardless of where it is coming from and the best part, you don’t have to create some hidden region in your theme in order for the blocks to be rendered.

There are plenty of awesome articles out there that explains how to use paragraphs so I won’t get into that. To follow along with my steps be sure to have downloaded and enabled both the Paragraphs and the Block Field modules.

Steps to Add Blocks to Paragraphs

  1. Download and Enable the Paragraphs and Block Field modules.
  2. Create a paragraph type called Block Reference (or whatever name you want)
  3. Add a new field, by selecting the Block (plugin) field type from the dropdown and save it.
  4. Go to manage display and make the label hidden. 
    I always forget this step and then I scratch my head when I see the Block Ref field label above my views title.
  5. Now go to back to your content type that has the paragraph reference field and ensure the Block Reference paragraph type is correctly enabled. 
    The content type with the paragraph reference field was not covered in this tutorial.
  6. When adding or editing your content with a paragraph reference field. Add the Block Reference paragraph type. Select the name of the block that you would like to reference from the dropdown hit save on the content and watch the magic happen.

In conclusion, it does feel a little scary giving content editors this much freedom so it will be imperative that all views and custom blocks have descriptive names so that editors can clearly identify what blocks to reference. Overall I feel like this is a good solution for referencing existing blocks that can save a lot of time and really unleashes the power of the paragraphs module. The Drupal community continues to amaze me!

Oct 16 2018
Oct 16

[embedded content]

Video sections

Bootstrap is a powerful front-end framework which helps you build sites and web applications faster by offering prebuilt CSS and JavaScript components.

Some of the CSS components it offers are a grid system, buttons, navigation, jumbotron and so much more. On the JavaScript side, it comes with a few useful items such as a modal, collapsible divs, carousel to name a few. Read the Bootstrap documentation to find out more.

Bootstrap in Drupal

If you search for “drupal bootstrap” in Google, the first result will likely be the Bootstrap theme. This theme is the most popular on drupal.org with over 150,000 reported installs. But as of this writing, the theme only supports Bootstrap 3, not version 4 which is the latest.

So if you want to use Bootstrap 4 you’ll need to use another theme until the Bootstrap theme supports version 4.

In this tutorial, you’ll learn how to configure and use the Drupal 8 version of the Barrio theme which uses Bootstrap 4.

Getting Started

Before we can begin, go download the Barrio theme.

Using Composer:

composer require drupal/bootstrap_barrio

Create Sub-theme

The recommended way of using a theme in Drupal is to first create a sub-theme. You’ll never want to use Barrio directly. If you need to customize how things look, i.e., change CSS and override templates, then do it in the sub-theme and not Barrio itself, this way you can keep Barrio up-to-date.

If you want to learn more about sub-themes in general. Check out the Creating a Drupal 8 sub-theme, or sub-theme of sub-theme documentation page.

Let’s now look at creating a sub-theme which pulls Bootstrap via a CDN, this is the quickest and easiest way to get started.

Create CDN Sub-theme

1. Go to the bootstrap_barrio directory and copy the subtheme directory into /themes.

2. Change the subtheme directory name to anything you want, I’ll change it to barrio_custom (everywhere you see barrio_custom, use your actual sub-theme name).

Now we need to go through the sub-theme and replace bootstrap_barrio_subtheme to barrio_custom.

3. Rename the following files:

  • _bootstrap_barrio_subtheme.theme -> barrio_custom.theme
  • bootstrap_barrio_subtheme.info.yml -> barrio_custom.info.yml
  • bootstrap_barrio_subtheme.libraries.yml -> barrio_custom.libraries.yml
  • config/install/bootstrap_barrio_subtheme.settings.yml -> config/install/barrio_custom.settings.yml
  • config/schema/bootstrap_barrio_subtheme.schema.yml -> config/schema/barrio_custom.schema.yml

4. Open  barrio_custom.info.yml change the name of the sub-theme and rename the libraries section from bootstrap_barrio_subtheme to barrio_custom.

From this:

To this:

5. Open barrio_custom.theme (formerly_bootstrap_barrio_subtheme.theme) and change the function name:

// From:
bootstrap_barrio_subtheme_form_system_theme_settings_alter(&$form, FormStateInterface $form_state)
// To:
barrio_custom_form_system_theme_settings_alter(&$form, FormStateInterface $form_state)

6. Open config/schema/barrio_custom.schema.yml (formerly config/schema/bootstrap_barrio_subtheme.schema.yml) and change the following:

# from:
bootstrap_barrio_subtheme.settings:
# to:
barrio_custom.settings:

7. Open color/color.inc file and change the following:

// From:
'preview_library' => 'bootstrap_barrio_subtheme/color.preview',
// To:
'preview_library' => 'barrio_custom/color.preview',

8. Last but not least, open js/global.js and change the following:

// Change this:
Drupal.behaviors.bootstrap_barrio_subtheme = {
// To this:
Drupal.behaviors.barrio_custom = {

Now that you’ve created a sub-theme go to the Appearance page in your Drupal site and install your sub-theme by clicking on “Install and set as default”.

The front-end of your Drupal site should look something like the image below:

The actual Bootstrap 4 library is being loaded via a CDN which is the default behavior in the Barrio sub-theme and that’s why everything works without downloading the library locally. Of course, this can be changed and we’ll look at how to do that next.

Download Local Version of Bootstrap

In the sub-theme we created above, we’re pulling in Bootstrap through the CDN. Let’s configure it now to use a local version of Bootstrap.

1. Go to the Download page and click on Download in the “Compiled CSS and JS” section.

2. Extract the zipped file into /libraries directory in your Drupal site and rename the folder to bootstrap. 

The path to the css and js folder should be /libraries/bootstrap/css and /libraries/bootstrap/js.

3. Open up *.libraries.yml in your sub-theme, mine is called barrio_custom.libraries.yml and change the bootstrap section like so:

From this:

bootstrap:
  js:
    /libraries/popper/popper.min.js: {}
    /libraries/bootstrap/dist/js/bootstrap.min.js: {}
  css:
    component:
      /libraries/bootstrap/dist/css/bootstrap.min.css: {}

To this:

bootstrap:
  js:
    /libraries/bootstrap/js/bootstrap.bundle.min.js: {}
  css:
    component:
      /libraries/bootstrap/css/bootstrap.min.css: {}

Bootstrap 4 has two dependencies Popper and jQuery. Drupal comes with jQuery already and to save a bit of effort will use the bootstrap.bundle.min.js which comes with Popper whereas, bootstrap.min.js doesn’t.

4. Open the *.info.yml file in your sub-theme and change barrio_custom/bootstrap_cdn under libraries to barrio_custom/bootstrap.

From this:

libraries:
  - barrio_custom/bootstrap_cdn
  - barrio_custom/global-styling

To this:

libraries:
  - barrio_custom/bootstrap
  - barrio_custom/global-styling

5. Rebuild the site cache by running drush cr or drupal cache:rebuild or by going to /admin/config/development/performance and clicking on “Clear all caches”.

If the JavaScript or CSS file isn’t loading or the site looks broken. Make sure the paths in the *.libraries.yml file is correct and that the Bootstrap library is correctly in the /libraries directory.

Theme Settings

The Barrio theme allows you to configure a lot through the Settings page, which you can access by clicking on the Settings link after you’ve activated the theme. I won’t go through absolutely everything, however, I’ll mention some important settings.

To access the settings page, click on Appearance in the toolbar and Settings next to the installed theme.

Layout Settings

From the Layout tab, you can configure aspects of the layout such as the type of container, i.e., fluid or non-fluid and how wide the sidebar columns should be.

If you select “Fluid container”, then your website will be full-width with gutters on each side.

The “Sidebar first layout” and “Sidebar second layout” let you configure the width of each sidebar.

Components Settings

From the Components tab, you can configure the buttons and the navbar.

The most important section in this tab is the navbar. It lets you configure it without having to modify any CSS or SASS files.

Affix Settings

In this section, you can configure components like the navbar or sidebar to be affixed to the top when scrolling.

If you check “Affix navbar”, it’ll stick the navbar to the top as you scroll down the page.

Here’s an example:

Scroll Spy

In this area, you can configure the Scrollspy functionality in your Drupal Bootstrap site.

Fonts Settings

From the Fonts tab, you can configure what fonts will be used and icon set.

Colors

And finally, from the Colors tab, you can configure the color of the messages and how tables are displayed.

Color Scheme

One thing I do like about Barrio which is different to the Bootstrap theme is the ability to change the color scheme directly in the theme.

Now, this isn’t groundbreaking and Drupal’s had this ability for a long time, but being able to easily change colors without modifying CSS or compiling SASS is a nice touch.

However, there is a limitation on which colors can be changed. You can’t change Bootstrap colors: primary, secondary, success, danger, warning or info from the color scheme section.

So that is a quick overview of the settings page. My guess is you’ll spend most of your time configuring the navigation bar and grid layout. But do spend some time familiarizing yourself with the options available.

Bootstrap Library

Another way to load Bootstrap is by using the Bootstrap Library module. One of its benefits is the ability to change which version of the CDN library you want to use without modifying the *.libraries.yml file in your sub-theme.

1. Start things off by first downloading the module and then installing it.

composer require drupal/bootstrap_library

2. Go to the Settings page of your sub-theme and scroll to the bottom and from “Load library” choose how you want the library to be loaded.

  • CDN: This will load Bootstrap through a CDN.
  • Local non minimized (development): This will use the non minified version stored in the /libraries directory
  • Local minimized (production): This will use the minified version stored in the /libraries directory.

As long as you’ve downloaded Bootstrap and added it into the /libraries directory as explained early, the “Local non minimized” and “Local minimized” should work.

Bootstrap Library Settings

The Bootstrap Library module comes with a configuration page, just go to Configuration and click on Bootstrap Library.

If you choose None from “Load library” on the theme settings page, then whichever way Bootstrap is configured to load from this page is what will be implemented.

From this “Load Boostrap from CDN” section, you can choose if a CDN is used and which version. If you prefer to load Bootstrap locally, then select “Load locally”.

Then from “Minimized, Non-minimized, or Composer version” select which local version you want to use.

Form “Theme visibility” select which themes will have Bootstrap loaded.

Make sure you select your theme from the multi-select or the library will not load and your site will be broken.

From the “Activate on specific URLs” section, you can include or exclude the library on specific paths.

From the “Files settings” you can choose if you want CSS and/or JavaScript files loaded.

If you decide to use Bootstrap Library to load the library then make sure your sub-theme isn’t loading the library itself because you’ll end up loading the library twice.

Remove any library declarations from the *.info.yml file in your sub-theme. This will stop your sub-theme from loading the library.

Rebuild the site cache and you’re good to go.

Summary

The current state of Bootstrap in Drupal 8 is this. If you need to use Bootstrap 3, then use the Bootstrap theme. If, however, you want to use Bootstrap 4 then look at Barrio, Bootstrap4BootBase or Radix.

If you know of any good Bootstrap 4 base themes then please leave a comment.

Ivan Zugec

About Ivan Zugec

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 10 years and has successfully completed several large Drupal projects in Australia.

Oct 10 2018
Oct 10

image of team working to put pieces of a puzzle together The reality is that running a business is such a diverse and complex endeavor that managing complex and rapidly evolving software solutions needed to execute the mission can be an overwhelming component. It already takes enough energy and expertise to be proficient in managing people, knowing your vertical, regulating cash flow, envisioning new products, evaluating old products, and on and on and on. The problem, however, is that if you don’t leverage complex and rapidly evolving software solutions to handle processes, you end up drowning in inefficiency and inconsistency. So therein lies a significant and difficult problem because you likely didn’t get into business to become an informal senior software architect. And that’s where leveraging something like a robust CMS comes into play. 

Let’s look at some of the ways leveraging a modern CMS, like Drupal, for example, can significantly streamline your business and free you to, well, run your business.

CMS is more than a CMS 

So in simplest terms, a CMS is a Content Management System. Historically, that basically meant providing standard functionality for perhaps managing blog content for a public website. The truth is, however, today it’s far more than that. There’s a whole range of CMS options that vary from that ultimately simple blog scenario to enterprise level development frameworks upon which you can build nearly any kind of web-based software solution. So in its infancy, it may have been largely all about getting a simple “brochure” site up with some basic management, but today it’s being used to provide some of the most sophisticated enterprise web solutions that are critical to modern business strategy. And in many cases, it’s leveraged internally to empower the management of the business in a highly effective and efficient manner. We’ll cover some more tangible examples in a minute, but first we need to get an important question out of the way. 

Which CMS? 

A CMS is a broad-ranging category of systems, and there is still a ton of flexibility in choosing a CMS. In fact, we’ve written articles on this topic and built a little tool to help you figure that out. The different management systems cover a wide range of use cases, so it can be difficult to determine which is right for a given situation at times. There are a number of extremely simple CMS setups that can work great on a low budget, with very flexible requirements, and without needs for complex solutions like custom integrations. On the other end are systems like Drupal (our CMS framework of choice) that allows you do virtually anything you want as well as continue to leverage a whole lot of components included in the core system or built by those extending the system in powerful ways. It’s this latter category of enterprise-level customizable CMS that we will focus on here because that’s where the exciting power lies.

 Which CMS is best for your website?  Take our CMS Quiz and find out!

Real world scenarios

Let’s look at some specific examples of just what these systems can do. And this isn’t hypothetical. These are exactly the types of solutions we’ve built for our clients with an extensible CMS platform like Drupal as our starting point.

Employee collaboration

Email. Chat. Documents. Meetings. There is a lot of internal chatter and management that goes on within a corporation, and the magnitude of the management of that cannot be overstated. Who hasn’t found themselves almost daily wanting to just disconnect from the internet for 20 minutes to take a breather from all the chaos swirling around? Well, the right CMS can mitigate a lot of that. You can use a whole host of building blocks to build an employee portal where coworkers can chat, send notifications, collaborate on policy documents, receive corporate notifications, see a team calendar, reserve a conference room, assign tasks, etc - all with deep tracking and revisioning and all within one ecosystem that is accessible from the desktop, the laptop, and mobile devices. With this strategy, you find yourself having a whole different experience. No more depending on how different people like to store and organize their local copy of largely outdated documents. No more relying on email history to track a decision that was made or find a digital asset. No more walking around the hall looking for an empty conference room. No more being stuck solving an accounting problem because that person is on vacation and has a local spreadsheet on their laptop. Best of all - everyone uses the same tools and those tools are managed from a single infrastructure. Sounds great, doesn’t it?

Client management

Let’s be honest - managing clients is often more difficult than managing your own workforce because your clients aren’t in your building, on your schedule, or under your control. There are countless phone calls, emails, shared documents, meeting decisions, deadlines, and other elements that can make it easy to lose sight of the forest for the trees. And it can be overwhelming to manage and well, frankly, quite embarrassing when something slips through the cracks or someone who needs to know isn’t in the know.

A CMS based solution can provide a platform to minimize and consolidate client management needs into a system that depends far less on individual availability and manual process and allows for a much more robust client relationship. Using a CMS as a platform, you can build systems that allow sending an invoice in a few clicks, with automated reminders and tracking of unpaid invoices. That same system can allow clients to track progress on major requests, and send or request updates. It can also run reports on product subscriptions that are set to expire, or highlight clients that are typically late paying their bills, or prioritize requests that haven’t been responded to in the past x days. It can also allow clients to pay their invoices online, engage live chat support, access help documentation, or receive alerts about upcoming products - again, all tracked in a single ecosystem and in full view of everyone in your business who needs visibility of some or all of the client engagement. It can literally transform how things are done and has huge ROI potential because it literally may save you from losing clients and make the ones that stay happier.

Content or product management

So what about managing the products or services your company actually provides? A CMS can do that too. It might mean allowing those who manage the warehouse to manage inventory, which is immediately reflected on the public-facing ecommerce site. Or it might mean serving, tracking and reporting online ads. Or it may mean providing a robust content management workflow for new stories and white papers that you offer your customers. And it all can leverage the same building blocks for tracking, notifications, document management, user roles, and permissions, etc., that a modern CMS can provide. Better yet, multiple CMS systems can even be built to talk to each other so that perhaps your Client Management system can get info about products your client has purchased from your Product Management or your Employee Collaboration system can be told to set follow-up reminders for your employees based on the activity of their clients. Or maybe all of these systems are really just one system that gives appropriate access to all who need it. The possibilities are endless.

So where do we go next?

So we’re only scratching the surface here, but if you have a heavy dependence on manual processes, or a lot of duplication of effort, or a difficulty tracking all the moving requirements, conversations or documentation - then a robust software solution built upon a CMS could be a key opportunity to making your processes more efficient and effective and allow you to focus on building your business, not running your business. The web today is not the web it even was 5 years ago so taking the time to see what’s possible can really change your whole perspective on how your business can function. Exciting times!

image with text offering access to our free CMS Selection quiz.

Oct 09 2018
Oct 09
Go to the profile of EOTSS Digital Services

Apr 6, 2018

A straightforward mission doesn’t always mean there’s a simple path. When we kicked off the Mass.gov redesign, we knew what we wanted to create: A site where users could find what they needed without having to know which agency or bureaucratic process to navigate. At DrupalCon Baltimore in 2017, we shared our experience with the first nine months of the project building a pilot website with Drupal 8, getting our feet wet with human-centered (AKA “constituent-centric”) design, and beginning to transform the Mass.gov into a data-driven product.

Oct 09 2018
Oct 09
Go to the profile of EOTSS Digital Services

Feb 16, 2018

Structured content is central to the content strategy for our new Drupal-based Mass.gov. So is the idea of a platform-agnostic design that can be reused across our diverse ecosystem of web applications, to encourage a consistent look, feel, and user experience. We’re not the only ones with these priorities for our new digital platform. So we can’t be the only ones wrestling with the unsolved authoring experience implications either. This blog post is an attempt to articulate the basic problem and share our best, latest idea for one possible solution. As the saying goes, ‘If you want to go fast, go alone. If you want to go far, go together.’ We want to go far. If you like our idea, or if you have other possible solutions or insights, please share them with us in comments below, or by tweeting at us @massgov, or contact me at @bryanhirsch. Let’s go together.

Problems:

Drupal has made major strides toward improving the content authoring experience in recent years: Acquia’s Spark project in Drupal 7, Quick Edit in Drupal 8, and Edward Faulkner’s integrations with Ember. But (1) our vendors for Mass.gov have unanimously dissuaded us from leveraging these innovations in our new authoring experience because with complex data models it’s costly and highly customized to make in-place editing through the front end work. (2) This challenge is compounded by the desire to keep our design portable across diverse web properties, which means we want to keep Drupal’s Quick Edit markup out of our Pattern Lab-based component library. Additionally, (3) if we get structured content right, our Mass.gov content will be reused in applications we don’t control (like Google’s knowledge graph) and in an increasing number of government website via APIs. It’s both cost prohibitive and practically impossible to create frontend authoring UIs for each of these applications. That said, if we move authoring away from the front end in-place editing experience, (4) authors still need detailed context to visualize how different pieces of content will be used to write good content.

Here’s one possible solution we’re interested to explore that seems like it should address the four issues outlined above: Move high-fidelity live previews to the backend authoring experience, displayed alongside the content editing form as visualized in the designs below.

Visual design of possible UI for live preview of different components from the Pattern Lab-based Mayflower component library, incorporated into the backend Mass.gov authoring experience. View additional designs here.

By showing authors examples of how different pieces of content might be used and reused, we can give writers enough context to write meaningful structured content. But maybe we only need to give authors enough examples to have reasonable interactions with all the different content form fields. If this works, then we don’t have to try and keep up with an infinitely growing and changing landscape of possible new frontends. Pattern Kit (here) and Netlify CMS (here) both offer working, open-source, examples of how this authoring experience could work.

Mass.gov is not a “decoupled Drupal” ecosystem yet. Our API strategy is in its infancy. We know other people with much more experience are thinking about the same issues. Maybe some are even writing code and actively working to develop solutions. If this is you, we’d love to hear from you, to know how you’re approaching these problems, and to learn from anything you’ve tried here.

Oct 09 2018
Oct 09

It was recently announced that 2020 will be the year Drupal 9 is officially released into the wild. The exact date hasn’t been set, but we can now look forward to the 9.0 release that year. The announcement also gave us an official End of Life date of November 2021 for Drupal 7 AND Drupal 8. So, what does this mean if you’re currently running or developing a site on one of those versions? In this post, I’ll explain.

What this means for Drupal 8?

Drupal 8 is built around a concept of continuous innovation. What this means is that new features and backwards-compatible changes are continuously added. When an old system or code is depreciated, instead of removing it, it stays in the codebase. This ensures that custom code and contributed modules will continue to work and have time to update. Eventually, there will be an excess amount of depreciated code and dependencies and there will be a need to remove it. That is one of the reasons for the release of Drupal 9. All that old stuff gets removed and we start fresh with the latest and greatest technology.

The great thing about Drupal 8 is that by the time Drupal 9 is released all of the modules and custom code in your site should be up-to-date. Therefor, updating from 8 to 9 is no different than from 8.5 to 8.6. Clean and painless!

And that’s the point. This method of building and releasing versions will continue for the foreseeable future which is why we like to say that a migration to the latest Drupal will be the last migration you ever need.

What this means for Drupal 7?

Unfortunately, Drupal 7 is a different story. When Drupal 7 reaches end of life in November of 2021, it will no longer be supported by the community at large. There are plans to release a Drupal 7 version that uses the latest version of PHP. There is also a paid support program planned (similar to Drupal 6 LTS) that will allow people and organizations unable or unwilling to migrate to continue to keep their sites secure. But really, your best course of action is to plan for a migration to Drupal 8 by 2020. This keeps your site current and guarantees it’s security moving forward.

The codebase between 7 and 8 is entirely different so a migration to Drupal 8 is a pretty big undertaking. You could call it replatforming. Drupal 8 does however include a built in data migration tool that will make the move easier. You might still need some help though depending on your site requirements and edge cases. Plus, data is one thing, but you would also need to move your theme, too. The silver lining is that migrating presents an opportunity to freshen up the look of your site and increase site speed with the latest software. For more information on what is involved in a migration, check out this post.

Like I mentioned earlier in this post, a migration to Drupal 8 may likely be the last migration you ever need since subsequent major version updates (i.e. from 8 to 9) should be very quick and easy. Once you’ve made that initial investment migrating to Drupal 8, you can rest assured that you won't have to go through that process again, possibly forever.

Migration experts

Acro Media is a Drupal agency specialized in eCommerce. We help build and maintain successful eCommerce websites as well as the underlying Drupal Commerce platform. We are also heavily involved in the development of Drupal’s migration tools. If you want to discuss what a migration might look like for your business, talk to us! We’re happy to help.

Contact us to discuss your migration!

Oct 03 2018
Jay
Oct 03

drupal 8 logo in spotlights

Although it can sometimes be easy to forget about that little URL bar at the top of your browser, what it contains for each page can be surprisingly important. Creating good paths (the part of the URL after the domain name) for your site content can have numerous benefits, especially for SEO, but doing so can be a bit frustrating. Usually, you end up needing to re-type most of the page title into Drupal's URL alias field, which isn't necessarily too bad on its own, but it's still an extra step whenever you create content. And what about when you update the page and change the title? This is where it gets very easy to forget to change the path, which can lead not only to worse SEO but also to your site's visitors not ending up on a page with the content they expected it to have.

Fortunately, the Pathauto module makes all such worries a thing of the past.

This module adds a whole host of new options to how you can configure Drupal's paths, perhaps the most important of which is path "patterns". Patterns allow you specify what you want your paths to look like for different pieces of content; for instance, if you have a site where each of its users can have a blog, you could set up a pattern for Blog nodes such as "/blog/[node:author]/[node:title]". Then, whenever a user creates a blog post, it will automatically be given an alias which includes their username and the title of the post, and it will even update the alias if the user edits the post to change its title.

If you already have a site which has inconsistent aliases, Pathauto can also be used to bulk generate new aliases for your content, which is also quite helpful if you ever decide you want to change the structure of your paths. The module also offers plenty of settings to configure exactly what the paths it generates look like, including the ability to use a wide range of tokens provided by the Tokens module.

Finally, Pathauto also integrates with the excellent Redirect module. If you have both modules installed, changing the title of your content won't just change the path, it will also create a redirect from the old path to the new one so that any links already out there to the old URL will continue to function as expected. This is a rather important bit of functionality, and thanks to Drupal's great selection of contrib modules, it's just a few clicks away from being set up and working on your site.

New Call-to-action

Oct 03 2018
Oct 03

Recently, The Guardian Insurance Company made the strategic business decision to start marketing and selling their products directly to consumers. While Guardian has been around for nearly 160 years (WOW!) most consumer experiences with their products stem from employer insurance coverage offerings. As the industry landscape evolves and the US workforce moves slowly towards distributed and independent employment Guardian endeavored to differentiate their offerings not only from industry stalwarts but also from up-and-coming, startup-like products catering to the same demographics. Mediacurrent was proud to be chosen by Guardian Insurance Company as their Design and Strategy partner during product development of their new direct-to-consumer website.

Now that the site has launched, we’re happy to share some behind-the-scenes details of how this fresh, new experience came together. While our Case Study gives a broader overview of the project, this blog post will provide additional insight into our data driven design process.

Part 1 of this 2-part series covers the early planning parts of our process including Strategic Design Discovery, Style Tiles, and Wireframing. Part 2 will cover Mockups & Visual Design, Custom Illustration, and Custom Iconography. Let’s dive in!

Strategic Design Discovery

A Discovery phase begins many of our projects at Mediacurrent. This phase is led by a cross-functional group of our world-class team to help frame the challenges ahead. Throughout this phase, comprehensive knowledge of the Guardian brand, its customers, its competitors, and its business were gathered. These strategic design discovery insights allowed us to understand the types of consumers the new product is being geared towards (user personas), how success is being measured (Key Performance Indicators or KPIs), the ways in which a person becomes a customer (conversion paths) and a boatload of other data that served as our “guiding light” throughout the process.

Wireframes

Next, we moved on to really digging into the user personas and conversion paths generated in the Discovery phase by creating wireframes for the different sections of the site. One of the most exciting parts about this project was that we were not only designing the marketing section of the site but also the entire customer experience from the point where the visitor is attracted, becomes a lead, and eventually converts to a customer. This means that in addition to top-level marketing pages – like the home, about, and product pages – user journey designs were also needed for getting a quote and enrolling in one or multiple products.

Throughout the wireframing process, we broke down the different types of pages and sections of the site that users will encounter when visiting and organized the placement of content and calls-to-action (CTAs) by mapping the layout structure to the user journeys and KPIs identified in Discovery. Working from the Mobile First perspective, we made sure to consider this hierarchy not only on desktop machines but also tablets and mobile phones. In this case, we decided to take a medium fidelity approach – meaning that we avoided color or imagery in order to maintain focus on content organization and the user journey. We did include the typographic and iconography styles defined in our approved Style Tile, and we simulated actual copy since the process included quoting and checkout workflows which would not have made sense with greek copy.

In the end, these blueprints ensured that the user experience was providing the clearest path for a visitor to learn about the products, understand the cost and coverage offered, then ultimately enroll in a Guardian Insurance plan.

The goals mapped through the top-level marketing page wireframes were not only to educate the consumer about the company and the products offered but, more importantly, to serve as a hassle-free gateway to the actions the business measures – namely generating a quote and enrolling. On the homepage, Guardian wanted to make sure a newly developed brand message – Life is full of surprises. The cost of paying for them shouldn’t be. – was clearly communicated so we even started to play with some interaction suggestions. 

medium fidelity wireframe focuses on content organization and the user journeyDesktop, tablet, and mobile homepage wireframes.

The goals mapped through the quoting experience provided a simple way to understand the cost and coverage offered for a variety of different types of consumers – single person, couple, children, adult dependents, etc.

wireframe shows progression toward getting a quote

Tablet-width wireframes of the Find a Dental Plan (or quoting) process.

The goals mapped through the enrollment/checkout process were to 

a) keep the experience as simple and logical as possible for all types of visitors; 
b) allow them to enroll in one or multiple products at the same time;
c) gather all legally required information and consent – which varies between products.

wireframes show user journey to find a price quote

Desktop-width wireframes of the Enrollment (or checkout) process.

Along with these broader page-level experiences, microinteractions – such as saving and retrieving quotes – were considered and wireframed to ensure that the experience was cohesive.

Style Tiles 

With these insights in hand, we began creating Style Tiles that took the brand’s visual guidelines, placed them in an interactive digital context, and expanded on them where we saw the need and/or opportunity. This process created a high level view of the visual tone of the new website. Adding a bit of complexity, Guardian was deep in the midst of a larger corporate rebrand when our project began. In this case, we had to consider the existing brand guidelines, be flexible enough to incorporate new brand elements as they were provided, and ensure that the digital experience was coherent, unique, and accessible to all users – a critical concern identified during Discovery. 

Three concepts were presented initially:

1. New Blue Suit

– This concept expresses subtle sophistication through the use of color, typography, and whitespace. It relies heavily on the brand’s primary blue hue as a color that reinforces trust, loyalty, and integrity. An overall contemporary, minimalist approach is suggested as a means of reducing cognitive load. The icon style followed these principles as well by choosing an outline style with subtle monotone accents. Typographically, we included the fonts defined in their brand guidelines in order to maintain consistency with existing materials.

style tile includes blue and gray color palette and brandon grotesque typography

2. Happy Place

This concept is lively and pleasant using bright colors to create a friendly experience. We expanded the brand color palette to add cheerful, accessible hues able to be used in a variety of UI elements. Typographically we pushed the existing brand guidelines by incorporating a new font – Open Sans – as its wider variety of weights allows it to be used more expressively than the currently defined Arial family. Our type treatments utilized a lighter weight body font to balance the heavy use of color and maintain valuable whitespace. The icon style suggested takes a more fully-realized illustrative approach making use of the expanded color palette and adding dimension through highlights and shadows.

style tile with primary color palette

3. Gilded Skies

This concept reduces the color palette and adds trendy accents. Broader than New Blue Suit, but more restrained than Happy Place, this example’s color palette features a rich gray, trusted blue, and adds shades of gold to suggest value, elegance, and quality. Here we’ve suggested a hand-drawn icon style that personalizes the experience with a more genuine feel. We also included photography style suggestions that feature color and light effects to extend the color palette and maintain a clean and crisp look.

style tile features photography examples and a gray, blue, and gold palette

Through this exercise, we were able to understand just how far Guardian was willing to push their existing brand and create a final document that was approved by all stakeholders as the visual voice we wanted to achieve with the final product. In the end, and with a few iterations in between, we landed on what was essentially a blend New Blue Suit and Gilded Skies as the path forward. This final Style Tile was chosen in order to maintain consistency with Guardian’s larger, existing brand guidelines while introducing elements that would help create a more casual tone appropriate for the demographic of their direct-to-consumer offerings. 

final style tile includes blue, grey, gold and red tones, typography, buttons, and icons

Stay Tuned!

Our process does not end here but part 1 of this post does, unfortunately. :( Keep an eye out for part 2 where we’ll dig into the visual design details of the site! We’ll look at different visual concepts that were created, how the design was finalized with custom illustrations and iconography, and the component-driven approach we follow. For now, just direct your feet to the sunny side of the street!

Oct 02 2018
Oct 02

The Media module made its way into Drupal core for the Drupal 8.4 release a while back. It gives Drupal users a standardized way for managing local media resources, including image, audio, video, and document files. We wanted to add using this module into our Drupal Commerce demo site to give an example of how this module could potentially be used in a Commerce setting.

In this Tech Talk video, I’ll quickly show you how we updated our digital download Commerce product example to use the Media module, giving us the flexibility to add audio samples to the product page and access to the full download after purchase.

[embedded content]

Background

The product I wanted to update is the Epic Mix Tape by Urban Hipster digital download example product. This is a fake album featuring all of your favourites by artists you’ve never heard before. The idea is to showcase that you can add digital products to a Drupal Commerce based online store, not just physical products.

Originally we were using just a standard file field that, when checkout was completed, gave the customer access to download the file. This was done before the Media module made its way into core. Now that the Media module is in core, we figured it’s time to update it.

Setting up an Album media type

When the Media module is installed you get some new admin menu items. The first is a section called Media Types (under Structure) where you can configure your media entities like any other Drupal content entity. Here I created an ‘Album’ media type with two unlimited file fields, one for sample audio tracks and one for the full audio tracks. This is the basis for creating my downloadable albums.

The second admin menu is under Content. Here you get a new Media tab which is where you can add, edit and remove any media items. Since I already created the Album media type I can now add the Epic Mix Tape album files here. This completes the media side of the updated digital download product. All I need to do now is update the product configuration to use it.

Completing the digital download product configuration

Now that the media type has been added and I’ve uploaded an album, I need to set up a way to use it. It’s pretty easy to do. First, for the digital download Product Type, I add an entity reference field to give a way for selecting the album media entity to use for the product samples.

I then do the same thing for the Product Variation Type. This one, however, will be used to give access to the full files after purchase.

Finally, some template updates. The Drupal Commerce demo site has some pretty custom template files for the products. In the template, I access the media entity directly and loop through the items, printing each audio sample and track title onto the product page. I do the same thing for the checkout complete page but print out the full tracks instead.

Depending on your templates and display settings, you can get similar results without manually accessing the files in the template file, however I wanted to print out the file description with the audio player right on the page. Showing the description unfortunately is something you don’t have the option of doing using the standard audio display widget.

And that’s it! Check out the Urban Hipster Drupal Commerce demo site below to see it in action.

Demo Drupal Commerce today! View our demo site.

Oct 02 2018
Oct 02

[embedded content]

Watch other videos on our YouTube channel. Click here to subscribe.

I was recently looking at all the default views that come with Drupal 8. For people who don’t know, the Views module is part of Drupal 8 core. In Drupal 7 and below it’s the most installed module so during Drupal 8’s development it was decided to move Views into core.

During my exploration into all of the default Views, I noticed that in the People (User) view there was a filter called “Combine fields filter”.

Want to learn about Views? Read Build a Blog in Drupal 8: Using Views or watch it as part of our FREE Drupal 8 Site Building course.

Now just a quick side note, if you’re new to Drupal and Views I’d highly recommend you spend time walking through all of the default views and see how they were configured. You can learn a lot just by seeing how things are set up.

The “Combine fields filter” does a pretty cool thing. It allows you to search across multiple fields or put another way, it allows you to combine fields and then filter by their combined value.

How to use “Combine Fields Filter”

Using this filter is relatively straightforward. Just click on Add in the Filter criteria field-set. Search for the filter by name or select Global from the Category drop-down.

When configuring the filter, you can select which fields you want to search from the “Choose fields to combine for filtering” drop-down.

If you want to see what the actual query looks like, turn on “Show the SQL query” from the Settings page (admin/structure/views/settings).

Then in the preview area, you should see the query that gets generated.

The above example is from the “People (User)” view.

Summary

If you want to add basic filtering across fields to your views, then this is the way to go. It’s useful for those custom admin pages which we create to help editors manage content. If you’re looking for something more advanced such as keyword searching, then look at using Search API.

Ivan Zugec

About Ivan Zugec

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 10 years and has successfully completed several large Drupal projects in Australia.

Oct 02 2018
Oct 02

Whilst at Drupal Europe last month, I was privileged to be invited by Drupal’s founder, Dries Buytaert, to a round table discussion, aimed at further marketing the Drupal project.

Bringing together a number of leaders from the Drupal community, we all shared the same desire to boost the marketable assets of the open source platform. One of the ways we hope to achieve this publicity is by creating a comprehensive, customer-facing "Pitch Deck".

The session began as a workshop, facilitated by Adam Goodman. He primed the group to start  identifying and explore opportunities to better convey the benefits of Drupal to the uninitiated. The ultimate objective is to encourage the adoption of the Drupal platform. Consensus was reached that we focus upon three separate initiatives.

  

We're not competing with one another, yet we’re not helping each other either. Our role as leaders is to activate the assets that already exist in the community. Bert Boerland

The initial plan it to create a marketing resource that will present Drupal’s credentials in a persuasive manner. This slide deck will also contain impressive exemplar case studies, to ease the process of convincing an organisation or client to choose Drupal.

The Team

I volunteered to take overall responsibility for the creation of the end result. Joining forces with Suzanne Dergacheva and Ricardo Amarowho bring rich, varied perspectives and skill sets, I feel confident providing the basis for this universal toolkit. But we can only be truly successful if many others contribute to our initiative. We need sales people, marketers, copywriters to join our cause.

Get Involved Today

Providing a single and persuasive resource, available for all Drupal promoters, to sell the powerful advantages of Drupal will benefit all who use it. With strong consistent messaging, and bolstered by the many Drupal success stories, the deck will position all advocates better to expand the Drupal market share across many scenarios.

With a core team of fellow Drupal professionals, we plan to cover as many topics as we can identify, from security, accessibility and performance functionality through to specific industry verticals, like Higher Education or Media. The key intention is to show how Drupal can adapt to fit projects of all shapes and sizes, across all industries.

 

The Benefits

Many of Drupal’s competitors (think Wordpress, Squarespace etc.) are widely publicised and, consequently, innately popular. In many cases, Drupal may well be the ideal platform for a project, but it risks losing out to competing CMS providers as the success and potential of Drupal is not easily demonstrated.

Our intended users are sophisticated purchasers. As they ask more and more questions, our responsibility grows to equip agencies with comprehensive information. By using the collaborative resource, agencies will be able to accurately sell the Drupal platform, whilst spending more of their energy and resources focusing on the services they deliver. Freeing up time from writing and re-writing duplicated Drupal sales, organisations will be left to promote their unique strengths.


The Plan

We plan to kick off the project by identifying the high-level requirements and the mechanism to create the slide deck. From there, we hope to crowdsource for support, and seek volunteers from the wider business community. By recruiting sales people, marketers, copywriters and subject matter experts, we hope to create a well-rounded resource, targeted at the varied stakeholders of a new Drupal development project.

Brainstorm Notes from Drupal Europe RoundtableBrainstorm Notes from Drupal Europe Roundtable - Photo by Meike Jung

By working together, embracing open source ideals, we hope to rapidly achieve the first incarnation of the slide deck, ready for it to be built upon in the future. The sooner we create a draft, the sooner we can share the potential of Drupal with a wider audience. Projects like this prove that you needn’t be a web developer to be part of the welcoming Drupal community.

Get Involved!

If you’re interested in getting involved with this innovative project, please get in touch via our web form. Any contributions, big or small, will be gratefully received, as we strive to convert this idea into a reality.

Join the cause, let’s make Drupal better together!

Get Involved Today

Drupal.org Issue: Drupal "Pitch Deck" for Presenting to (Potential) Customers 

Sep 28 2018
Jay
Sep 28

Previously, we covered some simple tips that allow you to get more out of Drupal and I think we covered some basics. This time we are going to go a bit deeper to see what Drupal can really do. In the right hands, Drupal can be a very powerful tool for more than just content management. The following tips will take you through a few different topics to get more out of Drupal than ever before. Some of these tips are a bit more on the advanced side, but they are very useful.

Tip #1: Don't be afraid of caching

If you are at all familiar with website caching, then you know at least two things about it. It is useful for getting your pages to load faster, and it can be very complex. Caching is meant to speed up your site by putting your page together just one time and then simply redisplaying that rather than needing to build it anew every time. However, because of this, when something about how that content should display changes, that particular entry in the cache needs to be "invalidated" so that it doesn't continue to be used, which could result in it showing content that is no longer current.

Fortunately, Drupal 8 has a fantastic caching system, provided by two modules which are included in Core: Internal Page Cache and Internal Dynamic Page Cache. The former caches entire pages for users who aren't logged in, while the latter caches the individual components of pages (such as blocks and rendered nodes) for all users. On most Drupal sites, these should both be turned on. Drupal Core and most contributed modules are built with this caching already in mind, so it's easy enough to just turn on the modules and get a nice performance boost from doing so.

If you have lots of custom code which deals with how content renders, this may not be quite so simple, but it is still something worth looking into, especially if your site sometimes feels a bit slow.

Ready to get the most out of Drupal?  Schedule a free consultation with an Ashday Drupal Expert. 

Tip #2: Remove modules you don't need

Drupal, by default, usually comes with a whole suite of modules installed, some of which not every site needs. These include, for example, the Tour module (for creating tutorial-style interfaces which highlight certain parts of your site in) and the Search module (which provides Drupal's default searching mechanism and is useful only when your site doesn't warrant a different search solution). If you don't actually need a module, uninstall it, and if it is a contrib module rather than a core module, you can then remove it from your site's code entirely.

Every unnecessary module you have on your site can add clutter to the admin UI which makes it harder to find the things you actually want, and since each module can have its own potential security risks, uninstalling the ones you don't need can even help improve your site's security and stability.

Other core modules which are good candidates to consider removing are CKEditor (for sites which don't need WYSIWYG content), Color (for when you're using a custom theme and don't need to change its appearance through the UI), and Comment (if your site doesn't allow users to comment on content anyway). And that's just core modules in the C's!

Just be careful not to uninstall modules such as the Internal Page Cache module, which may not be specifically required to provide the site's intended functionality but which are important for keeping your site working smoothly. Consider each enabled module individually (and then, do the same with enabled themes!) 

Tip #3: Use the latest version of PHP

Drupal is written in PHP and is designed to take advantage of the new features and performance improvements provided by its latest versions. Although Drupal 8 can run on PHP versions as old as 5.5, it is now optimized for and fully compatible with PHP 7.2, and so a simple PHP version update can be a great benefit for your site's speed and reliability. You can check which PHP version your site is on from Drupal's Status report, and your hosting provider should provide a way to upgrade PHP if necessary.

Important: Versions of Drupal prior to 8.5 are only compatible up to PHP 7.1. If you're on Drupal 8.4 or older, you should be sure to update Drupal (which is an important thing to do anyway to get all of its latest features, bug fixes, and security updates) prior to switching to the new version of PHP.

Tip #4: Manage config the Drupal way

We've spoken a bit before about configuration management in Drupal 8, but it's important enough it's worth mentioning again. Back in the Drupal 7 and earlier versions, deploying changes to a site typically involved recreating a whole bunch of "clicks" in the user interface, to arrange fields and blocks, API settings, user roles and permissions, and pretty much any other aspect of the site's configuration. Drupal 8 makes that a whole lot simpler with its configuration management system. Although managing config can get quite complex for some sites, for most it is simple. Once you've made a bunch of changes on your development site that you want to roll out to live, you can export those changes into a zipped collection of YAML files. You can then upload that zipped file directly to your live site to import the changes, or save the YAML files into your codebase and roll them out alongside your code changes. We prefer to use the latter method since it also has the benefit of keeping your config in your version control system, but either method works fine, and a direct upload of config can be a bit simpler to manage.

Tip #5: Join the community

Drupal is open source software and is built by a large community of developers and designers from across the world, and joining that community by signing up for an account at drupal.org can result in some tangible benefits for your site. One easy benefit of this is that if you come across a bug in Drupal or one of the contributed modules you are using, or even if you just find that some feature you'd like it to have is missing, you can post a message in the drupal.org issue queues to get a discussion started with the very people who can make the sort of improvements you want. Often, if you search the issue queues, you may even find that somebody else has thought of the same thing you have, and there might even be a patch already available to give you the functionality you want. 

If you've had to create any custom modules or themes for your site, and they may be the sort of thing other people may find useful as well, it may be good to consider contributing them. If other people start looking at and using your custom modules, they may find ways to improve it and may even submit patches to fix bugs or add new features. Then it's easy to update your module with their recommendations, making it even more useful both for you and for the rest of the Drupal community.

There you have it. Five more tips to get the most out of Drupal. Some of these might seem obvious, but they are some big wins you can make for yourself and your website. We’ve been working with Drupal long enough that some of these seem like second nature and in time they may also be that way for you. Stay tuned for more Drupal tips in the future!

Offer for a free one-hour consultation, make you next project a success

Sep 26 2018
Sep 26

The Drupal Unconference is coming up in November and we can’t wait! Following the huge success of last year's event, we are once again proud to be Silver Sponsors of this alternative annual conference.

As active members of the Drupal community, several of our team are already preparing lightning talks to pitch on the day. To secure attendance for the majority of our large Drupal team, we have just bought a batch of tickets. To avoid disappointment, we encourage you to do the same! 

Unconference Tickets

[embedded content]Co-organiser, Eli, on what to expect

This year’s Unconference will be held on 3rd November at The Federation, Manchester. The annual unconference breaks the mould, with an informal, accessible programme. All talks are planned on the day by the attendees rather than organisers. Representing open source ideals, Unconference recognises that the best ideas can come from anyone, no matter their experience. First-time speakers and long-term contributors have equal opportunity to share their insights into the Drupal Content Management System.

For the second year in a row, we are proudly sponsoring the event and attending en mass. Our developers are preparing talks on a wide range of topics: from front-end design using Pattern Lab, to a bold career change, swapping auto body repairs for Drupal development. The unplanned structure of the Unconference enables speeches that are reactive to recent topics and events. As such, we expect some competition for the most innovative talk this year!

Not sure what to talk about?

You can reach beyond Drupal core and open source code. Unconference presentations will address a wide range of digital topics. With talks and insights expected to cover UX, databases, frameworks, security and front-end design. Web developers, devops, project managers, designers and marketers can all expect relevant and actionable takeaways from the event. Website owners and end users, no matter their technical experience, are welcomed to the inclusive conversation.

Unlike Drupal sprints, which focus on delivering working software and contributed modules, the Unconference is designed to be a rich learning environment. Offering real-world case studies and ideas, NWDUG invite anyone to share their digital experiences.

Hosted at The Federation, the 2018 event will be bigger and better than ever. With more space comes more opportunities for different speakers and discussion groups.

[embedded content]Explore the Venue

Last year’s event was a huge success, so we are optimistic for Unconference 2018 to be the best yet. We are excited to see new faces and new innovations from the open source community.

Join the welcoming Drupal community this November 3rd for a day that celebrates inclusivity, accessibility and open source software.

 

Find out more and order your tickets of the Unconference website. We'll see you there!

Unconference Tickets

Sep 25 2018
Sep 25

The Urban Hipster Drupal Commerce demo site was built to showcase what Drupal 8 and Commerce related modules can do. While the main focus has been Commerce, recently I started enhancing the content side of the site, mainly the blog. After all, Drupal is a content publishing platform at its core, so why not show how content and commerce can work on the same platform together. In the ecommerce world, that’s actually a pretty big deal!

In this Tech Talk video, I’ll show you how the Drupal core Comments module is used for blog commenting and product reviews. I also go into detail on how you can configure a role based publishing workflow using core’s Workflows and Content Moderation modules.

[embedded content]

Comments and reviews

All of the blog posts and products on the demo site use the core Comments module for customer feedback. This allows any level of user (anonymous, authenticated, etc.) to add comments or reviews to these content items. The configuration and permissions for the Comments module controls whether or not the comments need to be approved by an administrator before they appear on the site. When logged in, an administrator who has permissions to manage the comments can use both the frontend interface as well as a backend interface for deleting, approving, editing and finally replying to the comments.

Like any content entity in Drupal, comments are fieldable. This means that you can configure fields to allow for additional functionality for your comments. It’s not covered in this video, but it’s worth mentioning that this is how I was able to get a 5 star review system easily integrated into the product comments.

Content moderation workflows

Drupal core also has a couple modules for letting you define a process for adding specific types of content to your site. The Urban Hipster blog is now setup to be an example for this. 

The first aspect to configure is the workflow. Workflows is where you determine what content will make use of the workflow, the “states” that the content will transition through, and finally the transitions that can happen at any given state. These things all need to be configured first before moving on to permissions.

The second aspect is assigning role based permissions to use the workflow. Permissions for workflows are found in the usual permissions backend page where all other permissions are set. Each workflow transition has a permission attached to it and so you just simply check the role that can perform each transition. You can create new roles if you need to.

View the live example

As mentioned, the Urban Hipster Drupal Commerce is an example of what can be done. Try it out yourself and see what you think. Here are some username/password combinations that will let you check out the workflows in action. The site refreshes every night so you don’t need to worry about breaking anything.

Role based workflow logins:

  • Blog author: blogauthor/blogauthor
  • Blog reviewer: blogreviewer/blogreviewer
  • Blog publisher: blogpublisher/blogpublisher

Administrator login (for viewing the configuration):

  • Administrator: demoadmin/demoadmin
Demo Drupal Commerce today! View our demo site.
Sep 24 2018
Sep 24

Culture. It's the only truly sustainable competitive advantage for a Drupal business.  But what does that look like in action? I've seen firsthand how that culture extends far beyond Mediacurrent's business and customer service approach, shaping the way we network. 

We have all been to a party, lunch, or even coffee and cookies with a vendor trying to make a connection with you or your company. You can separate all of these into two basic categories: those that you walk into and have fun and those you walk into defensively because you know the goal is to pitch a sale to you.

Hosting a networking event can be a costly endeavor for your company and there is no guarantee that you will receive a high percentage of return on your investment. Between your time investment, activities, and potentially cost of a space, expenses can begin to pile up quickly.

Hitting that optimal zone where customers or potential clients will feel relaxed and are open to conversation is key to reaching your maximum potential for ROI for your event. There are several ways you can do this, but it all starts with one word.

Passion.

Passion for what you love is the difference between just hosting an event and connecting with the community in your field of business. The goal is to show your passion for what you do, and the community you are in -- in our case, the open source and Drupal communities.  

DrupalCon 2018 conference aerial group shot

Take the Dave and Paul approach for example. Over DrupalCon 2018, they threw an amazing after party hosted by Mediacurrent. Everything down to the invites was inclusive to all (not just those with purchasing power) with the message of “Hey, we are throwing a party, come to hang out! Hope to see you there.” Every single person was treated like a friend.

karaoke at Mediacurrent's DrupalCon Nashville after party

While at the party, the sales team focused on just interacting, listening to people’s experience and thanking the community for showing up. This approach made people feel so comfortable that if they had a sales question, they would just ask.

When a person feels welcomed, unpressured and a part of the group, then it's easy for them to make the leap from conference attendee to a potential client. Remember: you and everyone who attends your function is a part of the same community. If you view them as just potential sales, then this will be translated into your body language and verbiage.

In closing, being a part of the Mediacurrent team has reaffirmed for me the value of networking with authenticity. Hosting your event with the passion you have for the community you are a part of will shine through to everyone who attends and solidify you in their mind as the right partner for their project.

Sep 20 2018
Sep 20

As we enter the month of September and start planning for 2019, it’s a good time to take stock of where Drupal is as a project and see where it’s headed next year and beyond.

Dries Buytaert, founder of Drupal, recently wrote his thoughts around the timeline for Drupal 9 and “end of life” for Drupal 7 and 8. We will look at current Drupal 8 adoption and assess where we sit in 2019 as well.

An important part of this discussion that deserves attention is the rise of Javascript as a programming language, in particular, the rise of React.js. This technology has put CMSs like Drupal in an interesting position. We will look at how React/Javascript are evolving the web and assess what that means for the future of Drupal.

Finally, we will wrap up with thoughts on what these changes mean for both developers and organizations that use Drupal today or evaluating Drupal.

Drupal 8 Adoption

As mentioned previously, Dries has offered his thoughts on the proposed timeline for Drupal 9 in a recent blog entry on his website (see below).

timeline: Drupal 9 will be released in 2020. Drupal 8 end of life is planned for 2021

In early September Drupal 8 released version 8.6.0 which included major improvements to the layout system, new media features, and better migration support. This is in addition to many other improvements that have been released since Drupal 8.0 was first unveiled in late 2015.

In terms of adoption, Drupal has picked up steam with 51% growth from April 2017 to April 2018.

Dries Keynote Drupalcon 2018

graph showing that as of April 2018, 241,000 sites run on Drupal

As encouraging is that news is, it’s still should be noted that Drupal 7’s popularity still far exceeds Drupal 8 both in current usage (800k compared to 210k+ sites) and in terms of growth year over year. 

Drupal’s weekly project usage from August, 2018

graph shows Drupal 7 adoption exceeds that of Drupal 8

Drupal 7 will reach its end of life likely around November 2021 with paid support extending the lifetime with commercial support (as was the case with Drupal 6). Will Drupal 8 reach the level of usage and popularity D7 has? Perhaps not but that is largely due to focus on more robust, “enterprise” level features.

Drupal as a CMS sits largely in between Wordpress and enterprise proprietary CMSs like Adobe CMS and Sitecore in the marketplace. With the release of Drupal 8, the project moved more into the direction of enterprise features (which could explain some of the fall-off in adoption).

Pantheon had two excellent presentations (also at Drupalcon Nashville) that dive deeper into Drupal’s position in relation to other projects, most notably Wordpress. I would recommend watching WordPress vs Drupal: How the website industry is evolving and What's possible with WordPress 5.0 for more information on this topic.

According to builtwith.com, Drupal still has a sizable chunk of Alexa’s Top Million Sites. It should also be noted that Drupal does better the higher you go up the list of those sites which underscores the project’s focus on the enterprise.

CMS market share (builtwith.com)

5% of Alexa's Top Million sites run on Drupal

Drupal usage statistics (builtwith.com)

8.5% of the top 10k websites run on Drupal

With the release of Drupal 8, Drupal’s target audience started consolidating more towards the enterprise user. In the future Drupal’s success as a project will be tied more closely to performance against platforms like Adobe CMS and Sitecore in the marketplace.

React (and Javascript) take over the world

The thing about Javascript is that it’s been around forever (in tech terms) but recently has taken off. I won’t detail all the reasons here. Seth Brown from Lullabot has one of the best write-ups I have seen from a Drupal community perspective. In short, the ability now to run Javascript both in the browser and on the server (Node.js) has led the surge in Javascript development. Github shows us that more projects are built with Javascript than any other technology and Stack Overflow’s survey tells us that Javascript is the current language of choice.

Stack Overflow 2018 survey results

Javascript is the most popular language

Github projects 2018

2.3 million Javascript Github projects

Dries recognizes the importance of Javascript and has spoken about this recently at MIT. In a bit, we will look at some of Dries’ ideas for the future in relation to the Drupal project.

A few years ago we saw several Javascript frameworks pop up. These became very popular for single page applications (SPA) but also had broader appeal because they could make any website feel more interactive. React.js & Ember.js were both released in 2015 and Angular.js is older but has started getting more attention around the same time.

A big issue that needed to be solved with these frameworks was how to address SEO. Initially, these frameworks only rendered the page in the browser which meant site content was largely hidden from search engines. For SPA’s this was not necessarily a deal breaker but this limited the broader adoption of this technology.

Only fairly recently have we seen solutions that are able to use the same framework to serve pages both in the browser and on the server. Why do I bring this up? Because this has been one of the more difficult challenges and React.js addresses it better than any other framework. There are many reasons why React.js adoption is exploding but this is why I believe React is king.

The State of Javascript report from 2017 is often referenced to illustrate React’s popularity (see below):

survey respondents indicated that they have used and would use Javascript again - more than other technologies

John Hannah also has some great graphs on javascriptreport.com that demonstrate React’s dominance in this space (see below).

Npm downloads by technology (1 month)

React downloads (1 month) exceed angular and vue

Npm downloads by technology (1 year)

React downloads (1 year) exceed angular and vue

Finally it should be noted that Facebook’s technology, GraphQL paired with React.js is also on the rise and intertwined with the growth of this technology. GraphQL will come into play when we look at how CMSs are adapting to the surge in Javascript and Frontend frameworks.

React and the CMS

Is React compatible with CMSs of ‘ole (e.g. Wordpress, Drupal, etc.)? Well, yes and no. You can integrate React.js with a Drupal or Wordpress theme like you can many other technologies. In fact, it’s very likely that Drupal’s admin interface will run on React at some point in the future. There is already an effort underway by core maintainers to do so. Whether or not the admin will be fully decoupled is an open question. 

Another example of React admin integration is none other than Wordpress’ implementation of React.js to create the much anticipated Gutenberg WYSIWYG editor.

Gutenberg editor

screenshot of empty Gutenberg editor

In terms of websites in the wild using React with Drupal, there have been solutions out there (TWC, NBA, and others) for many years that use Drupal in a “progressively decoupled” way. The “progressive” approach will still exist as an option in years to come. Dries wrote about this recently in his blog post entitled “How to decouple Drupal in 2018.”

The problem I have with this type of solution is that sometimes you get the best (and worst) of both worlds trying to bolt on a Javascript framework onto a classic templating system. The truth is that Drupal’s templating theme layer is going to have trouble adapting to the new world we now live in (addressed in detail at Drupalcon’s “Farewell to Twig”). 

The real power of React is when you can combine it with GraphQL, React router and other pieces to create a highly performant, interactive experience that users will demand in years to come. To accomplish this type of app-like experience, developers are increasingly looking to API’s to address this dilemma, which we will examine next.

CMS as an API

The last couple of years there have been many Cloud CMS-as-an-API services pop up that have been generating some attention (Contentful might be the most popular). At this time it doesn’t appear that these API’s have disrupted market share for Wordpress & Drupal but they do signify a movement towards the idea of using a CMS as a content service. 

The “Decoupled” movement in the Drupal community (previously known as “Headless”) has been a big topic of conversation for a couple of years now. Mediacurrent’s own Matt Davis has helped organize two “Decoupled Days” events to help the Drupal community consolidate ideas and approaches. Projects like Contenta CMS have helped advance solutions around a decoupled architecture. Dries has also addressed Drupal’s progress towards an “API-first” approach recently on his blog.

While cloud services like Contentful are intriguing there is still no better content modeling tool that Drupal. Additionally, Drupal 8 is already well underway to support JSON API and GraphQL, with the potential to move those modules into core in the near future.

As I look at the landscape of the modern technology stack, I believe Drupal will flourish in the enterprise space as a strong content API paired with the leading Javascript Frontend. React & GraphQL have emerged as the leading candidates to be that Frontend of record.

Next, we will look at a relatively new entrant to the family, JAM stacks, and see where they fit in with Drupal (if at all?) in the future.

JAMStacks - The Silver Bullet?

The popularity of Netlify hosting and static generators has created some buzz in the Drupal community, particularly Gatsby.js, which we will examine in a moment.

Netlify provides some great tooling for static hosted sites and even offers its own cloud CMS. Mediacurrent actually hosts our own website (Mediacurrent.com) on Netlify. Mediacurrent.com runs on Jekyll which integrates with a Drupal 8 backend so we are well aware of some of the benefits and drawbacks of running a static site.

Where Drupal fits into the JAM stack is as the ‘A’ (for API), with ‘J’ being the Javascript Frontend (i.e. React) and ‘M’ being the statically generated markup. Back in 2016 we liked this idea and settled on Jekyll as the tool of choice for our rebuild as it was the most popular and well supported project at the time.

Since then Gatsby.js has risen dramatically in popularity and has a robust source plugin system that enables it to be used as a Frontend for many platforms including Drupal and Wordpress.

The creator of Gatsby, former Drupal developer Kyle Matthews recently spoke on the subject at Decoupled Days 2018. While it’s hard to know if JAM stacks like Gatsby having staying power in the years ahead they do have a lot of appeal in that they simplify many of the decoupled “hard problems” developers commonly run into. The question of scalability is an important one yet to be answered completely but the upside is tremendous. In a nutshell, Gatsby provides an amazingly performant, React/GraphQL solution that can pull in content from practically any source (including Drupal).

Do JAM stacks like Gatsby have staying power? Will these close the complexity gap that blocks more sites (large or not) from decoupling? We will have to stay tuned but the possibilities are intriguing.

Looking Ahead

We have examined the state of Drupal as a project, future release plans and how it is adapting towards a future that is “API First” that also fits well with the React world in which we now live. 

The main takeaway I would offer here is that Drupal, while still an amazing tool for managing content, is better suited as a technology paired with a leading Frontend like React. With the web evolving from monolithic systems to more of a services-type approach, it makes sense to use a best-in-class content modeling tool like Drupal with a best-in-class FE framework like React.js. 

What does that mean for the average Drupal developer? My advice to Drupal developers is to “Learn Javascript, deeply.” There is no time like the present to get more familiar with the latest and greatest technology including GraphQL.

For organizations evaluating Drupal, I do think the “Decoupled” approach should be strongly considered when planning your next redesign or build. That being said, it’s important to have an understanding of how the pieces fit together as well as the challenges and risk to any approach. This article attempts to present a high-level overview of the technology landscape and where it’s headed but every organization’s needs are unique. At Mediacurrent we work with clients to educate them on the best solution for their organization. 

Have questions or feedback? Hit me up at https://twitter.com/drupalninja/

Sep 19 2018
Sep 19

Spotlights shining on the Drupal 8 logo

Webform in Drupal 7 was always one of the top 10 must-haves on any Drupal site. Then Drupal 8 came along, and Webform wasn’t in the picture at first. Luckily, Drupal 8 came with the contact module in core that took care of most form needs, and we lived without the Webform module.

In the meantime, Drupal contributor Jacob Rockowitz had been working on the YAML Form module, which was a module used to define webforms in YAML files. At some point towards the end of 2017 YAML Form switched to the Webform namespace and Webform in D8 was born.

The Drupal 8 version of Webform will feel familiar to those with experience in the Drupal 7 version, but this is a completely new module and code base. It’s a really great tool for content creators to use, by giving them the ability to create complex forms without having to worry about code. However, as a developer, I found it tedious to create long forms through the Webform UI. Those days are in the past now, since Webform is a descendant of the YAML Form module, you still have the ability to define a form using YAML in the source tab of the build screen.

Screenshot showing direct editing in YAML

Direct editing in YAML really speeds things up for developers, and content creators can still use the UI to create and edit. It’s the best of both worlds.

The Webform module in Drupal 8 is such a powerful and fully featured form builder, that it could be reason enough alone for some site owners to switch to Drupal 8. If you run a site that is in need of new or dynamic forms on at least a monthly basis, then Drupal 8 + Webform would be a lifesaver and a budget saver. Personally, I find that Drupal 8 with Webform rivals any of the standalone form building tools available. There are dozens of features and settings that you get out of the box, and it’s easily extendible if you need to integrate with an outside service.

Like most things in Drupal 8, webforms created with Webform can be exported and synced as config. Webform also plays nice with Features if that’s your thing.

We still custom build many forms in Drupal 8 using the Form API, but Webform is a great tool to keep in mind when things need to be editable by administrators or when you just need a simple solution. It already deals with storage, email, and so many other things out of the box. If you have any webform needs, don’t hesitate giving Webform a shot.

Sep 16 2018
Sep 16

Privileged to be given the opportunity by organisers at Drupal Europe to share Peace Through Prosperity‘s journey with the Drupal community. Thank you!

This was the third rendition of this talk since 2015, and in this time our charity, our work, progress of our beneficiaries and our learnings from it have come a long way.

What started as a one way street for transfer of frameworks, tools and strategies from digital transformation to effect societal transformation has gone full circle over past couple of years. Eight years into the journey and am now cross-pollinating approaches and ideas from societal transformation back into my work as a digital transformation coach and consultant.

Suppose it was a matter of time when I started seeing patterns from marginalised individuals and communities back into the work place with disengaged teams and individuals! But that’s for another post!

As mentioned in my session there are two call to actions to further Peace Through Prosperity’s journey to continue and scale our work…

  1. We are looking to partner with organisations on their Corporate Social Responsibility(CSR) programs – kindly reach out to your organisation’s CSR people and suggest sponsoring Peace Through Prosperity just as DropSolid currently do! We are looking to raise €30k with which we’d be able to engage with 800 micro-entrepreneurs in a 12 month period!
  2. Steal our stuff – connect us with your friends, customers and acquaintances in the charity sector, we would like for them to steal our open source products and programs, incorporate them in their existing work and we will support them in the task! it’s free!

My session at Drupal Europe coincided with Peace Through Prosperity running a mini-MBA for our third all female cohort in Lyari, Karachi! here’s 35+ micro-entrepreneurs from a marginalised community in Karachi stepping out of their comfort zone and graduating from the program! Well done ladies!

Interested to learn more? would you like to get involved? Cool! get in touch, you know how to find me!

And lastly I’d like to add a special mention for Druid from Finland! these folks brought along SWAG for kids! their T-shirts are an absolute hit with mine! #Thankyou

#DrupalEurope #Agile #Transformation #Society #Entrepreneurs #InternationalDevelopment

Sep 14 2018
Sep 14

Illustration showing multiple components of an SEO strategy 

Drupal has a bunch of great SEO tools. Here are several tips and suggested modules for fine tuning SEO within Drupal. Easy SEO wins can be achieved through configuring metatags and URLs. Don’t forget to setup an XML sitemap of your site and submit to major search engines. SEO isn’t a once and done effort, make sure to constantly research and update with search trends.

Yes, but is it good for SEO? This is a question we hear all the time when we mention all of the wonderful capabilities of a Drupal site. First off, let's dispel the myth that there is a CMS that automatically does magical SEO and makes all of your pages rank higher in search. If you want good SEO, the most important thing that you can do is write good and unique content that humans actually want to read. The CMS or web software has nothing to do with it. So let's assume that you already have great content and semantically perfect markup, there are tons of other little things that you can do to further boost your content in the eyes of search engines and Drupal is a great tool for implementing them.

To get the most out of Drupal SEO, you are going to want to download a couple of contributed modules from drupal.org.

The following is a list of our goto modules for SEO that I am going to talk about in this post:

Using Metatags to Help Search Engines

Metatags are important for search engines to index, categorize, and understand the content of your webpage. There are a lot of different metatags but a couple that really matter for SEO are the meta description and the title tags. Meta descriptions can be used as a summary in search engines, so it is important to write some compelling content here. It’s the first pitch to a potential site visitor so you may want to put a little thought into it. What if you have hundreds or thousands of pages on your site? The Drupal contributed Metatag module provides a way to dynamically set metatags based on content type, or on other content rules you may have. Working with the Token module you can have all of your metatags, including the description, generated based off of your content. For those pages that you are really trying to squeeze the SEO juice out of, Metatag allows you to override for when you need to fine tune things.

Which CMS is best for your website?  Take our CMS Quiz and find out!

If you want to take things further with metadata, you can also install the Schema.org Metatag module which extends the base Metatag module. You can read more about the Schema.org project here. In a nutshell Schema.org is making a push for people to further define what kind of content they are writing by breaking things into categories of content that a search bot can read. The types of content that they have defined is very granular with deep sub categories. Check them all out here. Having Schema.org metadata, can give you a leg up on your competition as more devices and services start reading and prioritizing web sites based on this content categorization data.

URLs Should be Informative and Human Readable

Having URL paths that make sense can go a long way for SEO. Search engines are able to parse relevance from the words in a URL. For example a URL that is “example.com/node/34” gives no information as to what the topic of the page is. Alternatively, this URL “example.com/store/shirts/blue-shirt” can tell a lot more to a search bot. The Pathauto module enables you to make descriptive URLs. Similar to the Metatag module, you can use this with the Token module to automatically build new URLs based on the type of content you are creating. These are referred to as “patterns” in the Pathauto module. Paths generated by Pathauto can also be changed on a one by one basis, so you can overwrite the generated name in favor of a custom one.

Another useful module related to URLs is the Redirect module. The redirect module does a handful of useful things. Every time you go and change a URL, the redirect module will create a 301 redirect from the previous URL to the new URL. This is helpful when you are updating a page that may have been bookmarked or linked to elsewhere. 301 is the status code that a web server sends when a requested page has been moved and tells the browser to redirect to the new page. 301 redirects are essential to having good SEO, search bots give a poor evaluation to sites with a bunch URLs that go nowhere and humans don’t really like it either.

The Redirect module also comes with a really handy utility page called Fix 404 pages. 404 is the status code that a web server sends when a requested page doesn’t exist. We have all seen these annoying messages from time to time. Sometimes the page has been deleted and sometimes it has simply been renamed and moved, with a 404 message there is no way to know where the page you are looking for is and will leave you thinking that maybe you just visited the page in a dream. The Fix 404 pages utility gives you a report of all of the 404 URLs that your site is sending, it also tells you how many times a URL has been tried and the last time someone tried to go there. This report gives you the opportunity to add a redirect for those 404 URLs and send those users to a relevant page. This is a big boost for SEO because 301 > 404 in the eyes of a search bot.

Provide a Sitemap to Better Direct Search Bots

Search bots work hard, 24/7 365 days a year they are out there crawling the web to make your search experience better. So make it easy on them and provide a roadmap for traversing your site. This is done with an XML sitemap. An XML sitemap is simply an outline of your site’s pages with priority and update frequency all wrapped up in the XML format. We typically build a custom solution for generating an XML sitemap, but there is a Drupal contributed module out there to help you do it without needing to know how to write XML. The XML Sitemap module allows you to configure your sitemap based on things like content types or menu structure. Once you have a sitemap, go ahead and give those search bots a jump start and submit it to the search engines. Each search engine has a different process for doing this, so make sure you submit to more engines than just Google, the XML Sitemap module has a built in tool for submitting to search engines as well.

Research and testing

Lastly, let's talk about Google Analytics and so I don’t have to write that out a bunch of times i'm going to refer to Google Analytics as GA. GA won’t do anything to help your SEO, but it is a crucial tool for analyzing how effective your SEO work has been. The Drupal contributed Google Analytics module makes it easy to set up on your Drupal site. A good SEO strategy is all about testing and adjusting. Make some assumptions about what topics or keywords you think will drive traffic to your site but don’t stop there. Turn your assumptions into tested data with GA. Your website should be a testing ground for new search words, as you see traffic spike up around a search term adjust the rest of your content to cater to those search terms. GA is currently the best tool available for tracking visitors on your site. With testing and study eventually you will land on the right terms and words to use so that the right people find their way to your amazing content.

 image with text offering access to our free CMS Selection quiz.

Sep 13 2018
Sep 13

This is Part 1 of a three part series about choices you can make with the news of Drupal 9’s release. Part 1 is an overview. Part 2 is what to do if you choose to stay on Drupal 7. Part 3 is what to do it you choose to upgrade to Drupal 8. 

Yesterday at Drupal Europe, Drupal founder and lead developer Dries Buytaert gave a keynote that outlined the future for Drupal, specifically the release of Drupal 9, and how it impacts the lifespan of Drupal 7 and Drupal 8.

For the TL;DR crowd, the immediate future of Drupal is outlined in the snappy graphic above, and shared again below (thanks, Dries!).

The big takeaways are:

  • Drupal 9 will be released in 2020.
  • Drupal 7 end-of-life will be extended out to 2021, even though Drupal usually only supports one version back.
  • Drupal 7 and Drupal 8 will be end-of-life in 2021.

Wait… what? This proposed schedule breaks with tradition – Drupal has always supported one version back. And this schedule gives D8 users a single, short year to upgrade from Drupal 8 to Drupal 9.

So what now? Wait until 2021 to move your site off Drupal 7? Do two (possibly costly) upgrades in three years? Bail on Drupal entirely?

First and foremost, Don’t Panic.

Let’s explore each of the options in a little more detail to help inform your decision making process.

Upgrade from Drupal 7 to 9

When Drupal 8 became available, a lot of organizations using Drupal 6 opted to wait and bypass Drupal 7 entirely. The same is certainly an option for going from D7 to D9.

On the plus side, taking this route means that it’s business as usual until 2020, when you need to start planning your next steps in advance of 2021. Your contributed modules should still work and be actively maintained. Your custom code won’t have to be reworked to embrace Drupal 8 dependences like Symfony and the associated programming methodologies (yet).

Between now and then, you can still do a lot to make your site all it can be. We recommend taking a “Focused Fix” approach to your D7 work: rather than a wholesale rebuild, you can optimize your user experience where it has the most business impact. You can scrub your content, taking a hard look at what is relevant and what you no longer need. You can also add smaller, considered new features when and if it makes sense. And savvy developers can help you pick and choose contributed solutions that have a known upgrade path to Drupal 8 already.

But it isn’t all roses. Delaying potential problems in updating from 7 to 8 doesn’t make those problems go away. Drupal 9 will still require the same sort of rework and investment that Drupal 8 does. It is built on the same underlying frameworks as Drupal 8. And Drupal is still going to push out some updates to Drupal 7 up until its end-of-life, most notably requiring a more modern version of PHP. Changes like this will definitely affect both community-driven modules and any custom code you may have as well.

Upgrade from Drupal 7 to 8 to 9

“Ginger Rogers did everything [Fred Astaire] did, backwards and in high heels.”

— Bob Thaves

Colloquially, the most efficient way to get from Point A to Point B is a straight line. Major versions of a platform are effectively a line. In this case, you can think of that “straight line” as going from D7 to D8 to D9, instead of trying to go around D8 entirely.

It’s critically important to understand one unique feature of Drupal 9: It is designed from the ground up to be backwards compatible with Drupal 8.

Angie Byron, a.k.a. Webchick, gave an excellent talk about what this really means at BADCamp last year.

[embedded content]

Again for the TL;DRs — “backwards compatibility” means that code is deprecated and ultimately removed  from a code base over time in a way that provides a lot of scaffolding and developer notice. This practice results in major version upgrades that require very little rework for the site to stay functional.

The backwards compatible philosophy means that the hard work you do upgrading to Drupal 8 now will still be relevant in Drupal 9. It won’t be two massive upgrades in three years. As long as your Drupal 8 site is up to date and working properly, D9 should not bring any ugly surprises.

Have more questions about Drupal 7 vs 8 vs 9? Contact us and we’d be happy to help with your project.

Let’s talk community code

When Drupal 8 was released, one of the BIGGEST hurdles the community faced (and continues to face) was getting contributed modules working with the new version. It required ground-up rewrites of… well… pretty much everything. A lot of modules that people were using as “basics” in Drupal 7 were folded into Drupal 8 core. But a number were not, and people volunteering their time were understandably slow to bring their contributed code over to Drupal 8. As a result, many sites were hesitant or unable to upgrade, because so much work would have to be customized to get them to same place the were on Drupal 7.

So will it be the same story going from Drupal 8 to Drupal 9? Will we have to wait years, in some cases, for our business-critical tools to be updated?

According to Dries’ post, the answer is no. Drupal is extending the backwards-compatible philosophy to the contrib space as well.

… we will also make it possible for contributed modules to be compatible with Drupal 8 and Drupal 9 at the same time. As long as contributed modules do not use deprecated APIs, they should work with Drupal 9 while still being compatible with Drupal 8.

— Dries Buytaert

Assuming  this plays out as intended, we shouldn’t see the same dearth of contrib support that we did when Drupal 8 became a reality.

And yes. There are a lot of assumptions here. This is Drupal’s first pass at a backwards-compatible upgrade methodology. There is inherent risk that it won’t work flawlessly. All we can say for sure is that the community is very hard at work getting to a reliable release schedule. A thoughtful upgrade approach should make the “Drupal Burn” associated with major version upgrades a thing of the past.

So which way should I go?

So which approach is best? For starters, think about whether an upgrade benefits you in the immediate term. Read a little about Drupal 8, audit your site with our website checklist, and if you still aren’t sure, you can start with our quiz.

If all of this feels overwhelming, contact us. Kanopi Studios is known for its great support (if you choose to stay on D7), as well as great design and build execution (if you choose to go to D8). Whichever way you choose, we’ve got you covered.

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