Jul 11 2018
Jul 11
July 11th, 2018

Someone recently asked the following question in Slack. I didn’t want it to get lost in Slack’s history, so I thought I’d post it here:

Question: I’m setting a CSS background image inside my Pattern Lab footer template which displays correctly in Pattern Lab; however, Drupal isn’t locating the image. How is sharing images between PL and Drupal supposed to work?

My Answer: I’ve been using Pattern Lab’s built-in data.json files to handle this lately. e.g. you could do something like:

footer-component.twig:

... {% footer_background_image = footer_background_image|default('/path/relative/to/drupal/root/footer-image.png') %} ... {%footer_background_image=footer_background_image|default('/path/relative/to/drupal/root/footer-image.png')%}

This makes the image load for Drupal, but fails for Pattern Lab.

At first, to fix that, we used the footer-component.yml file to set the path relative to PL. e.g.:

footer-component.yml:

footer_background_image: /path/relative/to/pattern-lab/footer-image.png footer_background_image:/path/relative/to/pattern-lab/footer-image.png

The problem with this is that on every Pattern Lab page, when we included the footer copmonent, we had to add that line to the yml file for the page. e.g:

basic-page.twig:

... {% include /whatever/footer-component.twig %} ... {%include/whatever/footer-component.twig%}

basic-page.yml:

... footer_background_image: /path/relative/to/pattern-lab/footer-image.png ... footer_background_image:/path/relative/to/pattern-lab/footer-image.png

Rinse and repeat for each example page… That’s annoying.

Then we realized we could take advantage of Pattern Labs global data files.

So with the same footer-component.twig file as above, we can skip the yml files, and just add the following to a data file.

theme/components/_data/paths.json: (* see P.S. below)

{ "footer_background_image": "/path/relative/to/pattern-lab/footer-image.png" }     "footer_background_image":"/path/relative/to/pattern-lab/footer-image.png"

Now, we can include the footer component in any example Pattern Lab pages we want, and the image is globally replaced in all of them. Also, Drupal doesn’t know about the json files, so it pulls the default value, which of course is relative to the Drupal root. So it works in both places.

We did this with our icons in Emulsify:

_icon.twig

paths.json

End of the answer to your original question… Now for a little more info that might help:

P.S. You can create as many json files as you want here. Just be careful you don’t run into name-spacing issues. We accounted for this in the header.json file by namespacing everything under the “header” array. That way the footer nav doesn’t pull our header menu items, or vise-versa.

example homepage home.twigthat pulls menu items for the header and the footer from data.json files

header.json

footer.json

Web Chef Brian Lewis
Brian Lewis

Brian Lewis is a frontend engineer at Four Kitchens, and is passionate about sharing knowledge and learning new tools and techniques.

Web Chef Dev Experts
Development

Blog posts about backend engineering, frontend code work, programming tricks and tips, systems architecture, apps, APIs, microservices, and the technical side of Four Kitchens.

Read more Development
Jul 09 2018
Jul 09

Strata Center at MIT

Strata Center at MIT

Nestled right off Main Street in Cambridge, Massachusetts lies the Ray and Maria Stata Center on the campus of the Massachusetts Institute of Technology (MIT).  This abstract building designed by Pritzker Prize-winning architect Frank Gehry was the perfect venue to house the longest running, front-end focused Drupal conference in the US, Design 4 Drupal.  It demonstrates that the modern and abstract design Cambridge and MIT has seen can work perfectly with the structure needed within.

The Design 4 Drupal conference highlights training sessions and seminars focusing on designing for, and building the “front-end” of websites, or what gets seen and used by end users.  This area of focus encompasses graphic design, user experience, accessibility, performance, tooling, and much more.

Like a lot of our Higher-Ed clients, MIT is a user of Drupal, and is proud to offer this space to the Drupal community to learn and share knowledge.  I was pleased to be asked to present two sessions at the conference, and even more pleased with the knowledge I was able to take away from attending the event.

Meta and Schema: Defining the Content about your Content

The first session I presented focuses on designing and implementing a metadata strategy for your website.  Metadata is the content that describes your content. It is very important in how web pages are found in search engines, and how they are displayed on social network sites.

The presentation is a deep dive into the different specifications for meta tags and Schema.org schemas, how to decide what to markup, and then how to text and validate that you’ve done it correctly.

This session was not recorded due to technical difficulties, but the slides are available at jimbir.ch/meta-schema-drupal

Building a Better Page Builder with Bootstrap Paragraphs

The second session presented reviews the Bootstrap Paragraphs module for Drupal 8 that I developed and how it combines the power of the world’s most popular front end framework, Bootstrap, with Drupal Paragraphs, the powerful module that allows content creators to build layouts and structured pages using content components.

Last session begins for #D4DBoston #Design4Drupal 2018 with @thejimbirch and Lego Uncle Jim explaining the Bootstrap Paragraphs pic.twitter.com/p1zBJv2bMZ

— Dwayne McDaniel (@McDwayne) June 28, 2018

I have been working on this module since I first presented it at the BADCamp 2016 Front-end Summit.  The module installs a suite of components that allow content creators to quickly build out pages.

I love giving this presentation because I always get great feedback from people who use the module; who are going to use the module; or who are going to use my methodology to create their own version that fits their specific needs.  The module currently has over 25,000 downloads, and has had users from all around the world.

You can watch a recording of the session here.

Need help designing your website? Contact us and we can help

The Keynotes

The Building Blocks Of The Indie Web – Jeremy Keith

The conference featured not one, but two great keynotes.  On the first day author and developer Jeremy Keith, who was also in town for An Event Apart Boston, presented a session in which he encouraged a return from social media publishing to independent publishing.  It was a great reminder that the web was ham radio before it was cable, and can still be so.

Learning about the IndieWeb principals from @adactio at @D4DBoston #D4DBoston #Drupal pic.twitter.com/nRDdbCKsld

— Jim Birch (@thejimbirch) June 27, 2018

Exploring the New Drupal Front-end with JavaScript – Dries Buytaert

The second keynote was given by founder and project lead of Drupal, Dries Buytaert.  Dries was the keynote at the very first Design 4 Drupal, so it was a special treat have have him back for the tenth anniversary.  His presentation reviewed the history of JavaScript on the web, API-first vs. API-only approaches and gave behind-the-scenes insights into Drupal’s JavaScript modernization initiative.

Exploring the New Drupal Front-end with JavaScript at @D4DBoston with Drupal founder @Dries #Drupal #Design4Drupal #D4DBoston pic.twitter.com/Eonj7XdAQz

— Jim Birch (@thejimbirch) June 28, 2018

The Sessions

Thanks to Kevin Thull, and the organizers of Design 4 Drupal,  most of the presentations were recorded and are available to anyone at Design 4 Drupal’s YouTube channel.  There was a broad mix of different types of sessions that covered developers, designers, User Experience (UX), Accessibility (A11Y), and Tools.  Below are some highlights of the sessions I went to.

Web Accessibility Tips and Tools – Abby Kingman

Abby gave a session that was near and dear to my heart.  We are always learning about how to make our websites more accessible, and Abby’s presentation covered where to find current guidelines and specifications, and then when onto to review tools for testing.  There are lots of great links to follow from this one.

This session validated the approach we take at Kanopi to accessibility in design and development.  A lot of the tools and testing techniques were all part of our processes, and I look forward to exploring the ones I didn’t know about!

Great detailed presentation reviewing the guidelines, laws, and tools used in Web Accessibility #a11y by @abbykinz at @D4DBoston !#Drupal #design4drupal #d4dboston pic.twitter.com/8QFlI4KFvx

— Jim Birch (@thejimbirch) June 28, 2018

Webform Accessibility – Jacob Rockowitz

Jacob is the current maintainer and a prolific blogger and thought leader in the Drupal-sphere.  We penned an article in advance of this presentation where he reviewed his thought process, and recorded his presentation.  My favorite takeaway from this presentation was:

“Learning about accessibility can be overwhelming. We don’t have to be accessibility experts. We just need to care about accessibility.”

Kanopi has a long history of both building new and retrofitting existing sites to be WCAG compliant.  This presentation showed me that our approach, ongoing learning and iteration have us on the right track.

“Learning about accessibility can be overwhelming. We don’t have to be accessibility experts. We just need to care about accessibility.” – @jrockowitz on working on #a11y in the Drupal Webform module at @D4DBoston #D4DBoston #Drupal #Design4Drupal pic.twitter.com/nEDIMdtyhs

— Jim Birch (@thejimbirch) June 27, 2018

Variable Fonts and Our New Typography – Jason Pamental

I’m a big fan of Jason’s body of work, from his book, Responsive Typography: Using Type Well on the Web, to his blog, and frequent appearances on the Talking Drupal Podcast.

Jason’s deep knowledge of typography truly shows in this presentation that gives a brief history of type, how it moved from paper to the screen, and how the future of digital typography will be with variable fonts.

I look forward to exploring more about variable fonts with the designers at Kanopi.  The design possibilities, and the performance gains make these new tools very attractive.

“Type is never neutral” and “Type is how we hear what we read”. Great thoughts from Variable Fonts and Our New Typography by @jpamental at @D4DBoston #Drupal #Design4Drupal #D4DBoston pic.twitter.com/v7TXhAFXRD

— Jim Birch (@thejimbirch) June 27, 2018

Building a Living Style Guide with Herman – in Your Sass! – Chris Wells

In this technical presentation, Chris Wells, CTO of Redfin Solutions gave a nice overview of Herman, which uses SassDoc to reads comments in your stylesheets to build a static website  that is your style guide. It is not as extensive as a full blown style guide like Pattern Lab, but can be very useful for smaller teams.

This presentation has me researching simple style guide solutions.  Not every project has the budget or need for a solution like Pattern Lab, but since I already try to comment style sheets and templates, it makes sense to do it in a way that something like Herman or KSS Node can parse.

Building a Living Style Guide with Herman presented by @sceo at @D4DBoston @Drupal #Design4Drupal #D4DBoston #Drupal pic.twitter.com/MOMct6Feld

— Jim Birch (@thejimbirch) June 27, 2018

Thanks!

Thanks to all of the volunteer organizers, especially Leslie Glynn, who was my point of contact before, during, and after the event, and in true New England fashion, made sure I took home some famous Boston cannolis for my mother.  Kanopians help organize a few different conferences across the states including BADcamp and MIDcamp, and we know putting on these conferences is a labor of love, so thank you!

Jul 03 2018
Jul 03

What’s the greatest entrepreneurship lesson that Mediacurrent partner Dave Terry has learned?

In a recent guest spot on the Good People, Good Marketing podcast, Dave weighs in on the evolution of open source technology and shares his path to building a leading Drupal-based agency.

Interview Sound Bites 

Technology should be shared and free. 

Giving back to the Drupal community is embedded in Mediacurrent’s DNA. Dave explains why that’s so important.

Culture is about people and who we hire. I know a lot of companies say that, but it’s really about putting the processes behind how you identify the right people within the company.

A successful company culture attracts great talent while also managing accountability with a distributed team. Here, Dave shares the three tenets of culture at Mediacurrent.

Tune in

Listen to the complete podcast, Episode 47: Interview with Dave Terry, on the Sideways8 blog.

Related Content 
Why Should Companies Support Drupal? | Blog
Drupal Contrib: Why it's Important | Video
Creating a Culture of Giving in Your Organization | Blog
 

Jul 02 2018
Jul 02

Recorded June 21st, 2018

This episode we welcome Jess Snyder who is on the planning committee for GovCon, coming up real soon in August, to talk about… GovCon.. Which is coming up real soon in August. We’ll cover some Drupal News, it looks like Bob has the Pro Project Pick this episode and Ryan will bring it to a close with The Final Bell.

Episode 38 Audio Download Link

Updates:

Jess Snyder from WETA, DC talking about Govcon

  • What do you do at WETA?

  • What got you into Drupal

  • What got you involved in GovCon

  • Any notable keynotes / sessions you’re looking at?

  • ** Random questions **

Drupal News:

Pro Project Pick:

