Webinar

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.

Pages