Click to see video transcript

Moderator: Just Say Yes: Reducing the Complexity of Multisite Deployments. We’ve got Gary Wu who’s the Product Manager for Acquia Cloud Site Factory from Acquia. We’re also joined by our friends from Appnovation Technologies. We’ve got Andy Mao who’s the Channel Enablement Coordinator as well as Kevin Madden who’s the Business Analyst both from Appnovation. We’re really excited to have them on the call today.

Gary Wu: Hi everyone, my name is Gary Wu and I’m Product Manager for Acquia Cloud Site Factory. Today, we’d like to help you say yes and help you reduce the complexity of delivering multisite deployments. In today’s market, what we’ve seen in speaking with our customers, our partners, with prospects is that the demand for creating new digital experiences, outpacing organizations ability to deliver and what this has led to is strain and friction between digital marketing and the IT teams. Digital marketers need to be able to very quickly adapt to the speed of their market. Oftentimes, they’ll want to launch new campaigns, new brand sites and it needs to be done immediately in order to capitalize upon the market opportunity but when they go and request the site from the IT teams - you know oftentimes, IT is in a quandary because they’ve got a number of strategic projects that they’re working on and they don’t really have the bandwidth to take on these last-minute requests where websites may need to be delivered in the next week or the next two weeks. So, that’s a really challenging spot for organizations to be in because they know that they have these strategic IT projects that need be completed but they also know that they need to help their digital marketing organizations be successful in order to capitalize on the market opportunity and for those organizations to achieve their business goals.

So, what can organizations do? Well, we know that organizations are really looking to achieve systems of customer engagement that really deliver the best of both worlds, where marketers gain the agility and the freedom to connect with their digital consumers and where the process in the approach that is used to deliver these sites scales effectively to meet the needs of IT. To help achieve this goal, what we at Acquia - is deliver the Acquia Cloud Site Factory, which we believe is the most efficient way to manage the delivery of many sites. With Acquia Cloud Site Factory, we provide agility for organizations to a scalable process and approach to delivering these sites through an efficient platform. Let me talk about each of these areas one by one. From an agility perspective, we want to help digital marketers be able to deliver engaging content-rich sites at the speed of the business without having to burden IT. Now, this doesn’t mean that IT does not play a role in this process. On the contrary, we do believe that IT still plays a very critical role in ensuring that the delivery of the sites meets their strict requirements whether it be for security, for quality of service and so on. Now, these sites can be delivered within Site Factory using a highly scalable approach where our goal is to help our customers deliver sites in days instead of in weeks or months using a repeatable, predictable site governance approach that’s based upon the use of site templates, which we’ll talk about a few minutes. Then finally, we want organizations to gain efficiency by simplifying their operational management and by removing the risks in delivering a large number of sites through a managed software as a service offering like Site Factory.

Let me talk about Acquia Cloud Site Factory in a little bit more detail. What is it? Well, it’s a fully integrated site platform that provides all the tools necessary for organizations to build engaging sites, to deliver them around the world with 24/7 availability and to manage those sites whether you’re managing tens of sites or even hundreds. By providing all of these capabilities in a single software as a service offering, then customers are able to benefit from this platform through a salary delivery of their branded experiences with their consumers. They are able to achieve, increase site governance through the use of site templates. They are also able to reduce the cost of managing large multisite deployments.

Now, we have many customers using Site Factory today. So I’d like to quickly just review with you some of the benefits that they’ve seen as a result of being able to create large numbers of websites within Site Factory through the site template approach. For a large global consumer pharmaceutical located here in North America, this organization was able to reduce the time it took for them to deliver branded sites for their global consumers for a matter of four to six weeks down to about 14 days as a result of standardizing on a common framework for their consumer branded sites. Warner Music Group is also is another user. They were able to deliver over 300 artists sites built on top of Site Factory though the use of three site templates. So, with three site templates they were able to deliver these numbers of sites and also decrease the time it took for them to complete the delivery. A large hospital campus located in the South East of the United States was able to consolidate many web properties across 22 of their hospital campuses onto a single platform in order to provide a more consistent branded presence for the health practitioners. They were able to achieve this again as a result of using templates to standardize the presentation and the content of their practitioner websites.

Now, with Acquia Cloud Site Factory, you’re really able to leverage the power of Drupal to build engaging online experiences that are responsive. You’re able to do this as a result of a version of Drupal that we include by default with the Site Factory platform and we call this the Drupal Gardens distribution. It really includes a best of collection of some of the Drupal communities most well known and most popular features including the use for creating dynamic queries, web forms, media, and more. We literally have hundreds of some of the most popular modules already included within this out-of-the-box Drupal experience. In addition, we also provide the Theme Builder, which is a point and click theming tool that’s embedded within the Drupal Gardens distribution. It enables you to point and click and create a very compelling and very dynamic visual presentation, and just to show you some of the experiences, as you can see some of the sites that have been created within Site Factory on screen.

Now, in addition to using the out-of-the-box Drupal experience that we provide by default, customers are also able to bring their own version of Drupal to the Site Factory platform. If you already have a new Drupal-based application or you’ve worked with a partner or other technology specialists to create a tailored Drupal experience for your own use cases, you can feel free to bring those into the Site Factory platform to use those as the starting point for the new sites that you create.

Now, one of the key capabilities of the Site Factory platform that enables the IT organization to rapidly scale and to deliver sites at the pace of the business? It’s through this notion of the site templates. With site templates, you’re essentially capturing website patterns that enable marketers to quickly instantiate new sites based out of successful patterns of sites that have worked very well in the past. Once you create this new site templates, then you can very easily launch hundreds of websites by simply duplicating new sites from those templates. Let me just talk about that a little bit more detailed because this really provides an incredibly powerful capability for you to: one, rapidly deliver sites to markets much more quickly; and two, to also ensure that you have consistency within your sites whether they be from the branding perspective, to ensure that you have a very consistent presentation of your organization’s brand and also from the perspective of how you configure your sites because how you configure your sites also determines how easy it can be going forward managing and maintaining those sites going forward. Through the use of site templates, you are able to essentially use Drupal to capture the core informational architecture of page layouts, roles and permissions, feature configurations, content types and so on that you believe are necessary for your sites. So for example, you may create one template for perhaps marketing campaign sites that you want to be able to rapidly spin up and then, you may create a second site template for the key brand sites that you may want to create. Once you have your set of templates identified, when you want to spin up a new site for any one of those site types, then it’s just a matter of configuring a site that’s been instantiated from any one of those templates with site-specific content and material and you’re done. This is really a very important way for organizations to very easily launch sites but also ensure the degree of consistency that may be desired.

In addition to being able to use site templates as a means of tailoring your sites, you’re also able to customize the Drupal instance that you have deployed within Site Factory as a starting point. You’ll be able to customize with confidence because Site Factory provides a continuous integration workflow experience that enables you to validate new modules or new features that you’ve enabled for your Drupal instance work well against sites that are already live in production and you’re able to test these changes within a staging environment without affecting your production sites. Once you’re comfortable that the new features or that the customizations you’ve made through Drupal work well, then you can deploy the changes from staging into production at which point will automatically enable whatever new features or modules that you’ve added to the codebase to all of the sites within Site Factory. Now, this is a core concept of Site Factory because unlike other platforms where each site is truly unique and may end up becoming a snowflake in its own right. With Site Factory, our goal is to help you deliver large numbers of sites by leveraging a consistent Drupal codebase, and then leveraging patterns of sites for the highest degree of consistency. So, if you have a need to create sites where there’s uniform configuration, but where you may want the highest degree of flexibility in creating really unique themed experiences, then Site Factory is going to be a really capable solution for your needs.

Now, with Site Factory - I’ll finish up by saying that we have three different service tiers available depending upon your specific needs; depending upon whether you’re looking more for convenience; or for more control and customizability. If your needs are perhaps simpler and are perhaps more oriented around brochureware types of sites, then we have the Acquia Cloud Site Factory SaaS edition where you’re able to leverage a rich out-of-the-box experience in building your sites. This tier doesn’t allow you to add Drupal modules but you really have a really easily to use out-of-the-box Drupal experience at your fingertips. Acquia will maintain the platform and manage the Drupal codebase for you. All you have to focus on is building great sites through the Site Factory platform. If you want the maximum degree of control on the other hand, then we offer the PaaS edition which allows you to experience all the benefits of Drupal with all of its capabilities and customize ability. With the PaaS edition, you’re able to customize the default instance of Drupal that we provide as part of Site Factory to your heart’s content, or you can bring your own Drupal distribution to begin with and of course extend that as necessary. Now, if you’re looking for a balance between convenience and control that is you recognize that you may need some number of Drupal modules but you may not necessarily have the resources at hand to maintain those modules, then we provide the SaaS+ subscription tier where after undergoing a module certification process, Acquia will maintain the modules that you want added to your Drupal distribution on a go-forward basis. Okay, we can definitely provide you with more information around those. If you have any questions, feel free to contact us. At this point, I’ll now hand over control to Andy.

Andy Mao: Thanks, Gary. Hey, everyone. Thanks for joining the webinar. My name is Andy Mao and I’m the Channel Enablement Coordinator of Appnovation Technologies. To give you a brief background of what Appnovation is, we’re the world’s leading open source development shop with over 150 clients, having delivered nearly 400 projects since our inception. We have six different office locations and we’re headquartered in Vancouver, BC; our US operations are running all of Atlanta; and we also have an office in London, UK. Through these offices, we have been able to serve companies around the world. The technologies we use include: Drupal, Alfresco, MuleSoft, SproutCore, HTML5, Mobile App, MongoDB and E-Commerce. Some of our more notable clients include: NBC Universal, Intel, Pfizer, NBA, Google, Fox News, American Express, Reebok, and the US Department of Defense. We also have some great experience with open source technology as we’re the only company in the world that holds enterprise for like Acquia partner, a MuleSoft partner, and a Platinum Alfresco partner. Today, our speaker is Kevin Madden who is our Appnovation Business Analyst with the background in digital publishing dating back to 1999 and here, I will pass the ball to Kevin.

Kevin Madden: What you can now see I hope is a website that we called “[Any State]”. It was based on some thoughts we had around local government sites. So, state sites, county sites and business what I would describe as the user experience for the home page. It got a big slideshow at the top of the page. It has a very clear navigation across the top and some of the information you might want to put into a site. Further down the page we’ve got: department pages, we’ve got blog content, we’ve got obviously – it’s a pretty standard display. What I’m going to do is I’m going to create a duplicate of that site. Now, I’m going to - in order to do that I need to be logged in. This is the same site. I’m now the logged in administrator. What I do is quite simply is I click on my site’s button and you’ll now see my background. You can see we created a number of sites in different guises as Gary mentioned earlier. It is an incredibly agile piece of kit and it works fantastically well unlike my screen.

What I’m going to do now is get the group sites that we’ve already put together - and this is the site that you were looking at. What I’m going to do with that site is I’m going to create a duplicate site. It’s quite straightforward and I click - or click on the button. I have to name that site, so I’m going to call it “Today’s Demo”. I get a choice essentially of two elements. I can create a clean copy of the site, which means that I get core functionality, core uses and no content. What I’m going to do this time is to create a clone of the site, so you could see the exact duplicate site. I’m going to hit the duplicate button. At the bottom righthand corner of my screen, you’ll see my email. It will send me an email at the site. It’s generated. It’s not instant but it’s very, very quick and quite impressive.

In the meantime, what I wanted to show you was the fact that the site is fully responsive. We put in, if you look now, I’m now logged out and I’m on a slightly different browser but you could see this is my desktop experience on the left and I can run through those sites with my big menus. I can go to various departments, get my information - classic sites and the noble sites, you can see presentation is instantly, same site, same URL but picking up every element of the site - say, again with a simple mobile navigation. In the meantime, I just want to check if my site is ready yet. It’s not there yet. We can still see Catherine on the right-hand corner. I was really hoping that I could ask if anybody had questions about the site. Are there any features or elements that you’d like me to demonstrate because it really is that easy to create a second or third site?

Moderator: Sure. We can open it that up to Q&A at this time. There’s a Q&A tab in the WebEx UI for anyone on the call. If you have a question, please submit it there. We have a couple ones waiting already, so we can get started. This is just more a general question about Site Factory. Is there a limit to how many site templates you can create?

Gary Wu: I can take that one. There are no limits to the number of site templates. Our users are able to create within the Site Factory platform. Whether you have a handful or you have tens or more, we don’t really keep track of nor do we care how many templates are created as long as users of Site Factory are able to satisfy all their business needs in launching new sites quickly.

Moderator: Okay. Next question, can you [Audio Gap]?

Kevin Madden: I will say briefly again to slightly help Gary. I think we’ve created something like 21 separate sites already and we’ve created them into groups. Not great designs as you can see from the screen but, yes, it’s very, very straightforward to create more sites and - you just keep adding basically. You can create different functionality with each site.

Moderator: Great. Next question, sorry I thought you are from here. [Laughter] Can you base a template off of an existing website?

Gary Wu: Yes. We really have seen two approaches for users creating site templates within Site Factory. The first is that from prior experience in creating new campaign sites or brand sites. An organization may already have a sense of the types of site patterns that they may want to create. As a result, they may already have an idea of that site template structure and its contents. They’ll just create that off the bat. Now, alternatively we’ve also seen users of Site Factory create patterns or identified patterns of sites after they’ve created a number of websites. They may have deployed, one - the first, second, third, fourth or fifth site. Then, after having done that number of sites they may recognize that, “Ah, yes. One of these sites actually would be a great starting point for new sites going forward.” I think that you saw during the demo that there is an option as part of Site Factory site duplication action to actually copy an existing site and to make it a starting point for a new site template. Organizations have been very successful using their existing sites as a starting point, and then using one of those existing sites as a site template for future sites.

Moderator: Great, okay. This next question is for Appnovation. This is the last question I have in my queue, so if anyone on the line still have - bringing questions, please ask away. We have plenty of time to get to your response. So, here we go with the last question. This is for the Appnovation folks. To build the site that you demoed, did you use the Site Factory distro a custom one?

Kevin Madden: Sorry, can you repeat that please?

Moderator: Sure. To build the site that you demoed today, did you use a Site Factory distro or a custom one?

Kevin Madden: We used Site Factory distro and the SaaS+. We have some modules in there that we’ve used ourselves - that we did for ourselves, but essentially it’s the SaaS product not the PaaS product.

Moderator: Okay, great. All right, well that looks like all the questions that we have for today. We’re wrapping up a little early for you guys giving you about a half [Laughter] an hour back in your day. Hope you enjoyed that. I just want to say on behalf of Acquia, thank you everyone for attending. Thank you Gary, Andy and Kevin for the excellent presentation. Again, on my end of side will be posted to SlideShare, and the recorded webinar will be posted to Acquia.com within the next 24 hours.

Kevin Madden: Okay, we’ll [Crosstalk]. Sorry.

Moderator: Yes?

Kevin Madden: What I was going to say, we haven’t quite seen these sites yet, but here’s one that I did prepare earlier just in case it didn’t come through because this is copied from the same sites about half an hour ago and one duplicate site. It took about 15 minutes to get it up, I mean it’s there. It’s ready to rock and roll.

Moderator: Yes.

Kevin Madden: That’s how fast - it really - I can’t emphasize enough what quite an amazing piece of kit Site Factory is. It really works incredibly well and the speed of delivery is amazing. It really is. Thank you.

Moderator: Fantastic. Thank you so much. That was really nice to see you. It’s just a little treat at the end. Thanks everyone for joining. Like I said, the webinar will be posted to our site in the next 24 hours, then we’ll email out a copy. Take care.

Click to see video transcript