Events: (https://www.drupical.com/?type=drupalcon,regional)

The Final Bell: (Ryan)

Jun 28 2018
Jun 28

The majority of Drupal's underlying code is PHP. As a Drupal developer, the better you know PHP, the better your code will be. In this Acro Media Tech Talk video, Drupal developer Rob Thornton discusses code nesting and how you can optimize your code in order to reduce unnecessary nesting. 

[embedded content]

Code nesting can basically be described as when a block of code is contained within another block of code. If you're code isn't well thought out, you can potentially end up with deep nesting that is both hard to read and difficult to maintain. Aside from reducing difficult to read code and making your code more maintainable, reducing the amount of nesting helps you find bugs and lets other developers contribute to your code easier. Rob uses a number of examples of common nesting scenarios, walking you through how to find and fix them.

If you liked this video, you might also like these posts too.

Contact us and learn more about our custom ecommerce solutions

Jun 27 2018
Jun 27

Community. Sharing. Helping. This is the spirit of Drupal. These things bind us all together. Be a part of it by joining us during Drupal Europe between 10–14 September 2018 in Darmstadt, Germany.

photo credit Susanne Coates @flickr

The track dedicated to Social + Non-Profit will gather ambitious life stories about helping others and projects whose purpose is to invest everything in making the world a better place. You will have the opportunity to meet colleagues from your field of interest and join forces, learn how to use pre-configured Drupal distributions and get inspired by ambitious social impact projects built with Drupal. Also learn how Drupal can be used to ensure accountability, trustworthiness, honesty, and openness to every person who has invested time, money, and faith into a non-profit organization. Talk and share ideas, learn from each other, improve, innovate … and take a leap forward. There are a lot of things you will learn, no matter your technical skill level. From developers to people with a big heart, you will for sure find something that inspires you.

Interested in attending? Buy your ticket now at https://www.drupaleurope.org/tickets.

We are looking for submissions in various topics. Here are some ideas to share your experience on with the rest of the world.

  1. Every nonprofit organization must apply the 3 E’s: Economy, Efficiency, Effectiveness. Economy forces you to handle your project with low budgets, that is almost always the case with non-profit organizations. Efficiency is required also due to low resources available to most non-profit organizations. Effectiveness ensures you get the job done and complete your targets. How are you doing that? What tools and practices ensure this?
  2. We live in a world that is changing every day and technology is a big part of it. What are the new technologies you integrate in social projects? What do you need and what do you find on the market? How drupal is helping you achieve your goals?
  3. Transparency, accountability and full disclosure on operations is a must for all non-profit organizations. People will donate to and support campaigns only if they know exactly where the money goes and how are things handled. This way, they ensure their credibility in front of the world. How do you technically implement this?
  4. A lot of people talk about making the world a better place. But talking is not enough. You have to take action! How do you plan to do it? How do social activities raise the level of engagement in your community? How are people’s lives improved by your actions?
  5. Non-profit is done mainly from the heart. Volunteering is the key word. What are your life stories about helping others, inspirational first hand experiences? Why, what and how did you do it? What drives you? What are your goals?

We look forward to your submission sharing you experience with the other attendees.

See you in Darmstadt!

About industry tracks

As you’ve probably read in one of our previous blog posts, industry verticals are a new concept being introduced at Drupal Europe and replace the summits, which typically took place on Monday. At Drupal Europe these industry verticals are integrated with the rest of the conference — same location, same ticket and provide more opportunities to learn and exchange within the industry verticals throughout three days.

Now is the perfect time to buy your ticket for Drupal Europe. Session submission is only open for a few more days so please submit your sessions and encourage others who have great ideas.

Please help us to spread the word about this awesome conference. Our hashtag is #drupaleurope.

To recommend speakers or topics please get in touch at [email protected].

About the Drupal Europe Conference

Drupal is one of the leading open source technologies empowering digital solutions in the government space around the world.

Drupal Europe 2018 brings over 2,000 creators, innovators, and users of digital technologies from all over Europe and the rest of the world together for three days of intense and inspiring interaction.

Location & Dates

Drupal Europe will be held in Darmstadtium in Darmstadt, Germany — which has a direct connection to Frankfurt International Airport. Drupal Europe will take place 10–14 September 2018 with Drupal contribution opportunities every day. Keynotes, sessions, workshops and BoFs will be from Tuesday to Thursday.

Jun 26 2018
Jun 26

There were a lot of amazing sessions at DrupalCon Nashville 2018, but one of the few sessions that sparked my interest was “PDFs in Drupal” presented by Dan Hansen. In this session, Dan goes through the importance of PDFs, gave a short introduction to some of the more popular PDF rendering libraries, and gave a demo on some tips and tricks that I found very useful for my future projects.

Most, if not all of us, have opened a PDF recently. PDFs are popular because they are universal as a document format and can easily be sent to others without having to worry about whether their machine can open them. Despite this, Dan notes that it feels like PDFs are behind in support, and it would be nice to have better PDF handling in Drupal core - similar to images in media libraries.

PDF Rendering Libraries

This session introduced a handful of popular PDF rendering libraries:

  • Print-to-PDF
  • jsPDF
  • FPDF
  • mPDF
  • TCPDF
  • FPDI
  • DOMPDF
  • Wkhtmltopdf
  • PDFtk

PDFs in Drupal

In Drupal 7, the most popular module for generating PDFs is the Print module - but does not support Drupal 8. Fortunately, there are options available for Drupal 8:

  • Printable - based on the Print module to allow generation of PDFs. It relies on the PDF API, which is currently not stable.
  • Entity Print (recommended) - allows for printing any Drupal entity or View (D8 only) to PDF. This module provides flexibility with PDF rendering libraries and is more lightweight compared to the Print module and has a stable release for both D7 and D8.
  • FillPDF - allows for filling PDF with values. This module can be used with the PDFtk library or a paid third-party service, and can help in reducing overhead of rendering PDFs.
     

Tips and Tricks

I found Dan’s demos to be the most interesting - as he showed some code examples of various (and seemingly common tasks) related to PDFs. The following examples from Dan’s session shows how simple and straightforward it is to work with PDFs:

Making a PDF from HTML

A custom controller can simply return the following output:

$dompdf = new Dompdf();
// Pass the HTML markup.
$dompdf->loadHtml($markup);
// Render the HTML as PDF.
$dompdf->render();
// Stream the generated PDF back to user via browser.
$dompdf->stream();

Combining 2 PDFs

Using the PDFtk library:

$pdf = new Pdf([ 
  'A' => '/path/file1.pdf', // A is alias for file1.pdf 
  'B' => ['/path/file2.pdf','pass**word'], // B is alias for file2.pdf ]);
$pdf->send();

Notice that you can specify a password for the PDF file (if there is one). You can also extract specific pages from the PDF files as well:

$pdf->cat(1, 5, 'A') // pages 1-5 from A 
  ->cat(3, null, 'B') // page 3 from B 
  ->cat(7, 'end', 'B', null, 'east') // pages 7-end from B, rotated East 
  ->cat('end', 3,'A','even') // even pages 3-end in reverse order from A ->cat([2,3,7], 'C') // pages 2,3 and 7 from C    
  ->saveAs('/path/new.pdf');

More of these examples can be found at https://packagist.org/packages/mikehaertl/php-pdftk.

Fill in a PDF Template

Using the FillPDF module:

$pdf = new Pdf([‘PATH_TO_PDF’]);
$pdf->fillForm([
  ‘name_of_text_field’ => ‘Some value’
])
->needAppearances()
->send(‘filled.pdf’);

I really enjoyed and learned a lot of useful tips from Dan’s session, and I encourage anyone who is looking to work with PDFs in Drupal to check out the session.

Related Content:
Accessibility: Let's Talk PDFs | Blog
Top Drupal 8 Modules | Blog
Mediacurrent Top Drupal 8 Modules: Drupalcon 2018 Edition | Blog

Jun 26 2018
Jun 26

The Block field module lets you insert a Drupal block as a field on your content.

A Drupal theme is divided into regions and you can place blocks or your own custom blocks into these regions. You accomplish this task by dragging and ordering blocks in the “Block Layout” screen. That means you can append blocks before or after the main content of your content type. This “Block Layout” screen will soon be cluttered if you have multiple content types and/or multiple single nodes, each one with a different custom block. Block Layout Screen

However, there’s a way to insert a block (or many blocks) directly into your content as a field. Thus, you don’t have to place the block in the “Block Layout” screen, instead, you insert the block as a field on the node.

Blocks as fields

In this tutorial, we’re going to cover the usage of the Block field module. Let’s start!

Installing the Block Field module

The first thing you’ll need to do is install the Block field module.

Using Composer:

composer require drupal/block_field

This module has no dependencies, so just install it and you’re good to go.

Enable Block Field module

Add Block Field to Content Type

Let’s start by adding a block field to the Article content type.

1. Go to Structure, “Content types”, click “Manage fields” on the Article now, then click on “Add field”.

2. Select “Block (plugin)” under the reference category and give it a proper label.

Adding a block field

3. Leave the “Allowed number of values” set to 1 and click “Save field settings”.

On the edit screen, you can add a default value for this field. There’s also a list of all blocks, which you can select or deselect in order to make them available to this particular field (custom blocks will appear here too). Click “Save settings” once again.

Availbale Blocks

Test Block Field

Click Content, “Add Content”, Article in order to create a test article. Choose a system block (for example the “Powered by Drupal” block) from the drop-down and click Save.

Creating content with a block field

You’ll see the selected block inserted as a field in the content. This block won’t appear in the “Block Layout” screen.

Block field inside the content

You can also use this module to insert a view via a block inside the content. Edit the article and select the “Who’s online” block under the “Lists (Views)” category, click Save and you will see this block in your content.

Please note: you won’t be able to use Views contextual filters with the Block Field module.

Display a view via a block in a field

Summary

The Block Field module lets you insert not only block views into a field but all types of blocks, even custom blocks. This allows the creation of complex content types and/or nodes and provides great flexibility when building a site.

Jorge Montoya

About Jorge Montoya

Jorge has been reading about Drupal and playing with it for almost 5 years. He likes it very much! He also likes to translate German and English documents into Spanish. He's lived in some places. Right now, he lives in the city of Medellín in his homeland Colombia with his wife and son.

Jun 26 2018
Jun 26
photo: Paul Johnson @ flickr

Drupal is our business.

Regardless of being a freelancer, a two person shop or a hundred plus agency, Drupal is vital to our success in growing and supporting our business.

The business ecosystem is changing rapidly, thereby making it a necessity for agency leaders, managers and advisors to focus on a multitude of challenges and opportunities.

Understanding how the marketplace is evolving, driving innovation, fostering the right company culture, and adopting efficient project management methodologies, are all challenges faced by businesses today.

We all want to transform our business by working with the smartest team, create and deliver amazing projects, and have ideal customers lining up to work with us.

Any Drupal conference cannot be complete without in-depth discussions and debates about these challenges and more.

What is this track about?

The Agency Business track will provide insight, support and real stories from people running businesses and managing projects. Learn about other people’s experiences, and get tips and ideas on how to tackle the challenges faced in your business or project.

Come to this track to learn / speak about

Photo: Michael Cannon @ Flickr

Agency growth

Growing and scaling your business can be a tricky and daunting task. We need to consider strategies for how to grow our businesses, and how to do so sustainably.

With increased competition from both other agencies and other platforms, we need to look at not only how we generate new leads for our businesses, but how do we convince potential clients that Drupal is the best, that we are the best?

Leadership and Culture

What is the right company culture for my business? How can I better lead my agency through the challenges ahead? How can I provide good leadership to my team? How can we grow and scale our business, without losing our company culture along the way? These are just some of the questions we will look to answer in the Agency Business track.

Operations

Project management is a bit of a juggling act, with many different needs and tasks that need to be taken care of simultaneously. We’re always on the look-out for ways to increase a project’s effectiveness and efficiency, while reducing the risk of it getting out of control. Let’s share our experiences and ideas on how we can improve project planning, better manage timelines & budgets, and keep staff motivated, while all the time keeping clients happy and engaged in the process.

Diversification

Markets change faster and faster, so does our market. We need to adapt our products and offering to stay competitive and minimize our business risks. Perhaps it means diversifying your service offerings, perhaps it means developing a product, perhaps it means extending into new markets or verticals. However, we also need to consider how to keep clients happy and how to continue to meet their changing needs through innovation and/or diversification.

How to get involved

At Drupal Europe, we want to ensure that attendees get the most from this track through highly valuable and insightful sessions. We are looking for speakers to openly and honestly share stories about their challenges and how they solved it. We want to hear about your experiments, successes and failures, process discoveries, strategies, and tactics. We want real-life learnings, supported by facts and figures — prove to us that your way is best.

Want to submit a session under Agency Business Track?

Session submissions are open and will close on 30 June 2018.

Whatever your experience is, whether it be running a small 2 person operation or scaling to 30 and beyond, or managing projects and project teams, we want to hear from you. Your experience and insight is invaluable and we know others will think so too.

Come to Drupal Europe and share your experiences with us — submit a session to the Agency Business track today!

Know a great speaker?

Do you know someone who could be a great speaker? Or perhaps you know someone who has an interesting story to share? If so, please get in touch with the program team at [email protected].

And don’t forget to help us to spread the word about this awesome conference. Our hashtag is #drupaleurope.

We look forward seeing you in Darmstadt!

About Drupal Europe Conference

Drupal is one of the leading open source technologies empowering digital solutions in the government space around the world.

Drupal Europe 2018 brings over 2,000 creators, innovators, and users of digital technologies from all over Europe and the rest of the world together for three days of intense and inspiring interaction.

Location & Dates

Drupal Europe will be held in Darmstadtium in Darmstadt, Germany — with a direct connection to Frankfurt International Airport. Drupal Europe will take place 10–14 September 2018 with Drupal contribution opportunities every day. Keynotes, sessions, workshops and BoFs will be from Tuesday to Thursday.

Jun 26 2018
Jun 26

This is part one of a two-part series on transitioning to HTTPS

For some time, major internet players have advocated for a ubiquitous, secure internet, touting the myriad benefits for all users and service providers of “HTTPS everywhere”. The most prominent and steadfast among them is Google. In the next week, continuing a multi-year effort to shepherd more traffic to the secure web, Google will make perhaps its boldest move to date which will negatively impact all organizations not securely serving their website over HTTPS.

To quote the official Google Security Blog

Beginning in July 2018 with the release of Chrome 68, Chrome will mark all HTTP sites as “not secure”

Chrome insecure message for HTTP
Google blog

Given the ambiguous “in July 2018”, with no clearly communicated release date for Chrome 68, it’s wise to err on the side of caution and assume it will roll out on the 1st. We have readied our partners with this expectation.

So what does this mean for your organization if your site is not served over HTTPS? In short, it’s time to make the move. Let’s dig in.

What is HTTPS?

HTTP, or HyperText Transfer Protocol, is the internet technology used to communicate between your web browser and the servers that the websites you visit are on. HTTPS is the secure version (s for secure) which is served over TLS: Transport Layer Security. What these technical acronyms equate to are tools for internet communication that verify you’re communicating with who you think you are, in the way you intended to, in a format that only the intended recipient can understand. We’ll touch on the specifics in a moment and why they’re important. Put simply, HTTPS enables secure internet communication.

Why secure browsing matters

Leaving aside the technical details for a moment and taking a broader view than communication protocols reveals more nuanced benefits your organization receives by communicating securely with its audience.

HTTPS improves SEO

Since Google accounts for 75-90% of global search queries (depending on the source) SEO is understandably often synonymous with optimizing for Google. Given their market domination, competitors are taking queues from Google and in most cases it’s safe to assume what’s good for SEO in Google is good for optimizing competing search engines.

In the summer of 2014, Google announced on their blog that they would begin to favorably rank sites who used HTTPS over HTTP. It’s already been nearly four years since we’ve known HTTPS to be advantageous for SEO. Since then, Google has consistently advocated the concept of HTTPS ubiquity, frequently writing about it in blog posts and speaking about it at conferences. The extent to which serving your site over HTTPS improves your SEO is not cut and dry and can vary slightly depending on industry. However, the trend toward favoring HTTPS is well under way and the scales are tipped irreversibly at this point.

HTTPS improves credibility and UX

Once a user has arrived at your site, their perceptions may be largely shaped by whether the site is served over HTTP or HTTPS. The user experience when interacting with a site being served over HTTPS is demonstrably better. SEMrush summarizes well what the data clearly indicate; people care a great deal about security on the web. A couple highlights:

You never get a second chance to make a first impression.

With engaging a participant of your target audience, you have precious few moments to instill a sense of credibility with them. This is certainly true of the first time a user interacts with your site, but is also true for returning users. You have to earn your reputation every day, and it can be lost quickly. We know credibility decisions are highly influenced by design choices and are made in well under one second. Combining these two insights, with the visual updates Chrome is making to highlight the security of a user’s connection to your site, drawing the user’s attention to a warning in the URL bar translates to a potentially costly loss in credibility. Unfortunately it’s the sort of thing that users won’t notice unless there’s a problem, and per the referenced cliché, at that point it may be too late.

Browsers drawing attention to insecure HTTP

Much like search, browser usage patterns have evolved over the last five years to heavily favor Google Chrome. Therefore, what Google does carries tremendous weight internet-wide. Current estimations of browser usage put Chrome between 55% and 60% of the market (again, depending on sources). Firefox has followed suit with Chrome as far as HTTP security alerts go, and there’s no indication we should expect this to change. So it’s safe to assume a combined 60-75% of the market is represented by Chrome’s updates.

Google Chrome HTTP warning roll out

Google (and closely mirroring behind, Firefox) has been getting more stringent in their display of the security implications of a site served over HTTP (in addition to sites misconfigured over HTTPS). They’ve shared details on the six-step roll out on their general blog as well as on a more technical, granular level on the Chrome browser blog.

In January 2017, they began marking any site that collects a password field or credit card information, served over HTTP as subtly (grey text) not secure.

Chrome insecure message for HTTP
Laravel News

Then, in October 2017, they tightened things up so that a site that collected any form information over HTTP, would have the same “not secure” messaging. They added the more action-based aspect of showing the warning on the URL bar when a user entered data into a form. This is an especially obtrusive experience on mobile due to space constraints, which more deeply engages the user cognitively as to exactly what is unsafe about how they’re interacting with the site.

Chrome insecure message for HTTP
Google blog

Next, in July 2018, all HTTP sites will be marked as not secure.

In September 2018, secure sites will be marked more neutrally, removing the green secure lock by default connoting a continuing expectation that HTTPS is the norm and no longer special.

Chrome insecure message for HTTP
Google blog

In October 2018, any HTTP site that accepts any form fields will show affirmatively not secure with a bold red label, much like a misconfigured HTTPS site does now.

Chrome insecure message for HTTP
Google blog

Though they haven’t yet announced a date, Google intends to show affirmatively not secure for all HTTP sites. The drive is clearly to establish the norm that all the web traffic should be served over HTTPS and that outdated HTTP is not to be trusted. This is a pretty strong message that if Google has their way (which they usually do) HTTPS will inevitably be virtually mandatory. And inevitably in internet years, may be right around the corner.

HTTPS vastly improves security for you and your users

Returning to the technical, as mentioned previously, HTTPS helps secure communication in three basic ways.

  • Authentication “you’re communicating with who you think you are”
  • Data integrity “in the way you intended to”
  • Encryption: “in a format that only the intended recipient can understand”

What authentication does for you

In order for the browser to recognize and evaluate an HTTPS certificate, it must be verified by a trusted certificate authority (CA). There are a limited amount of CAs who are entrusted to distribute HTTPS certificates. Through public-key cryptography, a fairly complex but interesting topic, through inherent trust in the CA who has provided the HTTPS certificate for a given site, the browser can verify any site visitor is positively communicating with the expected entity with no way of anyone else posing as that entity. No such verification is possible over HTTP and it’s fairly simple to imagine what identify theft would be possible if you were communicating with a different website than you appeared to be. In the event any of the major browsers cannot validate the expected certificate, they will show a strong, usually red warning that you may not be communicating with the expected website, and strongly encourage you to reconsider interacting at all.

Chrome misconfigured HTTPS

Therefore, the authentication gives your users the confidence you are who you say you are, which is important when you’re engaging with them in any way whether they’re providing an email, credit card or simply reading articles.

How data integrity helps you

Ensuring perfect preservation of communication over the internet is another guarantee HTTPS provides. When a user communicates with a website over HTTPS, the browser takes the input of that communication and using a one-way hashing function creates a unique “message digest”: a concise, alphanumeric string. The digest may only be reliably recreated by running the exact same input through the same hash algorithm irrespective of where and when this is done. For each request the user makes to the website, the browser passes a message digest alongside it and the server then runs the input it receives from the request through the hash algorithm to verify it matches the browser-sent digest. Since it is nearly computationally impossible to reverse engineer these hash functions, if the digests match, it proves the message was not altered in transit. Again, no such data integrity preservation is possible over HTTP, and there is therefore no way to tell if a message has been altered en route to the server from the browser.

What encryption does for you

Communicating over an unencrypted HTTP connection allows for some easily exploitable security risks in the case of authentication to a site. To demonstrate how easy it can be to take over someone’s account on an HTTP connection, a tool called Firesheep was developed and openly released in mid 2010. Major social media platforms Facebook and Twitter were both susceptible to this exploit for some time after Firesheep was released. The identity theft is carried out through a means called session hijacking. With Firesheep installed, a few clicks could log you in as another user who was browsing over WiFi nearby on any HTTP website. This form of session hijacking is possible when the authentication cookies, small identifying pieces of information that live in your browser while you’re logged into a site, are transmitted to the server on each request over HTTP. Over WiFi these messages are broadcasted into the air in plain text, and can be picked up by anyone listening. HTTPS prevents this since the communication is encrypted and unintelligible to eavesdroppers.

In the example of a CMS like Drupal or any other system in which there is a login, if an administrator with elevated site permissions is logged in over HTTP, they’re subject to the same risk if that traffic is monitored or “sniffed” at any point along its path from the browser to the server. This is especially easy over WiFi but is not relegated to only WiFi. The cookies are sent to the server upon every request, regardless of whether or not the user entered their password during the active session or not. Depending on the admin’s privileges, this access can be easily escalated to complete control of the website. Encryption is a big deal.

HTTPS is required for the modern web

One of the more promising developments of the last few years, is the pervasiveness and effectiveness of Progressive Web Apps (PWAs). PWAs is the name coined for a set of technologies that provide a feature-set for mobile browsing akin to native applications, yet is entirely served through the web browser. PWAs require all communication to be done over HTTPS. Some of the possibilities with PWAs that were previously relegated to native applications only are:

  • Providing content and services based on the user’s location data
  • Providing interaction with the user’s camera and microphone within the browsing experience
  • Sending push notifications
  • Serving off-line content

If you aren’t taking advantage of any of these features that are possible through PWAs, it’s something your organization should strongly consider to further engage users. Before the ambitions to be on feature parity with native applications are fully borne-out, PWAs will continue to evolve the power of layering deeper engagement with users on top of your existing mobile experience with minimal effort. PWAs simply do not work over HTTP. HTTPS is required to open the door to their possibilities.

Barriers to HTTPS have been lifted

Historically, considering a move to HTTPS has been held back by some valid concerns for webmasters whose job it was to select where and how their websites were hosted. A few of the fundamental apprehensions could be categorized as:

  • No perceived benefit. People often assumed if they weren’t collecting financial or personal information, it wasn’t necessary. We’ve covered why holding this belief in 2018 is a misconception. Savas Labs made the move in July 2017 to serve exclusively over HTTPS for our statically-generated Jekyll website even though at the time we had no forms or logins.
  • Performance costs. We know reducing latency is crucial for optimizing conversions and HTTPS does require additional communication and computation. However, with the broad adoption of the HTTP/2 protocol over the last few years, HTTPS now usually outperforms HTTP.
  • Financial costs. HTTPS was too complex and costly to implement for some. Large strides have been made across many hosting providers who now bundle HTTPS into their hosting offerings by default, often at no additional cost. Let’s Encrypt, a relatively new and novel certificate authority, first began offering free certificates (which they still do) and then made it easy to automatically renew those certificates, helping to ease the burden and cost of implementation.

We cover each of these in more detail in part two that will help guide you on how to make the move to HTTPS.

Conclusion

To revisit Google’s announcement:

Beginning in July 2018 with the release of Chrome 68, Chrome will mark all HTTP sites as “not secure”.

Interpreting that and providing our perspective:

You’re not part of the modern web unless you’re exclusively using HTTPS.

A bold, if slightly controversial statement, but for ambitious organizations like the folks we’re fortunate enough to work with each day, HTTPS-only is the standard in mid 2018 and beyond. Given the benefits, the lifted previous barriers, and the opportunity for the future, very few organization have a good reason not to exclusively serve their sites over HTTPS.

Have we convinced you yet? Great! Read part two for some assistance on how to make the move.

Additional resources

Jun 25 2018
Jun 25

Drupal Europe is both a technology conference and a family reunion for the Drupal community. Bringing together 1600+ attendees, it is the largest community driven Drupal event taking place on the European continent this year. For anyone connected with Drupal this is a unique opportunity to share your experience, learn, discuss, connect and contribute back to the community.

Being a community driven conference, we wanted to focus on real life case studies and not the usual technology driven structure. So we’ve introduced industry tracks which focus on specific industry sectors.

Calling all college, university, and educational Drupalers!

Photo with CCO licence via Pexels.com from StartupStockPhotos

The Higher Education track is for anyone using Drupal or thinking of migrating to Drupal at a college or university who is looking to connect with other Higher-Ed Drupal users.

If you have experience of delivering Drupal solutions in the higher education sector or are looking for inspiration on how you continue to develop your CMS further, this is the right track for you.

Be inspired

Drupal is a popular choice in higher education, and many of us are using it in creative and inventive ways. With Drupal 8, the opportunities for exploration and experimentation expand even further — from headless Drupal to top-tier configuration management. Let’s showcase our successes and best-practices with Drupal 8!

We know many universities are still on Drupal 7 and are keen to migrate to Drupal 8, so come to share what works for you and see wins from your peers.

Share your experience

Photo with CCO licence via Pexels.com from StatusStockphoto

Have you launched a Drupal 8 project recently that you are proud of? Started a campus Drupal users group and have tips for others looking to create their own? Developed a great user support model for your content editors? Conquered decoupled Drupal with your frontend stack? Share your awesome projects and lessons learned with your peers.

Target groups:

  • Education sector

Example talks:

Photo with CCO licence via Pexels.com from Pixbay
  • Drupal in a Day (how Global Training Days got to be a localized event)
  • From CMS to LMS
  • Web accessibility in higher education
  • GDPR and childrens information
  • Javascript for higher education
  • Migration from Drupal 7 to 8
  • How Drupal 8 API-first helps to 
    integrate with existing IT-Infrastructure
  • Build your own Drupal Community

Session submission is open and we ask you to submit interesting session proposals to create an awesome conference. Session proposals are not limited to Drupal and all topics in relationship with Higher Education are welcome.

Please also help us to spread the word about this awesome conference. Our hashtag is #drupaleurope.

If you want to participate in the organisation or want to recommend speakers or topics please get in touch at [email protected].

About Drupal Europe Conference

Drupal is one of the leading open source technologies empowering digital solutions around the world.

Drupal Europe 2018 brings over 2,000 creators, innovators, and users of digital technologies from all over Europe and the rest of the world together for three days of intense and inspiring interaction.

Location & Dates

Drupal Europe will be held in Darmstadtium in Darmstadt, Germany — with a direct connection to Frankfurt International Airport. Drupal Europe will take place 10–14 September 2018 with Drupal contribution opportunities every day. Keynotes, sessions, workshops and BoFs will be from Tuesday to Thursday.

Jun 25 2018
Jun 25
Cybercrime is a growing problem in today's community.


In 2017 alone, we saw the record-breaking attack of the WannaCry ransomware scandal bring plenty of businesses to their knees. In fact, the spread of the ransomware across 150 countries caused many professionals in the industry to call it the biggest offensive in cybercrime history.

As the digital world continues to evolve, it brings with it countless new opportunities for success, along with various vulnerabilities that modern entrepreneurs need to be aware of. If you're launching an eCommerce company in the current marketplace, you'll need more than just a solid USP and a great marketing strategy - you'll need a CMS (content management system) solution that keeps your online presence secure.

After all, if customers don't believe that your site is secure, then they're not going to buy your products. It doesn't matter if you sell the best products or services in the world, no-one's going to risk giving their details to an unsecured store.

Drupal Commerce is one of the most trusted and secure eCommerce solutions on the web today - used by organizations across the globe. To help boost your chances of a successful eCommerce venture, we're going to explore some of the ways you can develop a more secure site with Drupal Commerce.

1. Commit to Regular Updates

Updates are key to any cyber-security strategy. When a company rolls out an update for a piece of software, they're not just giving you new features to play with, they're also delivering bug fixes and patches that can protect your system against vulnerabilities that exist within the network.

People often postpone updates because they get in the way of day-to-day tasks. However, this could mean that you're leaving entry windows open for people who want to worm their way into your files. The developers of Drupal and Drupal Commerce regularly release timely updates that fix the security issues in your CMS. You should be making sure that these updates are being applied when they become available, either by doing it yourself or by contracting a company to do them.

2. Use the Right Login and Password Security

The login page at the front of your eCommerce site acts as the door to your organization. The best way to protect your future is to fortify that door with the correct security measures. While a great password and username is a great way to get started, some statistics suggest that around 35% of users have weak passwords - and many of the remaining 65% can still be cracked.

With Drupal as your CMS, from the moment you first install the system, the passwords on your database get encrypted and "salted". This means that your password becomes almost impossible to hack. Additionally, Drupal offers a range of user-contributed modules thanks to its open-source framework, which support everything from SSL certificates to two-factor authentication.

3. Configure Your eCommerce Access Controls

When it comes to securing your eCommerce site, there's only so much any CMS can do to help you. At the end of the day, you'll need to make sure that you're making full use of the control systems that solutions like Drupal provide to give you absolute authority over the accounts that have access to your website. For instance, a blog account might have access to write content on your site, but not change the price of products.

Drupal and Drupal Commerce have a range of access controls that allow you to choose authority levels throughout your website. You can create categorized accounts for specific parts of your website, ensuring that each person gets only the permissions they need and no more. Essentially, this reduces the risk of human error as you add more people to your eCommerce team.

Demo Drupal Commerce today! View our demo site.

4. Stay Ahead of the Curve

One of the most important things you can do to protect your eCommerce site is make sure that you're always aware of the latest DDoS attacks, web issues, and attacks facing your industry. The more you know about the threats you're facing every day, the easier it will be to establish a strategy that helps you to fight back against them.

Drupal helps eCommerce site owners to stay ahead of the curve, with one of the largest communities in the world, packed full of more than 1 million strategists, developers, and designers. This kind of attention ensures that any time an issue or error in the code might be subject to a new attack, it's duly reported and dealt with.

Aside from the support of the community, Drupal users can also access the "Status Report" function on their UI, which keeps you updated on any problems with the code on the site, this is the easiest way to keep on top of your website management, and make sure you're not falling behind on security.

5. Enable the Right Security Modules

When you want to make your home more secure, you add new alarm systems, motion detectors, and even locks. On the other hand, when you want to keep your eCommerce site safe, Drupal offers modules to help you accomplish specific security measures. For instance, there's:

  • The password policy module: This allows you to establish a specific rule for passwords. You might demand that all passwords have one capital letter and special character for instance.
  • Username enumeration modules: This module ensures that hackers can't gain access to your site by constantly trying to guess usernames.
  • Automated logout: This module allows you to choose a time limit for user sessions. If someone remains inactive for too long, they'll be automatically logged out.
  • Honeypot: This module helps to eliminate spam-bots from using website forms and spamming your administrators and users.

6. Add HTTPS

Building a secure Drupal Commerce website doesn't just protect your business from attacks, it can also give you a better reputation in your chosen eCommerce industry. Adding the HTTPS certificate to your Drupal hosting set-up is a great way to deliver that peace of mind. 

HTTP Secure is what you get when you install an SSL certificate onto your website server. It ensures that cybercriminals can't intercept and tamper with the information sent back and forth between you and a customer. Aside from the obvious protection they offer, SSL certificates give you those little green padlocks next to your URL that leaves your customers feeling confident and help you to achieve a better ranking in the search engines. 

In fact, there's no reason not to include and SSL certificate now since you can do this for free through Let's Encrypt!

Secure eCommerce Starts with a Trusted CMS

In the ever-evolving world of website security, it's difficult to guarantee any company's security. One moment, it can seem as though everything is running smoothly, then the next, you're struggling to retrieve your details from a hacker. The only thing you can do is take every possible step to protect yourself from an intrusion. 

Drupal, with its security modules, password protection, and state-of-the-art open-source software has earned the trust of everyone from industry giants to government agencies. The websites of UNESCO, the White House, Fox News, and Harvard University are all built on the Drupal framework. After all, just because it's open-source doesn't mean that Drupal isn't secure. Every module contributed by a user is thoroughly reviewed by the community. Drupal also has a dedicated security team that is always leading the security initiative. 

With this safety-first approach, Drupal ensures that every eCommerce site you build has the best chance of standing strong against attackers and delighting your customers in the process. 

Contact us and learn more about our custom ecommerce solutions

Raj Jana is the CEO and founder of the JavaPresse Coffee Company. As an eCommerce entrepreneur, Raj knows a thing or two about running a secure website, and he's always looking for new ways to keep his customers safe.

Jun 22 2018
Jun 22

Happy Friday everyone! In this episode Front End Developer, Grayson Hicks, joins the show to answer some questions about Gatsby.js, an up and coming static site generator that you can use with Drupal or any other data source. Video and full transcription below. 

[embedded content]

Jun 22 2018
Jay
Jun 22

One of the many things Drupal excels at is integrating with other services. Some popular integrations are made even easier by the existence of contributed Drupal modules (such as the one for Google Analytics). But, many times, there isn't a ready-built solution, or the one that's available doesn't quite suit your needs. At Ashday, we've built many integrations between Drupal and other systems, and although every integration is different, there are some things we've learned that are good to consider when writing most any integration.

Do You Need to Build Something New?

Even if there is an existing Drupal module for the integration that you need, it's important to determine if you actually want to use it. Sometimes, integration modules are written for certain use cases, which may not line up with exactly what you need the integration to do, and could in fact make things more complicated for you than not using a pre-existing module at all.

For instance, when we created a Solr integration, we had to evaluate whether to use the existing Search API Solr module or write our own integration, and in the end, we decided to write our own. Why? Because when we were evaluating our options, we found that the module wasn't designed to index the content of our site in the particular way we needed it to, and it also didn't quite properly support the "More Like This"-style search which Solr itself is capable of. Because of this, we only had a few options.

  • We could modify our site to fit the capabilities of the module, but most of the time, as in our case, that isn't really an option.
  • We could use the module and try to adapt it to our needs. This would mean not only installing the module and figuring out how to use it, but also digging into how it was written in order to make changes to it. With some modules, such as Search API Solr, this can be a pretty big task. It's a large, complicated module, and figuring out where and how to make the necessary changes can be a challenge… and that's assuming that the module is structured in such a way that the changes are easy to make.
  • We could write an entirely custom integration.

We wound up going with the third option. "But wait," you might wonder, "If the existing module is so complicated, wouldn't writing your own integration mean needing to create all of that same stuff yourself?"

And the answer to that is no. Whereas a Drupal contrib module usually has to be designed in a rather generic way, so that it can suit as many people's disparate needs as it possibly can, an entirely custom-coded integration can focus solely on the functionality that is needed for your particular use case. Just because the system you're integrating with supports something, doesn't mean you necessarily have to. With the Solr integration in particular, building exactly what we needed as a custom integration wound up being much faster and more maintainable than it probably would have been to take the existing module and modify it to suit our needs.

How Much Drupal Should You Use?

Depending on what sort of integration you're writing, one thing to consider is how much it should rely on Drupal. Drupal includes numerous powerful tools, such as its service architecture and Form API, which can be leveraged to make your integration more flexible, and even save time in the process. At the same time, tying your integration to Drupal makes it less portable. For instance, if you were creating an integration which would display content from a remote system on several different websites, and only some of those sites actually use Drupal, then it may be worth creating the integration mostly using regular ol' PHP. By creating the integration as a set of classes or functions that don't depend on Drupal, each site can then use those same functions, and add just the few things that are needed to make them work well on that site; for instance, a Drupal site may need routes and permissions set up "the Drupal way" separate from the reusable part of the integration.

Creating a more generic integration in this way can also make it more compatible between different versions of Drupal. If your main integration doesn't rely on Drupal, it will work on Drupal 7, 8, 9, and even more, with only the minimal code to make it actually work on each site needing to be changed between them.

Another example: Say you're integrating with an analytics tool. You could either create a complex configuration form that fits into the Drupal administration interface and uses Drupal's form API, config system, and permissions, or you could just hardcode the specific settings you need somewhere in your codebase. The former way is the more "Drupal" way of doing it and is more configurable (this is the approach taken by the Google Analytics module), but the latter method can be very fast to code, and if you only rarely need to change anything about your configuration, it can be a great time savings over creating a complex Drupal-specific integration module.

Can This Be Contributed?

If your integration ultimately does make use of Drupal's helpful built-in features, great! Now it's time to ask "Can I contribute this module so that other other people can use it on their own Drupal sites?" If you are integrating with some tool or remote system that other people might also want to integrate with in a similar fashion, then the answer should probably be yes.

Contributing your custom integration module to Drupal.org can have a number of benefits—not the least of which is that it is an excellent way to give back to the Drupal community as a way to say "thank you" for all they've done to make Drupal possible. But there's another benefit as well: If you contribute a custom integration module, that means that other developers may start using it, looking at the code, and making improvements to it. Maybe your integration is fairly small, and only accounts for the handful of use cases that you need. The next person who uses the module thinks that something could be added or changed to improve the module. Suddenly, you have other people making suggestions or even writing code for you, which you can then benefit from by including such changes in the integration you're already using.

This is what we did with our HelloSign module for creating eSignature requests; we built it for one site which needed such functionality, then we contributed it. Once we did so, other developers started looking at the module and helping us to make all sorts of improvements to the module, and some even submitted patches to help improve the module. We also got free t-shirts out of it, so hey, who knows what might happen when you contribute!

Conclusion

There are many things to think about when you're building a Drupal integration, and although I've only written about three of them today, I think they are the guiding questions which help to determine how your integration is built. If you can answer all three of these questions before getting too far into writing your integration, you're much more likely to end up with a system in place that will serve you well long-term, even if the exact requirements for the integration eventually changes—which, in my experience, they almost certainly well.

If you need to integrate Drupal with anything, talk to us! We can integrate just about anything with Drupal

Jun 22 2018
Jun 22

The e-commerce industry continues to grow rapidly year over year, bringing more merchants online and driving larger profits. With that growth comes the increased need for rich content, innovative product merchandising, and integration into an ever increasing number of third party sales, marketing, and fulfillment tools. Drupal has always excelled as a platform for building unique customer experiences, and it continues to come into its own as an adaptive sales platform via projects like Drupal Commerce.

Photo by Mike Petrucci on Unsplash

This track includes content that helps merchants understand how to start and grow their online businesses, demonstrates to developers how to build ambitious e-commerce sites, and incorporates solution providers who improve the whole process via integrations.

In the e-commerce track you will learn how to start to sell online, how to grow your existing business and reach a wider audience, and the best tools to use for developing your platform.

The track is focused on the following topics:

  • Drupal vs other e-commerce solutions: comparison, the cost of entry and scale
  • What competitive advantages does Drupal bring to online merchants?
  • What are the benefits of Drupal-native eCommerce solutions vs. integrating external systems?
  • Case studies for unique or ambitious implementations of Drupal for e-commerce
  • Latest trends in eCommerce (e.g. payment, fulfillment, security, taxes, etc.)
  • Latest trends in building eCommerce websites (e.g. headless, multichannel, AI, etc.)

About industry tracks

As you’ve probably read in one of our previous blog posts, industry verticals are a new concept being introduced at Drupal Europe and replace the summits, which typically took place on Monday. At Drupal Europe these industry verticals are integrated with the rest of the conference — same location, same ticket and provide more opportunities to learn and exchange within the industry verticals throughout three days.

Now is the perfect time to buy your ticket for Drupal Europe. Session submission is only open for a few more days so please submit your sessions and if encourage others who have great ideas.

Please help us to spread the word about this awesome conference. Our hashtag is #drupaleurope.

To recommend speakers or topics please get in touch at [email protected].

About the Drupal Europe Conference

Drupal is one of the leading open source technologies empowering digital solutions in the government space around the world.

Drupal Europe 2018 brings over 2,000 creators, innovators, and users of digital technologies from all over Europe and the rest of the world together for three days of intense and inspiring interaction.

Location & Dates

Drupal Europe will be held in Darmstadtium in Darmstadt, Germany — which has a direct connection to Frankfurt International Airport. Drupal Europe will take place 10–14 September 2018 with Drupal contribution opportunities every day. Keynotes, sessions, workshops and BoFs will be from Tuesday to Thursday.

Jun 21 2018
Jun 21

Drupal is built on PHP so any developer working with Drupal needs some PHP knowledge. PHP memory management is something that can initially be a difficult concept to grasp.

In this Acro Media Tech Talk video, Rob Thornton covers PHP arrays and how they use memory. He goes over various examples, helping to shed some light on how to use arrays effectively. Along the way, Rob discusses passing arrays by value vs. by reference and shares some tips about each.

If you find this video helpful, you may also be interested in these related topics:

Contact us and learn more about our custom ecommerce solutions

Jun 20 2018
Jun 20
Jeff Geerling @flickr

With Drupal 8 core now in full swing and the contrib space rapidly maturing, it is an excellent time to get more deeply involved with one of the world’s largest open-source development communities. The Drupal + Technology track is focused on educating developers on the latest techniques and tools for increasing the quality and efficiency of their projects.

The Drupal + Technology track is the place for Drupal experts actively working on and contributing to Drupal to share their knowledge and help attendees to grow their Drupal skills.

We expect deeply technical sessions that inspire developers to see what is possible with Drupal. We welcome sessions sharing knowledge about integrating Drupal with bleeding-edge technologies (blockchain, IoT, decoupled frontend, etc) to empower the audience to create amazing digital experiences.

This year, the Drupal Europe program is designed around the idea of industry verticals with sessions and workshops based on specific industries. We expect a huge amount of session submissions in the Drupal + Technology track and would kindly advise you to look if an industry track could be more appropriate for your talk to have a better chance of being accepted.

Be ready to sharpen your skills and connect with other tech-minded folks. Convince your boss to invest in your skills, and get you a regular Drupal Europe ticket before they increase in price on 12th of August.

There will also be plenty of contribution opportunities during the event. All expertises and energy levels are equally invited!

Susanne Coates @flickr

Location & Dates

The deadline for the call for papers is 30th of June. Share your skills and empower other developers at the Drupal + Technology track. Submit your session now!

About Drupal Europe 2018

Drupal Europe will be held in Darmstadtium in Darmstadt, Germany — with a 15 min direct connection to Frankfurt International Airport. Drupal Europe will take place 10–14 September 2018 and will bring over 2,000 creators, innovators, and users of digital technologies from all over Europe and the rest of the world together for three days of intense and inspiring interaction.

Jun 19 2018
Jun 19
Amazee labs @flickr

Drupal Europe brings a unique opportunity to connect, share and learn from the Drupal community and to talk about what holds us together. We grew to be the biggest open source community under the tagline “Come for the code and stay for the community” which we strive to uphold.

Join us on September 10–14, 2018 in Darmstadt, Germany to discuss and learn about growing and strengthening communities and the challenges that come with that.

Drupal has been a historic example of how Open Source communities can thrive and to maintain this leading position we need to learn from each other, include others and inspire everybody to be an active contributor. This might bring its challenges from time to time, so please come and share your stories, expertise and lessons learned with us. This is the only way to keep our community strong, diverse and open minded.

Who should attend?

You! This vertical topic will be the meeting place for everyone in Drupal and other communities.

Whether you want to organise events, you’re new to the community and want to know where you can get involved, or you want to share a success story from your community, you are welcome.

Target groups:

  • Members of the Drupal community
  • Other open source communities
  • Organisations and those interested in how communities work and prosper

Example talks:

  • Being Human
  • Challenges of contribution
  • Community help
  • Community retention
  • Growing leaders & influencers (by empowering, enabling and adding trust)
  • Growing the Drupal Community
  • Improving diversity
  • Mentorship, sponsorship and allies
  • Organizing events
  • Succession planning for organizers and leaders

As you’ve probably read in one of our previous blog posts, industry verticals are a new concept being introduced at Drupal Europe and replace the summits, which typically took place on Monday. At Drupal Europe. These industry verticals are integrated with the rest of the conference — same location, same ticket and provide more opportunities to learn and exchange within the industry verticals throughout three days.

Industry vertical icons by @sixeleven

Now is the perfect time to buy your ticket for Drupal Europe. Session submission is already open so please submit your sessions and encourage others who have great ideas.

Please help us to spread the word about this awesome conference. Our hashtag is #drupaleurope.

To recommend speakers or topics please get in touch at [email protected].

About Drupal Europe Conference

Drupal is one of the leading open source technologies empowering thousands of digital solutions around the world.

Drupal Europe 2018 brings over 2,000 creators, innovators, and users of digital technologies from all over Europe and the rest of the world together for three days of intense and inspiring interaction.

Location & Dates

Drupal Europe will be held in Darmstadtium in Darmstadt, Germany — which has a direct connection to Frankfurt International Airport. Drupal Europe will take place 10–14 September 2018 with Drupal contribution opportunities every day. Keynotes, sessions, workshops and BoFs will be from Tuesday to Thursday.

Jun 19 2018
Jun 19

Omnichannel generally means the shopping experience is unified and seamless whether you do it on your laptop, in store, through your phone, etc. The team at Acro Media set out to demonstrate just how easy it is to give your customers a true omnichannel experience using Drupal and Drupal Commerce.

The omnichannel setup

As part of our demo at DrupalCon in Nashville, we did a pseudo T-shirt pre-order. Before the conference, attendees could use our Urban Hipster eCommerce demo site to pre-order a Drupal Commerce shirt in their size. When they completed their pre-order, they got an order number to bring with them to our booth. 

Check Out Our High Five Drupal Web SeriesPeople who didn't pre-order could also come to our booth and "purchase" (for free) a T-shirt using a self serve kiosk running the same demo site. 

So one side of the booth was the set up as the cashier/fulfillment area. The other side had the self-serve kiosk. We also had other laptops available so that we could bring up the admin interface as if we were a customer support person assisting a customer over the phone. The "support person" could find the customers order number or email address and fulfill the order. Easy peasy.

The whole time, our inventory of shirt sizes was counting down until the stock count hit 0. When our inventory reached 0 for a certain size, orders for that size could no longer be placed.

Why is this so amazing?

Some people were impressed but also a little puzzled, thinking that this sort of setup should just exist everywhere. Which it should, but it doesn't. With most retail stores, the online and in-store experiences are completely separate. They might as well be two different companies. If you buy something online and try to return it in store, it often can't happen. Loyalty points often don't transfer. The list goes on. Some places will let you buy online and pick up in store, but there might be a delay. They might say sure, you can pick it up in store, but not for 24 hours. In that case, you might as well just go to the store and find it yourself. Even knowing if an item is in stock can be tricky. The website might say there are three left, but that's just a snapshot from a certain point in time, and you don't know how often that gets updated. Maybe that was valid six hours ago, but that item has since sold out.

Why Drupal rocks

What makes Drupal so cool is that the point of sale and the Commerce module both use the same orders. A point of sale order is just a Drupal Commerce order. It has some specifics to the point of sale, but it can be loaded up in a regular interface. They use the same stock, the same products, everything. This is surprisingly rare. A lot of POS systems in particular are very antiquated. They date from pre-Internet times and have no concept of syncing up with things.

But we've created a true omnichannel experience. We've done it, and implemented it, and it's all open source and freely available. Anyone else could set up the same omnichannel setup that we did. We used a laptop, a cash drawer, a couple of iPads, nothing too fancy.

What's more, as the software matures, we're working on an even better demo with more smoothed out features, better integration, nicer interface, etc. Stay tuned.

Demo Drupal Commerce today! View our demo site.

More from Acro Media

Let's talk omnichannel!

We're always happy to help you understand how you can deliver a true omnichannel experience for you customers. Contact us today to talk to one of our business development experts.

Contact Us

Jun 18 2018
Jun 18
June 18th, 2018

Last month, Ithaca College introduced the first version of what will represent the biggest change to the college’s website technology, design, content, and structure in more than a decade—a redesigned and rebuilt site that’s more visually appealing and easier to use.

Over the past year, the college and its partners Four Kitchens and design firm Beyond have been hard at work within a Team Augmentation capacity to support the front-to-back overhaul of Ithaca.edu to better serve the educational and community goals of Ithaca’s students, faculty, and staff. The results of the team’s efforts can be viewed at https://www.ithaca.edu.  

Founded in 1892, Ithaca College is a residential college dedicated to building knowledge and confidence through a continuous cycle of theory, practice, and performance. Home to some 6,500 students, the college offers more than 100 degree programs in its schools of Business, Communications, Humanities and Sciences, Health Sciences and Human Performance, and Music.

Students, faculty, and staff at Ithaca College create an active, inclusive community anchored in a keen desire to make a difference in the local community and the broader world. The college is consistently ranked as one of the nation’s top producers of Fulbright scholars, one of the most LGBTQ+ friendly schools in the country, and one of the top 10 colleges in the Northeast.

We emphasized applying automation and continuous integration to focus the team on the efficient development of creative and easy to test solutions.

On the backend, the team—including members of Ithaca’s dev org working alongside Four Kitchens—built a Drupal 8 site. The transition to Drupal 8 keeps the focus on moving the college to current technology for sustainable success. Four Kitchens emphasized applying automation and continuous integration to focus the team on the efficient development of creative and easy to test solutions. To achieve that, the team set up automation in Circle CI 2.0 as middleware between the GitHub repository and hosting in PantheonGitHub was used throughout the project to implement, automate, and optimize visual regression, advanced communication between systems and a solid workflow using throughout the project to ensure fast and effective release cycles. Learn from the experiences obtained from implementing the automation pipeline in the following posts:

The frontend focused heavily on the Atomic Design approach. The frontend team utilized Emulsify and Pattern Lab to facilitate pattern component-based design and architecture. This again fostered long-term ease of use and success for Ithaca College.

The team worked magic with content migration. Using the brainchild of Web Chef, David Diers, the team devised a plan to migrate of portions of the site one by one. Subsites corresponding to schools or departments were moved from the legacy CMS to special Pantheon multidevs that were built off the live environment. Content managers then performed a moderated adaptation and curation process to ensure legacy content adhered to the new content model. A separate migration process then imported the content from the holding environment into the live site. This process allowed Ithaca College’s many content managers to thoroughly vet the content that would live on the new site and gave them a clear path to completion. Learn more about migrating using Paragraphs here: Migrating Paragraphs in Drupal 8

Steady scrum rhythm, staying agile, and consistently improving along the way.

In addition to the stellar dev work, a large contributor to the project’s success was establishing a steady scrum rhythm, staying agile, and consistently improving along the way. Each individual and unit solidified into a team through daily 15-minute standups, weekly backlog grooming meetings, weekly ‘Developer Showcase Friday’ meetings, regular sprint planning meetings, and biweekly retrospective meetings. This has been such a shining success the internal Ithaca team plans to carry forward this rhythm even after the Web Chefs’ engagement is complete.     

Engineering and Development Specifics

  • Drupal 8 site hosted on Pantheon Elite, with the canonical source of code being GitHub and CircleCI 2.0 as Continuous Integration and Delivery platform
  • Hierarchical and decoupled architecture based mainly on the use of group entities (Group module) and entity references that allowed the creation of subsite-like internal spaces.
  • Selective use of configuration files through the utilization of custom and contrib solutions like Config Split and Config Ignore modules, to create different database projections of a shared codebase.
  • Migration process based on 2 migration groups with an intermediate holding environment for content moderation.
  • Additional migration groups support the indexing of not-yet-migrated, raw legacy content for Solr search, and the events thread, brought through our Localist integration.
  • Living style guide for site editors by integrating twig components with Drupal templates
  • Automated Visual Regression
Aerial view of the Ithaca College campus from the Ithaca College homepage. From the Ithaca College Homepage.

A well-deserved round of kudos goes to the team. As a Team Augmentation project, the success of this project was made possible by the dedicated work and commitment to excellence from the Ithaca College project team. The leadership provided by Dave Cameron as Ithaca Product Manager, Eric Woods as Ithaca Technical Lead and Architect, and John White as Ithaca Dev for all things legacy system related was crucial in the project’s success. Ithaca College’s Katherine Malcuria, Senior Digital User Interface Designer,  led the creation of design elements for the website. 

Katherine Malcuria, Senior Digital User Interface Designer, works on design elements of the Ithaca.edu website

Ithaca Dev Michael Sprague, Web Chef David Diers, Architect,  as well as former Web Chef Chris Ruppel, Frontend Engineer, also stepped in for various periods of time on the project.  At the tail end of the project Web Chef, Brian Lewis, introduced a new baby Web Chef to the world, therefore the amazing Randy Oest, Senior Designer and Frontend Engineer, stepped in to assist in pushing this to the finish line from a front-end dev perspective. James Todd, Engineer, pitched in as ‘jack of all trades’ connoisseur helping out where needed.

The Four Kitchens Team Augmentation team for the Ithaca College project was led by Brandy Jackson, Technical Project Manager, playing the roles of project manager, scrum master, and product owner interchangeably as needed. Joel Travieso, Senior Drupal Engineer, was the technical lead, backend developer, and technical architect. Brian Lewis, Frontend Engineer, meticulously worked magic in implementing intricate design elements that were provided by the Ithaca College design team, as well a 3rd party design firm, Beyond, at different parts of the project.

A final round of kudos goes out to the larger Ithaca project team, from content, to devOps, to quality assurance, there are too many to name. A successful project would not have been possible without their collective efforts as well.

The success of the Ithaca College Website is a great example of excellent team unity and collaboration across multiple avenues. These coordinated efforts are a true example of the phrase “teamwork makes the dream work.” Congratulations to all for a job well done!

Special thanks to Brandy Jackson for her contribution to this launch announcement. 

Four Kitchens

The place to read all about Four Kitchens news, announcements, sports, and weather.

Jun 15 2018
Jun 15

As you may or may not have noticed, we’re having a lot of fun over here at Ashday building Drupal sites with React. Check out our own site, for example. We are really digging this new direction for front-end and you can learn more about why we did it how we approached it in other articles, but here we are going to talk about how we approached the Drupal editorial experience, because honestly - we just didn’t find a lot of great resources out there discussing how this might be done well in a decoupled experience.

Something about Gift-Horses

While we can’t speak with authority on the potential detriment of literally looking gift-horses in the mouth, we can speak to the idea that we should be grateful for what we’ve been given, and Drupal has given us a lot! If you were in this industry when most of us built everything from scratch, you’ll know that it’s a crazy pile of work to do the most basic things and nothing is taken for granted. Need a login form? Sure thing. Oh, now you need flood control? Um, ok. Captcha? Boy. Password reset? Ugh. Ok, I need a week just to get user authentication in place.

Drupal does so much out of the box and we aren’t about to throw it all away so we can call ourselves fully decoupled, which is the idea that Drupal isn’t providing any of the front-end at all. It’s worth noting that some are pursuing the concept of “Progressively Decoupled,” where only select components of the front-end site are managed with React, but we don’t prefer that approach in most cases because we don’t want the overhead of taking on traditional Drupal theming and a React build out, yet with less obvious design constraints, potentially extra hosting, multiple development workflows, duplicated styles, etc - leaving us short of many of the benefits of going decoupled at all.

We prefer to an approach that we’ve, for the moment, dubbed “Deliberately Decoupled.”

Deliberately Decoupled

What we mean by “Deliberately Decoupled” is that we aren’t decoupling purists, who see ourselves just as much evangelists of a particular approach as we are just software engineers, and we also aren’t operating by a FOMO (fear of missing out), where anxiety about not being on a bandwagon drives our decisions. We prefer to leverage what we think is beneficial for our clients and the site, and secondarily abide by our preferences. A good example is the Open Source philosophy. We love open source! But we aren’t for a minute going to bypass a proprietary library that does something really cool just because it’s not open source. It’s the same with decoupling. We want what gives us good bang for the buck - either in the deliverable, or the cost, or the UX, or whatever else is impactful - and it helps far more than it hurts. So, for the largely public facing ends of our sites, we hands-down love what React is giving us and rarely find Drupal’s out of the box front-end solution to be easier or more flexible. On the back-end? For the editorial and admin experience, we really have no interest in trying to replace everything Drupal provides unless there is a major overarching requirement or clear benefit that can justify hundreds or thousands of hours of additional work. There are some projects that do merit it, such as when you have highly dynamic and interactive forms, but if that’s not the case Drupal can do the job on its own.

Considering Outsourcing? Consider Ashday!  Request your free consultation today. 

One prime example of leveraging cool stuff in Drupal is the use of Paragraphs for content. If you haven’t heard of Paragraphs, you really must check it out. It’s been our favorite way to give editors the ability to create interesting and dynamic content creation without the cringe-worthy experience of complex WYSIWYG and HTML source editing, especially when it comes to the mobile experience. Nearly all of the Ashday.com pages are built with paragraphs, so that means an editor can do parallax, add related content boxes, throw in some CTAs, etc. Pretty cool! And as you’ll see later, we leverage React for our pages, but Drupal’s admin for editing the paragraphs and it creates a clean and intuitive editorial experience.

So does all this mean for editing we just hand over Drupal Admin accounts to our users so they can swim through the Sea Nettle-like admin experience say good luck? Hardly. Let’s get into the nitty gritty.

Our Philosophy - Less is More

Generally speaking, Drupal doesn’t matter much to the user. Of course Drupal matters, but not really to the end user just trying to do their editorial work. Not as far as they are aware. And they shouldn’t have to be “aware”. Do you remember when you first looked into Drupal? Do you remember how weird the world was as you learned that a “node” is “content”, but then so is a “block” (kinda), and a “view” is a query but maybe with a page attached, or a “taxonomy” is hierarchical data, but with display pages? All frameworks have to be abstracted sufficiently, which means making up generic terms and concepts that only make sense when you’ve spent time with them. Well, guess what? Most users would really rather not just learn all of those concepts and instead just easily write content and update their site. The key to that is to reduce, simplify and obfuscate.

Drupal’s admin is very friendly to developers, but unnecessarily verbose when it comes to editors. They don’t need half the contextual menus, vertical tabs, sidebars, etc most of the time. And the stuff they do need should be stripped down to the obvious and helpful. So let’s hide tons of help text on a WYSIWYG with multiple text format options and use Paragraphs + a simple WYSIWYG instead. Let’s rename any buttons or links that have the word “node” in them because really, who cares if it’s a node? Let’s put our field labels inline to save vertical space and use something like Field Group to organize them cleanly. And let’s take away that rats’ nest default Drupal menu and create an alternative that just gives them what they care about. Here is an example of what we’re talking about.

From this…

Example of Drupal admin showing contextual menus, vertical tabs, and sidebars.

To this. 

Example of streamlined Drupal Menu. 

In addition, let’s take the coolness of contextual admin, like Drupal provides, and make it more intuitive as well. If you hover over a block you can edit it or configure it. If you’re on a node page, you get view and edit links in the tab bar. And you can even sometimes use the new inline editing features in Drupal 8. The problem, though, is that once again the user has to understand what each of these elements are and why they’re all different in terms of the triggering UX. We are having a lot of fun in React finding more consistent and creative ways to manage content without understanding it.

So here’s a rudimentary example using Ashday.com.

Example of Drupal contextual admin, showing node page.

You see some sorting icons and some edit icons. That’s it. Technically, those sortable sections are paragraphs, which - thanks to React - can be sorted inline - but are also editable individually apart from the others. The “Free Consultation” button in the header is a React button tied to a few settings stored in some custom Drupal configuration in the back-end. Further, that edit icon in the page title area can be used to edit the entire page at once so you can change the page title and things like meta tags, although the next step is to probably provide more direct access to edit those things so that you don’t have to know what all is buried in a node form. So the goal here is for the user to have just some basic concepts to think about, like edit and sort, instead of Edit Node vs Configure Block vs Edit Block vs Sort Paragraph vs Some Other Drupal Configuration Buried Deep In the Admin or Form.

And by the way, here’s what happens when you click the edit link on the header button, vs the first paragraph. 

 

Edit link on header button

Intuitive Drupal 8 admin

  

Edit link on first paragraph

Screen shot of admin interface for Drupal page built with React.

 

So despite varied back-end architectural implementations, the user has a very similar experience contextually editing something. A simple page mask + offcanvas + clean form. Its cool stuff, all made easier with the ability to re-use display elements in React all while still getting a ton out of Drupal’s back-end for content management and forms. Simple, kinda easy, and totally user friendly.

Looking to use react for your next digital project? Find out how Ashday can use React to make your project a success.

Jun 14 2018
Jun 14
Empower your customers to customize products.


There is a high likelihood that the tshirt on your back or in your closet started life as someone’s idea that was being uploaded to an online tool. The idea that a person could not only buy tshirts, but design them in a tool and approve the proof before payment seems almost commonplace. Why aren’t more people talking about this? Your customers are expecting more tailored experiences when buying decorated apparel, signage and personalized promotional products from the small to medium web store fronts. Getting the “Web to Print” toolset just right on Drupal is not easy.

Here’s just a few of the expectations for ordering printed materials from the web on Drupal:

  • Drupal integration: Full integration with existing Drupal website
  • Intuitive editor experience: Drag and drop toolset, uploading of files (jpg, png, tiff, pdf, eps, ai, psd), cropping and quick fixes to pictures, lots of fonts, pop-over text formatting, white labelled branding with plenty of customizations, low resolution upload warnings, and mobile friendly web to print tool.
  • Proof and checkout workflow: Print-quality PDF proof, edit before purchase, edit after purchase, CMYK color space, super large files that need processing

Getting off the bespoke product editor island

An example of a bespoke web to print tool Acro Media built with Drupal and jQuery UI.

An example of a bespoke web to print tool Acro Media built with Drupal and jQuery UI.

Like many Drupal agencies, there’s rarely a problem we face that can’t be solved with in-house open source tools. Before we decry the problems, we are very proud of what we accomplished in the past given budget and available tools. With jQuery UI and html-to-pdf experience, we’ve built these kinds of tools before, to varying degrees of success. Every time we tackled a project like web-to-print, the struggle became very real. With minimal hours, the tools we knew and loved created a functional experience that was hard to maintain and very error prone.

Demo Drupal Commerce today! View our demo site.More often than not, we had trouble with converting HTML to PDF reliably enough for high-resolution print-quality, especially with customer supplied imagery and layout. Offering fonts in a customized product builder is challenging to get right, especially when you’re creating a PDF that has to have the font attached. The RGB colorspace doesn’t translate easily to CMYK, the most common four color process for printing. And all of our experience in software revolved around pixels, not these things called picas. In this crazy world resolution could go as high as 3200 dpi on standard printers, dimensions suddenly couldn’t be determined based on pixels.

When one of our clients that had a tool we had built with existing technologies asked for some (not all) of the features mentioned in the beginning of the article, we also wanted to solve all the technical challenges that we grappled with over a year ago. As the planning stage was coming to an end, it was clear the budget wasn’t going to support such a complicated software build.

Product Customization is not the right phrase

Example screenshot of keditor in action.

Example screenshot of keditor in action.

We started to look for product customization tools and found nada. Then we looked for web layout tools which would maybe give Drupal a better HTML editing experience, but found a disappointing lack of online web to print solutions. We did find grapejs, innovastudio, and keditor

But, almost universally, these javascript-based libraries were focused on content and not editing products that would be printed. We needed something that had the goal of creating a printable image or PDF with a tight integration around the editor experience. We had nearly convinced ourselves there wasn’t a vertical for this concept, it seemed like nearly all product builders in the wild were powered by one-off conglomerations of toolsets.

Web to Print using Customer’s Canvas works with Drupal, right?

Finally, via a project manager, an industry phrase was discovered that opened the floodgates: web to print. After a bit of sifting through the sales pitch of all the technologies, almost all tools were found to be cumbersome and hard to integrate in an existing Drupal website, save one. Customer’s Canvas checked all the boxes and then some:

  • SAAS (so we don’t have to host customer’s images, or maintain the technology)
  • White label
  • More than fully featured
  • Completely customizable
  • Iframe-friendly. Meaning we could seamlessly plop the product customization tool into an existing or new layout.

Example of Customers Canvas running in Drupal Commerce.

Example of Customers Canvas running in Drupal Commerce.

To make an even longer story short, we jumped on board with Customer’s Canvas and built the first (to our knowledge) third party web to print Drupal 7 module. We might make a Tech Talk regarding the installation and feature set of the module. Until then, here’s what you can do:

  1. Download and install the module
  2. Provide some API credentials in the form of a javascript link
  3. Turn on the Drupal Commerce integration
  4. Provide some JSON configuration for a product via a field that gets added to your choice of product types.
  5. Click on Add to Cart for a Customer’s Canvas product
  6. Get redirected to a beautiful tool
  7. Click “Finish” and directed to a cart that can redirect you back to edit or download your product.
  8. As a store administrator, you can also edit the product from the order view page.

web-to-print_customers_canvas_drupal_cart

Drupal 8 and Web to Print and the Future

Currently, the module is built for Drupal 7. Upgrading to Drupal 8 Commerce 2 is definitely on our roadmap and should be a straightforward upgrade. Other things on the roadmap:

  • Better B2B features
    You can imagine a company needs signs for all of it’s franchisee partners and would want the ability to create stores of customizable signage. With Commerce on Drupal 8, that would be pretty straightforward to build.
  • More download options
    Customer’s Canvas supports lower res watermarked downloads for the customers as well as the high res PDF downloads. Currently the module displays the high resolution for all parties.
  • Better administrative interface
    If you’re using Drupal 7, the integration for this module is pretty easy, but the technical experience required for creating the JSON formatting for each product is pretty cumbersome. So it would be awesome (and very possible) to build out the most common customizations in an administration interface so you wouldn’t have to manage the JSON formatting for most situations.
  • Improve the architecture
    Possibly support Customer’s Canvas templates like entities that are referenced so that you could create a dozen or so customizable experiences and then link them up to thousands of products.
  • Webform support
    The base module assumes your experience at least starts with an entity that has fields and gets rendered. We could build a webform integration that would allow the webform to have a customer’s canvas build step. T-shirt design content anyone?

Integration can be a game changer

One of the big reasons we work with Drupal and Drupal Commerce is that anything with an API can be integrated. This opens the doors to allow the platform to do so much more than any other platform out there. If an integration needs to be made, we can do. If you need an integration made, talk to us! We're happy to help.

Contact Acro Media Today!

Contact us and learn more about our custom ecommerce solutions

Jun 14 2018
Jun 14
Official 8.0 Version Now Available


The Drupal Point of Sale provides a point of sale (POS) interface for Drupal Commerce, allowing in-person transactions via cash or card, returns, multiple registers and locations, and EOD reporting. It’s completely integrated with Drupal Commerce and uses the same products, customers, and orders between both systems. You can now bring your Drupal 8 online store and your physical store locations onto the same platform; maintaining a single data point.

The Drupal 7 version has been in the wild for a while now, but today marks the official, production ready release for Drupal 8.

Release Highlights

What features make up the new version of Drupal Point of Sale 8? There are so many that it will probably surprise you!

Omnichannel

Omnichannel is not just a buzzword, but a word that describes handling your online and offline stores with one platform, connecting your sales, stock and fulfillment centers in one digital location. Drupal Commerce has multi-store capabilities out of the box that allow you to create unique stores and share whatever product inventory, stock, promotions, and more between them. Drupal Point of Sale gives you the final tool you need to handle in-person transactions in a physical storefront location, all using your single Drupal Commerce platform. That’s pretty powerful stuff. Watch these videos (here and here) to learn more about how Drupal Commerce is true omnichannel.

Registers

Set up new registers with ease. Whether you have 1 or 1000 store locations, each store can have as many registers as you want. Because Drupal Point of Sale is a web-based solution, all you need to use a register is a web browser. A touch screen all-in-one computer, a laptop, an iPad; if it has a web browser, it can be your register. The Point of Sale is also fully open source, so there are no licensing fees and costs do not add up as you add more registers.

Customer Display


While a cashier is ringing through products, the Customer Display uses WebSocket technology to display the product, price, and current totals on a screen in real-time so the customer can follow along from the other side of the counter. Your customers can instantly verify everything you’re adding to the cart. All you need for the Customer Display is a web browser, so you can use an iPad, a TV or second monitor to display the information in real-time as the transaction progresses.

Barcode Scanning

Camera based barcode scanning
Don’t have a barcode scanner? No problem. With this release, any browser connected camera can be used to scan barcodes. Use a webcam, use your phone, use an iPad, whatever! If it has a camera, it works. This is helpful when you’re at an event or working a tradeshow and you don’t want to bring your hardware along.


Traditional barcode scanning
A traditional barcode scanner works too. Simply use the barcode scanner to scan the physical product’s barcode. The matching UPC code attached to one of your Drupal Commerce product variations will instantly add the product to your cashier’s display.

Labels

Generate and print labels complete with barcodes, directly from your Drupal Point of Sale interface. Labels are template based and can be easily customized to match any printer or label size so you can prep inventory or re-label goods as needed.

Receipts

Easily customize the header and footer of your receipts using the built in editor. Add your logo and contact information, return/exchange policy, special messaging or promotions, etc.

Drupal Point of Sale cusomized receipts

When issuing receipts, you can choose to print the receipt in a traditional fashion or go paperless and email it to your customer. You can do either, both, or none… whatever you want.

Returns

Whether online or in store, all of your orders are captured in Drupal Commerce and so can be returned, with or without the original receipt. A return can be an entire order or an individual product.

End of Day (EOD) Reports

When closing a register, you cashiers can declare their totals for the day. You can quickly see if you’re over or short. When finished, an ongoing daily report is collected that you can look back on. On top of this, Drupal Point of Sale is integrated with the core Drupal Commerce Reporting suite.

Drupal Point of Sale end of day reporting

Hardware

Use Drupal POS 8 with anything that supports a browser and has an internet connection.

Technical Highlights

Adding to all of the user highlights above are a number of important technical improvements. It’s the underlying architecture that really makes Drupal Point of Sale shine.

Themable

Cashiers login to Drupal Point of Sale via a designed login page. Once logged in, the theme used is the default Drupal admin theme. However, like any other part of Drupal, your admin theme can be modified as much as you like. Keep it default or customize it to your brand; it’s yours to do with as you please.

Drupal Point of Sale themable cashier login screen

Search API Enabled

The search API is a powerful search engine that lets you customize exactly what information is searchable. Using the Search API, your cashiers are sure to quickly find any product in your inventory by searching for a product’s title, SKU, UPC code (via barcode scanner), description, etc. Search API is completely customizable, so any additional unique search requirements can be easily added (brand, color, weight, etc.). The search API references the products on your site, and at any other store or multi-warehouse location to allow for you to serve customers in real-time. 

Fully Integrated with Drupal Commerce

The Drupal Point of Sale module seamlessly integrates into the existing Drupal Commerce systems and architecture. It shares products, stock, customers, orders, promotions and more. This makes Drupal Point of Sale plug-and-play while also making sure that the code base is maintainable and can take advantage of future Drupal Commerce features and improvements.

Permissions and Roles

When Drupal Point of Sale is installed, a “cashier” user role is created that limits the access users of this type have with your Drupal Commerce backend. Use Drupal’s fine grained permissions and roles system to manage your cashiers and give different permissions to employees, managers, marketers, owners, IT, etc. Any way you want it.

Custom Hardware

As mentioned above, all you need to use Drupal POS 8 is anything that supports a browser and has an internet connection. This opens the door for all kinds of custom Point of Sale hardware such as branded terminals, self-serve kiosks, tradeshow-ready hardware, and more.

Drupal Point of Sale Raspberry Pi custom hardware

We’ve been having fun prototyping various Raspberry Pi based POS hardware solutions. You can see some of them here and stay tuned for more. Drupal Point of Sale is open source, so why not open up the hardware too?

Drupal Point of Sale 8, Ready for your Drupal Commerce platform

We’re excited to finally release the production ready version of Drupal Point of Sale 8.0. There are many ecommerce-only platforms out there, but almost none of them can ALSO run in your physical store too. This is a BIG DEAL. Drupal Point of Sale gives you the last piece needed to run your entire store using Drupal Commerce allowing for centralized data and a single system for your team to learn and manage.

One admin login, one inventory list, one user list, one marketing platform, ONE. True omnichannel, without the fees.

Next Step

Watch a Demonstration
Mike at Acro Media recorded a quick video to show Drupal Point of Sale in action. He shows the interface, how it's configured, and some of the features.

[embedded content]

Commerce Kickstart
Starting a Drupal Commerce project from scratch? Use Commerce Kickstart to configure your install package (including Drupal Point of Sale).

Install with Composer
Already using Commerce for Drupal 8? Install Drupal Point of Sale with Composer.

$ composer require drupal/commerce_pos

Let Acro Media help
Acro Media is North America’s #1 Drupal Commerce provider. We build enterprise commerce using open source solutions. Unsure if Drupal Commerce and Drupal Point of Sale meet your business requirements? A teammate here at Acro Media would be happy to walk you through a replatforming evaluation exercise and provide you with the Point of Sale workbook to help you make your decision.

Contact Acro Media Today!

More from Acro Media
Jun 08 2018
Jun 08

Ashday Interactive Systems logo and React logo

Decoupled Deschmupled

Like many folks in the Drupal space we've been closely following the Decoupled Drupal conversation for the past few years, and occasionally a part of it.  And, again like many folks in the Drupal space, until recently we had felt that it was somewhat in its infancy and a lot of tough questions still remained as to whether it was even a good idea. The SEO implications have not been entirely clear, the impact on estimation has also been very hard to nail down, which decoupled framework to go with has not at all been a consensus, and what Drupal’s exact role is in the decoupled site has not been clear either. 

Choosing a JavaScript Framework: React vs Angular vs Ember

So like Stryder shuffling through the grass and reading the signs of what had happened to two of his favorite hobbits, we started to sense in the past year that maybe Decoupled Drupal was becoming suddenly not an odd-ball proposal but possibly a truly beneficial solution with a backbone. A key component for us? React. Heard of it? Probably. It’s been around for a few years now. The critical difference for us with this was momentum. After all, if you want to train up your staff on a whole new technology you better be certain it’s not dead in 12 months.

Let’s take a look at some Google Trends.

This is the last two quarters of 2017 Google Trends for the terms Angular, React and Ember, which were the three most talked about decoupled js libraries/frameworks at DrupalCon Baltimore last year.

Graph showing interest in Angular, React, and Ember in 2018.(blue = Angular, red = React, orange=Ember)

Result? Angular is solidly in first, React is reasonably behind in second, and Ember is a distant third. Hard to know where things are headed exactly, and coupling that with the fact that the theme in Baltimore was that Angular has the most attention, but people seemed divided about whether it was the long-term solution because React and Ember (and others) were growing trends. 3 distinct trending choices? Not sure which is best? And many were unsure this was even a good move, as were we. Better hold off a bit.

Now let’s look at the trends for 2018.

Google Trends graph demonstrating increased interest in React in 2018. (blue = Angular, red = React, orange=Ember)

Notice a difference? Look at that little red bar now. That’s React. So even though just a year ago Angular held a reasonably strong lead, it definitely held true that some newer frameworks were gaining momentum, and React has already caught up with Angular. And further, Ember has fallen further behind. When you factor in how much of Google searching is people looking for support for something they’ve already built, which heavily favors the 5-years older Angular, that makes the React climb even more impressive. Does it mean Angular is dead? Far from it. But React is exploding.

Then there’s this: https://dri.es/drupal-looking-to-adopt-react. Yep, those chiefly interested in and responsible for Drupal are favoring React as well. Further, the general feel on the interwebs was that across all web technologies, decoupling was growing as a plausible solution in leaps and bounds. Great ideas were being kicked around about specific solutions to the hard decoupling problems. And above all, we’ve been looking for an excuse to give it a whirl. Well that just about solves it. If we’re going taking the plunge on this decoupling adventure, let’s just roll up our sleeves, install React, aggregate and distill our two years of thoughts on the matter, and cannonball into the deep end of Decoupled Drupal.

Brainstorm your next development project with  an Ashday expert!  Request your free session today. 

React and SEO

When you decide to decouple - even if you’ve already picked a js foundation to build it on - you quickly realize that the solutions are as varied and complex as they are on the back-end of sites. If you’re going with React like we did, then that fortunately becomes much simpler still requires a lot of investigation, learning, experimenting and decision making. In order to not be plagued with decision paralysis, we decided our top priority was ensuring that none of what we were about to do was going to hurt our SEO. The flare and flash could come later. This was probably the one real deal-breaker for us in this endeavor.

SEO these days is rather complex and somewhat arbitrary, but there are some easy-to-overlook SEO principles when it comes to page rendering that must be addressed in a decoupled architecture. No one wants to tweak the heck out of their site and push on content editors to make sure everything is SEO friendly only to implement an architecture that keeps people from finding you. While a bit oversimplified, let’s look at three key principles that are to be followed when delivering page content if you don’t want to be punished.

  1. The content needs to be delivered to search engines and users even without JavaScript.
  2. The content needs to be delivered to search engines that do run JavaScript (i.e., Google), but won’t wait for asynchronous APIs to load.
  3. The content delivered to search engines needs to match closely what site visitors receive so that we don’t get punished for cloaking.

There are a few approaches to this problem. And while “I quit” was certainly on the table for us, we pushed through and are glad we did. So let’s take a look at our more courageous options.

Client-side Rendering

This is effectively the coolest part of React, but you have to be careful of the implications, especially when content is dynamic. So for example, you can load your whole front end “shell” in React nearly instantly and then let things like dynamic header menus, page content, footer content, etc all load asynchronously as soon as it’s available. This creates some neat opportunities to improve user experience. The problem is the SEO implications. As stated above, you really can’t do asynchronous rendering and have it delivered that way to search engines, so now you’ve got a problem. For us, this meant choosing to use client-side rendering approaches where it benefitted actual user interaction and leave the rest to the server.

Pre-rendering

In this approach, your site is rendered statically on a Node.js server somewhere and the pages are served to the end user with no JavaScript required for initial page load. This leads to blazing fast pages as it’s just raw HTML/CSS/JS and no API calls on the fly, but it also leads to some significant downsides depending on your requirements. For example, in pre-rendering you are caching entire pages so if you have thousands of them, perhaps with varied caching control on various pieces of the pages to optimize performance, you now have a very heavy pre-rendering load. This means the task of updating your pre-rendered pages whenever any element of that page might change can become substantial and also complicate your CMS. For us, this wasn’t an option because even in building Ashday.com, we wanted to work with an approach that we felt could be adapted to our biggest clients.

Server-side Rendering

This is ultimately where we landed for ashday.com and we’ve been quite happy with it (so far). With server-side rendering, your pages are still “live”, but they are generated on the Node.js server when requested so that search engines and users get the same experience. It also allows us to handle the caching of various API calls separately so that we can get great performance. It’s not going to be quite as fast as pre-rendered, but then again we also don’t have to tackle the complex task of figuring out how any element of the site might affect a rendered page and be sure to appropriately - and in timely fashion - re-render all of those pages. So on a site with 50,000 articles, a change to a menu link in the header would mean re-rendering every page when using pre-rendering, but with server-side rendering, it just means a cache reset on a single API call to get menu links. It’s a fair trade off, we think.

So with all of that, we decided to build a React app using Next.js. It’s not all that different from straight React, but it offers a few bells and whistles, notably the added synchronous getInitialProps lifecycle method, that make server-side ren

dering a snap. Other approaches, such as using the default Facebook React app, seem much more suited for static non-API-based websites because you really end up needing to implement your own server-side solution where you separate your server configuration from your client configuration. Given that there are already so many new problems to solve and new concepts to learn, we settled on Next.js for now so that we could move forward and get our hands dirty without killing our Google juice.

As a side note: We’re pretty stubborn about wanting the best experience here though so we’re actually hoping that either the upcoming version of Next.js that includes React Router or else another evolving React-based solution will make it much easier out-of-the-box to build a React-solution that both renders server-side for initial page loads and lets the client run the show after that. As of yet, it’s a bumpy road to get there with existing tech and you have to evaluate the cost and overhead of trying to make that work.

Looking to use react for your next digital project? Find out how Ashday can use React to make your project a success.

Jun 08 2018
Jun 08

Background

I am the sysadmin and developer for Art & Object, a Drupal 8 website built with the Drupal Composer project. The version pin in composer for Drupal was 8, which in hindsight was too broad for our usage. Meaning Drupal point releases (8.3 to 8.4) require study to ensure you understand all the implications, which wasn't something I did. I just blindly did a composer update, thinking everything would be handled automatically.

This really bit me when 8.4 came out because my server was running Debian Jessie, which runs PHP 5.6 and my composer didn't have a platform PHP configuration, so a lot of the underlying Symfony code updated to PHP 7. So I ended up doing a backgrade until I figured it out.

Then there were the critical security Drupal updates (SA-CORE-2018-002 and SA-CORE-2018-004) earlier this year that would not be released for 8.3, so I had to upgrade (or at least, at the time, I felt I had to, though I see now they have a patch for older 8.x releases). By that time, 8.5 was released, so I updated the composer to 8.5 and ran update and after some basic testing, moved on.

Then a few months later, I noticed the status error messages about running the contrib media module alongside the core and I knew I missed something and there was a problem.

I then started down a wicked rabbit hole of getting a local copy running and following the upgrade instructions, running into problem and going back to getting a local copy running fresh again and trying again. Lots of trail and error (mostly errors) and head-banging-on-the-desk. I looked for help on the #media IRC channel, but the best advice came from posting on Stack Overflow, where @sonfd pointed out that the media module needs to be uninstalled first. I thought I had tried that and ran into an error message that mentioned you can't uninstall the media module with media items already created.

The Fix

So after lots and lots (and lots) of local refreshes and trials and errors, here's the list I finally followed when it came time to upgrade production:
  1. First, put the site in maintenance mode. Then take a database backup and make a tarball of your project directory. Don't skip over this.
  2. drush pmu media crop_media_entity: pmu = pm-uninstall. Remove the media module (and crop_media_entity, if you have that, too). This was the tip from @sonfd that opened the rest of this process for me.
  3. composer remove drupal/media: Remove the contrib media module from the filesystem. I should add that I prefixed all my composer commands with /usr/bin/php -d memory_limit=-1 /usr/local/bin/ because I often ran into memory limits when running composer.
  4. composer require drupal/inline_entity_form drupal/crop:1.x-dev drupal/media_entity_instagram:2.x-dev drupal/media_entity:2.x-dev drupal/media_entity_slideshow:2.x-dev drupal/media_entity_twitter:2.x-dev drupal/slick_media:2.x-dev drupal/media_entity_actions: These modules are temporary to help upgrade the database records.
  5. composer remove drupal/video_embed_field: For some reason, I couldn't require video_embed_field:2.x-dev, so I removed it and then...
  6. composer update: When I ran this, it updated video_embed_field to 2.x-dev.
  7. composer require drupal/media_entity_image drupal/media_entity_document drupal/image_widget_crop: More temporary modules to help the upgrade process.
  8. drush cr: Clear cache to make sure Drupal picks up new modules and paths.
  9. drush updb: Run the database updates.
  10. drush pmu entity media_entity: Uninstall these modules (these were the old contrib modules)
  11. composer remove drupal/media_entity drupal/media_entity_image drupal/media_entity_document drupal/crop drupal/image_widget_crop
    /usr/bin/php -d memory_limit=-1 /usr/local/bin/composer require drupal/crop:2.x-dev drupal/image_widget_crop drupal/empty_page:2
    : Clean out the temporary modules from the filesystem.
  12. drush cr: Clear caches
  13. drush updb: Run database updates
  14. drush cex: Export the configuration (so you can commit it later).
  15. The blazy module had an error with the core media and hasn't been updated (as of this writing), but there is a patch to fix that. So I learned how to add patches to a composer file - turned out pretty simple. Add this to composer.json in the extra section:
            "patches": {
                "drupal/blazy": {
                    "Gets Blazy to work with Drupal Core Media": "https://www.drupal.org/files/issues/2881849-8.patch"
                }
            }
  16. composer update: This was odd, but I had to do an update, which picked up the patch, but didn't really install it. I can't remember exactly now, but I believe this actually deleted the blazy folder.
  17. composer remove drupal/blazy: So removing this actually installed it. Who knew? Whatever ... it's still in my composer.json and now the filesystem has the module and the patch.
  18. drush cr: Clear caches!
  19. For some reason, this upgrade created a new field called field_media_image_1 and assigned that as the source for the image media type, which broke some of the images on the site. So I edited media.type.image.yml file to revert source_field back to my original field_image.
  20. drush cim: Import my hack to get my media image type to work.
  21. I had a custom field formatter that I had to edit to change the namespace from media_entity to media.
  22. drush cr: Final cache clear!
  23. Test and make sure all is well. If so, take the site out of maintenance mode and commit your repo changes.

Advice / Conclusion

A lot of this pain could be negated by studying the release notes better. I own that and this counts as one of my many scars of lessons learned. I hope others can learn from my lesson, too. Someone may end up writing a meta post about this post to point out the high cost of maintaining a Drupal site and I don't think they'd be wrong about that, but that's the price you pay for running servers that are publicly accessible.
Jun 07 2018
Jun 07

The situation: I'm the primary maintainer of the Commerce Point of Sale module and have been building a customer facing display feature for the Commerce 2 version. So, I have two separate pages, one is a cashier interface where a cashier enters products, the second is a customer facing screen where the customer can watch what products have been scanned, review pricing, and make sure everything is correct.

The problem: Since products can be scanned through quite quickly, it was imperative that the customer facing display update very quickly. The display needs to match what's happening in near real-time so that there is no lag. Unfortunately, AJAX is just too slow and so I needed a new solution.

The solution: WebSockets seem like a great fit.

Design

AJAX - Too slow!

WebSocket - Fast!

The socket server can either not bootstrap Drupal at all, or bootstrap it only once upon load, making it able to relay traffic very quickly.

Dependencies

I only needed one dependency for this, Ratchet, which is a PHP library for handling WebSockets and is easily installed via Composer.

Setup

The WebSocket server is actually very simple, it finds and loads up the autoload script for Drupal, similar to how Drush does it.

We bootstrap Drupal, just so we can load a few config settings.

We terminate the Drupal kernel, since we don’t need it just for ferrying traffic back and forth and it will probably leak memory or something over a long time if we use it a bunch, since Drupal isn’t really meant to run for ages. I did try it with Drupal running the whole time and it did work fine, although this wasn’t under any real load and only for a couple days.

Now all that we have to do is setup the service.

All the details of our service come from the class we pass in, which basically hooks in the different server events. I’ll leave the details of that outside of this article as none of it is Drupal specific and there are lots of tutorials on Rachet’s site: http://socketo.me/docs/hello-world

Javascript

On the JavaScript end, we connect to the WebSocket using the standard interface.

I used a few mutation observers to monitor for changes and then passed the changes to the WebSocket to relay. You could do this however you want and probably some nicely integrated JS or even a React frontend would be a lot cleaner.

Resources

Related module issue: https://www.drupal.org/project/commerce_pos/issues/2950980
Ratchet PHP Library: http://socketo.me/

Contact us and learn more about our custom ecommerce solutions

Jun 05 2018
Jun 05

Webform allows you to create powerful forms in Drupal without the need for any custom code. You can use it for a basic contact us form with a few fields such as name, phone and email, or it can also be used to create complex multi page forms with conditional fields.

If you want to allow your editors to create their own forms without the need of a developer then install and teach them how to use the module. If you want to learn more about webform we have a two part series which will help you get started; Getting Started with Webform in Drupal 8 and Moving Forward with Webform in Drupal 8.

Collecting submissions using Webform is easy, but what if you want to integrate the module with a 3rd party SaaS provider? What if you want to push all contact form submissions into your CRM system, or add a row into a Google Sheets spreadsheet.

Of course, this can be done by a developer through the right APIs but you can also do it without writing any code using a service called Zapier.

In this tutorial, you’ll learn how to send Webform submissions into Zapier which will then add it as a row into a Google Sheets spreadsheet.

What is Zapier?

Zapier is an automation platform which lets you create workflows based on an action. For example, you could create a workflow when a user subscribes to a MailChimp list it’ll add the contact in a CRM (if supported by Zapier) or a Google Sheets spreadsheet.

It has integration with over 1000 SaaS applications and I do recommend that you have a play around with the service if you’ve never used it. They do offer a decent free plan which is more than enough to get you started.

Personally, if I’m looking at using a new SaaS application the first thing I check is if it has Zapier integration that way you can move data around and you have more flexibility.

How Does Webform Send Submissions to Zapier

Submissions are sent to Zapier using a POST request. This can be configured by adding a “Remote post” handler to a form. When a submission gets added, Webform will send it via a POST request using the URL in the “Remote post” handler.

Getting Started

For this tutorial, I’m going to assume you know how to use Webform. So all we’re going to do is download the module and install Webform and Webform UI. We’ll use the default Contact form that comes with the module.

Using Composer:

Composer require drupal/webform

Step 1: Create Zap on Zapier and Get POST URL

If you haven’t already, go ahead and create an account on Zapier. It is a paid service but has a free plan.

The first thing we’ll need to do is create the Zap where we’ll define a trigger and action.

1. Click on “Make a Zap!” in the top right.

2. In the “Choose a Trigger App” page, click on Webhooks in the “Built-in Apps” section down the page.

3. Choose “Catch Hook” and click “Save + Continue”.

4. Click Continue on the “Pick off a Child Key” page.

5. Copy the POST url because we’ll need it for Webform.

Step 2 : Set up Remote Post Handler

Using the POST url from Zapier which we got in the last section, we’ll need to create a “Remote post” handler in Webform.

1. Go to Structure, Webforms and click on Settings on a Webform. For this tutorial, I’ll use the default Contact form that comes with Webform.

2. Click on the “Emails / Handlers” tab, then click on “Add handler”.

3. Click on “Add handler” on the “Remote post” row.

4. In the Completed section paste in the URL we got from Zapier and click on Save.

Note: You can add a URL if the submission is updated or deleted. That’s a nice bit of added flexibility. I should also note that this is all the configuration required on Webform’s part, cool isn’t it!

Step 3: Send Test POST to Zapier and Finish Configuring Trigger

Let’s now jump back into the Zap we started building in step one.

1. Once you’ve configured the “Remote post” handler click on “Ok, I did this”.

2. Now go back to your Drupal site and submit the actual form so it sends a POST to Zapier. This is a required step.

3. Once you’ve sent a test POST, you should be on the “Pick A Sample To Set Up Your Zap” section. You can view what was in the post by clicking on the down arrow.

When you’re ready click on Continue.

Step 4: Configure Action in Zap

At this point, we’ve configured the trigger in our Zap and sent a test submission. We know that the POST request from Webform worked because Zapier received it.

Now we need to configure the action; where the submission will be stored.

1. Click on Google Sheets on the “Choose an Action App”.

2. Choose “Create Spreadsheet Row” and click on “Save + Continue”.

3. Connect Zapier to your Google account, then click on “Save + Continue”.

4. From the Spreadsheet field select the actual spreadsheet you want the submissions saved into.

5. Select the Worksheet within the spreadsheet.

If you see the message below it means your spreadsheet doesn’t have any headers.

Go and add a header for each column you want to save in your Google Sheets spreadsheet.

6. Now go and map the fields with the values below the “Catch Hook”.

Then click on Continue.

7. Click on “Send Test to Google Sheets” to test everything out.

Check your Google Sheets you should see a new row in it.

Then click on Finish.

8. Don’t forget to name and Zap and switch it on.

Step 5: Test Webform Submission

Go to your Webform and create an actual submission. Once submitted you should see the submission as a row in the spreadsheet.

Debug Zapier

If you need to debug what’s coming into Zapier or you want to see all the submission data which has been pushed into Zapier, then go to the “Task History” page.

From this page you can view if the task was successful or if there was a error. You can sometimes get an error if the API is down and not working.

You can also see what data has come in and out by clicking on the Task.

This gives you some nice visibility into what Zapier is handling.

Summary

The combination of Webform and Zapier is powerful. Almost everyone can be trained to use Zapier and create Zaps which will open a whole new world of possibilities. You’ll finally be able to connect your CRM with Drupal and without the need for custom code.

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.

Jun 01 2018
Jay
Jun 01

Illustration of a person signing a document electronically.

Previously, I wrote a bit about the HelloSign eSignature platform and how it can be integrated into a Drupal 7 website. As promised, a Drupal 8 version of the integration is now available and ready for use on cutting-edge websites everywhere. But this new version is much more than a one-to-one upgrade of the original module— we've leveraged some of Drupal 8's great new features to make using HelloSign with your site even easier than it was before. Here are just some of the highlights of the new release:

Composing Your Site

Installing the old HelloSign module could be a bit of a pain. In addition to needing to download the HelloSign module for Drupal, it was also necessary to download a separate HelloSign PHP SDK and put it in the right place in your site's code. Now, the HelloSign module can be installed easily using Composer. Instead of downloading two files from two different sites, unzipping them, and carefully making sure to put them in the right place in your site code, all you have to do is run one simple Composer command:

composer require drupal/hellosign

That one command will install the module in the right place, and it also installs all of the module's dependencies, including the HelloSign PHP SDK and the Encryption module (more on that in a moment), making it even easier to get started with HelloSign in Drupal 8 than it was in Drupal 7.

Need to Integrate Drupal with HelloSign, or with Anything Else?  Request your free consultation with an Ashday Drupal integrations expert today. 

Security by Default

Many Drupal modules are available which, like the HelloSign module, help make it simpler to integrate with other services. One thing common to most such modules is that they add a configuration form on the Drupal site, which administrators can use to set up the integration by entering essential information such as credentials and API keys. The HelloSign module is no different; integrating with HelloSign requires the use of an API Key and a Client ID, and the module provides an easy way to set these (and other useful settings) through the administration interface.

One thing that often gets overlooked by integration modules, however, is the security of this saved information. Once the API key is configured, it is stored as plain text both in the database and (if you are using Drupal 8's configuration management feature) in the code of the site. Unfortunately, that means that if any ill-intentioned person somehow gained access to most any part of your site, they'd have access to your secret API key.

To mitigate this common issue, the HelloSign module in Drupal 8 makes use of the Encryption module to store this private information in a secure, encrypted format, decrypting it only when necessary to interact with the HelloSign API. This feature is on and enabled by default and, in fact, can't be disabled, because having such an option would make for inherently weaker security.

Built for the Modern Web

One issue with Drupal 7 was that it was not, on the whole, built with modern object-oriented PHP coding practices, and the modules built for Drupal 7 often followed suit. Drupal 8, however, is a whole new object-oriented world, and that's as true of the HelloSign module as it is of Drupal Core.

The Drupal 7 version of the HelloSign module had most of its features buried in a number of disparate functions, many of which were ultimately just wrappers for functionality made available in an object-oriented fashion by the HelloSign PHP SDK. For Drupal 8, we've simplified this. The HelloSign module provides a

service which, in addition to allowing the creation of signature requests, also provides direct access to the rest of the HelloSign API. Instead of making assumptions about what bits and pieces of the API's many features a site might need, now, all of it is available. The service also automatically establishes the necessary connection info, so that your developers never have to worry about how to connect to HelloSign.

In Conclusion

The HelloSign Module for Drupal 8 has all these improvements (the use of composer, enhanced security, and a modern object-oriented design) and many more, including vastly expanded documentation and more granular permission handling. We hope that it will be of use to you on your next Drupal project which needs to support eSignatures.New Call-to-action

May 30 2018
May 30
Photo by Drupal Association

Government touches the lives of us all in fundamental ways. It is essential that government is able to communicate with its citizens in an effective and inclusive manner.
This communication requires high quality tools and special considerations regarding:

  • exchange of information with each other and citizens in an open manner
  • providing ability of citizens to see how their government is run
  • protecting citizens’ data and privacy
  • providing modern and easy to use technologies for both citizens and authorities
  • contributing back their code and data, because it’s paid for by the citizens

Therefore, we have dedicated a special government track at the Drupal Europe Conference.

As you’ve probably read in one of our previous blog posts, industry verticals are a new concept being introduced at Drupal Europe and replace the summits, which typically took place on Monday. At Drupal Europe. These industry verticals are integrated with the rest of the conference — same location, same ticket and provide more opportunities to learn and exchange within the industry verticals throughout 3 days.

The Government vertical track of the Drupal Europe Conference is focused on trends and innovations as well as all aspects of the current developments and challenges within the government space.

In an exciting mix of case-studies, panel-discussion and thematic sessions the following, most burning topics will be discussed

  • Open access, data, government and standards
  • Accessibility / Inclusivity
  • Digital-by-default citizen services
  • User experience design for digital services
  • Hosting and Security
  • Content Management and Usability of digital tools
  • and more

We strive to provide the best possible lineup of speakers and session with a great variety of interesting topics to create the best conference for attendees working within and who are interested in government.

Session submissions is open / Call for Sessions is open and we ask you to submit interesting session proposals to create an awesome conference. Session proposals are not limited to Drupal and all topics in relationship with the above are welcome.

Please also help us to spread the word about this awesome conference. Our hashtag is #drupaleurope.

If you want to participate in organisation or want to recommend speakers or topics please get in touch at [email protected].

In any case we look forward to seeing you at Drupal Europe on September 10–14 in Darmstadt Germany!

About Drupal Europe Conference

Drupal is one of the leading open source technologies empowering digital solutions in the government space around the world.

Drupal Europe 2018 brings over 2,000 creators, innovators, and users of digital technologies from all over Europe and the rest of the world together for three days of intense and inspiring interaction.

Location & Dates

Drupal Europe will be held in Darmstadtium in Darmstadt, Germany — with a direct connection to Frankfurt International Airport. Drupal Europe will take place 10–14 September 2018 with Drupal contribution opportunities every day. Keynotes, sessions, workshops and BoFs will be from Tuesday to Thursday.

May 29 2018
May 29

Part 3: The Final Installment

This is the final installment of Drupal Taxonomy that we feel is important for one unfamiliar with Drupal to know! At this point, hopefully, you understand some of the key language that is regularly used in the Drupal Community.  For reference, our first two blogs, Part 1 and Part 2, should provide you any background you may not already have.  Mobomo is the team that is behind NASA, the solar eclipse with NASA, the USGS store, and NOAA Fisheries, all of which are Drupal sites.  Similar to these organizations, Drupal is the CMS system for you if your needs are more complex, you are developing an e-commerce portal, or if you have a large amount of content to maintain.  If you have a Drupal project in the works or are about to migrate versions or CMS systems, Mobomo has some of the best and brightest Drupal developers in the DC area.

Key Terms:

  1. Permissions – This is a tool for controlling access to content creation, modification, and site administration at the application level.
    1. Administrators can assign permissions to roles, then assign users to these roles.
    2. The first user receives all permissions.
  2. Template – This refers to a file to express presentation
    1.  These are mostly written with a markup language that has variables representing data provided to the template.
  3. Theme Engine – This is a set of scripts that interprets code and makes theming a site easier. These scripts take the dynamically generated content and output it to HTML.
    1. The default theme engine is PHPTemplate
  4. Theme Hook – This is an identifier used by the calls to the theme() function to delegate rendering to a theme function or theme template.  Modules which extend Drupal may declare their own theme hooks to allow editors to control the markup of that module in their theme.
  5. Trigger – These typically result from a characteristic change in an entity maintained by a module.
    1. Types:
      1. Deleting content
      2. Adding a comment that a user has logged in
      3. Adding a term
  6. Triage – A new issue is assigned a priority based on its severity, frequency, risk, and other predetermined factors.
  7. Zebra Striping – This refers to the to the alternating colors between rows of data. It is most common for rows of data to alternate background colors between white and gray.
  8. Testbot – A continuous integration service for testing patches submitted to project issues on Drupal.org.
  9. Roles – A name for a group of users, to whom you can collectively assign permissions. There are two predetermined, locked roles for every new Drupal installation:
    1. Authenticated User – anyone with an account on the site.
    2. Anonymous User – those who haven’t yet created accounts or are not logged in.
    3. Additional roles can be added and users can belong to multiple roles.
  10. Path – This is the final portion of the URL that refers to a specific function or a piece of content.

Please reference Drupal.org for more information!

May 29 2018
May 29

Did you know that Drupal has a Point of Sale (POS) module that pairs with the widely used Commerce module? That's right, Drupal Commerce is now the full end-to-end platform for a complete omnichannel ecommerce experience. Whether you're running an online store, a physical store, or both, you can do it all with Drupal Commerce!

One of the great things about a web-based POS is that all you need is a web browser for it to work. This opens the door to new POS hardware options. You can use an iPad, a laptop, or anything that has a browser. You don't need any expensive or specialized hardware from Moneris, nor do you need a branded solution such as Square. Instead, you now even have the option to build your own POS hardware for very little cost. Today we're featuring a Raspberry Pi based prototype that WE built! The whole setup cost about $250 CAD.

Watch the video below, or keep reading to learn more.

[embedded content]

As mentioned above, we bought a simple touchscreen and mounted a Raspberry Pi on the back. Once up and running, all you have to do is plug it in, connect it to the Internet, and it will automatically boot up into the POS login screen. If your staff has a problem, all they have to do is unplug it and plug it back in. There's no messing with settings or anything. Just reboot. Easy!

Once you get the hardware working, the display can be used in 3 different ways depending on how you need it:Check Out Our High Five Drupal Web Series

  1. The administrative view, which is what the cashier would use.
  2. A customer display view, which shows what the cashier has added so the customer can see the products and prices entered in real-time. Remember: all you need is a browser and something that can display a browser. The customer display is especially easy because it doesn't have to be a touchscreen; you could just use any monitor, a TV, etc, and run it off of the cashier hardware.
  3. A kiosk view, which is basically just running the front end of the site like your customers would do on their home computers. You could set that out in your store and let customers browse products and make purchases.

So, for a shoestring budget, we created a working point of sale that could be used in a store (see the video above). Aside from looking a little silly, our example is perfectly fine and works great. Plus, there are endless options for inexpensive enclosures to make it look better. You could even build or 3D print your own.

The do-it-yourself (DIY) route is a lot cheaper and gives you the freedom to do whatever you want. We will post further details soon on how to do all this yourself, including specific links to the components we used. And remember: it's Drupal, so it's open source, and all the software is free.

May 25 2018
May 25

Illustration of search function on a website.

Search is an important facet of any large website these days. We’d talked previously about why you want to take full control of your site search. Bombarding your users with a mess of links won’t do anyone any favors. One of our favorite solutions for this problem is Apache Solr and recently we had the opportunity to set it up on Drupal 8. Let’s take a moment to go through a bit of what that solution looked like and some thoughts along the way.

Setting the stage

Before we dive too far into the how, we really ought to give a bit of time to the why. More specifically we need to cover why we didn’t simply use one of the existing modules contributed to Drupal by the community. At the time, there was one prominent module group for implementing Solr search in Drupal 8. The Search API module in tandem with the Search API Solr Search module were really the most direct way to implement this advanced search on your site. These are great modules and for a different situation would have worked just fine. Unfortunately, the requirements we were working with for the project were more specific than these modules were equipped to handle.

There were three key things that we needed control over and we aren’t keen on hacking a module to get something like this done. We needed to have specific control over what was indexed into Solr. The Search API module allows for you to generically specify how fields are translated to the Solr index, but if you need some different handling you would either need multiple indexes or you would need to sacrifice some of that customization. The site also needed to make use of a fairly complicated feature of Solr, the more like this query. (Warning, incoming search jargon!) This query allows you to search the index for content relevant to another indexed piece of content. This relevancy is determined by fields you specify in the query and results can be limited to content that meets a certain relevancy score threshold.

The last thing we had to have in this was the ability to manage how often content was indexed. The existing modules allowed for this action to happen on a periodic cron, but wasn’t able to have the index updated as soon as changes were made to content. This project was going to have a lot of content updated each day and that meant we couldn’t afford to wait for things to be indexed and updated. With these three things creating hurdles to getting Solr implemented in this project it seemed like we were going to have to go another way, but after looking at some documentation we determined that creating our own implementation would not be so difficult.

Brainstorm your next development project with  an Ashday expert!  Request your free session today. 

Solr search with Solarium

Before we get too far ahead of ourselves, we should note that this wasn’t done with a contributable module in mind. That isn’t because we don’t like giving back the the community, we totally do, it was because it was created for a very specific client need. There will likely be a more generic version of this coming out down the road if demand is high enough. Also, we are under the impression that most use cases are covered by the modules mentioned above, so that would be where most would start. Enough with the disclaimers; let’s talk Solarium.

We went with Solarium as the Solr client to use for this. That is what most of the existing Drupal modules use and it seemed to be the most direct way to do this with PHP. Installing Solarium is pretty simple with Composer and Drupal 8. (If you aren’t using Composer yet, you really should be.) Using a client for communicating with a Solr instance isn’t specifically required. Ultimately, the requests are just simple HTTP calls, but the client saves you from having to memorize all of the admittedly confusing query language that comes with using Solr.

Installing Solarium can be done as simply as composer install "solarium/solarium". You could also do this by adding a line to your composer.json file in the require section for "solarium/solarium": “3.6.0”. Your approach on this part may vary, but this should be done from the root of your Drupal site so that this library goes into the global dependencies for the project. These instructions are also detailed a bit more in the official docs for Solarium, here. The official docs also have a bunch of example code that will help if you dive into this like we did.

For this implementation, we opted to create a Solr PHP class to do the heavy lifting and made use of a Drupal service for calls to it from the rest of the app.


namespace Drupal\my_module\Solr;
use Solarium\Core\Client\Client;


class SolrExample {

  /**
   * Connection to the solr server
   *
   * @var Client
   */

  protected $solr;
}

The heart of the class is going to be the connection to Solr which is done through the Solarium client. We will make use of this client in our constructor by setting it up with the credentials and default settings for connection to our Solr instance. In our case, we used a config form to get the connection details and are passing those to the client. We wanted to use the configuration management system so that we could keep those settings consistent between environments. This allowed more accurate testing and fewer settings for developers to keep track of.


/**
* Solr constructor.
*/
public function __construct() {
 $config = \Drupal::config(‘example.solr_config’); //Normally we’d inject this, but for this example we’ll ignore that
 $settings = [
   'endpoint' => [
     'default' => [
       'host' => $config->get('host'),
       'port' => $config->get('port'),
       'path' => $config->get('path'),
       'scheme' => $config->get('protocol'),
       'http_method' => 'AUTO',
       'site_hash' => TRUE,
      ]
    ]
  ];
 $this->solr = new Client($settings);
}


We are doing this in the constructor so that we don’t have to create a new client connection multiple times during a given call. In our case, we ended up using this as a Drupal service which allows us to only have the Client object created once per call and gives a simple way to use this class throughout the app.

The next part is the actual search method. This does a lot and may not be clear from the code below. In this method, we take parameters passed in and build a Solr query. We have a helper function in this that does some specific formatting of the search terms to put it in the right query syntax. For most sites, this code would serve fine for doing generic searching of the whole index or having multiple versions for searching with specific filters

/**
* General Search functionality
*
* @param array $params
*
* @return mixed
*/
public function search($params = []) {

 $query = $this->solr->createSelect();

 $default_params = [
   'start' => 0,
   'rows' => 20,
   'sort' => 'score',
   'sort_direction' => 'DESC',
   'search' => '*:*',
   'time' => '*'
 ];

 $params = array_merge($default_params, $params);

// Building a proper solr search query with the search params
 $search_string = $this->getTextSearchString($params['search'], $params['time']);

 $query->setQuery($params['search']);
 $query->setStart($params['start'])->setRows($params['rows']);
 $query->addSort($params['sort'], $params['sort_direction'] == 'ASC' ? $query::SORT_ASC : $query::SORT_DESC);

 try {
   $results = $this->solr->select($query);
   return ['status' => 1, 'docs' => $results->getData()['response']['docs']];
 }
 catch (HttpException $e) {
   \Drupal::logger('custom_solr')->warning('Error connecting to solr while searching content. Message: @message',['@message' => $e->getMessage()]);
   return ['status' => 0, 'docs' => [], 'message' => 'Unable to reach search at this time. Try again later.'];
 }
}

The code we’ve presented so far isn’t breaking new ground and for the most part does a similar job to the existing search modules available from the Drupal community. What really made us do something custom was the more like this feature of Solr. At the time that we were implementing this, we found that piece to be not quite working in one module and impossible to figure out in another, so we put our own together. 

Thankfully with Solarium, this was a pretty simple query to tackle and we were able to have related content on the site without much other setup. We can create a new more like this query and submit an id so Solr knows which content to compare against for similarity. The rest of it behaves very similar to the search method presented previously. The results are still returned the same and we are able to do some other filtering to change the minimum relevancy score or number of rows.

$query = $this->solr->createMoreLikeThis();
$helper = $query->getHelper();
$query->setQuery('id:' . $id);
$query->setRows($params['rows']);
$query->setMltFields($params['mltfields']);
$query->setMinimumDocumentFrequency(1);
$query->setMinimumTermFrequency(1);
$query->createFilterQuery('status')->setQuery($params['queryfields']);

We didn’t share all of the code used for this here, obviously. The point of this post isn’t to help others create an exact duplicate of this custom implementation of Solarium in Drupal 8. At the time of this writing, it seems that the existing Solr modules might be in great shape for most use cases. We wanted to point out that if you have to dip into code for something like this, it can certainly be done and without an insane amount of custom code.

MIKE OUT

New Call-to-action

May 25 2018
May 25

Mediacurrent team members will be heading to the mountains in North Carolina for a two day Drupal-filled event for all levels of Drupal skills. Asheville Drupal User Group is a small but dedicated community of Drupalers who will host their 8th annual Asheville Drupal Camp on July 13-15th at UNC Asheville. Mediacurrent will be sponsoring the event and will have 9 team members presenting 6 sessions. We even have Mediacurrent Lead Drupal Architect, April Sides as one of the organizers of the event. From technical Drupal developing to making friends in a remote work place, check out what Mediacurrent has in store for Asheville Drupal Camp 2018:  

Speakers: Mark Shropshire, Open Source Security Lead at Mediacurrent and Bayo Fodeke, Senior Drupal Developer at Mediacurrent

Contenta is an open source API-first Drupal distribution that makes out of the box decoupled Drupal accessible. This session will demonstrate installing Contenta, working with included features, using demo content and consumers, and working with the Contenta community.

Takeaways:

  • Install Contenta
  • Know how to contribute back to Contenta
  • Know how to connect a frontend application to a Contenta backend

Speakers: Brian Manning, Project Manager at Mediacurrent and Kelly Dassing, Senior Project Manager at Mediacurrent

Pivots come in a variety of shapes and sizes. They can be a minor change that’s quickly integrated into scope, or a major departure that alters the entire course of the project. When you encounter these shifts, it’s vital you strategize, communicate, and continue to capture the vision of the client so the final product is a solid foundation for your client’s goals and KPIs—not a point of resentment.

Key points:

  • Kicking off the project with an organized team and plan of attack
  • Communicating with your whole team and the client
  • Being ready to PIVOT
  • Keeping your team grounded in the delivery
  • Conducting a retrospective and additional planning—not a postmortem

Speaker: Grayson Hicks, Front End Developer at Mediacurrent

GatsbyJS is an exciting way of thinking about building sites for the modern web. Is it a framework? Is it a static site generator? This session will cover the benefits of using GatsbyJS and will include the best and not so best use cases.

Key points:

  • What Gatsby's GraphQL data layer is and how and why to embrace it
  • Gatsby's internal API for building a Gatsby starter to fit your team
  • Looking at Gatsby's plugin/source/transformer system for taking Gatsby from a a blog-generator to a site-generator

Speaker: Ben Robertson, Front End Developer at Mediacurrent

Accessible web design really boils down to a few basic principles and when you have these as your first principles when starting a project, you can save your self, your team, and your clients hours of headaches around accessibility testing. 

This presentation will describe a few basic principles to keep in mind when building accessible web experiences, provide explanations and examples of these principles in code, and identify common accessibility pitfalls and how to avoid them.

Topics covered:

  • Simple JavaScript techniques for ensuring accessible components
  • CSS properties that affect accessibility
  • How to use modern CSS (flexbox, grid) without compromising accessibility

Speaker: Zack Hawkins, Director of Front End Development at Mediacurrent

Gone are the days of having one massive JavaScript or CSS file. his session will explore the use of libraries to conditionally load assets and resolve dependencies.

Key topics:

  • Introduction to libraries in Drupal 8.
  • Library options and configuration.
  • What a component based workflow looks like with libraries.
  • Code splitting with Webpack and libraries.
  • Library gotchas and things to be aware of.

Speaker: Kelly Dassing, Senior Project Manager at Mediacurrent, Chris Manning, Director of QA at Mediacurrent, and Sam Seide, Drupal Developer at Mediacurrent

Hear the story of the real-life friendship that blossomed between these three Mediacurrent team members from different departments and how it helps them in their day-to-day work.

This session will be best appreciated by anyone who is a remote worker, whether employed by a small company or larger corporation.
 

Additional Resources

"Shrop" Talk at Drupal Camp Asheville 2016
Drupal Camp Asheville 2016
Mediacurrent to Present 7 Sessions at Drupalcon Nashville

May 24 2018
May 24

In this video, Josh Miller shows you how to install Drupal Commerce 2 using a local development tool called Lando. Further instructions are included below the video.

Timestamps:

  1. Commerce Kickstart download: 0:51
  2. “composer install” command: 8:00
  3. “lando init” command: 12:56
  4. “lando start” command: 15:06
  5. “Drupal install” screen: 17:04
  6. “lando stop” command: 21:18

Prerequisites:

  1. Download and install Composer
  2. Download and install Lando

Code generated during this video:

https://github.com/AcroMedia/install-commerce-lando 

Installing Drupal Commerce 2 locally using Commerce Kickstart, Composer, and Lando

Getting Drupal up and running on your computer is an important first step as an evaluator. Good news is that there’s a lot of tech that makes this easier than ever before. We’re going to walk you through how to install Commerce 2 using the Kickstart resource, Composer, and Lando. 

  1. Download and install Composer
  2. Download and install Lando
  3. Next go to Commerce Kickstart to create and download your customized composer.json file

    Visit Commerce Kickstart

     Drupal Commerce Kickstart

  4. Run ‘composer install’

    Composer install command

  5. Run ‘lando init’

    Lando init command

  6. Run ‘lando start’

    Lando start command

  7. Visit your local URL and install Drupal

    Lando - 5 CommerceKickstart-ChooseLanguage

  8. Start building!

    Lando - 6 Congratulations

What is Drupal Commerce

Drupal Commerce is an ecommerce focused subset of tools and community based on the open source content management system called Drupal. Drupal Commerce gives you the ability to sell just about anything to anyone using a myriad of open source technologies and leveraging hundreds of Drupal modules built to make that thing you need do that thing you want.

We use Commerce Kickstart to get things started.

Try the Commerce Kickstart 2.x Installer

What is Composer

Composer is the PHP dependency manager that can not only build and bring in Drupal, Drupal Commerce, and Symfony, but is the technology behind the newest Drupal Commerce Kickstart distribution. We leverage the composer.json file that commercekickstart.com gives us to bring in all of the Drupal code necessary to run a Drupal Commerce website.

To get started, we run “composer install” and that command brings in all the requirements for our project.

What is Docker

Docker is a virtualization software that brings together App services like Apache, Nginx, MySQL, Solr, Memcache, and many other technologies so that it can run on your own computer. This installation video uses a tool that runs on top of Docker in an abstract, and frankly easier, way.

If you want to learn more about Docker and the many different types of tools that run on top of it, we recommend John Kennedy’s 2018 Drupalcon presentation about Docker.

Another great resource that compares using Docker tools is Michael Anello’s take on the various technologies. 

What is Lando

Lando is a thin abstraction layer of tools on top of Docker that makes creating an environment as easy as “lando init” followed by “lando start.” Lando keeps the often confusing devops work of creating a local virtual environment to a few very well documented variable settings that it turns into full docker-compose scripts that Docker, in turn, uses to create a local environment where everything just works together. We’re very excited to see how Lando and Drupal Commerce start to work together.

Contact us and learn more about our custom ecommerce solutions

May 22 2018
May 22

Hire-Programmers-vs-Outsource.jpg

Well sure, ok, maybe we might be slightly biased on this. We are, as it turns out, a consulting firm in the business of selling outsourced programming. Ahem...

But, nonetheless, I’ll try to be reasonably fair and balanced here. As a consultancy I think we have, in fact, a unique vantage point on such matters, since we spend each day of our lives straddling both sides of this topic: That is, we sell outsourced programming to organizations for whom outsourcing is a good fit; whereas we ourselves hire in house staff programmers, i.e. we are an organization for whom outsourcing is not a good fit.

Ergo, our very business model is a demonstration of the fact that there is not a single “right” answer to this question. Some organizations should hire programmers as employees; some should outsource their needs to development shops. Some should maybe do both. How do you know which kind of organization you are? To answer that you’ll need to dive deep into 4 prerequisite questions.

1) For Your Organization, is Programming an End or a Means to An End?

For Ashday, the core essential product we produce and sell is programming. It’s our thing we do. As such we really want to have full ability to craft, manage, and perfect every aspect of the development ecosystem (more on this below). Some agencies in our industry outsource most or all of their programming needs to freelancers or subcontracted companies; we do not (and I can’t imagine wanting to). For organizations, small or large, whose end product is programming, a very strong case is intrinsically made for direct employment. If that’s you, read no further, go hire some programmers and find a way to make it work. (Or click over to that thing Clint wrote five years ago about tomatoes and taxonomies.)

But what if programming related actives are not your core business offering, just tangential to it or necessary for its operations? What if you produce electricity, or refrigerators, or news, or surgeries, or legal fees? And you just need programming to get that done…. Then the next question is:

2) Is it Cost Effective?

This one can be tricky. On the surface, it would generally seem that in-house programmers cost less than outsourced, if you compare the hourly rate of a dev shop to the salary of a developer divided by the number of work hours in a year.

That’s an oversimplification though. Remember that salaried programmers are not producing code 100% of the time. They also take paid vacations and holidays, go to conferences, sit through meandering meetings, and take extended breaks for ping pong tournaments. They need to spend time learning new technologies, which is a more or less continuous part of the job. They need to fix stuff that breaks on their computers. Etc.  So you’re probably doing well if they’re actually producing code 75% of the theoretical 2000-ish hours in the work year. Also the costs in play are not simply for salaries. You need implied costs of any benefits, training costs, general space and infrastructure costs, and the various costs of tools (more on tools below.)

Brainstorm your next development project with  an Ashday expert!  Request your free session today. 

Also, some percentage of your hires aren’t going to work out. You may roll with somebody several months or more before your realize they're not a fit. The cost of failed employees needs to be averaged into the average cost of successful ones. And, of course, even the ones that work out may eventually leave, taking with them a lot of investment that you’ve made.  There’s also a non-intuitive factor here pertinent to the question of which is more “stable”: we have had, multiple times, the experience of being in multi-year relationships with clients which outlast their relationships with all of their in-house programmer staff ... complete staff turn-over, but the vendor (us) is still there.

Additionally, on-site staff (at least for smaller internal teams) may need to be jacks-of-all trades, versus outsourced firms that are able to let their dev staff specialize more. Thus the output per hour on a particular task can be far greater from the outsourced firm, who is able to assign specialized staff to tasks appropriate to their expertise so as to maximize efficiency.

When it’s all said and done, it’s not particularly obvious that the end cost of outsourcing is higher or lower than that of staff, despite the apparent surface difference in hourly rates. It really can vary. It can be, and often is, the case that it’s much cheaper to outsource.

Nonetheless, it is of course possible to have a cost advantage in-house, as is demonstrated by the very fact that programming firms exist in the first place, and (ideally) operate a profit. The profit margin is not typically huge, but done well it’s certainly present. That margin plus any efficiencies gained (such as through avoidance of duplicative operational/marketing/sales etc staff and costs) is the financial benefit potentially available to be saved by bringing a team in house. This requires a certain scale of operations and ongoing needs, and the savvy to pull it off, but at some point it can be significant.

3) Will the Time Frames Work?

Generally, unless you’re a huge company, a dev firm will probably have more developers and therefore development bandwidth than your internal team will. If quick turnarounds of large projects are important, a firm probably is best. 

On the flip side, dev shops are juggling more than just one client.  If you tend to have myriad small needs that come up frequently, and must be tended to almost immediately, it can be hard for an outside firm to accommodate because they may be in the middle of a big thing for some other client which they can’t just drop. Internal staff though can often turn on a dime, because it's your dime. That is, they effectively just have one boss (you) setting and modifying their priorities, versus competing clients.

4) Can You Build and Maintain a Healthy Development Ecosystem?