Female: You Stay Classy Panels Module with guest speaker Kendall Totten who is a Drupal Designer & Theming Specialist at Mediacurrent, and Derek Deraps who is a Drupal Developer at Mediacurrent. Thank you so much Derek and Kendall for presenting to us today.
Kendall Totten: Well, hello everyone and welcome. I am Kendall Totten as Hannah said. Both myself and my team colleague Derek are from Mediacurrent. We're here today to tell you about the Classy Panel Styles Module which we're really excited about. Derek and I also want to give a little bio about ourselves, so go ahead.
Derek Deraps: Yes. Sure, my Twitter name is not mysterydude. Kendall just put that in there because I have no Twitter or anything like that. I am intentionally hard to track down so if you do want to find me you can do, so through drupal.org, derek.deraps is my username or through the Mediacurrent website. I've been doing Drupal for three years which half of that has been with Mediacurrent and my first say year and a half was spent with Georgia Tech working on some of their departmental websites. Now I'm at Mediacurrent and have been working with panels for since the beginning of my time but really, really heavily with panels since I came to Mediacurrent because we are a pretty much panels 100% shop. So about two years ago, they made the decision when we had to choose that we were going to go and build all of our sites and just standardize around panels. So Kendall is an expert with panels, I am becoming one and I'm really getting to dive into Chaos Tools and learn all about all the different plugin types and how all those work together. So we're going to show some of that today and hopefully it's something that's going to be really useful to you all.
Kendall Totten: Well, I myself is just that I begun with graphic design and kind of move into the wide world and I've been working with Drupal for about six years now then with Mediacurrent for three years. So I have experience as both a themer and a site builder, and then I've also done a lot of training of clients and that's all becomes important because of the style, the Classy Panel Styles Module really came about is because often we find out that there is an issue, there is real a big divide between themers and content editors. It's also hard to know where we draw the line between the layout styles that we're applying to like the Drupal Regions and how we're structuring the site and some of the styles that are applied to the content itself a lot times that comes inside the Wysiwyg which as themers we tend to dread the Wysiwyg. Most of us are working from something like a Photoshop MockUp and we're really trying to make the site look exactly like that MockUp, oftentimes pixel per pixel. Sometimes like I said, that content is controlled by the content editors, so really we kind of got a divide here and we still have to give the content editors creative control because they're the ones that are doing that work day to day. So how are we supposed to give them the ability to create layout within their content? A lot of times you don't want to put everything set in stone, you want to give them some freedom, some flexibility because sometimes the images themselves change shape or maybe they require a different layout or a special page or special blog post that day. So you want to give them the ability to change their layout and float their images and give them proper padding from the text wrap around it, but it's hard to communicate that kind of thing. You don't want to necessarily have to teach your content editors how CSS works down to the tiny detail; it can become a real challenge. A test that sometimes it's hard for developers too to know what you're doing and there's jumping in, in trying to apply a style. So even more so this becomes a bigger issue because now responsive design is really what it's all about. It's 2014 and you can't really turn a blind eye to the fact that your site is going to be visible, lots of devices, lots of sizes - from smartphones, tablets, desktops, giant monitors, even TVs. So this is a big deal. So are we supposed to teach our content editors how to make their content responsive? You could teach them about media queries and CSS, how to clear float and that kind of thing, or…
Derek Deraps: I suggest perhaps you try using the Classy Panels Styles Module which takes all drag and drop freedom that panels provides and allows the editors to apply some ready-made styles that the themer has whipped up for them. So they can take these classes and apply them to their panels panes and regions without having to remember class names or fuss with the Wysiwyg editor. So here's a little about how it works. Editors can pick styles from the Standard, what you see here is the Standard Style Editor for CTools, so imagine you're on the backend editor or perhaps in the in-place editor and you've clicked the Settings button for your selected pane style or region style. This window pops up and this is a customized set of options that a themer has entered which provides a sort of human readable set of options that each options corresponds to different CSS classes so these CSS classes get injected to both the backend editor and on the front-end where the content is being displayed. So they can do things like edit background colors or panel regions, they can change the layout of the panel panes without having to actually change the layout that's associated with the panel pane or excuse me, with the panel variant so that you can get a lot more functionality out of the same panel layout. You don't need to have a hundred different panel layouts to achieve the desired effect. You have a lot more flexibility in how you can layout your content.
Kendall Totten: That's a really good point, Derek. I don't know if you have ever used the Panopoly Distribution which is an excellent distribution. I have to recommend checking it out. At first glance, it seems really cool because it comes with a lot of different panel layout that you see here, these are some mails that kind of indicate the kind of layout styles you might want to apply to your panel page. It seems really cool because you're like, "Wow, I could achieve anything with these panel layouts," but by closer inspection when you try to actually make your Photoshop document look like one - try to utilize one of these panel layouts to look like your Photoshop document. You also find that it's close but it's not quite there so you still need modification. So you're starting with like 30 or so layout and then you still end up having to create custom ones anyways for your content editors to us. So when they're creating - maybe they're panelizing a particular note or they're creating a custom panel page, they're kind of stuck spending a lot of time figuring out which one is going to best suit their needs and it doesn't always get down all the way there, and even more so if you end up using something like a flexible panel builder you end up with some really yucky markup. The flexible panel builder is kind of a solution to try to get content builders to build up a panel layout themselves but this is not going to be responsive or mobile friendly because really you have to build in media queries which the Panopoly layouts are responsive inherently but if you use flexible panels also, there's not going to be and so let's just say no to divitis and avoid this altogether.
Derek Deraps: Kendall, what I'm interested in is why is this so awesome?
Kendall Totten: Well, you want to tell us about some of the reasons why Classy Panel Builder is awesome?
Derek Deraps: Okay. Sure. It allows the easy application of styles without having to remember the class names. It provides an extreme flexibility in creating your customized pages. It provides the ability to update pages without having to edit your CSS and you can create custom pages without having to actually push any code to production. So can it get any better?
Kendall Totten: Well, I don't know. I mean that usually one of the big hurdles that we're trying to overcome with people are editing - they're editing live content on their site, they're creating new blog posts and they're adding new images and things like that, so sometimes you need a new layout or you need some kind of new custom styles on the fly but with Classy Panel styles you don't necessarily have to push any code, you can just have readymade style sitting in the background for content editors to use and it doesn't require a code push which is really nice. You don't have to clear the caches, or varnish or any kind of - that sort of thing.
Derek Deraps: So what we got here, I'm showing you a little gift of how this looks on the backend. So you'll notice this is the backend panel's editor interface and normally you don't get to see any of the styles applied in real time on the backend. All you see is the panel panes take up the full width of the region that they're in and you can rearrange them but you don't get to see any of the styles applied. What we're showing you here is an example of how with the Classy Panel Styles Plugin, when you define these styles and the class to go with them, they get applied not only on the front end to the end user but also on the backend to your editor so that when they change for example in this case, the width of the pane, that pane then snaps the 33% width and it fits nicely in that layout. So you'll see we're using a one column layout but we're able to achieve a three column design even though we're using the one column layout which provides a lot more flexibility and again reduces the number of layouts that you need to define in your system.
Kendall Totten: Right. This does actually work with the Panels In-Place Editor as well. It's not perfect yet. I can show you here, I've got a panel page where if I click on Customize This Page, I'll see - this is the typical Panel In-Place Editor interface where you see like a way to a five tile or maybe to customize the settings for a particular panel or even add new content. So if I want to customize the layout here, I can click on the style icon and load up the Classy Panels interface here. Let’s say I’m going to apply Classy Panel Styles and I can change my - the layout or the width of this panel pane, I'm going to change it to a 50% width and save. You'll notice that it does actually change the content, but the Panels In-Place Editor has some extra markup going on here and so we're not technically modifying the In-Place Editor stuff but it can still give you a good preview of what's going on. If you're applying colors or font styles and that sort of thing, you'd be able to see it relatively easy, and then as soon as you save you'll see it snap into place and the text go back around but that's normal. So what about, Derek, do you know about Panels Extra Styles or Semantic Panels? How are those modules compared, are those pretty similar to what we're talking about?
Derek Deraps: I'm glad you asked, Kendall. That is one of the very first questions that we get asked every time we talk about the Classy Panel Styles Module. The only thing they have in common is the word panels and their module name. So the - let's start with Semantic Panels. What it provides is a really flexible, a very powerful tool to be able to customize the markup of your panels, of the panes and the regions. You can change the container that it uses, you can add classes and IDs, and completely alter the markup that gets out into your panels and regions, your panes and regions. One really good benefit of it is that it cleans up that markup a lot so it reduces some of the clutter and the extra divitis that goes on your standard panels region template. So that's good. Our region template and pane template is also pretty minimalist so it really cuts out some of the markup as it injects those classes. What the Panel Extra Styles does is the idea of the module was to have many contributed styles given to the module owner so that they would be vetted and approved, and say, "This is a really cool style. People might want to use this." So the idea was you install this Panel Extra Styles modules and then boom, you get a bunch of pre-set, readymade styles to use. The last time I checked I think there was only one style coming with the module but it's a really neat idea. What ours does though is empowers the themer to provide a really excellent set of styles out of the box that corresponds with the design that their editors need to be implementing. So we do provide some base styles that come with it called the CPS Example Module when you enable that. It does provide some sample set of styles but really the idea is to either build off of those styles or creates your own from scratch that empowers your users to do this in a way where they don't have to remember class names or IDs, or really understand how the markup works. They just know - they see the human readable language on the style settings page and then they can choose appropriately to get it to match whatever it is that they're working from.
Kendall Totten: Wait, so how do the themers get to define using a style set?
Derek Deraps: Well, with this fancy transmogrifying box called Drupal slash Chaos Tools, that's a really amazing form builder that we put together and as you can see Kendall is demoing here, this is the Classy Panel Styles Admin interface and it implements the Chaos Tools Export UI Plugin also known as a Chaos Tools Object Plugin. If she clicks on one of the items, viola, you can see that it provides a set of - it provides a definition for each of the styles that show up on the Styles Setting page so you give it a title, you give it a description and then you specify the options and their corresponding class name so to give a black background, Kendall, the themer, has defined through Sass and CSS, has defined a style class called region-bg-black. So when the user, when the editor is getting to choose they just see black, they choose it and boom, that class is automatically applied.
Kendall Totten: So I can tell you as a themer, this is a much easier interface to use than something having to dig in to PHP and use something like Panel Extra Styles which I think that they have really good intentions and this is what they were envisioning but there's no interface for it. So PHP is not my first language. As a themer I'm much more comfortable just in Sass, the CSS is where I like to spend my day and so if I have an interface to help me connect the dots between the classes I'm defining and how my content editors can use them, this is a super useful tool, this would really help me get my job a lot faster and beyond being able to just defining styles up here, Derek, went the extra mile and allowed us to specify where we can apply these styles. So we have the option of specifying he want to apply them two panel pane or panel regions, or both. This really come in handy because again you don't want to overwhelm the content editors with options and sometimes your style are specific or maybe you have a background color that you only want to apply to a region, you want this to go from one page edge to the other page edge. You don't wanted to apply to the themes in between so it's nice if you can kind of limit the options if they don't – accidentally use the wrong style on the wrong pane. Additionally you can specify what style set are allowed to be used on different panel layout, so for example if you had a panel layout special for your homepage and you had a handful of styles that only were supposed to be used on the homepage, you could say, "I only want the styles that leaves on the following layout and choose whatever layout it is, maybe you've got a custom one for your homepage here. I will pretend that it's a three column stacked one.” So this style set is only going to be visible when editing a panel that is utilizing this layout. So again limiting the options, less confusion. So this is a really awesome tool that allows us to kind of like say connect the dots between themers and content editors. So how - as I'm defining all of these custom styles, how would I go about moving this over for my development environment, my production environment?
Derek Deraps: Well, actually I want to back up one second Kendall, and talk about one other thing on this page is that I want to mention some functionality that's coming in the very near future which is the ability to define multiple style Plugins. So currently, if you install the module and you're editing your panel page, you get just one style Plugin called or I guess as one style grouping called Classy Panel Style. What we're going to be implementing in the future is the ability to group your styles into however many style groupings you want. So from the admin interface you'll be able to use, kind of a cooperation’s type selection and you can specify at that level these all belong to this group and this other group, and they can belong to multiple groups and you can assign the panes or regions and the allowed layouts at the level of the groups as well. So I just want to let you know that that's coming in the near future which I think will be really useful.
Kendall Totten: Yes. Alright. That is exciting. Also, one thing that I'm hearing so I just wanted to briefly mention is you're a themer and you're defining brand new set, unless that you don't even start with the example one. You definitely want to notice that this is a CSS style sheet that Classy Panel is loading and using so if you're defining your own style you probably want to create a separate style sheet in your theme, this is important. Don't put it all into one big style.css and load that in Classy Panel because you don't want to load all of those styles where you probably got thousands of lines out inside your Wysiwyg or inside your panel editor. So you want to just load the important ones that you're distinctly assigned with Classy Panel Styles so split those out and load it here. So back to migrating our styles to production.
Derek Deraps: Absolutely. So if there's any developers on the call or anyone who is familiar with using features, or even themers, I won't leave you out, "Hey, you all can do a lot of amazing stuff," because we've implemented this. Using the Chaos Tools, Export UI Plugin, it provides feature support out of the box and so it makes it really simple and easy to migrate or to featurize your styles and push them through your development workflow from local dev test prod, and it works just like with views or panels, or any of those other things that you use to featurizing through Chaos Tools, CTools. It makes it really easy.
Kendall Totten: One important note too is just you do want to utilize the example styles that come with the Classy Panels Module. You want to make sure to clone this. First enable that example style, clone them and if you want to modify them and make them your own and then export them through the feature, you can export these because these are part of the module but you can definitely clone and modify as needed, which is great.
Derek Deraps: Good point.
Kendall Totten: So I just wanted to take a minute to talk about the CSS specifically since that being part of this module and we are giving you example styles to work with so we're including a Sass file. So if you're not already using Sass, I definitely encourage you to dig into that and it's going to make it easier for you to write styles quickly and easily. So we've included the Classy Panel Styles on Sass files and then there's also a gem file and CURD to kind of help you get starting compiling that if you need to. You can change these as needed like I've got my width style settings in here, I have them set up that they're already using breakpoint, I'm using the breakpoint gem and it's a quick and easy way to write media queries, and I basically decided that if someone specify that a panel change would be 25% width, it's only applicable when you get to a certain size in your window. If your window is on a tablet portrait size or larger then great, you have enough space that a panel pane can reasonably be 25% of the screen and not be too tiny. Although below that I've made the executive decision as a themer that really you only have enough space to make it 50% width maybe of a Smartphone size or below that. I just want to stick with 100% width. This is something that you probably want to modify on a size to size basis depending on what you're mock-ups look like or maybe create something totally custom, but I wanted to make sure that you have the ability to modify these as easily as possible. We've got some good styles for views browse layout, if you've got like maybe a big listing of a bunch of items on your blog page or your showing up some mail and a title, then you want to quickly change it from a five column layout to a three column layout, it's easy to do that. Then just so simple ones in regards to like images, background colors, that kind of thing. So these all sounds pretty astounding, right? We talked about Sass here so I'm going to hand it over to Derek to kind of explain a little bit about how it works behind the scene.
Derek Deraps: So it's really complicated but thankfully we have Frank, Kendall, Cat who monitors all the pretty lights and make sure everything keeps humming along. No, just kidding. So the way that we do this as I said we're using, I'm using a CTools Export UI plugin also known as a CTools Object Plugin which creates a database table and the structure of the database table there that you see, those fields are a little bit out of date, the schema has changed a little bit since then and but don't worry the schema is really stable now, it's not going to be changing anymore. We have worked really hard to go ahead and get the schema into the final state so that upgrades in the future are going to be really smooth. So what this CTools Plugin does is it provides full CRUD UI for adding, removing, cloning, deleting those style settings that we showed you before on that admin page. What you're seeing here is the style plugin and this is one style plugin definition to rule and law. So it provides a parent style, this screenshot is probably out-of-date but this is one parent style that defines any number of SubStyles that inherent from it so that's what allows us to have any number of style groupings that show up in that list of when you're editing your panel page and you click on a region or a pane and you say change style and you see the list of style, they're like rounded corners, use no style, all those different things. Currently it just has the one that says Classy Panel Styles so in the future it's going to have any number of sub-styles so you can then find the name, you can modify it to your heart's content. Yes. So just one quick note about what it would take to the sort of standard way for - if you were a themer or a developer and you wanted to set a custom style plugin which is actually where this kind of originated from was we wanted to have our own custom style plugin for our editors to be able to apply styles, that Kendall was defining for them. So we are working on this, on a couple of different projects and every time Kendall wanted to add a new style setting to the form, she had asked a developer basically to go in and modify the settings for him that's defined in code, and so finally we got to the point where we said, "You know what, let's make this dynamic. Let's allow the definition of this settings form for the style plugin, let's create a user interface for that," and that's kind of where this module will be for. So here is a look at the some of the Jquery magic that really provides, I think for me it's one of the coolest features of the module and what that is, is the ability for the styles to apply on the backend in real time so you'll see the first image there is the style settings form with the different settings associated with it, and when you change that and you click save it in real time with Ajax apply those settings to the panes and regions that it affects. So you'll see in the div markup there, you'll see that there's towards the end of the first line you'll see one class called bg-blue, and then at the beginning of the second line width-50-100, and so you can see that the region behind it has a green background but the pane within it, it's got the blue background with light text and then a 50% width. So I just think that's so cool that it is something that's never been done before and it's I think really useful and helpful for editors.
Kendall Totten: Pretty sure. So I just want to take a minute to kind of dig in to showing you in real life like how this could actually work on your site and some tips on how you might utilize this really well. So for an example here, I have a basic article mode, and I've got a couple of pictures, there's of course my cat, Frank, and we've got a nice picture of Italy here. Let's pretend that this is an article that I written where of course the first paragraph I specifically am talking about Frank and I'm continuing talk about him here, and then this last paragraph I'm talking about Italy which is why I've loaded the second picture. You can see that on my basic article layout. Here's how you might ordinarily set this up with panels, we've got just like a basic two column layout, we have the image on the left side of the body and the right side, and what happens is you kind of get this misalignment where the image is much further below the content itself, and it doesn't matter how big or small the page gets, you kind of get a clear - it doesn't line up and then also you got this gap on the side because it's not flowing around the content because there are two separate regions. So this is less than ideal and this is kind of what you're stuck with ordinarily panels. So what I would suggest doing is utilizing panelizer so you might have something set up like - you got defaults for all of your content types and you can customize on a CURD note basis as needed. So let's pretend that I'm doing with this panelizer, I just wanted to show you kind of an example here though, what I'm going to do instead is use a brand new panel page to demo but you can do the exact same thing with panelizer. So the difference is, is I'm going to utilize the image field and the body field, and I'm going to split them up and chunk the content. What I mean by that is when I'm editing, this is the actual article content type, let me draw backwards for a second here and I'm going to show you on my field, this is something you don't ordinarily see, on the body field itself at the bottom here I have it set so that the number of value to the body field is unlimited so that I can split it up depending on what the content dictates. So if I go to that piece of content where I was writing about Frank and Italy, I'm going to edit this, and you can see I've got the first paragraph is about Frank and I continue to talk about him and then I've got that paragraph about Italy in actually a separate body field, and then here down at the bottom I have the two images, you just have two write Frank and Italy, and if I wanted to I could add additional paragraph and additional images so I just got to illustrate the point. So back to my panel page what I'm doing here is I'm loading the image field and the body field, and then I'm loading the second set-up for each of those. So I'm going to edit the settings for this panel pane, as you can see that the first one what I had to do is I'm limiting it and I'm saying, "At most display just one of these items," so if there's more than one item, more than one image just to play the first image, or more than one body field to play the first one. On the second set, and this could continue to as many images or body fields that you have, you say, "Get the first one and then just play one of those items," so the nice thing here is that since of both of these pieces of content; the image and the text lead on the same region, I can use Classy Panel Styles, I'm going to change the style to this image here to Classy Panels, and I'm going to say, "Set the image layout," or rather I'm going to change pane's width to something like 33% width so that it's a little bit smaller, I'm going to save this and you can see it looks like there might be a little bit of CSS not sure talking about 50% width but I'm going to save this. As I show it on the page, you can see that the text actually does wrap around the image and then the paragraph about Italy lines up with the image of Italy. So if I squish this down, you'll see that we get some nice wrapping here. We're taking advantage of the space; you don't have any of those big gaps. There's a little bit of space here, I've just got some margins between my fields but I could easily remove those. So I have the ability or the content editor to create a layout like this which is just me kind of deciding how big or small I want that image to be, if I want the text flow around it and I don't have to worry about the response and stuff because my themer has all done that on the backend. So if I go back, you remember I was showing the Sass and how it was actually defining breakpoints within each of these so like my 50% width breakpoint, it just stays 50% all the time, but if I set something to be 25%, you remember, at mobile it's actually a 100%. So if I bring the image all the way, let's me see, I'm going to have another one open; I can't get it any smaller. Give me just a moment, I'm loading the page. Frank is actually going to stay 50% width and it's going to make me look bad but this is why I'm not supposed to do a live demo. [Laughter] Let's go back out and try another one. I'm going to change it to 25% width, we're going to change Frank to 25%, let's save. There we go. Okay. So at the mobile size frank is actually 100% width because I've decided that a tiny little 25% width image would be way too small and then my mobile users would be kind of missing out on prepaid. So as a themer I get to make those decisions but I'm giving some of the controls to my content editors to how they want to do that layout. For anybody out there who has ever done anything the latest responsive design and images, you might be thinking, "Well, yes, that sounds nice but really you're just squishing the image and you're not actually changing the size," and we don't want to load an enormous image for mobile users, right, unless we actually need it. In this case I'm using a responsive retina - I'm sorry, I'm using a retina display so I do want it to be twice the normal size but on an ordinary mobile device I want to see it small. So what we're also doing is we're tapping into the powers of the Borealis Image Module. I definitely recommend checking that out. What Borealis does above the other responsive image modules it is does a query of a parent container rather than element queries. So instead of asking how wide is this page or how wide is your browser width, it asks how wide is this container and then it serves up the appropriate size image. So this image is actually, I think it's at least 1,000 pixels wide but it's serving up the version at 626 pixels wide because again I'm using a retina display so it's kind of double of what I actually need in terms of like visual pixels but if you’re going to load this on like an older iPhone or something that's not a retina display, you would see that in fact it is loading 200 to 300 pixel version of the image rather than the enormous version. As it gets bigger, make the screen, Frank is going to stay small, or yes let's try this one, now reload the page, and we need a better example, I'll try this one. There we go. So this one says natural 306 pixels and again this is a very large image, I think it's like a soft pixel naturally. The Borealis is scaling that for us and doing the work for us. So if you can kind of set up your content size ahead of time so that you can show your content editors how to chunk their contents then they can have this really dynamic control over the layout, the responsive images, everything falls into place really nicely. So with that I think we have a little bit of time to take any questions that anyone has.
I saw that we have one question from Shane who asks, “What themes would you recommend using with this module? Would you also recommend using panels everywhere or just panelizer?” So at Mediacurrent, we pretty much use the Omega Theme exclusively, we were using Omega 3 years ago and now we switched to Omega 4. So Omega 4 is really nice and that it rewrites a lot of the core Drupal stuff and then it gets out of your way, it gives you a lot of tools to get going but it doesn't come with a lot of CSS, it's basically bare bones and you're writing custom styles from scratch so I like that about it, and I don't think that - it's not an interfere, I'm not using any of the layout functionalities so like if you've ever gone into the settings for Omega 4 you'll notice that it comes with something called layout and so I'm just kind of, I don't even enable that extension since we're just using panels exclusively. Yes we are using panelizer a lot so like as my example here, when I was kind of showing how you might have a basic layout for an article, in real life if this is what I was - if this was the layout that I was trying to achieve, rather than creating a separate panel page for it and kind of like having to note and then a separate panel page to maintain it separately, I would actually just panelize this particular note and I would change the layout, I would change the content and move things around just like I was showing you here.
Female: Great. The next question is, is this a free module?
Derek Deraps: Yes. I was going to jump on the other one first. I kind of posted a little quick answer there for it, but so, is it a free module? Yes. It is absolutely free, I was trying to think of something witty like you can donate to or get tips or something like that, but no, absolutely free. The other question from Eric Norris, where can we download the module? When do you expect to release it? That's where you can get it, it's currently on my Sandbox page, and we are - I am working furiously to - not really furiously but in whatever spare time I have working to get this ready to release, the code base is essentially ready to be released but I have a kind of some hoops to jump through and some boxes to check before I can apply to elevate it to a real module status, but it's at the point now where it's stable enough. It's fine to install and play around with and even start developing with, like I said the schema and just the way the module works is pretty stable at this point. I'm going to be adding in some features but nothing is going to be taken out so I think like I say for sure you're safe to start using it.
Female: Okay. Thank you. The next question is, can this work with Clean Markup Module?
Kendall Totten: That is a great question. So I actually tried to use Classy Panels Module with there's Clean Markup, there is Semantic Panels, there is Fences, various kinds of modules that are basically trying to get in and rewrite the markup of your panel pane themselves, and right now they don't play nicely together. Ideally in the future, one the things that I like to do with Classy Panel Modules is to be the ability to kind of modify your markup as needed. So the idea that you have like a panel pane title and you've got the content itself, you want to change if there's an H1 or an H2 wrap around the title or if you want to make this a paragraph or a block code or something like that, you want to actually change the markup. Those modules give you the ability to do so. So right now that functionality doesn't exist with Classy Panels but perhaps in the future.
Derek Deraps: I'll jump in there too. I just pasted a link to a screenshot of Clean Markup and what you'll see there is that in order to use Clean Markup with Panels you have to select it as a style. So this is the same place where you would ordinarily be selecting one of your Classy Panel Styles groupings that you've defined. So it's kind of one or the other, however this is something that Kendall has asked me repeatedly for like, "Is there any way to kind of inherit from another style," and I have some ideas, I have some thoughts about how that might be able to make that work but at present no, you have to pick one style or the other, you can't use both.
Female: Alight. Great. It looks like the last question is the Borealis Module seems cool. Does it cause any issues if I'm already using the Picture Module? They seem similar.
Kendall Totten: That is a great question. They are very similar. The main difference and this is something absolutely worth considering is the Picture Module is what we're using going forward, the future of the lab, they're utilizing it in Drupal 8 and so I'd absolutely recommend looking into it and because you want to familiarize yourself with where the web is going. Right now there's a PictureFill JavaScript you basically make older browsers understand this new element and is literally a brand new element. You render images in kind of the same way that you're seeing Borealis do it which is like loading multiple pass to the same image that are all at different sizes. The main difference is that Borealis is doing it with JavaScript and additionally it's doing – remember it’s doing element queries as opposed to media queries. I have been searching high and low into trying to figure out if anybody working on a way to use element queries with the Picture Module. As far as I can tell there's only one, there's an Indiegogo Campaign where someone has raised money to basically work on the development of this to make the Picture Module have a nice fallback and he mentions specifically using element queries. So I'm hopefully that, that will work out because element queries are much smarter, they're a much better way to load your images because as you can see here we do a queries of page and we're talking about over a thousand pixels but Frank is only a couple of hundred pixels. So we definitely only need to load a smaller image here so it's much smarter. The other things to consider is that right now Borealis only works on image field, it does not work within the Wysiwyg so again if you're taking this route you want to encourage your content editors to chunk your content and to use the image fields and use the body fields like so, and not actually load the images inside the Wysiwyg which is more ideal anyways. I think that there is some support in the works between the Picture Module and the Media Module which is kind of a plugin for Wysiwyg too. So it's all very new so it changes every day, so keep an eye on it.
Female: Great. We have a couple more questions coming. The next one, Derek, do you want to take it away, the next one is, are there any pre-built classes available or do you need to find your own theme or themer?
Derek Deraps: Yes. So Kendall can speak more about the classes, the style groupings that come with the Classy Panel Styles Module, but my thought is that even if you're not a true themer like if I were using this, I was just kind of doing some of my own work or something, I could put - even though I'm not a true themer, I could put together the whole site so probably it wouldn't have the responsive images and the Borealis integration, and the element queries and all of that fun stuff, but I could put something together that would make it easy for the editors to do simple things like floating images, applying different basic styles, background colors, text transformations and stuff like that.
Kendall Totten: Yes. So I'm working to round out the example ones because I want to make sure these are as clean as possible before it goes into full pledge module mode. So these are a little bit under construction but they - like Derek said, it's working, it just needs to be maybe tidied a little bit but you don't have to use the Sass, don't let that intimidate you. You could absolutely just go in and write some really fundamental classes or background colors that you need with your colors, and then just point to your brand new path here.
Female: Great. The next question is, if that feature becomes part of the Picture Module please write a blog post letting the community know.
Kendall Totten: I guess it's not a question. [Laughter] Sorry about that. I would be happy to do that. Yes. I really hope that pans out and if anybody is curious this is a campaign that I was talking about, I’m using the picture element implementation and they did reach their goal so this is definitely in the works right now and I think if I can find element queries, yes, this is one of the things that he was going to include if he reached the goal.
Female: Awesome. Well, a huge thanks to Adam or to Derek and Kendall. Thanks everyone for attending. Slides and recoding will be posted to the website in the next 24 hours and we'll also email you out a copy. Derek and Kendall, do you want end with anything?
Derek Deraps: Just thanks a lot you all. We'll be at Drupal Con Austin; we'll be doing a little buff on this. Actually we’re doing a little presentation at the Mediacurrent booth on Classy Panel Styles so hopefully by then we'll have official module status and have some more good updates for you.
Kendall Totten: We're definitely open to ideas too. So if anybody wants to add comments on it or – you can at least tweet at me and I'll be happy to hear you ideas for me if you're interested too. So thanks.
Derek Deraps: The issue queue is up and running so if you want to add anything to the issue queue of the Sandbox site you're more than welcome to do that as well.

Click to see video transcript

Moderator: Today’s webinar is Setting the Record Straight: Drupal as an Enterprise Web Content Management System with speaker Dries Buytaert, who’s the creator of Drupal and also a co-founder and a CTO at Acquia.

Dries Buytaert: Yes. We'll be talking about Drupal as an Enterprise Web Content Management System. Before we jump into that, this is me. For those that don’t know me, I started the Drupal project about – gosh, like 14 years ago. I worked on Drupal in my spare time for seven years, and then after seven years decided to start Acquia - we'll talk a little bit about Acquia as well. I also co-founded the Drupal Association. I’m a techie by education and I love photography, and I do love chocolates. This is actually funny because it was magically added by our marketing team, but I do love chocolate croissants. Actually this weekend, I was officially endorsed by somebody that I know on LinkedIn as an expert on chocolates. If you haven’t endorsed me on chocolates, this will be the time to do it. If you want to follow me on Twitter, I am @dries.

Today, we'll be talking about these things here. First, I’m going to talk a little about Drupal and the market that Drupal plays in. Specifically, what our competitors are and how they compete with Drupal. Then I’m going to talk about some common myths about Drupal in the Enterprise, and then talk a little bit about Drupal 8 in the end, and how Drupal 8 will actually be more powerful and more successful combating some of these myths. Then we're going to leave some time for questions in the end as well, so feel free to send your questions in the chat, I believe.

First of all, what’s Drupal?

For those of you that are new to Drupal, Drupal is an open source platform that organizations use for building websites. It was born as a social tool, specifically as a message board. Over time, we've added other components to it like content and commerce, and so now what’s really compelling about Drupal for many organizations is that it’s a unified platform that’s really good at these three things. That allows organizations to build a very wide variety of websites on a single platform. It features easy and fun content doctoring. We have lots of integrations with other systems and platforms. We separate the presentation from the code, from the data. It makes it very easy to do certain things.

We're pretty well respected in the areas of globalization and localization. We're one of the best CMSs when it comes to providing multilingual websites and specifically with Drupal 8, multi-channel delivery is also going to one of our strong suits. On the community side, as I mentioned, Drupal was born social, so lots of social features there. Things like group collaboration and user-generated contents like commenting and polls and activity streams and things like that. More recently, we've been very focused on commerce as a community and so people are also starting to use Drupal to build commerce solutions. What’s great about having these three things integrated is that you can build great digital experiences all the way from attracting people to your website through community and social to delivering great content, and then really deeply integrating the commerce experience as well, which has proven to be very beneficial to drive transactions to your Drupal sites. That’s a little bit of what Drupal does. Obviously it does many, many more things but at a high level, I think that is a good summary.

The next question then is: Who does Drupal compete with?

We have a number of different competitors in the traditional web content management space. As Acquia, we see Drupal compete the most with Adobe Experience Manager in CQ5. But also with Sitecore, which is .net solution based in written .net. Then we also compete a lot with legacy vendors, the first CMS platforms out there – products like SDL Tridion, TeamSite from Autonomy or HP now, also, Oracle FatWire. These kinds of platforms. Then we also compete a lot – and it’s not on the slides, but we compete with a lot of do-it-yourself solutions. There are still a lot of organizations that build their own or digital agencies, web development companies that have built in-house CMSs. We see a lot of that, actually. On the socials sites, we compete primarily with Jive and Lithium in that space.

What do the analysts say about Drupal?

As Acquia, I’d say we started to build our analyst relationships I would say, really like two or three years ago, sort of upped our game. As a result, Drupal and/or Acquia has appeared in quite a variety of analyst reports. One of them is the Forrester Wave for Web Content Management that was published in 2013, so last year. Acquia is one of the younger vendors in this Wave, and according to Forrester, Acquia and Drupal are sort of in the top three when it comes to product selection increase in terms of what they see as analysts. The analysts create an overview of the space but they also work a lot with large enterprise organizations. These organizations are customers of Forrester as well and they solicit their feedback in terms of platform selection. That’s one.

The other one is from Gartner. It’s a Magic Quadrant from Gartner on Web Content Management. As you can see, Acquia and Drupal is actually positioned here as the best open source vendor. Then we have one more. This is another Forrester Wave on Social Depth Platforms. Drupal and Acquia do really well here, we're among the leaders in this graph.

One thing to keep in mind. I don't know how many analysts are on this call, but typically analysts take sort of a laggard view at the markets. Also, that’s just how it is, frankly. It takes a while. You need to have a certain size, a certain momentum for them to consider you. It’s also one thing that we struggle with as Acquia. They wouldn't consider Drupal on its own so that’s why often you see Acquia on there, which is the combination of Acquia and Drupal, which they do consider. As you can see, ever since we started our efforts building analyst relationships, Drupal has been gaining moment quickly with the analysts and we hope that will continue, obviously.

What are some of the common misconceptions about Drupal and what do we see in the market when we compete with proprietary vendors?