A final key question to ask if you are considering hiring devs, is whether you are able to build and maintain a healthy development ecosystem. By this I mean the harmonious instrumentality of four critical things: staff, tools, processes, and culture. A bit on each:

Staff

This is your would-be in house developers/programmers (as well as, depending on size and scope, architects, designers, testers, UX experts, etc.) AKA the geeks (I'm using that term, self-referentially, in only the most loving of ways). These folks need to be focused, smart, honest, and very knowledgeable in their field. They need to have brains that are wired for rigorous logical thinking plus creativity plus attention to detail. 

Such people can be exceedingly hard to find.   Therefore once found, you’re going to want to keep them around.  So they need to be excited about their job, and paid well. It’s important to remember, for morale and retention, that developers (good ones at least) love to solve problems. That’s why they got into this field. Now solving a problem one time is fun, but solving the same problem one hundred times is not so much.  To keep the interest level up, you’ll need to be able to provide a steady stream of interesting new challenges, or at least opportunities for abstractions of the previous challenges.   And you’ll need to make a continuous investment in ongoing education – technology is always evolving and developers want to evolve with it.

Considering Outsourcing? Consider Ashday!  Request your free consultation today. 

Tools

Abraham Lincoln famously said, “Give me six hours to chop down a tree and I will spend the first four sharpening the axe.” (Though I’ve just done some research and it appears it was probably not actually Honest Abe, but an anonymous lumberjack who said that. In my next post we’ll investigate the increasing evidence that an anonymous lumberjack delivered the Gettysburg Address.) 

Point being, having good, sharp tools is important. The developers’ primary tool of course is his or her brain. But I’m talking here about the bevy of other physical and virtual tools that must be put at the disposal of said brain (and that of its encasing body).

For instance, you want to provide really good computers (newer Macbook Pro’s are usually a hit), multiple large monitors (high resolution), and expensive ergonomic chairs (versus the free kind available out back near the dumpster). Adjustable standing standing desks have been very popular with our staff (Veridesk Pro Plus 48).

Equally important is the vast constellation of software tools that the are the stock on trade of this game. IDE’s, data inspectors, ticketing systems, continuous integration engines, vm provisioners, browser simulators, design introspectors, Star Wars meme generators, etc.

Process

If you’ve nailed it on staff and tools, great. But you also need to be able to run their operations. That takes proper processes. Great staff and expensive tools can utterly fail if the processes are wrong. You need to think about processes for general software lifecycle (Agile school of thought is helpful here), dev & devops, quality assurance, etc. 

And, in general, you need processes at every level that implement intelligent “systems thinking” to effectively control the various complex systems that you will be building and managing. More thoughts on that here.

Culture

This final one, culture, is harder to define. Lots of people try to define it, but I’m not sure they ever succeed in a comprehensive way. Maybe it’s similar St. Augustine’s take on defining time – “If no one asks me, I know what it is. If I wish to explain it to him who asks, I do not know.”  

But definable or not, it’s exceedingly important. It has to do with corporate values, and a sense of dignity and purpose in labor, and relations between people, and respect, and beliefs about software philosophy, and leadership philosophy. It has to do with how people talk and dress and smell. It has to do with what’s hanging on the walls, and what music is playing, and whether the fridge is full of energy drinks, beers, or kombucha.  It’s myriad things collectively creating the “feel” of the place. No two are the same.  Somewhat ethereal, somewhat elusive, and yet you’ve got to get it right for programmers to be happy and stick around.

So Now What?

If you navigated through all four of these questions, and feel like in-house make sense, then it very probably does. You can start advertising for programmers in places like Stack Overflow, and Indeed, and on your own site and social networks. You can start networking in local programmer groups - checkout Meetup. Maybe even start making relationships at a local university’s C.S. department to look toward the long term future; free pizza & programming night or something.

Or if, after all that, in-house isn’t for you then find a good dev shop and let them get to work. 

New Call-to-action

May 22 2018
May 22

If a user needs to create an account on a Drupal site, they go to the user registration page at “/user/register”. This page is the registration form on a Drupal site. You can customize it by adding or removing fields. But what if you want to have multiple registration pages?

Let’s say you have two different roles on your Drupal site and you need a separate form for each role. How would you build that?

You could handle all of this writing custom code but remember we’re using Drupal so means there’s a module that can handle this type of functionality and It’s called Multiple Registration.

The Multiple Registration module allows you to create individual registration forms base off a user role in Drupal. When you register on one of the forms, you’re automatically assigned the configured role.

2018-05-14_22-28-00

In this tutorial, you’ll learn how to use Multiple Registration to create individual registration forms.

Installing the module

Download and enable the module with your preferred method.

Composer:

composer require drupal/multiple_registration

Drush:

drush dl multiple_registration -y

After downloading the module, click Extend in the toolbar and install it.

Enabling the Multiple Registration module

Create User Roles

The Multiple Registration module requires additional roles in order to display a customized registration form to each role. For the purpose of this tutorial, we’ll work with the example of a high school site with a registration form for parents and another for students.

The form for parents will have a field requiring information about payment methods and a billing address, while the form for students won’t have those fields, but instead of that will have a select list to vote for a sports team.

Click People, Roles, “Add role” in order to create the “Parent” role.

Creating roles

Repeat the process and create a “Student” role. After you’ve created the roles click the dropdown arrow next to the Parent role and choose “Add own registration page”.

Adding own registration page

You’ll be prompted to create a path for the Registration page for this particular role. For example, you could add “user/parent” as the path.

Creating the registration page path

Create also a registration page for the other role (in this case “Student”).

Configure Registration Forms

Now that you’ve created the roles, it’s time to configure the registration form for each one.

1. Click Configuration, “Account Settings”, “Manage fields” and click the “Add field” button.

2. Choose the “List(text)” option and label it “Payment method”.

Enter in a few options into “Allowed values list” and set the “Allowed number of values” to Unlimited, since a parent can have more than one payment method and click “Save field settings”.

1|Cash
2|Credit Card
3|Check
4|Other

List key-value pairs

You’ll be redirected to the Edit tab, scroll down to the bottom of the page and check “Users with Parent role”. This configuration is provided by the Multiple Registration module. Click “Save settings”.

Assigning fields to a role

Add another text field for the Billing address and assign it to the Parent role.

Lastly, add a list field for a sports team election, this one will be limited to one choice. In the Edit screen of this field check “Users with Student role” and click “Save settings”.

Assigning fields to a role

Test New Registration Forms

Click “Log out” on the right of your screen and click “Log in” on the same spot once again. You will see two new tabs corresponding to the roles we’ve previously created.

If you can’t see the tabs then you’ll need to rebuild the site cache. Go to Configuration, Performance and click “Clear all caches”.

Check each form and make sure the fields were assigned properly to each form.

Checking the fields in each registration form

Summary

The Multiple Registration module provides the ability to create different registration forms without having to write code. Best of all, the role configured in the form is automatically assign when a user registers. This will save you time because you want have to manually assign a role.

Jorge Montoya

About Jorge Montoya

Jorge has been reading about Drupal and playing with it for almost 5 years. He likes it very much! He also likes to translate German and English documents into Spanish. He's lived in some places. Right now, he lives in the city of Medellín in his homeland Colombia with his wife and son.

May 18 2018
Jay
May 18

Illustration of finger selecting 5 stars

Drupal 8 has been available now for more than two years, but if your site is up and running on Drupal 6 or 7, you may be wondering… why should I upgrade? And why now?

Well, if you're on Drupal 6, the answer is easy: Drupal 6 is no longer an officially supported platform, which means that in addition to not getting the latest and greatest Drupal features, your site may be vulnerable to serious security issues and you will have to find backports of the latest security patches from the community or attempt to create your own.

But if you're already on Drupal 7, then security updates and occasional small new features are still being made available for your version. So… why upgrade? Well, I can think of five great reasons to do so, and for why now is a better time than ever.

Contrib Is Ready

One common hesitation about upgrading to Drupal 8 has been that many key contributed modules from Drupal 7 were not yet upgraded, and many sites depend on having such modules. It's taken a little while, but especially over the past year we've seen a huge increase in the number of modules ready for use on Drupal 8… and many of them are even better than they were on Drupal 7. Consider, for instance, the popular Webform module. Not only is it available for Drupal 8, but it's been rebuilt and redesigned from the ground up. The interface for managing your webforms is much more intuitive than it used to be, while also having many more options. At this point, if there's some feature you want your form to have, then Webform can probably handle it.

Of course, Webform isn't the only major module that's ready. Popular modules such as Drupal Commerce, Domain Access, Paragraphs, and Metatag are ready to go. And let's not forget that many vital Drupal 7 contributed modules, such as Views and Media, are now included in Drupal 8 by default, so you don't even have to install anything extra to use them.

Considering an Upgrade to Drupal 8?  Claim your free consultation with a Drupal expert!

Easier Migrations Than Ever Before

One thing that may have had some people holding off on upgrading to Drupal 8 was that Drupal's new migration features weren't quite ready, and writing a custom data migration or working with a buggy migration tool can be quite a challenge. Well no more! The Drupal Migrate module is finally stable. This module is included with Drupal and is designed to make it as easy as possible to move all of your content from a Drupal 6 or 7 site to your shiny new Drupal 8 site.

One caveat: If your site is multilingual, then you might have to wait another version or two for the last few bugs with multilingual migrations to get worked out. But, that doesn't mean you have to hold off on building your new Drupal 8 site! Now would be a great time to get the new site built, and once the multilingual migration bugs are fixed, moving your content over at that point should be a comparatively trivial task.

New Features in Drupal Core

Using the most recent version of Drupal means that your site can easily start making use of the many new features that are always being added to Drupal core. For instance, Drupal 8.5 includes a whole host of new features, such as the Media module being included by default, a new Layout Builder module, and enhanced interfaces and settings for managing content and site configuration… and that's not even talking about the many significant bug fixes and other minor enhancements which are detailed in the full release notes. With feature releases such as these, sites built with Drupal 8 get fantastic improvements twice each year essentially for free.

By comparison, although Drupal 7 sites still get security fixes and the occasional other bugfix, the last time that there was a significant update for Drupal 7 was back in June 2017 with Drupal 7.55, and even then, the handful of improvements made were still small compared to the rate of improvement Drupal 8 has been seeing. Upgrading to Drupal 8 means you get more new features, more frequently, in addition to being able to use all of the great new features added to Drupal 8 in the five feature releases it has already had.

Ease of Upgrades

I've written a bit about this before, but I think it bears repeating: Once you've upgraded to Drupal 8, the greatest upgrade challenges should be over. Because of how Drupal 8 is designed, future upgrades to Drupal 9 and beyond should be a much simpler transition than moving to 8 from older versions.

This is important to realize because, prior to Drupal 8, many people would "skip" a Drupal version… going from 5 to 7, or from 6 to 8, since the older version would be supported with bug fixes until the new version was released. Many people may be in a similar state now, waiting to upgrade from 7 until 9 is released, but at this point, holding off like that really shouldn't be necessary. If the upgrade from 8 to 9 should be a simple change, like Drupal creator Dries Buytaert has said, then there's no need to skip 8 entirely and miss out on all the great improvements that it can bring to your site today.

Upgrade While There's Time

There's a balance to be struck when deciding when to upgrade to Drupal 8. Doing it right after Drupal 8's release may have been tricky for many sites, due both to some bugs present in the new version and to the many important contrib modules not yet having been upgraded themselves. At the same time though… the longer you wait, the closer you get to your Drupal 7 no longer receiving critical security fixes. Although it's not yet clear when official support for Drupal 7 support will end, it's easy to see that it will happen at some point, and you'll want to already have upgraded by the time it does.

To me, right now feels like the ideal time. Drupal 8 is ready (and better than ever!), and there's still enough time left for Drupal 7 that if you have a complex site, you can take the necessary amount of time to upgrade without being rushed. The worst situation to be in would be to start upgrading a complex website when there's only a month or two of Drupal 7 support remaining, since then you might have to rush the upgrade and end up with more bugs (or things missing from your site) than you'd have if you took the time to upgrade now.

Conclusion

All of this is to say: It's time. Even if you weren't able to upgrade before, due to lacking contrib modules or the need for the Migrate module, those should no longer pose a problem. You can upgrade today and get countless major improvements over previous versions of Drupal (with more coming all the time) and you can even rest easy knowing that the next "big" upgrade shouldn't be anywhere near as daunting as they have been in the past.

It's been more than two years, but finally, Drupal 8 is ready for your site. The question now shouldn't be "Why upgrade?"... it should be "Why wait?"

Is there another reason why you are waiting to upgrade that we didn't mention? We can probably help, schedule your free consultation today.Offer for a free one-hour consultation, make you next project a success

May 15 2018
May 15

Media Management for Drupal 8.5+

There’s a lot of momentum to fix media management in Drupal 8 thanks to the Media Entity module. By using a combination of Media EntityEntity Embed, Entity Browser and some media providers such as Media entity image you could add decent media handling in Drupal 8.

Then in Drupal 8.4, the Media Entity functionality was moved into a core module called Media. However, the core module was hidden by default. Now in Drupal 8.5 it’s no longer hidden and you can install it yourself.

In this tutorial, you’ll learn how to install and configure the Media module in Drupal 8 core. This tutorial is an updated version of the How to Manage Media Assets in Drupal 8 tutorial where we cover Media Entity.

Configuring Entity Embed and Entity Browser for the core Media module is essentially the same as with Media Entity. So if you have experience using Media Entity, then you’ll be fine using the core Media module.

Sections:

  1. Storing Media Assets
  2. Displaying Media Assets
  3. Embedding Assets into the Editor
  4. How to Browse Media Assets

What’s the Difference Between Media Entity and Media

The biggest difference between the two modules is that the API has changed. Any media provider module for Media Entity such as Media entity Instagram or Media entity Twitter need to be updated to use the new API. A lot of these modules now have a 8.x-2.0 version which only works with core Media. So if you’re going to use a media provider module read the project page.

If you want to see a technical explanation of the changes go to the “Moved a refined version of the contributed Media entity module to core as Media module” change record on drupal.org.

Getting Started

Before we begin, go ahead and install the Media module. It comes with Drupal core but it’s off by default.

Part 1: Storing Media Assets

The Media module implements a fieldable entity type called Media. This means you can add custom fields to them like content types and adjust their look-and-feel through the “Manage display” page. If you know how to manage content types then you’ll be right at home managing media types.

Let’s first look at how media assets are stored in Drupal 8. Saving assets into a Drupal site is similar to creating content.

1. Click on Content in the toolbar.

2. Click on the Media tab, then click “Add media”.

3. Choose which type of media you want to upload, in this example I’ll choose Image.

4. Enter in a name for the asset in the Name field and select an image using the Image, then click on Save.

5. Once you save the form, you’ll be redirected to the public media page.

View all Media Assets

You can view all upload assets from the Media page we were just on, go to the Content page and click on the Media tab.

You can search assets by their name using the “Media name” field or filter by media type using the Type drop-down.

Creating and managing media assets are pretty straightforward but the magic happens in the Media types, let’s look at them next.

Media Types

Media types are just like content types or taxonomy vocabularies. They are fieldable configuration entities.

Go to Structure then click on “Media types” to create and manage them.

Drupal 8 ships with four media types; Audio, File, Image and Video.

The File and Image media types are fairly self-explanatory use them to upload images or general files such as PDFs.

Audio and Video media types should be used when you want to locally host the video or audio file. The asset will be played using the HTML tags, <audio> and <video>.  You can’t use the this media type to embed videos from YouTube or Vimeo. To do that you’ll need the “Video embed field” and a new media type which we cover later in this tutorial.

Media Source

Every media type needs to use a “Media source”, this tells Drupal how the file should be handled, i.e., how the file should be stored or if a thumbnail should be generated.

The Media module in Drupal 8.5 comes with four media sources; audio, video, file and image.

So if you want to store and display tweets for example, then all you’ll need to do is create a media type called “Tweet” (or whatever you want) and install the 8.x-2.0 version “Media entity twitter” module. The 8.x-1.x version only works with Media Entity, whereas, the 8.x-2.x works with the core Media module.

Create Embed Video Media Type

Now let’s go and create a new media type for embedding YouTube videos. But first, download the 8.x-2.0 (make sure it’s 2.0) version of “Video Embed Field“. The module ships a sub-module called “Video Embed Media” which has a media source for handling embedded videos.

composer require drupal/video_embed_field

Once downloaded go and install “Video Embed Media” from the Extend page.

1. Go to Structure, “Media types” and click on “Add media types”.

2. Add “Embed video” into Name and “Used for embedding videos” into Description.

3. Select “Video embed field” from the Media source drop-down box.

4. From the field mapping section, you can store specific metadata about the video into a custom field.

For example, if you want to store the YouTube ID, which’ll be the “Video ID”. All you need to do is create a custom field and select it from the drop-down to map it.

5. Once everything is complete click on Save at the bottom of the page.

Edit Media Type

When you edit the Embed video media type, you should see three familiar tabs: Manage fields, Manage form display and Manage display.

A media type is just a fieldable configuration entity same as content types or vocabularies so managing fields are the same.

If you click on Manage fields you see a single field called “Video Url”. This is where the URL to the embedded video will be stored. We didn’t create the field, instead “Video Embed Media” programmatically attached it for us when we created the media type.

Create an Embed Video

Now that we’ve created our media type, let’s create the actual asset.

1. Go to Content and click on the Media tab.

2. Click on “Add media” then “Embed video”.

3. Enter a name into the Name field and enter in a URL to a YouTube video, then click Save.

It’s important to note that Video Embed Field supports more than just YouTube. Out-of-the-box it supports YouTube and Vimeo but it has support for other video providers via contrib modules. Check out the “Video Providers” section on the project page for more details.

“Video Providers” section on the Video Embed Field project page.

4. Once you’ve saved the form, you’ll be redirected to the media display page.

But as you can see in the screenshot above, the page looks messy. It’s displaying all the fields; date, author, thumbnail and at the bottom the actual embedded player.

Modify Media Display

Let’s clean up the display of the embedded video so only the embedded player shows.

1. Go to Structure, “Media types”.

2. Click on “Manage display” from the Operations drop-down on the “Embed video” row.

3. Move all the fields to the Disabled section except for “Video Url”.

4. Now if you go to the media display page you should only see the embedded player.

Part 2: Displaying Media Assets

You learnt how media assets are stored in part one and how to create your own media types. Now we’ll look at how to display the assets on a content type using a field.

I mentioned earlier that an asset is just an entity. So if you want to attach it to a basic page or article, all you need to do is create an entity reference field. Of course there’s a bit more to it, so let’s look at it now.

Create Media Field

The Media module comes with a field called Media. It simply lets you reference assets using an entity reference field. Let’s create one on the Article content type.

1. Go to “Content types”, “Manage fields” on the Article row.

2. Click on “Add field.

3. Select Media from the “Add a new field” drop-down and enter Asset into the Label field.

4. On the “Field settings” page, leave it as is and click on “Save field settings”.

5. Down in the “Reference type” field-set, you need to select which media type you allow. In this example, I’ll choose Image, then click on “Save settings”.

Now it’s time to test it out.

Go to Content, click on “Add content”, then Article and you should see the Asset field with an autocomplete field.

Then simply search for an asset using the “Use existing media” autocomplete field.

If you need to create a new asset, you’ll need to click on the “media add page” link or just go to Content, Media and create it from there.

But there is a problem with this method. You can’t create an asset directly from the article page. You need to go to the add media page, a totally seperate screen, upload the image then come back and search for it in the autocomplete field.

This workflow is not ideal. Now I’ll show you how to use Inline Entity Form module so you can create the assets without leaving the page.

Use Inline Entity Form to Upload Media Assets

Go download and install the Inline Entity Form module.

composer require drupal/inline_entity_form

1. Once installed, go to the “Manage form display” on the Article row.

2. Then select “Inline entity form – Complex” from the Widget drop-down on the Asset field.

3. Click on the cog wheel and make sure you check both “Allow users to add new media entities.” and “Allow users to add existing media entities.”.

3. Then click on Save.

Now if you go back to the create Article form, you’ll notice that the Asset field looks different.

Just click on “Add new media” if you want to create a new asset. When you click on the button, the create media form appears right here so you can create a new asset and attach it to a content type without leaving the form.

The “Add existing media” button allows you to select existing assets via an autocomplete field.

As you can see Inline Entity Form really does create a better user experience for editors. From the same page you can create/edit/delete and attach assets to a content type without leaving the page.

Part 3: Embedding Assets into the Editor

So far we’ve looked at how to attached assets to fields, but now let’s look at embedding them in the editor.

To build this functionality we’ll need two modules: Entity Embed and Embed.

Entity Embed allows you to create a button which is added to the editor. When you need to embed an asset, just click on the button, select the asset and embed. The module isn’t tied to the Media entity, it can be used to embed any entity type.

Using Composer, download the following modules then enable Entity Embed.

composer require drupal/embed
composer require drupal/entity_embed

Create Embed Button

1. Go to Configuration and click on “Text editor embed buttons”.

2. Click on “Add embed button”, enter Assets into Label and select Entity from “Embed type” and Media from “Entity type”.

3. Further down the page you can specify which bundles (Media types) should be allowed. If none are selected then all are allowed.

You can also upload an icon for the button. I’ll be using the media embed icon which comes with the Drupal 8 version of the Media module. You can grab a copy of it from here.

Once you’ve configured the form click on Save.

Manage Buttons

You can have as many buttons as you want and they can all be managed from the List page. If you need to modify a button then just click on the Edit button in the operations column.

Add Button to Editor

Now that we’ve created the button let’s add it to the editor. It won’t automatically appear in the editor unless we add it ourselves.

1. Go to Configuration and click “Text formats and editors”.

2. Click on Configure on the “Basic HTML” text format.

3. Find the button in the “Available buttons” section and move it into Media in the “Active toolbar” section.

Configure Filters

Now comes the tricky part, we’ve added the button but now we need to configure the filters in a specific order.

Few important steps need to happen here:

  1. Add the correct tags to the “Allowed HTML tags” text area.
  2. Enable “Display embedded entities” filter
  3. Reorder filters in specific order.

Configure “Allowed HTML tags” list

Once the button was added you should see the following tags in “Allowed HTML tags”.

<drupal-entity data-entity-type data-entity-uuid data-entity-embed-display 
data-entity-embed-display-settings data-align data-caption data-embed-button>

Enable “Display embedded entities” Filter

Next, enable the “Display embedded entities” filter from Enabled filters check list.

Confirm Order of “Align images” and “Caption images”

The Entity Embed README.txt mentions if you’re using the “Align images” and “Caption images” filters, to order “Align images” before “Caption images”.

Problem with “Restrict images to this site” Filter

The “Restrict images to this site” filter stops an image being displayed if you embed it and select an image style.

The filter stops a user from pointing to an image which is not hosted on the site. For example, if your Drupal site is hosted at my-drupal.com, then it won’t allow you to add an image such as <img src="http://random-site.com/image.jpg" />, all your images need to be <img src="http://my-drupal.com/image.jpg" />.

There is an open issue on drupal.org about it.

The workaround for now, unfortunately, is to remove the filter.

Once everything has been configured, make sure you click on “Save configuration” at the bottom of the page.

The filters list should look like this:

How to Embed Assets into the Editor

Now that the “Basic HTML” text format has been configured, we should be able to embed assets.

1. Go to Content, “Add content” and click on Article.

2. Click on the embed button and a pop-up should appear with an autocomplete field.

Search for the asset using its “Media name” and click on Next.

3. If it’s an image, select Thumbnail from “Display as”, select an image style, align and add a caption.

Then click on Embed.

4. Once embedded you should see the image on the right with the caption.

Save the page and you’re good to go.

Embedding YouTube Videos

In the section above it was easy to embed an image. You simply upload it, select a thumbnail size and you’re done.

Adding a video using the “Embed video” media type we created earlier is just as easy.

1. Click on the embed button within the editor, and search for a video in the Name autocomplete field.

2. Then select “Full content” from the “Display as” drop-down and click on Embed.

3. Once embedded you should see the YouTube player in the editor.

If you do not see an embedded player and just the video thumbnail then you’ll need to configure the formatter on the Media type.

Go to Structure, “Media types” and click on “Manage display” on the Embed video row.

Make sure the “Video Url” field is using the Video formatter.

Part 4: How to Browse Media Assets

We had to use an autocomplete field to find and embed an asset into the editor in the last section. This type of user experience is not great. You can’t upload an image after clicking on the embed icon, without going to a different page, and you can’t easily search assets, you have to know the name of it.

In section, you’ll learn how to use Entity Browser which lets you create a screen where you can search, select and upload new assets.

Using Composer, download the following modules then enable Entity Browser and Chaos tools.

composer require drupal/ctools
composer require drupal/entity_browser:~2.0

Make sure you download the 8.x-2.0 version of Entity Browser.

How to Create an Entity Browser

Configuring Entity Browser requires two steps:

  1. First you’ll need to create a view using a display called “Entity browser”. This view will be used to list out all assets.
  2. Then you’ll need to configure an entity browser and select the created view.

Create Entity Browser View

1. Go to Structure, Views and click on “Add view”.

2. Fill out the “Add view” form, using the values defined in Table 1-0 and click on “Save and edit”.

Table 1-0. Create a new view

Option Value View name Media browser Machine name Media_browser Show Media type of All sorted by Newest first Create a page Unchecked Create a block Unchecked

3. Next to the Master tab click on “Add” and select on “Entity browser.

It’s important that you select the “Entity browser” display or you won’t be able to select this view when we’re configuring the actual browser.

Let’s change the view to a table so it looks better.

4. Click on “Unformatted list” next to Format.

5. Select Table and click on Apply.

At this point we’ve switched the view from an unformatted list to a table.

Now we need to add two more fields: Thumbnail and “Entity browser bulk select form”.

6. Click on Add next to Fields, add the Thumbnail field.

This will display a thumbnail of the media asset.

7. Then add the “Entity browser bulk select form”.

This field is used to select the asset when browsing. It is a required field.

8. Reorder the fields so they’re as follows:

9. Once complete the preview should look like the image below:

10. Don’t forget to click on Save.

Create Entity Browser

Now that we’ve created the view, let’s configure the browser.

1. Go to Configuration, “Entity browsers” and click on “Add entity browser”.

2. Enter “Assets browser” into Label, select iFrame from “Display plugin” and Tabs from “Widget selector plugin”.

Leave “Selection display plugin” as “No selection display”.

Then click on Next

Do not select Model from Display plugin if you’re using the browser with Entity Embed it isn’t compatible (Issue #2819871).

3. On the Display page, configure a width and height if you like but do check “Auto open entity browser. This will save an extra click when embedding.

Then click on Next.

4. Just click Next on “Widget selector” and “Selection display”.

5. On the Widgets page, select “Upload images as media items” from the “Add widget plugin”. Change the Label to “Upload images”.

6. Then select View from “Add widget plugin”.

7. From the “View : View display” drop-down, select the view which we created earlier.

If you can’t see your view, make sure you select “Entity browser” when configuring it:

8. Once configured the Widgets page should look like:

Configure Entity Embed to use Browser

Entity Embed now needs to be linked to the browser we just created.

1. Go to Configuration, “Text editor embed buttons” and edit the embed button.

2. You should see a drop-down called “Entity browser”, select the browser you just created and click on Save.

Using the Entity Browser

Go into an article or page and click on the Entity Embed button.

You should now see a pop-up with two tabs: “Upload images and view.

From the “Upload images” tab, you can upload a new image and it’ll create an Image media entity.

If you click on view, you’ll see all the media assets.

To embed an asset, just choose which one you want and click on “Select entities”.

Summary

With every new Drupal 8 release you can see that the media functionality is getting better. In Drupal 8.5 , there’s still a lot of manual configuring required but the foundation of how assets are stored exists. If you want to keep track of how everything is progressing then look at “Media in Drupal 8 Initiative” and “Media initiative: Essentials – first round of improvements in core“.

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.

May 14 2018
May 14

Last weekend I attended my first ever Drupal Sprint organised by NWDUG.

My background with Drupal is slightly unconventional: as a newbie to Drupal, who only became aware of its existence just under a year ago, I’ve had a fast-track journey with the software whilst working at CTI Digital. I don’t have an in-depth knowledge of the technical side of Drupal, but as I work in Marketing, exploring the history and culture around Drupal, I’m quickly becoming a bit of an expert. Therefore, attending my first sprint was a great insight into the world of Drupal.

IMG_6029

The May Sprint Team

 

The sprint was organised by NWDUG and we were happy to offer up our office space, as a large space with comfy seats and plentiful coffee is something always appreciated at a sprint. The space is actually open for anyone to use, so if you’re interested in holding a Drupal event, please get in touch any time.

 

Here’s what went on at the sprint:

9:30am

Everyone arrived, chipper and excited for the day. The first thing I noticed was how friendly and welcoming everyone was, even though I obviously wasn’t your standard Sprint attendee. Coffee and some light bites were shared out before we headed to our event space, named ‘The Garden’, for the welcome brief, given by Phil Norton.

Phil talked us through what would happen throughout the sprint and took special care to ensure first-time sprinters were set up and knew how to get involved. There were also a few non-technical activities, for newbies like me to get involved with.

Dc_GnsiWAAAKT8H-129037-edited

Phil's welcome address in 'The Garden'


10am

The Sprint begins! Those interested in doing some development discussed which issues they’d like to get involved with, then broke into teams and got to work. Again, I was delighted to see just how engaged all the first-time sprinters were; no-one was left confused or overwhelmed by the Sprint.


11am

A few of us broke off into a Case Study Workshop. Working in Marketing, I’m a big fan of a beautifully written case study, so we created a task force to review how we can encourage more members of the Drupal community to celebrate their work within the Drupal case study section. We used the AIDA model to break down the journey of writing a case study for developers and marketers. Then, we discussed the blockers and opportunities at each stage.

case study workshop

The case study workshop in full swing

 

Lunch!

Pizza and more pizza! After a busy morning everyone had a break to eat pizza, play pool, and socialise. Thank you to Access, for co-providing the pizza with us. There was also time for a quick group photo and an impromptu dance break, where a mini sprinter taught the developers how to do The Floss. Unfortunately no future ‘Britain's Got Talent’ winners were discovered, but everyone definitely enjoyed themselves!

[embedded content]The Drupal Floss

 

1pm

Back to sprinting: the developers resumed their issue teams and the second non-technical activity took place. Paul Johnson took video interviews, detailing the origin stories of how the attendees got involved with Drupal in the first place. Members of the sprint group discussed how Drupal has changed their lives, something that Rakesh recently delved into on our blog. It was inspiring to hear the developments of personal stories and journeys with Drupal.

IMG_6220

Post lunch sprinting

 

3pm

Before we knew it, the sprint was over! In summary: it was a brilliant day for technical and non-technical individuals alike. Afterwards a few of the group went for some celebratory drinks to soak up the success of the day.

What did we achieve?

There were a total of:

  • 16 patches applied
  • 5 were successfully reviewed and tested by the community (RTBC
  • 2 issues completely fixed.

Along with the open source contributions, we achieved:

  • A significant development into the accessibility of case study writing
  • The capture and documentation of the origin stories of multiple Drupal advocates

Special Thanks

Finally, I’d like to take some time to give special thanks to a few individuals on the day:

Our MVPs - Gemma Butler and Craig Perks

Gemma and Craig came down to keep the day running smoothly and it couldn’t have happened without them. From first aid to countless other essential roles, Gemma and Craig really made the day what it was and we couldn’t say thank you enough!

Rakesh James

Rakesh got the ball rolling for this sprint in the first place and was the driving force in helping it happen. Thank you Rakesh and hopefully this isn’t the last time you’ll be making something like this happen.

Phil Norton

Phil heads up the North West Drupal User Group and provided the community to form the sprint of such a welcoming and successful group of multi-talented individuals. So thank you Phil for such a great day!

And thank you to everyone else who attended;

  • Peter Jones
  • Des Fildes
  • Nigel White
  • James Davidson
  • Lesley Moreira
  • Tony Barket
  • Richard Sheppard
  • Phil Wolstenholme
  • Steve Hilton
  • Syed Huda
  • John Cook
  • Daniel Harper
  • Andrew Macpherson
  • Rachel Lawson (From The Drupal Association)
  • Craig Perks
  • Michael Trestianu
  • Paul Johnson
  • Andrew J

Interested in attending the next Drupal Sprint? Follow  and  on twitter to hear about the next one.

.

May 14 2018
May 14
Photo by janeb13 on pixabay

As you’ve probably read in one of our previous blogposts, industry verticals will be a new concept at Drupal Europe. Verticals replace the summits, which typically took place on Monday, before the conference. Sometimes these were in a separate location from the main conference venue, and often the conference ticket did not cover access to the summits. At Drupal Europe summits have become industry verticals and are integrated with the rest of the conference — same location, same ticket. Following is a summary of what to expect in the new verticals at Drupal Europe.

Verticals bring together people from an industry to:

  • learn about outstanding projects being developed in their field
  • share their interests and ideas
  • listen and learn together in sessions
  • discuss challenges and develop solutions for their market

With all the topics under one roof, every session you are interested in is within easy reach. There will be a guide to specific sessions and people that are involved in your industry: Media and Publishing.

However, nothing will stop you from getting off the beaten track to mix & match your interests! One Drupal Europe ticket gives you access to everything we have on offer: sessions, workshops, panels, contribution opportunities, and BoFs. In this example you might start with a great session about a new top-notch publishing site, get dragged into details of the site’s complex workflow rules and later jump into a technical session, to understand a specific decoupled approach the site was built with.

Photo by Rachael Crowe on Unsplash

All attendees will enjoy a amazing program providing insights into industry-specific challenges and solutions. The Media and Publishing industry itself faces many challenges. It has had to almost reinvent itself to adapt to the digital age in order to be successful in the 21st century with our society’s media consumption shifting from paper to digital.

We want to provide the best possible lineup of speakers, panels and sessions for the publishing/media vertical. Drupal Europe will be open to allow you to submit your great session idea very soon. As a choice of different verticals will be available on the website, please tag your session as publishing/media to indicate that it is related to this industry. We welcome proposals for all topics related to publishing/media!

If you have something interesting to share (questions, thoughts, advice), that might help us before we officially open our call for papers, please reach out to [email protected].

Photo by rawpixel on Unsplash

We can’t wait to see you at Drupal Europe, 10th — 14th September in Darmstadt Germany!

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