Obviously, there’s a lot FUD. For those who don’t know FUDs, it stands for fear, uncertainty, and doubt. We have great examples. Actually, just to kick it off here is one of them, some infographic from a digital agency. I’m not sure if you can actually read all the text but it’s a flowchart. Unless you are already absolutely in love with open source or are running a super simple website, all paths lead to commercial. You can see it on the right. All the arrows point to commercial solutions. Obviously, that is a little bit funny. If you know what the agency does, it primarily works with proprietary vendors. It actually doesn’t work with open source solutions at all, so no surprise there.

We see these kinds of a lot. We crated them. We sort of grouped them in five buckets, if you will, which is presented on this slide which we'll talk about in the rest of our presentation. Often Drupal is perceived as just for blogs or very simple websites. Others say Drupal isn't secure. Actually, it comes up quite a bit. “Drupal doesn’t scale and can't handle the world’s largest websites.” That is also one the things that is being mentioned often. Or, “Drupal requires tribal knowledge.” Fifth, “Drupal doesn’t work well with my marketing tools.” These are the five ones that we'll focus on.

The first one is; “Drupal is just for blogs and simple sites and not for global enterprises.” Here you see a copy of a white paper that Sitecore has on their website. I think you can still find it there. As you can read on the slide, they say things like, “We quickly discovered that Drupal's capabilities were a mile wide and an inch deep. The minute you go beyond exactly what open source can do out of the box, it gets very complex very quickly.” Suggesting that you can only do very simple things with Drupal, which needless to say is complete – beep – [Laughter].

We have a lot of great examples of how Drupal is being use by very large organizations. One of the best examples, actually, is GE. Obviously, one of the largest organizations in the world. They actually moved to Drupal from Autonomy TeamSite and from Vignette to Drupal. They have a couple hundred Drupal websites right now, I believe. They selected Drupal because it provided them way more flexibility and better velocity compared to TeamSites and Vignettes. It was very difficult for them to make changes, very slow process. Now, with Drupal, they can go much faster.

A great example of an organization standardizing on Drupal throughout the organization. Another one is NBC. They've been a Drupal user for some time now. If you know NBC, it’s actually a collection of different companies under the NBC umbrella. They’re actually standardizing on Drupal for all of their websites across all of their organizations, if you will. So all of the sports websites, all of the entertainment websites for their different shows and television channels, and even their news properties have moved or are in process of moving to Drupal. Pretty big website like nbcnews.com, websites like the Winter Olympic website. At some point, I think it was during the final hockey game – I’m not big on hockey – but I believe they were serving over 40 million pages an hour or 40 million users even, an hour. So, big websites, mission critical websites for these organizations that are sort of transferring their business to digital. These are not side projects. These are their main websites.

Warner Music is another great example. They have 300-plus websites on Drupal from David Bowie to Kid Rock to many other big artists. Needless to say, these are not simple websites, and managing 300 websites is not a simple task, either. So complexity in these two dimensions, if you will. With Drupal, it now became much, much easier to launch new artists and new brands which allowed them compete effectively in their space.

Drupal really is not just for small sites. In fact, over 50% of the top media and entertainment companies use Drupal. You can see some of the brands in here.

It’s very well established in government as well. We actually did some research and we found that over 130 nations across the world use Drupal. Both at the federal level, at the local state level, it’s everywhere basically. Not just in the US but also the European Commission, doing a lot of work with Drupal, so it’s pretty exciting in my mind.

Extremely well adopted by universities. Seven of the eight top universities are using Drupal, often with hundreds of sites. I was at Stanford not too long ago and I met with the CIOs of the eight schools that they have. Among the eight of them, they had over 2,000 or 3,000 on Drupal, so pretty impressive. That seems to be a pattern for many of the universities and they do all sorts of websites on them – departmental websites, classroom websites, lots of different sites.

Just a couple of other quick examples here. We see a lot of adoption. As of a few years ago within sort of the largest technology companies in the world. I mentioned GE already, but also Intel and Verizon, Red Hat and Alcatel-Lucent, building on very big Drupal sites. Some of these websites saved them millions of dollars actually. Again, great examples how Drupal is very successful in the enterprise with pretty complex implementations.

Emerging very rapidly is life sciences with organizations like Pfizer and Johnson&Johnson. Drupal now has 33% adoption within those, which is awesome. Financial services, same thing. Lots of large organizations like the New York Stock Exchange frankly, and Euronext in Europe. They have over 80 websites in Drupal, so very exciting. It doesn’t stop there. There are many other examples of Drupal.

If we actually look at some other data here, and this is data according to BuiltWith.com. It’s a website or a platform that tracks all the technologies that are being used on different websites online. So if you look at the top 100,000 sites, we see that Drupal runs about 3.5% of all the top 100,000 websites, according to Quantcast. That’s actually up from – as you can see, 2% in 2011. Tremendous growth in the enterprise and our two top proprietary competitors that we see, Adobe and Sitecore, as you can see, they’re run less than 0.50% or less than 1% combined even, and their growth seems to be more flat. It’s funny that these organizations try to compete with us and say Drupal doesn’t scale and Drupal is not ready for the enterprise or for big websites when, in fact, we run many, many more sites than they do. So that’s one.

The other one is: “Drupal isn't secure.” We hear that one actually quite a bit. Here’s another snippet from something that we read from Bridgeline Digital. You may not know them. I didn't know them, but they’re a small software as a service web content management company. They publish these anti-open source white paper just last week actually, so this very fresh. I’ll leave it up to you to read, but they're basically saying that open source platforms are very insecure and that’s a really bad idea to use open source. Which obviously, we don’t believe is true. We have real data and examples to back it up.

Here’s the example of We the People, which is part of the White House, so it’s sort of a sub site of whitehouse.gov. Needless to say – I don't know if you guys know on the call but there is like 34,000 websites in the government, of which there are about 10 that can never ever go down according to the government, and whitehouse.gov is one of them. This is one of the most business critical websites within the US government. For that website to use Drupal, obviously, is a great testament to open source and the security of Drupal and open source in general. It’s not even a small side project for them. We're talking about a petition website here that allows every citizen to the United States to create a petition and to sign a petition which is a fundamental right of citizens in the US. We're talking about the United States of America moving one of the core functions – it’s part of the First Amendment – from doing it through other systems to bringing that online and making that digital and making that accessible to all of the citizens of the United States. Key initiative using Drupal successfully. So to say that Drupal isn't secure or that open source is insecure seems a little bit farfetched.

In fact, here’s a quote from Forrester on Facebook to a customer. So Forrester wrote about this customer, “One interviewee from a global pharmaceutical organization believed that his open source web content management solutions were more secure than proprietary ones. And many also feel that the open code base is a particular advantage, as it allows organizations to explore potential security vulnerabilities.” This is exactly why open source is more secure. I can tell you that as Drupal project, we do take security very seriously. We have a security team, for example, which has more than 30 people on that team whose jobs and responsibilities to help make Drupal the most secure content management system.

Not just that, we also have a culture of peer review when we are developing the software. In proprietary companies, when one of the engineers makes a change, that person is most likely to just commit the change to the next version of the platform. In best case scenarios, there is one other person in the organization doing a code review. But in most software organizations, that’s actually not the case. Whereas, in Drupal, for somebody to make a change to Drupal Core, especially complex changes, some of these changes are being reviewed by 20 people or 10 people. But in every single case, every patch or change is reviewed by at least one other person. In most instances, actually by multiple people. We really use best practices in software development to help keep Drupal secure.

The other thing we do is when we do find a security bug in Drupal we're actually open about versus most propriety software vendors, they will just not mention that all. Group that under numerous buck fixes or things like that. I think that culture of transparency is actually very health versus just not being transparent, I guess. That is actually recognized. Here’s a quote from the CIO of the DOD, the Department of Defense in the United States. He says, “Continuous and broad peer review” – like I had just explained – “enabled by publicly available source code, supports our software reliability and security efforts.” That’s exactly what I just said.

The other thing that I’ll add is not just the contributors that are building Drupal that review the source code but it’s also – for example, before the Department of Defense decides to employ Drupal, I bet you they do security audits. Before another government somewhere else in the world decides to adopt Drupal in a significant way, I bet you, they do a security audit, too. Drupal has literally been security audited by expert organizations multiple times because of the scale and the adoption that we have, which the proprietary competitors don’t necessarily have.

In general, I feel like you should feel pretty good about security in open source in Drupal. That doesn’t mean there’s never going to be a security issue, but when there is, we actually handle it really well in a transparent way that enables everyone to act very quickly.

Moving on, the third myth is: “Open source won't scale to handle the world’s largest websites.”

There’s another example from Sitecore, a white paper called, “The Siren Song of Open Source CMS.” I highly recommend you download it if you need a good laugh. They basically say exactly that – open source doesn’t scale. Of course, there’s so much proof of that not being true. Open source is, in today’s world, inspiring technology in the enterprise. Not just in the level of CMSs but operating systems with Linux, databases with NoSQL and MySQL, Big Data place Hadoop, and also digital experiences like Drupal. I think open source has shown that it creates very large platform winners that leaves proprietary alternatives. I believe that’s exactly what’s happening with Drupal today.

Needless to say, we have a lot of examples here. Here’s the website of the Grammy’s which has been using Drupal for at least three years right now, in a row. The last grammy.com or Grammy Awards show, which was a few months ago, they actually had 460 million hits one night. Needless to say, Drupal does scale.

Here’s another example. This is the MTA. During Hurricane Sandy, the MTA website, built in Drupal, was the only website that stayed up for people looking for traffic information on how to get home, these kinds of things. We served 5.1 million customers in the New York area during that hurricane and had 30k comparing visitors to the platform. So sometimes, people say, well, it’s easy to build a website and do lots and lots of pages because you cache them all. But I think both grammy.com – it’s an example where they had updates to the website every minute. It wasn’t like all static website. Certainly, mta.info, there’s a lot of dynamic parts to the site. Limited cacheability there.

Another great example, is weather.com. They’re in the process of moving from Percussion, which is a legacy CMS, to Drupal. Very exciting to me because they are one of the largest websites in the world. Everybody checks the weather and everybody goes to weather.com for that. Also the data feeds that they send out to many of the apps and things like that, it’s all going to be covered by Drupal in the end. Top 25 website in the world moving to Drupal, I think is a huge testament to our scalability.

The next one. Now we're talking about the fact that; “Open source requires tribal knowledge.”

Again, the Sitecore white paper. They’re saying things like, “Open source isn't well supported by a community of developers.” And they say, “Developers can an excellent resource for enhancements and bug fixes, but when they’re actually going live with your website, they may not have any accountability to you. They’re not willing to help you.” These kinds of things. The reality, of course, is that the Drupal community is large and there's lot of people in the community and many of who are willing to help you.

Here are some quick stats actually. Drupal is one of the largest open source platforms in the world, especially if you measure it in terms of number of people that are part of our community that are contributing. You may not have the same install as Linux but we do have an incredible amount of people that are active in the development of Drupal. Over 28,000 developers a year actually make changes to Drupal and they’re all around the world 24/7 making Drupal better.

It’s funny that proprietary CMS vendors call us out on that because – I don't have the details here, but I don't know how many developers Sitecore has. If they have 100, I think that’s probably going to be a pretty good guess. Maybe they have only 50. Maybe they have 200. Maybe they even have 500 which they definitely don’t have. It’s still small numbers compared to Drupal where we have 28,000. Where are these experts on Sitecore, for example? It’s really funny that they call us out that way because it’s not unlike Drupal where – except we have many, many more people.

For those people that do have concerns about support of open source – and that’s exactly why I created Acquia frankly, to help provide commercial great support to these large organizations. But also, we have a large ecosystem of other companies that can help build your Drupal sites and do these kinds of things. Our ecosystem is definitely much larger than that of our proprietary competitors.

Forrester, again, wrote, “As one Forrester customer told us, ‘We had some concerns about support with open source, but we felt like a commercial company like Acquia could make up for that and give us the support we need.’” What that really means is that the combination of a company like Acquia combined with open source brings together the best of both worlds. You get all the advantages of what the proprietary enterprise software vendors will sell you like support, certain guarantees around up time and all of these things, but you get that combined with then innovation that’s coming out of open source. Like the innovations coming from these 20,000 and more developers around the world. It allows you to build really robust websites but also to innovate much faster than your competitors using proprietary software. That’s exactly why Drupal is being adopted that often.

All right, so our last myth here is: “Drupal is more expensive.”

Which is funny. They often make comparisons with “free puppies” and there’s some truth to that. Open source isn’t entirely free. There is no license fee, but there’s definitely other costs to using and running software. So let’s look into some of these costs. Here’s actually a quote that was sent to us by somebody that was looking at Adobe. Adobe, in their sales pitch, made the comparison between using their stuff and Drupal. As you can see, according to Adobe, to build these particular websites with Adobe, you needed about $1 million but to do it in Drupal, you need about $2.5 million, so 2.5x more expensive. They say it’s more expensive because Drupal lacks space functionality and they gave some amazing examples like, “We like the ability to have dynamic contents or mobile or multi-site management.” Obviously, these are all things which have baked into Drupal actually for over 10 years. They are just lying about Drupal to try and win deals.

Here is another example from Sitecore, and it’s funny to see how they pitch about what they do. They say, “Well, there is no license cost in Drupal but,” and this is the first lie, they say, “The license cost is only about 5% of the total implementation cost.” Which usually it’s much more than 5%, but then they say, “Even though there’s no license cost in Drupal, the actual implementation cost is so much bigger that the license cost doesn’t matter.” They wrote, “Reducing that 5% with savings on an open source CMS can drive up the other costs significantly, usually resulting in higher total expenses.” That’s complete bullshit as well.

In fact, let’s get some numbers here of how Sitecore or Adobe compare with Drupal. The first table is Sitecore or Adobe. These are numbers we made up based on what we see in the field. Let’s say the license fee is $200,000.00, which often is much more. Then there’s implementation services, by $200,000.00, and then the proprietary vendors always add on like maintenance and hosting so let’s say that’s $40,000.00 each for a total of $480,000.00 in Year 1. Of course in Year 2 and 3, the license fee disappears but you still need to pay for some implementation services and you have to keep doing maintenance and hosting, and so for this particular example, it’s going be about $680.000.00 for three years.

Now, in Drupal, there is no license fee, so that comes zero for all three years, but there are still some implementation services. Somebody still has to help build your websites. In the case of Drupal, it’s typically going to be about $150,000.00 because the fact that there’s so many contributed modules out there, over 20,000 modules, so a lot of the features and the functionality that you need or want for your websites are there as starting points or they’re there and they can just be used. Typically, what we see is that the implementation costs are lower because of the vast amounts of functionality available in the open source projects. Then maintenance and hosting in our case, it’s bundled in what we call Acquia Clouds and so typical price points there are $60,000.00 a year. If you combine everything, you can see that the total over three years is significantly lower than the proprietary vendors.

We'll quote you, and in fact I believe the average deal size for Adobe is – I thought it was $1.4 million. They’re definitely not that cheap and we’ve seen that a lot with our customers and Drupal users. For example, the State of Georgia, they have a 10-year-old proprietary platform that they decided to move to Drupal and in doing so they actually projected that they’ll save almost $5 million over five years for about 55 websites that they have on Vignette. These numbers are real. We have the people responsible for that project to back that up with real quotes. We see that over and over again, that not only is it cheaper to move to Drupal but it actually increases their velocity as well so they can do more with less money.

Which is what a lot of people have to do, frankly, because most organizations spend to more and more websites. They go from having one or two websites 10 years ago to having to manage dozens or hundreds or, in some cases, thousands of websites. At the same time, each of those individual websites have also become more complex like we went from having static contents to dynamic contents to pretty complex websites with integrations and CMS systems and CDN systems and marketing automation tools. There are these two forces. Force one is more and more websites, and force two is the web that’s accelerating and the complexity of the websites to increase as well. Yet at the same time, the budgets haven’t sort of followed that trend. Many, many organizations find themselves in a situation where their challenged having to do all the things they need to do. So open source has been a life saver for many, enabling them to do more with less.

There’s some bonus, extra myths here. Some people say, “Drupal doesn’t have a roadmap.” Other people say, “Drupal doesn’t have an upgrade path.” These things aren’t entirely true. It’s true we developed our software differently than proprietary software, but we do have a vision and a roadmap. The way we organized that for Drupal 8, for example, is we have eight or nine initiatives like examples being, configuration management when mobile or authoring experience. We set out these big themes, if you will, and that’s effectively our roadmap.

Same thing with an upgrade path, Drupal does provide an upgrade path from one version to another. Of course, if you have custom modules, it’s not going to automatically upgrade because we do break backwards compatibility. We break backwards compatibility because we believe it’s more important to innovate and to make sure Drupal stays modern than it is to provide 100% backward compatibility. But once we make a release, that release is frozen and we will support that for many years. There’s a stable platform with security fixes and bug fixes. Basically, there’s a lot of stuff being used to try and debunk the success of open source and Drupal.

With Drupal 8 around the corner, I think once Drupal 8 is released we’ll be an even better, stronger project. We’ve been doing a lot of work around authoring experience, making it easier and better for either one author or a team of authors to publish content online by doing things like integrating WYSIWYG and adding in-place editing. These kinds of features really make it better and faster for content managers. I’m very proud that we were able to make that a main focus of Drupal 8.

Obviously mobile was a big initiative, and I did my State of Drupal keynote four or five years ago. I said, “If I were to start building Drupal today, I would build it for mobile first and desktop second.” That’s not exactly what we did, but in a way, that is what we did. So for the last four years or three years, we have re-factored every aspect of Drupal pretty much to be mobile-friendly. All the way from making sure Drupal is responsive. Not just basic responsive features but also things like responsive tables where certain columns disappear depending on screen size, responsive toolbar to make sure that the navigation works. We’ve also been working on a mobile preview feature so if you are authoring content, you can quickly preview how that looks on mobile devices. But also in the backend. Mobile is not just building mobile websites to be viewed in a mobile browser, but also native apps like iOS apps or Android apps. Everything in Drupal is also exportable through a RESTful API and that will actually enable organizations or people to build mobile apps very easily on Drupal. All of that is out-of-the-box functionality with Drupal, so it’s pretty exciting.

Multilingual has been a key initiative. I think there was a question about that and I’ll address questions in a minute here but to build a multilingual website in Drupal 7, well, it’s entirely possible but it took like 20 contributed modules or something. All of these or almost all of these modules have been moved into Drupal core, the base platform and then updated and extended even with more features and functionality and lots of usability improvements as well.

Multilingual and globalization support, we’ve made massive improvements massive improvements there in Drupal 8. As I mentioned, we’ve really adopted RESTful APIs into Drupal. In Drupal, every piece of content, whether it s an article or a discussion or a comment even on an article or a user in a user profile, all of these things as well as new things to define in Drupal using our entity system automatically become RESTful enabled. Each of these pieces T and so that’s not only good for building native apps as I mentioned but it’s also really useful to integrate Drupal with other systems.

On the right of this slide, you see the marketing technology landscapes. This is a collection of tools. Some of the tools the marketers can choose from to build their marketing steps I guess. There are literally hundreds of tools that need to be integrated with their content management system. Our proprietary competitors focus on a handful of these like the big players, like Salesforce or Marketo, but often, smaller or more specialized tools are forgotten and a lot of these simply cannot be integrated because the proprietary vendors don’t have flexible APIs or they simply don’t have the right API, whereas they can be integrated with Drupal because everybody can make changes to Drupal. We’re pretty excited about building more of these integrations and letting marketers use the tools that they want to use versus having to use the tools that happen to integrate. We’re very excited about Drupal.

Then just to wrap it up before the questions, a couple of slides about Acquia. We see ourselves as the digital business company. That’s not how we were born so to speak. Initially, we were all about being a company that provided commercial-grade support for Drupal, which is still our focus but more and more we’ve been working with large customers and we’ve been helping to define their digital business strategy and we’ve been helping them with that transformation of becoming digital businesses. We’ve been very focused on empowering companies to deliver great digital experiences that integrate content community commerce, all using Drupal.

We have done quite well so far as a company. We’re more than 440 people and have been recognized as a very fast growing private company. Most recently, Deloitte recognized us the second fastest growing technology company in the United States and we have customers in all of these verticals that you see. To do what we do to provide that support with the digital transformation that organizations go through, we use this kind of mental model where all of that is built on Drupal, it’s our platform layer if you will, that people use to build dozens of websites or hundreds of websites. On top of what, we have some proprietary software as a service which we call the Digital Engagement Services. Things like Acquia Lift which provides personalization and targeting, but also Acquia Search and Mollom that basically allow organizations to better engage with their visitors and drive them to a transaction, either an eCommerce transaction of some other transaction.

At the bottom, we have Continuous Delivery Cloud called Acquia Cloud, but also Acquia Site Factory and basically that is our platform that we use to host websites, but also to provide lots of tools to help to continue innovation, testing, and these kinds of things.

Our model as a company is sort of a sandwich model if you will where Drupal sits in the middle and then at the bottom and the top, the buns if you will of the sandwich or the hamburger are paying services that customers pays for. As such, it’s complete solution for organizations that want to build a digital business.

All right, so let’s wrap it up here. Of course, I think most of you have about this famous saying from Gandhi, he said, “First they ignore you, then they laugh at you, then they fight you, and then you win.” I think this couldn’t be more true for Drupal and open source. We were completely ignored for the first 10 years, almost or less but people are clearly laughing at us as you could see from some of the screenshots and they’re clearly fighting us with FUD but we’re also clearly winning. If you look at the numbers, I think the numbers speak for themselves and that’s pretty exciting.

I think in a way, open source has already changed the industry like if you think about the traditional web content management systems that were born in ’96 and things like Vignette and Interwoven. While they’re still around, I think they have been replaced to open source alternatives, not just Drupal but other solutions as well, WordPress and TYPO and Joomla. A lot of people have migrated to these and I think what they’ve done is because they were pushed out, they kind of redefined themselves as a marketing cloud tools which is CMS tools plus additional services, additional things. I think we have an opportunity to basically also go after them and replace the Adobes and Sitecores and the Oracles of the world.

I’m personally very passionate about that because systems like Adobe, they are extremely expensive, costs millions of dollars, and this transformation of companies figuring out how to do business on the web is so important to our world that we can’t have these tools only be accessible to a few that can pay millions of dollars. I think we really have an opportunity to bring these capabilities, the right way to do business online, to the masses and sort of do well for the web and make sure that the web is on good shape. I’m very excited about Drupal going after this and I hope you guys are, too.

If you want to read a little bit more about some of the things I spoke about, in the webinar there’s some links. You can see the links on the screen and will also be shared later but definitely feel free to check out these things a little bit more. Which I think brings us to the Q&A session.

Moderator: Yes, great. Thank you so much Dries. If anybody has any question, could you please ask them now in the Q&A tab? We have a couple come in during the presentation and the first is, “What is the difference between Acquia and Drupal?” Some people just wanted some clarification on that.

Dries Buytaert: Yes, sure. I mean, I think I spoke about that just a few slides ago, but Drupal is open source software that people use to build websites and Acquia is a company that helps organizations to use Drupal effectively. I guess I’ll leave it at that. Just check acquia.com, I would say, for more details. Other questions?

Moderator: Yes. The next one is: Can you compare WordPress to Drupal?

Dries Buytaert: Sure. WordPress is an open source CMS or blogging platform. It is very widely adopted. It’s actually more adopted than Drupal and it’s typically used for less complex websites. I purposely say less complex because some of the WordPress websites have a lot of traffic but they’re typically a lot less complex. They don’t usually have deep integrated social platforms and these kinds of things. So because WordPress is open source, they're sort of part of the family and WordPress’ success is great for Drupal and vice versa. I think Drupal’s success also validates WordPress and the open source model.

Certainly, we see a lot of people use WordPress but it’s typically more in the low end of the spectrum. In our situation, Acquia, where we’re focused on larger customers. We don’t usually run into WordPress too often. It’s not one of our main competitors. We don’t see them in the majority of our deals, but sometimes we do and we can either coexist with WordPress. Sometimes people run into the limitations of WordPress and they want to move to Drupal.

Obviously, a great software. I’m personally also great friends with Matt Mullenweg, which is a project lead at Drupal. We get together and share notes. I think one last thing I’ll say is that maybe five years ago, people would also sort of say, “What will I use, Drupal or WordPress?” But I think both of our projects, we’ve found our spots. I think Drupal is clearly dominating in the enterprise section of the market and WordPress is clearly dominating the low end of that market. I think I get a lot less questions about, “What do I use, Drupal or WordPress?” That’s a good evolution.

Moderator: The next question is, “We’re interested in implementing a create, watch, publish everywhere model. Can Drupal help us accomplish that?”

Dries Buytaert: Yes, it can actually. Drupal allows you to enter contents and then publish it in multiple channels. The default in Drupal 7 is HTML, but through the web services support, they can also go through other systems. Then there are also ready-to-go integrations; that’s Twitter integration, Facebook integration, integration with other social media tools which are also channels. So when you publish something in Drupal, that can automatically get pushed out to Facebook and Twitter, to drive people to your website. That works really well actually in Drupal 7 and will even be better in Drupal 8, because we’ve made substantial improvements to, as I mentioned, the web services support but also our content modeling tools. I think it’s actually one of the reasons people adopt Drupal compared to other solutions.

Moderator: I think we’re running out of time so anybody’s questions that don’t get answered, we’ll definitely follow up and get them answered for you. For the last question, we just want to ask, “Can you expand on your cloud offering? Is it just SAAS based or also infrastructure platform as a service? Are they hosted supported? Example, 24/7 uptime, etcetera.”

Dries Buytaert: Yes, so we have a product called Acquia Clouds. It’s all built on Amazon Web Services, AWS, and we have it in different flavors, so to speak. One flavor is our platform as a service offering. In that case, you can upload your sites, your Drupal codes to our servers and we provide you all sorts of tools around that, like GIF support and GIF repositories. We will automatically provision you one or more staging environments, depending on how many you need. A development environment, a staging environment and a production environment. There’s tools to make it very easy for you to push code from one to the other, but also files. It’s really built around optimizing the developer experience of the Drupal developer.

Many organizations have to set these things up, so if you use a traditional hosting provider you have to go and build all of these things, which can take months of work really, to build the developer tools. With Acquia Cloud, you get these out-of-the-box, and you’re ready to get going from day one but then once your site is in production, there’s also a lot of tools in there. We can dynamically scale your site when there’s a traffic peak so your best day isn’t your worst day, so to speak. All of that is through platform as a service, so developers can make changes to the site and extend Drupal every way possible that they can imagine.

Then we also have software as a service flavors. We have a product called Site Factory which effectively allows you to run your own software as a service platform, so it’s optimized for multisite case studies. Say you need to bang out campaign websites or if you are a pharmaceutical company, you have to manage recall websites or something of which many exist. Site Factory allows you to do that in sort of a software as a service model. I believe we have webinars in each of those things, so I encourage you to check those out if you need more details but it is state-of-the-art Drupal platform really for not just hosting it and running it on a daily basis, but also developing it and creating your Drupal sites.

Moderator: Thank you so much, Dries. For anyone that didn’t have their question answered, we’ll get it answered for you. I want to say a big thank you for all of you for attending and a big thank you for Dries. Slides and recording will be posted to our website in the next 24 hours and we’ll also email you out a copy. Thanks, everyone, for showing up today.

- End of Recording -

Click to see video transcript

Hannah Corey: Today’s webinar is Accomplishing Your Marketing Goals with Drupal 8. We’re really excited for this webinar, and we want to thank Appnovation for co-hosting it with us. The presenters today are Jonathan Whang who’s the Lead Developer at Appnovation and Kris Vanderwater who’s a Developer Evangelist here at Acquia. We’re really excited for both of them to take time out of their day today.

Jonathan Whang: Okay. Hi everybody. My name is Jonathan Whang, and I’m a Lead Developer with Appnovation Technologies. Appnovation is one of the world’s leading open source development shops with over 150 clients and having delivered nearly 400 projects since our inception. We have six offices in total and each location and the headquarters are in Vancouver BC, with our US operations run out of Atlanta and our EMEA operations run from London, UK. Through these offices, we have been able to serve companies around the world. Some of the technologies we use and solutions we provide include Drupal, Alfresco, SproutCore, HTML5, Mobile Apps, MuleSoft, Jaspersoft, MongoDB, Hadoop, and various e-commerce solutions. Some of our more notable clients include the NBC Universal, Intel, Pfizer, the NBA, Google, Fox News, American Express, Reebok, Samsung and also the US Department of Defense. We have a very strong partner relationship, and Appnovation is the only company in the world that is both an Enterprise Select Acquia partner, MuleSoft partner and a Platinum Alfresco partner. Just to give you guys an outline of what we will be discussing today, we will be talking about how Drupal 8 is different from Drupal 7, and how these will help achieve your marketing goals. So, the three main points we are going to discuss today are Web Services in Core, and What You See Is What You Get Editor in Core, and some New Functionality. With that I’m going to pass you over to Kris, and he’s going to talk about the Web Services in Core.

Kris Vanderwater: Thanks. Very quickly, I’ll just tell you a little bit about myself so you know who’s talking to you. I’m Kris Vanderwater. I am Acquia’s new Developer Evangelist. I was actually one of the initiative owners for Drupal 8 and have worked very heavily in blocks and lay ups and a number of other areas in Drupal 8. Just to help push things forward there, you can’t do much in Drupal Core without putting your hands dirty everywhere. I’ve done quite a bit of web services work during my time at various other companies that I’ve worked for and with that I’m just going to take you through some of the things that you’re likely to see from a web services perspective in Drupal 8.

First, I just wanted to talk for a minute about some of the problems that Drupal 8 is trying to address. During his Keynote at DrupalCon Portland, Dries presented a slide that indicated that 70% of respondents in a large survey told that providing an optimal experience across all screen sizes and devices was a source of major, major difficulty. Of those survey, only 11% of their organization had actually embraced a “mobile first” solution, and 33% of those wants the “responsive design” features in their CMS immediately. This is of course very relevant to marketing. A large number of devices and screen sizes means that catering to your site to everyone is harder than ever and your message could be lost simply because of the device only shows with you and your site. Now, a good responsive design solution that embrace the version include the differences in devices and allow you to communicate more clearly based upon the device that someone’s using. Drupal 8 is actually taking great strides toward this goal. It’s prioritized the need for the Drupal browsing in a number of different way, including a dedication to a mobile first browsing solution. Today we’ll be giving you a peek into how the solution that reference these issues beyond just its mobile first focus, and so that would be booked into web services. Web services is normally a dry topic, but I’m going to quickly give you upfront foundations about what we’re going to talk about here. Out of the Drupal 7, web services have been available to us for quite some time. This is especially helpful when we consider any interaction with a third-party system, such as another website or a native mobile application. Leveraging web services is really the go-to solution for this problem space. Scripturally in Drupal 7, there were a number of problems with this. Primarily the most major problem was the Drupal 7’s route handling wasn’t built with this in mind. This is a technical way to say that D8 modules have to spend an awful lot of time and effort hacking around what Drupal was trying to provide by people. So, they created a number of different solutions that would basically work but the best practice is that the world at large is following weren’t necessarily being followed in Drupal 7. To this end, most common solution in Drupal 7 was actually to leverage the services module, and now Services is really great module but it has a couple of drawbacks, and primarily in a [audio gap] developers needed to create any sort of custom, what we call entities or data storage mechanism. They would have to create an awful lot of additional codes just to do any communication with a third-party app or another website. This of course meant more work for your developers over a longer period of time and likely would result in ongoing troubleshooting as well. In an effort to remedy this, many attempts were made in Drupal 7 to do entity generic services. This ultimately emerged as a really powerful pattern, but it took a long time for Drupal 7’s cycle to probably establish this pattern.

Now moving forward to Drupal 8, it’s embraced this approach that was ultimately achieved in Drupal 7 since day one. Another two different types of speed and we’re only going to really talk about one of them here. It’s what we referred to generically as consent entities. Is there anything that you can add a field to? If you’ve ever actually worked with Drupal 8 and seen nodes you can add additional fields to, you have an idea of what it is that I’m talking about here. This could be things like nodes or users, comments. If you’ve ever worked with Drupal Commerce, maybe products, line items, orders, all those sorts of things that you really are the very powerful Core of Drupal. These entities come out of the box. can be activated per entity and for those of you who are not familiar with this approach, this is really just a general way for you to communicate externally about this data. Very, very powerful, again, for any sort of third-party application and useful for maybe the iPhone or an Android phone, something along those lines.

To this end, Drupal’s invested very heavily in various types of data serialization. Now, this is a really technical topic, and I’m not going to talk about it. Suffices to say that your developers will really appreciate the effort that got into this because it means that your data can be passed around and the format that will work per situation. What we like to call “CRUD” within the industry, which stands for Create, Read, Update or Delete is also a basic part of the entity services that have gone into Drupal 8. This will give your developers a really robust framework from which to begin working. That’s going to dramatically reduce the amount of troubleshooting that they’re probably going to need to do for custom entity types and allow them to really focus in on building an API that works for your specific use case. When we begin talking about building a third-party solution in a native application, focusing in on what the API should really look like is really where your developers should be spending their time, and it’s ultimately what’s trying to give your application the best foot forward and be able to communicate with your target market more quickly, more accurately and more relevant. So with that, we’re going to be talking a little bit about – I guess I actually covered this slide. [Laughter] In short, it’s just going to make your life a whole lot easier in terms of really getting your product out there and communicating with your audience. With that, I’m actually going to hand it back over to Jonathan.

Jonathan Whang: All right. Thanks, Kris. Now, what I’m going to talk about is the functionality which we refer to as “WYSIWYG” or What You See Is What You Get and how that is now packaged in Drupal 8 Core. Just in case we’re trying to stay away from being too technical on this webinar. The What You See Is What You Get is just the editor for large text areas that allow content administrators or site users who have access to create content. They have the ability to upload images and post hyperlinks and big snippets of text and do formatting with the text area to have it show up the way they would prefer it to show up when they’re looking at HTML. That’s why the term “What You See Is What You Get” was coined. What we are used to within the Drupal 7 world is after the latter stages of Drupal 7, there has been a consolidated WYSIWYG contributed module that was developed. The module itself served as the backbone for WYSIWYG implementation, and it could support all the other plugins that allow users to select from different flavors of the actual editor and some of these plugins are CKEditor, FCKeditor, jWYSIWYG, NicEdit, TinyMCE, YUI Editor and if this doesn’t really sound familiar to you, then it’s likely because some of these plugins aren’t very popular because they don’t work very well. Actually, CKEditor had gone on and produced their own standalone module that some sites would use where they don’t like the flexibility of the actual global WYSIWYG module. Some of the benefits of this is - it is highly configurable. So, each editor can have its own settings and you can choose what buttons would show up. If you refer to the slide and the area that is encased in the red border is the sample of what the tool bar would like customized. So, you could pick what kind of button shows up there. Think of it as like a Microsoft Word toolbar, which gives you things like bullet points and lists. Also, each text format that you would create – so text formats are customizable within Drupal. If you create that, then they can have their own editor. So, different fields would look different based on configurations of a site. This is what it is in Drupal 7 and if you guys have used Drupal 7 sites, then you would know how it works.

Some small issues with the current implementation: downloading the module, getting the editor plugin library setup with all the correct files and the latest versions and configuring all of the settings that each plugin needs takes time. Each plugin also has settings along with - the text format also has settings. A drawback to being super configurable is it also takes time to actually get up and running because once you put in the plugin and the module, it comes with bare-boned settings. It assumes that it starts off empty and you’ll have to configure it with the things that you want. Another problem we found is throughout usage of the WSYIWYG module for all the sites that we’ve been delivering is certain pieces of the WYSIWYG are inconsistent. Of course, it comes out looking like a paragraph with line breaks and bullet points and bold here and there when you’re configuring it within the text editor, but the moment you save the node and look at it on the node view page, it starts looking funny. Most of the time, it’s because the WYSIWYG was misconfigured but again, some of it also attributes to the incompatibility between the plugin and the actual core module.

Also, image upload has been inconsistent. At the beginning of Drupal 7 from what I remember was that not all of the plugins would support very clean image uploading. I believe now the CKEditor does it, but doesn’t really do it very well and you don’t have much control over where the image goes and if it’s right aligned, it doesn’t show up as right aligned after the node is saved. These are some of the issues that we would run into, especially if you are a builder of Drupal sites. With Drupal 8, now they decided that the page – because pretty much every site has a page node and we’d like to ship the WYSIWYG within the core distribution. So, they decided because I believe CKEditor was the one that was more flushed out and stable that they decided to put the CKEditor plugin directly into Core. So, it is pre-configured with four text formats, and the way that it’s set up is actually easier to understand than in Drupal 7. They have updated the interface for configuring the editor toolbar. It looks really slick and image upload support has been basically finalized, and it’s really stable even at this stage of Drupal 8. That is the WYSIWYG and Core. That’s the change that they made.

What does this mean for marketers really? The number one users for the WYSIWYG portion of a site end up being the end client, and so non-technical staff will find it easier to use with the current WYSIWYG implementation in Drupal 8. You’ll get less calls to the IT department saying, “How come this paragraph doesn’t look the way I want it to?” It does save time on site development and having site builders have to choose between different WYSIWYGs providers and they might not have experience with other plugins, but if the client sees that and they prefer that then the site developer might have a hard time with configuring the preference of the client. The unified WYSIWYG interface would mean that everyone basically is forced to use the standard. It does work right out of the box so there really isn’t much reason to switch to other plugins, which is still yet to be seen if other plugins will adopt a Drupal 8 support. If it’s consistent output for right when the site gets set up like you could set up Drupal 8 and right out of the box just have a plain page node and start like a simple blog site, then the WYSIWYG configuration works right out of the box without having to configure anything. We will have a demo at the tail end of this presentation to show you how the current WYSIWYG editor works.

Onto the new functionality that we chose to discuss for this webinar that we feel applies most to the marketing side of things. The new functionality for Drupal 8 is the in-line field editing. What this does is it gives users the ability to edit nodes directly on the view page. What that means is when you’re looking at an article and if you have permissions to make edits to content and also, you can configure this in the back end of Drupal. You can actually go in and without having to go to the edit form, you would be able to in-line edit the text and the field values right from the node view page. It has the access restriction configuration out of the box, so if you guys have dealt with configuring that huge permissions screen or form, there is already setting there to allow you to setup which roles have access to do the in-line editing. The interface is super clean and really slick and again, you’ll get to see this in the demo. It works for all content types. If you create a custom content type – so it’s not restricted to just the page node. If you create custom content types like a Wiki, or things like that, this in-line editing functionality will be available to your content type as long as it uses the field API.

So, why is that important? Well, it allows for easier access to modify content and it does reduce the clutter of the previous Drupal 7 administrative interface, so certain people will be less onto the form site or the administrative theming of Drupal. You will really just modify the content right when you’re looking at it. It also allows for ease of use on mobile, and so that ties in with like the mobile initiative of Drupal 8.

With that being said, I think we’ll move on to the demo portion where I can show you the WYSIWYG in action and the in-line editing in action. I’ll have to share my screen. In my screen, I have a Sandbox Drupal 8 installation on my machine, and this is an example of a page node that I’ve created and I just named it “First test page” and it’s full of lorem texts. So, I’m going to show you the WYSIWYG in action. If I go into edit this page node – I’m sorry. I should first take you to the configuration that it looks like out of the box. Under the administrative form, you’ll notice that this is already pre-configured for you the moment you turn on Drupal 8. Like you installed Drupal 8 and this is what it’ll look like. There’s nothing else to be done here. You don’t have to configure anything, and the roles are standard. It means basic HTML versus restricted HTML, so this is the more open text format versus where you’re allowed to restrict HTML and this one is every HTML possible and then there’s just plain text which has security issues but that’s a different discussion. All of this configuration is out of the box and you don’t have to do anything to it the moment you install Drupal which is great for site builders. So, this is what the WYSIWYG looks like without being configured to add any buttons in it, and you’ll notice it’s identical to the screenshot on the slide that I did show earlier. I’m going to take you through – I’ll increase this. So, what I have is an example, I’m going to add some text here. Right. It’s easy enough to say this is basically – the idea is it’s supposed to be easy for you to create content this way and you would copy and paste directly from Word into this. This indent here is an example of blocked quote and I’ve just made this bold, so I’m going to go down here and just go save. So the WYSIWYG, it looks exactly the way you’ve typed it in, which is how it should be working in the first place. This is an example of having the list items and a link to an external site. The configuration for the WYSIWYG, I’m going to take you through that for basic HTML. Now, you’ll notice the interface for this is much cleaner and if your clients – you’ve been given access to modify this directly by your site builders, then you’ll know that the previous way was this huge form with a whole bunch of check boxes that you would need to check. You’d have to know what they all meant in order to be able to configure the toolbar. Wherein in this case, you have the items right here and they tried to make it look like a Microsoft Word toolbar. So if you wanted to put things in like cut, then you would just drag this into, let’s say one of the groups. Let’s put that there and that’s what the interface looks like for configuring the toolbar. It’s a lot cleaner and it’s easier to use for non-technical users. I love it too even being a developer because it’s just really slick. So, that’s the WYSIWYG editor in Core and again, this is everything you get the moment you install Drupal 8. There is no need to re-configure this at all and it just works.

I’m going to take you back to my sample page node, and I’m going to demo the in-line editing. You’ll notice when you hover over the body text of the page, there’s going to be this little pencil, it looks like right at the top right-hand corner. Mind you, I am logged in as an administrator who has permissions to do this. That won’t always show up. Right now with the black toolbar, you can notice I am an administrator with privileges. This will show up, and I will just click Quick Edit. Now, you notice there’s this fancy little pop-up that shows up, which outlines which field I’m on. If I click into the field, then notice how the WYSIWYG also pops up. I’m going to, let’s say delete all of this text that I put in because that’s just cluttered, and I’m going to let’s say, make this a italicized, and I’m going to click save. So voila. No need to go into that administrative form, the WYSIWYG does show up in the in-line editor. You could still make use of that even from this site, and it’s a lot quicker to do text edits when you’re browsing through a site. Imagine the usability of this when you’re trying to comb through a whole bunch of forums or a listing of blog posts. You wouldn’t have to go in to each blog post edit form and make your changes if all you’re doing is just checking copy and checking spelling or fixing formatting. This also works for a custom field. Notice I have a different field down here, sample text field. If I click the Quick Edit, and I go in and notice how it says, “Sample text field” as my field now instead of the body. I’m going to say, “Hello again, everyone” and save. It does update that field. So it’s really slick. This allows users to basically have an easier time curating their content and no need for technical and again, all of this stuff works right out of the box. I believe I did miss the image, uploading an image. This is the image uploading for the WYSIWYG. Notice how a lot of this configuration comes out of the box. [Pause] You can add the alternative text in-line. Say, this is the demo. Specify your image height to 200 by 200 and say it’s left-aligned. That’s what it’ll look like and if you notice how it pushes all the text over - because it’s left-aligned. It pushed all the texts over and it’s left-aligned and the image is right there to where you decided to put it. So, it looks just like really when you upload, and it lets you do changes to it. I think that’s going to be it.

I guess in conclusion, this webinar was supposed to introduce people to the benefits of using Drupal 8 and how it applies to – some of the functionality of Drupal 8 would apply to having marketing initiatives. It will allow you to access a wider market because it makes things easier to curate for non-technical users. It does lower the cost to configure certain sites because a lot of the functionality that we find that are common to projects that clients come to us with are already being rolled into just the Core Drupal installation. Also, they have made an emphasis on cleaning up the administration side of Drupal because they wanted to make it as friendly as possible for people to be able to manage their site without having to always call their developer or their IT people, because right now, all the rage is mobile. We tried to ensure that Drupal 8 does accommodate for having mobile as the number one priority in terms of some of the clients’ requirements. I’m going to pass it back to Hannah.

Hannah Corey: Sure. If anybody has any questions could you please ask them now. I know a couple of comments. We can jump right into those. The first question is, can you talk about performance? I’ve heard the services module had some pain scaling.

Jonathan Whang: [Pause] Did I speak to that?

Hannah Corey: Kris, maybe you could take a stab at that one.

Kris Vanderwater: Yes, I was talking but I think I was muted.

Hannah Corey: Oh. [Laughter]

Kris Vanderwater: Yes. One of the things about Drupal 7 and I made some allusions to this earlier, Drupal 7’s notion of what a URL looks like. It’s very different than what Drupal 8’s notion of that and how it’s handled underneath the hood. There are definitely some potential performance implications there because in terms of what it is that you’re actually serving out, you have to do Bootstrap Drupal each time and well that then used to be true in Drupal 8 as well. A lot of effort has gone into streamlining that process where possible. Now, don’t get me wrong. Drupal 8’s not faster than Drupal 7 yet, and there’s going to be a lot of effort that’s going to go into it from a performance perspective. But, I think the more important takeaway here is just that Drupal 8’s notion of what a response should look like is just very, very different. Hopefully, we can begin to leverage some better caption strategies on top of it that we could have in Drupal 7. Just speak very specifically to the issue Services might have had. I’m not going to attempt to do that because I think probably very specific to whatever the used case was at the time. Obviously, if you use a system that’s getting hundreds of thousands of requests coming across it like you might have let’s say, a third-party app that gets very popular, that’s going to be a very different situation than if you have an external API that gets to - used via handful of other services out there. So, it’s hard to really nail down exactly what that might be without knowing specifically what it was that you had heard about. But, I think the takeaway should probably just be that a lot of thought and effort has gone into what this should look like for Drupal 8. Hopefully, a lot of these situations be either remedied or have a remedy close or end by virtue of the architecture.

Hannah Corey: Great. Thanks, Kris. The next question is, can you insert images from the in-line editor?

Jonathan Whang: Yes. Whatever was on the WYSIWYG – this is Jon. Sorry. Whatever was on the WYSIWYG on the full form, shows up within the in-line editor as well. So, you can use that. When I did try and play with it, it would do the insert, but I did find some funny behavior like if you tried to right-align it, it wouldn’t go all the way to the right or sometimes push certain things to the left. Again, that’s basically a by-product of it being still within latter stages with Alpha pre-beta. So, I’m sure they’ll work out the kinks for that. But yes, you can use the in-line editor to also upload images via the WYSIWYG within the in-line editor.

Hannah Corey: Awesome. Thank you. The next question is, when you use the view source on the editor, does it keep the indentation you set or does it recognize and validate the code in some other way?

Kris Vanderwater: If you’ve used the source for – depending on the text format that you have selected obviously, it’s going to validate based on that. So, if you’re using a restricted text format – let’s say the site has you configured as the blogger user role, and they only allow you to put in p tags and span tags. You can’t go in there because you only have access to that text format, even if you do view source and try to add in image tags when you don’t have access to that or dupe tags or script tags and you don’t have access to that, then the validator will take care of it. I think that’s also a security issue that they made sure they didn’t allow any holes with that. I think they also outline within the configuration section of the Drupal 8 text formats that giving access to unrestricted HTML to certain users is a security issue. It’s not a bypass by any means but if you do know how to write code, it’ll let you put in the tags that you’re initially allowed even without writing the tags manually. But, it’ll stick to the same formatting. I believe the alignment and the margins and the padding are all a by-product of the current theme you have using. So, if it formats Ps while using the – I can’t remember off the top of my head what this theme is. The Bartik theme. Sorry. If the Ps are formatted with the Bartik theme to have margin up and down then if you put Ps in there, it’s going to use the same CSS as the theme we’re using.

Hannah Corey: Great. The next question is, I like the built-in editor. Is there a function within Drupal that identifies the user customer, example by IP address in order to serve up customized content? I think Kris, you can talk to Acquia Lift about that.

Kris Vanderwater: Yes, so just to address that really directly for a second, as part of the initiative that I was an owner of the Blocks and Layout Initiative, we went to a lot of effort to begin doing that stuff. I just can tell you that as of today, those sorts of features are not in Drupal 8. Our objective was to make adding those things a bit here. However, Acquia does have a solution for some of this stuff in Drupal 7 called Acquia Lift. I believe we have an upcoming webinar on that. Don’t we, Hannah?

Hannah Corey: Yes, we do. I can send that in the chat section if you guys want to check it out. Thank you. [Pause] Awesome. Thanks, Kris. The last question [Laughter] that everyone is thinking, when is Drupal 8 launching? I know we don’t have a direct date, but maybe you guys could speak to timeframe for everyone out there that’s not that familiar with Drupal.

Kris Vanderwater: Well, the age old answer to that question is when it’s ready. That has been the status quo since I’ve been involved in Drupal, which has been about nine years now. I know that that’s not a very satisfying answer. Let’s just speak realistically for the moment. I think we are in the late stages of an alpha, and part of what we’re trying to do at any given time is to really reduce the number of outstanding issues, our tests are all always passing and that we have all the – we know that we need. This is in an effort to make the beta and the release phases of Drupal 8 as short as possible. However, there are still a handful of features that are being polished or being added to Drupal 8. I would be very surprised to see a beta in the near term future. I think that there’s probably some desire to push that out just a little bit further. If we do see a beta in the near term future, then the objective will be to really limit the scope of any new features that are being added to Drupal 8. To that end, I think there is going to be a lot of communication about what our minimum, viable product is for any given set of features that are in Drupal 8. I know the entities with them can somewhat be – some of the rest works that we discussed here today is still a little bit in flux, and there’s a real desire to make sure that those things go out as feature complete capable as possible. I wouldn’t get too fired up about being a Drupal 8 beta in the next month or two. I’m just thinking it is going to be a bit longer than that before we see a beta, but that’s just my own personal opinion, and I am completely guessing.

Hannah Corey: Great. All right. Thanks Kris. I know a lot of people are wondering that. I think that’s it for questions. Jonathan, would you like to end with anything else?

Jonathan Whang: No. I guess, thanks everyone for coming and…

Hannah Corey: Yes, thanks everyone for coming and we’ll send you the slides and the recording in the next 24 hours, and a big thank you to Kris and Jon for the wonderful presentation. Have a great afternoon, everyone.

Click to see video transcript

Moderator: Webinar, Easily Create Maps in Drupal with Leaflet, with guest presenter Amber Matz who’s an educator at Drupalize.Me. Amber, thank you so much for taking time out of your day to present to us.

Amber Matz: Alright. Hi, everybody. Thank you for joining us at the webinar today. I’m Amber Matz. Up until recently, I was Amber Himes and you can find me on Twitter attwitter.com/amberhimes. I work for Lullabot and I’m a trainer for Drupalize.Me. In this webinar, I’ll be taking you through how to easily create maps in Drupal with Leaflet. For you Drupalize.Me subscribers out there, I have just released a video series on this very topic and the first three videos in the series are now available. If you’re not already a subscriber, you can find out more about the mapping with Leaflet series and becoming a subscriber to Drupalize.Me by visiting a special page for attendees of this webinar at lb.cm/acquia-leaflet, which is a shortened URL that will re-direct you to a page on the Drupalize.Me website.

Before I dive into Leaflet, let me give you a brief overview of how mapping solutions can be implemented in Drupal. There are two things that you need to implement a mapping solution in Drupal. The first is a location storage module. This is the module that is in charge of collecting, storing and at the very least, providing a basic display of that data. So what that means is that by choosing a location storage module, you are choosing on the backend a particular data table structure; on the administrative side, you are choosing a way or a set of ways to enter in location data; and you’re also choosing, if the module provides it, a field formatter. It’s really nice if a field formatter is included so that you can configure how that data is displayed, at least on a default basic level. The second thing that you need is the mapping module itself. This is the module that is responsible for configuring and displaying the actual map and a map being a set of layers that can be configured to convey geographic information about a location. That can be a very simple implementation to a very complex, interactive implementation. The modules differ in which set of base layers are made available, the user interface controls, the markers and most importantly, which API or web service they’re using to render the actual map. Depending on your choice of a mapping module, you may get locked in to a terms of service that doesn’t scale to the needs of your application or has implications for a site migration. So that’s why it’s important to really decide and make a good decision about which location storage module and which mapping library you’re going to use. So how do you know what to choose? Well, fortunately, there’s a documentation page on drupal.org that provides a comparison of mapping modules in Drupal and that page is drupal.org/node/170948. I’m going to go ahead and open that up.

If I scroll down to this table down here, just keep in mind that this page is marked as “Needs Updating” so take the information with a grain of salt. In the first two rows here, we’ve got the mapping module and then we have the supportive location storage module. Here’s Leaflet over here and as you can see, Leaflet requires Geofield as the location storage module. As you can also see, Geofield is a pretty popular choice for a location storage module. So, if you are just getting started with mapping in Drupal, Leaflet is a great place to start because you can use Geofield as your location storage module and it’s supported by open layers, IP Geolocation views and maps, and those to other modules will even support Leaflet maps. So, this is a great jumping off point if you’ve been reluctant to get into mapping or you’ve been intimidated by just the sheer volume of options and configuration that are provided in the other modules. Leaflet is a great place to start with the mapping module because it uses Geofield and you can always swap out this mapping module later. Alright.

So, Geofield. What is Geofield? Geofield is a location storage module. It provides a new field type that we can add to a content type called Geofield and it also provides widgets for entering many types of geospatial data. It also has some field formatters so it can provide a basic display of a variety of geographic formats.

Leaflet is a couple of different things. So when I say Leaflet, I’m meaning the lightweight mobile-friendly java script mapping library at leafletjs.com. It’s also a Drupal contrib module that provides immigration with the java script library as well as a field formatter and the developer API and even a sub-module that provides the views integration. That’s what I mean by Leaflet. So the first thing that we need to do to get a Leaflet module - or to get a Leaflet map on our Drupal site is to install Geofield module. So to install Geofield, we would do this in the normal way of installing a module. We would need to download Geofield and its dependencies which are GeoPHP and CTools from drupal.org. You will need to enable these three modules and I prefer using Drush to enable modules. It comes particularly handy because in the documentation for Geofield, it only lets GeoPHP as a dependency and if you use Drush, you’ll find that CTools is also a dependency. So it’s just a nice way to find those hidden dependencies that may not be documented. So to use Drush to enable Geofield, I would type “drush en geofield”. This would prompt me to download Geofield and its dependencies if it wasn’t already on my site and then it would enable them in turn. So a little tip, if you are not quite familiar with Drush, you can also download and enable these modules through FTP and using the administrative UI.

Alright, so I already have Geofield installed on my site and now I’m ready to add a Geofield. So, I’m going to hop over to my example site and I’ll navigate to structure, content type. I’m going to add a new contact type and I’ll just call it “Location Demo” and save. I’ll go into manage field now and now if you’ll notice in this field type column, if I drop down this list, before I enabled Geofield, I wouldn’t have had those options but now that I’ve enabled Geofield and its dependencies, I have a new field type called Geofield. So I’m going to select that and give my location field a name. I’ll just choose a widget here, there are four different choices and these widgets can change if there are other modules that can extend this. I’ll just latitude and longitude and save. Since I already have the demo, I’ll just add a new field type there. There we go.

Okay, so the first field setting is the storage backend and there’s only one choice, so you can see that this is scalable. If you want to add a different storage backend, you can. I’m just going to save this field setting. For this field, I could make it required, I could add some help tags which is always a good idea. You can also check this box to use the HTML5 Geolocation feature to set default values and that’s that saying where you’re browsing the internet and a website asks for your location, it’s asking permission, “Do you want to share a location with this website?”, that’s what that feature is all about. So, you can turn that on and you can nag your users for their location. So that’s what that option is about. You can also provide a default latitude and longitude. Number of values, kind of the usual field setting. So go ahead and save these settings keeping all the defaults and now we’re ready to add a new piece of content using our location demo content type. Go ahead and add content and I’m going to use my location demo content type. Let’s just use the Austin Convention Center which is the home of this year’s North American DrupalCon. As you can see, it just says I’ve updated my content type and added a Geofield content type and I’m using this widget, latitude and longitude. I now have the set of fields, actually, that is asking for the latitude and longitude. I don’t need to worry about the display of the latitude and longitude at this point. I just need to enter in the numbers here and the field formatter, which we’ll get to in a moment, will take care of how that data is actually displayed.

So I’m going to pop over to maps.google.com and I’ve searched for the Austin Convention Center. Even though it’s not giving me the latitude and longitude and those coordinates just yet, I’ve found that if I just click kind of near the marker, I’m still on the location but I’m not on the marker and Google will give me the latitude and longitude. So that’s a little trick I’ve learned. I’m going to copy this information. The first number is going to be the latitude and the second number is going to the longitude. I’ll copy the first number here, including all the decimal points and I’ll paste that into the latitude. Then I’ll go back and I’m going to copy the second number including the negative sign, all the decimal points and I’ll paste that into the longitude and I’ll save that. Now, what I get is the location and it’s formatted in this way: all caps, points with a parenthesis and even has the longitude first and the latitude.

How do I configure this information here, that’s in our manage display. So if I go back to structure, and content type and I manage to lift the display here of my field, I can see all of the different formats that I could display this data. So I’ve got a location point that I entered using a latitude and longitude widget but I can display it in any number of ways. I will try the latitude and longitude and then this little gear up here and I can further refine the settings of the latitude and longitude. If you don’t understand all of these terms, just use the defaults. These mapping solutions, they really scale - You can do a basic implementation to a really advanced one. So there’s lots of options and a lot of these, I’m not familiar with all of the technical geographic terms, but just by using the defaults, you can get pretty far and just get a map on your page.

The format, I’m going to change this to the degrees, minutes, seconds, just for fun. I’ll click update and then save. Now, if I go to my content page, using my location demo, that latitude and longitude that I entered is now displayed in degrees, minutes, and seconds. Geofield just out of the box will provide a way for you to enter in your geographic data and some options for displaying it. Now, how do we turn this into a map? Let’s go. We just added our new location so we’ll need to now install Leaflet.

The instructions for installing Leaflet, you can find on the project page for drupal.org, so I’m going to go there now. I’ll just use the documentation page. Just to give you an idea of how to navigate around the documentation for Leaflet, if you’d go to the project page for Leaflet on drupal.org/project/Leaflet, you can find some basic information about the module. You can also find the recommended releases. You’ll notice that they’ve started developing a version for Drupal 8. This is also a great choice if you’re looking to scale up to Drupal 8. Build it out in Drupal 7 and then play around with the Drupal 8 version. There’s just a really good possibility that you’ll be able to more easily migrate to Drupal 8 when you want to, when you’re ready to, and when Drupal 8 is ready.

On this Leaflet project page, what we find is that there’s a link to this documentation because this is pretty slim information, there’s not a lot here. There is the issue queue here but if I go over to this documentation page, this is going to provide the meat of the information about this module. So, it provides integration with Leaflet and it lists out the supported number of extension modules that will extend the capabilities of Leaflet, also, some information about the required and recommended modules. So we’re going to need Libraries and CTools and when we get to the Leaflet views sub-module which is included in the Leaflet project, we’ll also need entity. Geofield is the preferred module for storing geographic data like we’ve already mentioned and there’s also some great integration possible with Address Field and Geocoder which I go into in my video series. Also, there’s Views and Token Support. Just out of the box, this is what you need, these are some of the required and recommended modules.

The first thing that we’ll need if you’re familiar with Libraries at all, this is a way for you to integrate with a Java Script Library or other type of Library. We would need to download that from the Leaflet.js.com page. So you could click on the download navigation menu item and you’ll want to download the latest stable version which, right now, is Leaflet 0.7.2. You want to download that to your sites/all/libraries folder. I’ve already downloaded this to sites/all/libraries and when you download the zip file and expand it, you’ll want to rename the folder to just “Leaflet”. So it’ll have the version name and the numbers and everything. You want to rename that to Leaflet so that this Leaflet.js file, attached to it is sites/all/libraries/Leaflet. You’ll need these other files as well, but that’s kind of your gauge, like “Did I do this right? Leave it on the right place?” Well, it’s the path to Leaflet.js/sites/all/libraries/Leaflet. I’ve got that already installed.

The next thing that I need to do is I need to download and enable the Leaflet Drupal module and its dependencies. The Drupal module will integrate with - it’ll bring in the java script library, it also provides the field formatter and the API, et cetera, and the Leaflet view sub-module. So I’ve downloaded and enabled Leaflet on my Drupal site, I’ve installed the Leaflet.js to sites/all/libraries, and now I’m ready to make my first Leaflet map. What we’re going to do is, Leaflet module provides a field formatter so what that means is I can go into manage display’ on my content type and choose Leaflet from the formatting type on my content type. So I’m going to update the format to Leaflet and I’m going to choose a map. Let me go ahead and show you how that’s done. I’ll go ahead and go back to my site and I’ll navigate to structure, content type, and I’ll manage display for my location demo. Now, here’s my field that I’ve added using that Geofield type. Right now, the format is latitude and longitude. Since I’ve enabled Leaflet, now I can choose Leaflet as the format of my data. So even though I’ve entered in a latitude and longitude, I want to display it as Leaflet. You’ll notice that right here, it says, “Leaflet map:” and it’s blank. We need to click on this gear and we need to select a map. Out of the box, one map is provided, OpenStreetMap Mapnik, so I need to select that. This is the one thing you need to do when you first start. To select the map, there are a number of other options that you can configure, but right now, let’s just see how this looks just by selecting a map. I’ll click update and then save. I’m going to go back to my content that I created. Now, instead of that, degrees, minutes, seconds, latitude and longitude, it’s displaying a marker on a map. A map that functions using the control and you can see that down in the corner here, it tells me this is using Leaflet and it tells me which map I’m using which will come into play in a little bit when we install more maps.

I’m going to talk here. What if your Leaflet map didn’t display? This can happen and there’s a couple of tips that I want to give you for trouble shooting if your Leaflet map didn’t show up, if there is like a gray box, or something just didn’t happen correctly. There are a few things you could do; First, you can check the status report page to make sure Leaflet is installed correctly. How you do that is go to reports, and status report, and here is Leaflet right here. It says the version of Leaflet and that it’s installed correctly. If it was not installed correctly, this would be red. There would be a big red X icon right here and it would give you the error message. When I was first playing around with Leaflet, my map didn’t display properly and I had a big red X here. I looked in issue queue for my error message and there was an error message, it’s the same error message in the issue queue but it had been resolved. The patch had been provided and I was using the fixed version and so I couldn’t figure out what was going on. It ended up being that when I expanded my zip file, my leafletjs.zip that I downloaded from here, when I downloaded this and expanded it using Mavericks, using my Mac, it didn’t set the permissions correctly and my webserver couldn’t actually read these files. So I needed to change the permissions of that directory to 755 and then the webserver on my local machine was happy and it could actually read and execute the files on this file. So there, it can be a permissions problem, it can be a bug. So I would say check the permissions of your site as well as libraries, Leaflet folder, especially if you’re using your operating system’s UI to expand the files, and check the Leaflet issue queue if you’ve got an error that’s just persisting. You could always ask in there.

The other thing that I noticed is that if you’re not connected to the internet, like maybe you’re working on the plane or something - I don’t know, and the tiles aren’t displaying. If you inspect the element, the map tile, you’ll notice that the OpenStreetMap tiles are externally hosted so it’s calling an external site to actually display those images. They’re not locally hosted on your machine. I mean that would be massive to host all of those tiles with the whole entire world in various zoom levels on your site. That would be crazy and not something that I want to do on my laptop. So you’d need to make sure that you’re connected to the internet. So those are some troubleshooting tips if you’re Leaflet map didn’t display. Using the field formatter in manage display isn’t the only way to display a map. Also, that map is only going to display the one point of the location we entered for that particular node. So what if you want a map of multiple locations? Well, we can use views. So just like you used views to create a list of your content, you can use views to create maps using Leaflet. The first thing that we’ll need to do is enable the Leaflet views module and this is a sub-module that comes with the Leaflet project. You would just need to enable this sub-module, leaflet_views, or you can go into the module UI and enable it. You’ll need the views UI enabled as well. If you don’t have views already downloaded, you’ll need to do that and enable the views UI. You also need to download the dependencies if you haven’t already which are Views and Entity. Once you have all of that downloaded and enabled, we can create a new view. Let’s go ahead and do that. I’ll go over here to structure, views, and I’m going to add a new view. I’ll make this a map of all locations. I’m going to show content of type and I’m going to use actually my location content type that I’ve created previously because I’ve added some demo-content to it already. I’m going to use that, but you’ll want to use the content type that has your Geofield on it. I’m going to create a page of a map of all locations and kind of simplify the path here to just say “Map”. Here’s the key area, the display format. Instead of an unformatted list, I can choose Leaflet map because I have the Leaflet views module displayed. I’ll go ahead and create a menu link to make this a little easier to navigate to. I’ll add that to the main menu and I’ll just change this Link text to be “Map”. I need to continue and edit, we’re not quite done yet. So now we have an unsaved view, we’re given the Leaflet Map settings. Just so you know, the preview isn’t going to work for you. How do you know what to do next? Well, if I click on the Settings link next to Leaflet Map, this will give me a clue. It says, “Please add at least one geofield to the view.” So now I know what to do. I can go to Fields and if I open up my content type, I would like to keep my content type manage field tab open when I’m building a view so that I’d know for sure what fields I need to add. I need to add the field that is using the Geofield field type and that’s my field_location. I’ll go back here and now I can add my field and I’ll just do a search for a location. I want to use the one that’s in my node location content type and now I’ve got two here and I’ll apply all displays. All I need to do to this field is exclude it from the display. I don’t need to mess with anything else. I’m just going to check “Exclude From Display” and “Apply (all displays)”. Now, I have the location at field which is my Geofield added to my view. Now, when I click on Settings, I’ve got some options. Hurrah. So the data source is my Geofield and now I can choose for the little pop-up window that’s going to show up when I click on my marker, I can choose a title field. So I’ll go ahead and just use my node Title Field and for the description content, there are a few options. I can choose the title or the location, but a better option is to use this node entity, so the angle bracket node entity. Then you can choose a view mode so you can then use your teaser or if you’ve got another custom view mode that you want to use, that you’ve – this isn’t quite configured for this display, then you could use that. I’m going to use the teaser there. What this is going to do is it’s going to display the teaser in the description area of the pop up window and I’ll show you that in a moment. We’ve got the rest of our settings that we had on our field formatter when we managed the display of this field in the content type section so the same settings are applying here. I can choose my map. The nice thing about this one is that the map is already selected by default. Now I’ll click “Apply (all displays)”. Now, I’ve got my Leaflet map, I have no idea if it works yet. As soon as we’ve added it as a path, we’ve added a path to map. I’m going to save that and I’m going to go home, and I’ve got a nice menu item here. Now, I can see my map of all locations. So this is displaying the three nodes that I’ve created using that content type and I’ve got a map of multiple locations. So you can see that Leaflet out of the box with the Leaflet Views Module, you can display a map using one location, using the field formatter. If that’s all you need, then it’s super easy to do. You can see that it’s also really straightforward to create a map with views of multiple locations.

You could also add exposed filters to your views and add some different interactivity. So if you had taxonomy fields on your content type and you wanted to enable your users to filter by those, just use that knowledge that you have about views and what kind of functionality and UI that you want to provide to your users and think about what you want to provide for your map and you can add that to your view and have that interactivity. So it will filter the markers just like it would filter a list. So just think in terms of instead of like a list of teasers, you’re getting a group of map markers. It’s really cool to be able to create a map of multiple locations using views because many of us are really familiar with views, we’re comfortable with it, we know how to make lists of content, we know how to add relationships and exposed filters and that sort of thing. So, to be able to create a map using views, we’re familiar with that UI so it makes it a little more straightforward, especially if you actually are familiar with views.

So what other things can you do to your Leaflet Map? One of the things you can do, is you can replace that little blue marker with an image of your choice. If you browse around the internet, you’ll find there are quite a number of free libraries of marker images if you’re no good with drawing on the computer - and I’m no good at drawing on the computer. There are plenty of options out there for marker images. You’d just want to make sure it’s appropriately sized. Then we’ll update the point icon in the Leaflet Map settings. What I’ve decided to do is I want to change the map marker from the blue marker to the druplicon icon. So I’ve saved in my sites/default/files and I created a new folder called “map_icon” and I’ve save this little druplicon_marker.png. I downloaded that from Drupal.Org and you can see it’s just this tiny little druplicon marker here. What I need to do is go back to my site. First, I will change it on one of these nodes here that I’ve created, so I’ll use the field formatter. I’m going to go into structure, content types and I will view - I can’t remember which content I’ve created. [Laughter] I’ll just manage the display of this one, how about this? I need to go into Manage Display and for my Location Field, I need to click the gears here and now we can find the settings, so I’m going to expand the Point Icon. I’ve got a couple of different options here and I’m going to demonstrate the Icon File Option. So all I need to do is provide a URL to the path to my image. I’m going to go into Terminal here and I think it’s in this directory. I’m just going to copy. I’ve got it saved in sites/default/files/map_icons. I’m going to include this initial flash. I noticed that if I don’t do that, it doesn’t work so good. So I’m making an absolute path and I’m going to copy my file name because I keep misspelling druplicon and I don’t want to do that. So now I’ve got an initial flash and I’ve got the path to my PNG file that I’ve re-sized down from the druplicon logo that’s provided on Drupal.org. I’ve got it sized down and there are other options I can do, but I’m just going to keep the default and click “Update” and “Save”. I’m going to load up a location node and now instead of that blue marker, I’ve got the druplicon as my marker. Now, if I want to do this on my view, it’s basically the same process. I’m going to go ahead and copy that path and file name so I have it in my clipboard. I’m going to copy this, I’m going to go back home and click on the map. If I hover over my map here which is actually a view, I’ll get my gear. If I’m logged in, then I can edit my view from there. Under Format and Leaflet Map, I’m going to click “Setting” and then a very familiar looking settings, I’ll just expand the point icon and I’m going to make sure that Icon File is selected as my icon source. Then I’ll paste in that path into the icon URL which is the path to my marker image and I’ll Apply (all displays). Now, if I save this view, instead of the blue markers, I’ve got the druplicon as my marker. So that’s how you can add a custom marker and you can change the icon of your marker using Leaflet in a very basic way. There are other options there, but that’s the most straightforward and basic way to change that marker image.

Moderator: What else can you do? [Pause]

Amber Matz: You can add more maps. So there is a great module out there called Leaflet More Maps and that’s at drupal.org/project/leaflet_more_maps. It is the greatest module name ever because it does exactly what it says it does. It provides more maps for Leaflet and it provides over 20 different maps from a variety of providers. OpenStreetMap, Esri, even Google Maps are in here. So, Bing, MapBox, Stamen, MapQuest, and a bunch of different ones. So you can see the licensing terms which, this is the main reason for changing out the map. It’s if these terms of service and licensing don’t fit with what needs to happen on your website, then it good you have a choice here and you can find a map with a licensing term that works for your organization, it doesn’t conflict with what you need to do. I need to enable Leaflet More Maps. So I’ll type “drush en leaflet_more_maps” and now Leaflet More Maps is enabled on my site. So I’m going to go back to my structure here and my content type and I’m going to go back into the Manage Display and back into the gear settings to find my Leaflet settings. Now, when I drop down this Leaflet Map Setting, I get a list of a bunch of new maps. What you’ll notice is that you’ve got the name of the map and then right next to it, it shows the zoom setting. So these maps are a series of tiles that render at different zoom levels. Not all maps will provide all the zoom levels so like Esri Ocean, its zoom level is zero to ten. Most of them are going to be zero to eighteen but you can see that there are some slight differences so you want to just keep that in mind. So if I choose the Stamen Water Color Maps and click Update and save, and if I go to a location node, now, instead of the OpenStreetMap, I have this very interesting and lovely water color map displaying. You can see here’s the tile Copyright Information. Not only can you tell visually but you can tell in the Copyright Information and you can go to the terms of service there. So that’s how you would change on your field formatter and it’s the same process on your view. So we go into the view, we edit the setting, and now we can choose a map. So I could choose just like a Google Road Map and apply all the settings. Now, I’ve got a Google Map, a Google Road Map instead of my OpenStreetMap on my view. So you can have a different set of settings for your view and your nodes. So those are two sets of settings, if you change one, it’s not going to change the other. So if you’ve got both things going on, you need to change it in both places. Excuse me. That’s how you would add more maps.

Another thing that you can do and that I’ve kind of alluded to already is that you can change the zoom settings. Zoom settings are - alright, what happens here when you hit the plus and minus sign? You can set the initial zoom level. So maybe your website is targeting people who are not familiar with where Austin is so you want to give them a little bit more of a context. So maybe you want your initial zoom level to be something like this. “Yes, I recognize the United States. I can see that Austin is in the state of Texas, in the southeast area of Texas.” So maybe you want to set your zoom level to be a little more zoomed out to give people a little bit more context. If your audience was just a bunch of locals and people who are like in downtown Austin and they already know where they are at, maybe you want your initial zoom level to be really close and a detailed view where you can see, “Okay, it’s on this side of the river. It’s near the downtown area and it’s west of the 35 and so forth.” So you want to consider your audience and what you’re trying to communicate with your map when you set your zoom level. You also want to consider which map you’re using and what zoom levels are available on your map. So for example, if I go back to my view here and go into settings, I can see that the Google Map has all the zoom levels from 0 to 18, but if I chose something else like – I don’t know. How about this? No, I’ll just choose this MapBox Warden one. It has a zoom level to 18 so then I can go into my zoom level. You’ll want to adjust the zoom level to map what’s available for this map and you can use the map defined settings if you just don’t want to mess with the numbers of it and it’ll just use the default that is included with that map but if you want to customize it, the lower number means it’s far away and the higher the number, the more zoomed in it is. So if I wanted to do a real zoomed in map, I could choose like 12 as my initial zoom level for when that page first loads. Then I like to just set the map-defined settings here but you could constrain this if you wanted. Let’s just make it 16. So now, we’re within our zoom levels here. That’s the one thing you want to keep in mind so that you’re not shooting yourself in the foot there, make sure you’re within the parameters that are provided for your map. Then you need to Apply (all displays) and save your view. Now, we’ve got our initial zoom level and it only lets you zoom in and zoom out to the levels you defined in your setting. That’s how you can very simply change some settings and customize your map, just using the out of the box settings for Leaflet. The other thing that you can do is you can use tokens in your pop up text. So this is especially useful if you’re not using views.

Let’s go load up one of these nodes here that’s using our location content type. So right now, when I click on this marker, nothing happens, there are no pop-ups enabled like there was in Views. You could see that with Views, you could really control that a lot better but you can do some basic formatting here on that pop-up text and how you do that is you go to Structure, Content Types, back into Manage Display and I’m going to go back into my settings here and there are two things you need to do. First, you need to enable a Token Module so that you actually have some Tokens here, and the second thing you need to do is you need to enable the pop-up. So it wasn’t even enabled at first. You can enter in some static text or you can enter in a token. So I’ll go ahead and expand this node field set and I’m going to look for the title of my node. So here it there, I’m going to copy this token including the square bracket so the whole thing here. I can either copy and paste it or if my cursor is in this pop-up text, I can just click it and it will populate the pop-up text. So now I’ve got my token for my title of my piece of content in the pop-up text. I’ll click update and save. Now, if I go to one of these nodes and click on my marker, I’ve got a pop-up text that has the title of the node. You can see that this marker pointer is kind of off [Laughter] so the thing that you can do is you can adjust the XY location of that marker by going into your settings again and this point icon, you can say where the pop up anchor is so you could change, you could mess around with the XY location to try and get that pop-up anchor a little closer to the actual marker so it’s not covering it up. So that’s how you would do that. That’s where you would need to adjust this pop-up anchor point.

Alright, so that is my big “tada”. That is a basic overview of what you can do just out of the box of Leaflet to get a Leaflet Map on your Drupal Site. You can use Leaflet to display a map of one location using just the field formatter in the Manage Display setting or you can enable the Leaflet Views Module and create a map of many locations. If you want to find out more about what you can do with Leaflet and mapping on your Drupal Site, check out my video series available on Drupalize.Me and it’s an extended and a little bit more in-depth version of this presentation. The first three videos are now available. You can also go to lb.cn/aquia-leaflets. This is a special page just for attendees of this webinar. You can find the slides linked to some of the resources that I mentioned in this webinar and some other information that you may find useful and interesting. I think I will send it back to Hannah and see if there are any questions.

Moderator: Yes, great. We had a couple of questions come in. The first one is, “Is there a complete programming for integrating a picture album or a picture GPS information? Can you implement on top of Google Earth KMZ files?”

Amber Matz: Some of these questions, I’m not too sure about.

Moderator: Okay.

Amber Matz: Yes. The Google Earth, I’m not sure about that if that’s included in the Leaflet More Maps. Let me just top this down. The Google versions are the High Res road and terrain, the High Grid, the Road map, and the satellite. I’m just looking at this. It doesn’t look like Google Earth is selected. The question about the KMZ files, if I edit, if I look at the format here, it doesn’t – Look, I have seen support for it, and I just can’t remember off the top of my head what is supported with that. I have seen this around but I don’t know right now off the top of my head.

Moderator: No worries. We can all get questions answered after the fact and I can send you over the ones that weren’t answered. We can get somebody to answer them.

Amber Matz: Totally, yes.

Moderator: The next question is: Can you populate the map with dynamic icons? Could I have a classroom icon that could be programmatically placed on top of the map for the user?

Amber Matz: In terms of dynamic icons, there are a few different things that you can do. One of them is that if you’d go into the display settings here, if you look at the point icon, there’s also this icon source of field and you can actually set a class and you can have your markers be pure CSS and you can control the display of those markers using style sheets. The other module that I wanted to mention is the IP Geolocation Views and Maps and that module lets you, in the view UI, it lets you choose a differentiating marker so you if you have taxonomy field on your content type, you can say, “I want this turn to be a purple marker and this turn to be a yellow marker.” It provides some default markers but you can swap those markers out for whatever you want. So there are some UI options available, there are some CSS options available and I would recommend looking into the IP Geolocation Views and Maps just to poke around, just to have a UI to play around with, but Google is going to be your friend there as far as other dynamic options for markers.

Moderator: Awesome. The next question is, “Are the maps responsive?”

Amber Matz: The mapping interface is usable on a phone so you can tap on it and it will do things for you. Whether or not it’s responsive or not, you would need to implement that in your style sheet.

Moderator: Awesome, thank you. What about driving directions? Does the user get driving directions to a location through their typical method on a phone browser with a click through?

Amber Matz: The typical method is using the Google Maps API and that I did not look into with Leaflet. This is probably something that would require a little bit more advanced knowledge of Leaflet which – and I didn’t look into driving directions specifically. So there are several APIs that will let you use their data to do driving directions and I’m sure like Bing and Google are two of those. So yes. I’m not sure about that with Leaflet. I’ll look into that, though.

Moderator: Awesome. Are these maps local or stored on the web server?

Amber Matz: No, they are not. They’re all externally hosted and if you have a need to host these
yourself and for big mapping applications, there is that need sometimes. There are other services out there that provide hosting for map tiles like MapBox, I believe. The reason for that is that you’re talking about millions of images because it’s these tiled images that are there for each zoom level and sometimes there are 18 or 19 zoom levels. So, it’s really a big deal to host those images and not something you would want to take lightly or necessarily put on your local machine. I don’t even know if it would be feasible. So these Leaflet map tiles and the ones provided in Leaflet More Maps are all externally hosted.

Moderator: Alright, the next question is, “Do we pay anything for using the Leaflet API?”

Amber Matz: No, it’s all free. Also, you don’t have to do any kind of special sign up with the Google API to use the Google Map. So in other modules like Location Module, you have to enter in your Google API key, you don’t need to do that with Leaflet. If you want, you can use Leaflet and you could display Google Map and you don’t have to enter in your API key anymore.

Moderator: Awesome. The next question is, “Can you use multiple markers for different locations. For example, have one market for use in Alabama and another one for Texas?”

Amber Matz: I suppose you could. You would probably need to use a taxonomy for that or some other differentiator. Again, I would suggest looking into IP Geolocation or IP Geolocation Views and Maps to see. You could probably set the differentiator by your state. So let’s say you’ve got a field that is State and you could possibly set it up that way, you could set it up on individual nodes. It doesn’t really make sense to set a marker for each node. If you get any number of nodes, that would just be crazy to manage. Again, I would refer you to that IP Geolocation Views and Maps Module.

Moderator: Okay, the next question is, “How do you set up a field to show a ‘You Are Here Marker’?”

Amber Matz: You would need to enable the HTML5 Geolocation. So when we set up the initial fields here, if I manage my Geofield, I’m going to edit this. If I check this box, this is where I imagine this could take place. So the HTML5 Geolocation, it gives the browser access to your location, it’s the user-granted permission. That’s how you could say this is where you are, because you would set the default value to that location. I haven’t played around with this too much so this is my best guess, but that’s where you could get that information from the user.

Moderator: Alright, the next question is, “When several users are uploading nodes linked to maps, is it possible to show on a single map nation or state-wide range all user markers uploaded?”

Amber Matz: Yes, you would just need to use Views for that. Though I’m not sure about your specific implementation, but Views would be your friend on that.

Moderator: Okay, awesome. Can you tell how it’s possible, you can display a route on a map, walking, running, biking route? The route existing out of multiple Geolocation points?

Amber Matz: Again that’s something that’s something that’s something that’s been developed by some of these other APIs like Google Maps and my knowledge of mapping isn’t advanced enough to really be able to answer that question so I don’t know.

Moderator: Okay. Alright. The last question is, “How do you define the X and Y to get the right on place?”

Amber Matz: That’s a great question. What you need to do is open your file in Photoshop or some program that will show you where the X and Y point is of your cursor when you hover over the image. I open it in Photoshop and I open the info panel, and the navigator panel, and when I hover over the graphic, it shows me the X and Y coordinates. So then you could say, “Okay, the X coordinate is 14 and the Y coordinate is 17,” and then that’s what I would enter into my X and Y version. That kind of gives you a jumping off point, otherwise, you’re just guessing. So that would be my suggestion for that.

Moderator: Great. We had one last question just trickle in. Why would you choose Leaflet over Google Maps integration or the GMap Module?

Amber Matz: The GMap, let’s go back to this comparison chart here. The reason why I would choose GMap and the Location Module is if I had a Drupal 6 site that was using GMap and Location and I wanted to migrate to Drupal 7. It’s going to be hard enough to write that migration of all those location tables and I want to retain some sanity and feasibility and not blow my budget, so I’m going to just stick with GMap and Location. However, that’s almost entirely true because you could use IP Geolocation Views and Maps because it does support location at the storage module. Now, using Leaflet in Geofield, with Leaflet, you can display a Google Map using Leaflet. It’s a lighter weight module, the file is going to be smaller, it’s going to load quicker, it’s using Geofield at the location storage module which is very well-supported with these other modules and so it gives you upgrade path. It doesn’t lock you in like G Map and Location would lock you in. Even though you’re not completely locked in because of this module but that would be my reason why. I think each case is going to be different, right? I like the flexibility and the support that Geofield has and even though you’re using – in this demonstration, I used the Leaflet Module. You can display Leaflet, you can use the Leaflet Java Script library and some of these other modules like Open Layers or IP Geolocation Views and Maps. So you can use the Leaflet Java Script Library and these other modules. You can use Geofield in these other modules. If you’re just getting started with mapping, I’d recommend trying out Leaflet in Geofield because it’s a really easy ramp to get into mapping with Drupal.

Moderator: Alright, thank you so much Amber for answering all those questions. We’re running
out of time so I can send over questions that weren’t answered to Amber and we
can try to get some of them answered for you. Again, the slides and recording will
be posted to our website in the next 24 hours and we’ll also e-mail you out a copy.
Amber, would you like to end with anything else?

Amber Matz: No. Thank you all very much and I hope you enjoyed the presentation.

Moderator: Yes, thank you. Have a great afternoon, everyone.

- End of Recording -