Click to see video transcript

Heather James: This is the Drupal 7 Search Configuration Preview Webinar. This is a preview of our search online course. I’m also going to walk you through some demos and some exercises so you’ll learn about what the course is like and you can actually learn a little bit about search in Drupal 7.

My name is Heather James and you can find me @LearningDrupal on Twitter. I’m the manager of Learning Services.

This webinar is for people who obviously want to know more about Apache Solr Search Integration in Drupal 7 and if you’re curious about Acquia’s Search Service and how it works and how you can get the most of out of it, and of course if you’re curious about Acquia’s training program.

Learning online is a new service that we’re offering and this gives us some self-paced options that we can offer to our various clients. It’s a little bit different from our classroom training. I still really love classroom training. We have a very busy calendar of events. So, please do check that out, but even still, for certain topics, it’s very hard to get a big class full of people together. Of course, something like a search or something like project management, and some of the other courses you’ll see coming online soon it’s difficult to get say 20 people or 10 people in a classroom for a topic like that. Whereas, we can get that online very easily and offer that to more people. Of course, you want to increase access to training so it’s not possible for our partners to make it to all corners of the globe. So, hopefully we can increase the reach that way for Drupal training as well. I’d still – like I said I really believe and love classroom-based training. If you have access to it it’s a lot of fun. We do more than just sit at the computers all day. There’s a lot of group interaction and ways that you sort of deal with all this new information in different ways. So, please – I’ve actually just written a blog so you can check that out if you’re more curious.

Our online training program is a little bit different. You can go to our training site and see some of our new Acquia product courses that are available. Then you can look at the catalogue and you can purchase the courses there. Most of our courses right now are just product specific.

We do have partners that I really love their services like Drupalize.Me. They have a video instruction which I love to use and work through but we find that some people also want alternatives. Our video instruction also includes the text details of what’s happening. We have some other content as well. There is, for example, in the search course, an interview with Nick Veenhof who is the maintainer of the Apache Solr Search Module and all of the activities are written out step by step. The videos are shorter than they would be. So, we don’t video everything, we actually just video say an introduction and then you follow through the steps and you can kind of mark off where you are.

We also have challenge exercises so that the material lets you sort of deal with things at your level. If you found something you’re able to get through more quickly you can give yourself a challenge exercise and get a little bit more out of it, but we try to streamline the course to show you what’s the most important thing you need to do, we know people’s time is very precious. We also have some fun quizzes that are in there, mainly just to sort of test your comprehension and give you a sense of progress, to have a feeling that and understanding of what you’ve actually learned.

Before we look at the course I wanted to take a second and think about search because I want to sort of bring to mind why you probably want to take this course. You’re probably already going through some – having some experience of having a site with a lot of content and people need access to that content or they want to get more out of it.

So, some research that KISSmetrics offer is a result of a survey that they did about people’s perception of their own behavior. People say they prefer to drill down. They like to see their options and keep their options open. You may notice this even yourself you might like to start - if you don’t know much about an area, you might like to start with a very broad topic and see the options available, and click to filter out those results. Even the filters start to give you some information about the content. So, some examples might come to mind if you think of shopping and you may know that you want to get a sweater but you’re not sure if you want it to be a cardigan or a pull over or you don’t know what color, and you don’t know the length. You like to see a variety of options.

Once you know what you want, it gets a little bit easier to make a very specific search but initially you might like to be very broad and the same probably goes for cars or for maybe a law document or something very specific that you’re looking for. So, what we can say is that users love facets. That’s something everybody starts to expect or has started to expect.

There’s another good article here on Intercom’s blog and it’s about Seven Things I Wish Every Search Box Did. So, I’d recommend reading that article. There’s a link you’ll be able to follow when you download the slides. This article is talking about some of the best search pages out there. It’s even funny to see something like auto-complete topped the list here, because Google only recently introduced that feature, maybe two years ago. Now, we’ve come to expect it and we don’t just want to see it on Google, we want to see it in all of our websites, as well as searching across multiple fields. It’s something that seems so obvious. Of course as a user you don’t really care if content is in the body field or maybe an attribute field of some content type, or even if it’s in an attachment. You just want access to that content. So, people just expect this.

People also expect that the results are ranked in some meaningful way and as well you can see some of these options here as well from number five people expect meaningful filters. We’re going to talk about filters in a little – next but what I wanted to say is that people expect that the filters relate to the content and the ranking relates to how they perceive the content.

So, in the example of ranking results it may be very important that more users are commenting on certain contents. You may want that to be more important. Maybe that’s what’s most important. Even if it’s something that’s two years old if there’s more user activity it may have more importance in your realm. Whereas, you may have very time sensitive information and you want some of the content that’s been published more recently to come up to the top. So, people just expect that to work and when it doesn’t and it’s unexpected it’s a very poor search experience.

As well, people expect typo correction. The last point says, “Mobile first,” right? People are typing away with their thumbs. They’ve got a baby in one hand or a drink in another, and a train ticket in another, and they just want the search to be a little forgiving.

The Nielson Group also offers some data about search dead ends. People want to make sure that – I mean, if they’re not sure what to look for they want to be offered alternatives and suggestions. They don’t want to be mocked like with silly pictures of like, “Oops, there’s nothing here.” That’s going to be a frustrating experience and the humor is not probably helping. So, the whole search experience should be very smooth even to the point where search just happens automatically. Maybe you’re looking at an article and you start to see more like this, “Oh, you’re interested in this content? You might want to see that.” So, the search experience is really built in throughout site and it’s something just almost automatic.

So, let’s look now at what Apache Solr can do. Now, this is really a preview of the modules that we’ll actually use in the course and what solutions they provide. Apache Solr has intelligent options as we spoke about. So, Apache Solr Auto Complete will provide suggestions and spelling corrections, and even tell you the number of the results per query. It’s something quite amazing. I probably will say this again as we do this presentation but the complexity here is masked because we will literally be able to install and enable a module and it just works out of the box. The Apache Solr has a lot of sister modules you can enable – or sorry, download and enable to extend what Apache Solr does because the index itself is very powerful.

Another option we’ll look at is files and attachments. Like I said end users don’t really care where related information is whether it’s in that attachment or a body field. Later on of course you can offer them filters when they have a better idea of what’s available but this just gives them access to all of your content. So many organizations have a lot of very important data and really great content that’s locked away in documents and PDFs. If they’re especially moving over from other systems into Drupal, something like this is going to reveal all that great content and value that people want.

Of course, sorting and filtering. So, like we said, users like to start broadly looking for some content and then drill down after seeing what options are available. So, the filters themselves will start to provide people information about the content you have. For example, these facets here might show exactly how much content is related to a specific country and what is the greatest – maybe the greatest population in this case is going to be city content, what’s the city with the greatest population on your site or the least population. These are available to us through using Apache Solr Sort and the Facet API.

The Facet API is sort of a hub and spoke model like some of our other sort of ecosystem modules in Drupal. It will actually let you choose how you want to display. So, we’ve got here a list with check boxes. You can have multi-faceted search or this slider. It depends on how you want to display the data and Apache Solr will be able to understand and make that more useful to you. As well, we want to provide those improved results and boosting.

In the course, we’d look at core search boosting which you can – there are options definitely with the basic core search. There’s far more options available with Apache Solr. You can even extend that with this Apache Solr Term Proximity. It literally looks at the distance between two or more terms. Is it much closer? Then we’ll rank that up in relevance. The fact is with site searches you don’t have the information that large search engines like Google have available to them. Google knows all about the inbound links and it’s got a huge index of the entire web and billions of pages. What you may have on your site is just a product description. You may have very small amounts of content. In that sense, tweaking those biases and making those – sorry, boosting those results can actually have a very important impact on your content. So, a lot of the things we’ll do just come with Apache Solr out of the box with result biasing and field biasing for example, but the Term Proximity is very useful.

As well people expect the results to be easy to read. They want to see the data as it should be displayed. If I just displayed location results as lat and long or latitude and longitude, it wouldn’t be very useful to me because I can’t really remember where’s 52 degrees [laughter]. I’m like, “Huh?” We do expect that data to show up. For example, on a map you want images if the images are in the content you want images to show up as images. So, that’s a really important part of the search experience that we will be looking at.

When we get to the custom code part of the course we can look at making intelligent suggestions. So, if someone does search for a location or maybe they even spell it wrong or maybe there isn’t any content directly there we can see and start to suggest locations that are near to their results and that’s done with a custom code example. All of this amazing technology as we’ll be using it is like I said, “The complexity is masked,” because we’ll be doing everything mainly within the UI with the exemption of this example. A lot of that is all based on the work that is in Apache Solr and I just wanted to go through really quickly and explain what an index is. This is really what makes Apache Solr very fast. Why wouldn’t we just pull from the database? Like we could make - with Views for example we can make a list of all the countries or each of the countries and use contextual filter, and display the results for each of those countries. Or we could use taxonomy terms and we can combine those things together, and we can do joins and bring it various data together. That actually would be very slow and it’s known to be a very slow approach.

Apache Solr actually creates indexes of that content. So, these inverted indexes – if we just take these three example documents over here on the right you can see that maybe these are just like body – let’s say this is like the body field or snippets from the body field of three different notes as an example. So, if you look at the words or where the words occur in each of those phrases like, “Where are you visiting? Are you visiting museums? I enjoy history museums.” You look at the index that results from that analysis or how it’s organized we see the word “where” shows up in the first document in the first position. The word “history” shows up in the third document in the third position. This is what really makes it so much more or much quicker to look up. This is how Apache Solr is doing some analysis and trying to understanding what’s there.

I guess it’s just useful to think about this so you understand that when we start to talk about optimizing those searches that you understand – you’re actually optimizing the index so, you have control over this. We can just look really quickly at how Apache Solr – how the index actually works. We’re using Acquia’s search service so we have some content on our site and we have to send that content to get indexed. As it gets queued and it comes back we can actually see what’s happening in the search index results here. This would happen even if you had Apache Solr installed locally on your machine you would still have to send this information over to your Apache Solr search server.

So, here we have for example every single time the cron runs which is basically a task. It’s basically a list of tasks that the server will run. It will actually, “Queued 200 items,” send them, and process them at once. So, we have over 2,000 items have to get processed so it’s going to take some time and a couple of returns to get that processed. So, you could see what’s happened here is that we’ve – 200 items have been indexed. We have 200 sent but haven’t yet been processed. At this time we can see 14% of that content has actually been sent to the server. So, we’re waiting for this round trip search and we’ve just run cron successfully about three minutes ago. So, what we’ll do here is refresh the index and see what has changed. So, right now we can see those items have come back 400 things have been indexed and we have a bunch remaining.

So, what we’re going to do is actually just choose to index all queued content. This will take some time and you can come back when it’s finish. It’ll take a few minutes. So, if your curiosity is piqued and you want to see how to use some of those features I’d like to show you a quick peek at the actual course. You can see what it’s like.

[Pause] So, this is what it looks like when you log in and you can see that there are instructions and there are various sections on the course. It basically, brings you through all the steps of setting up and installing your site, installing Solr, connecting your site to Acquia hosting. Basically, understanding sort of those - how things work and then you start to configure your search. Then you optimize your search, configure your facets, and then generally improve the user experience.

So, what we’re going to do now is actually look at some of those exercises and those activities. I thought it would be good to give you a bit of a preview of how things work. If I just show you the search features - I’m going to show you the site as it’s finished after we’re – after you’ve developed it within the course. I just want to show you basically what’s available and how things work.

[Pause] So, this is my sample site as it’s installed on Acquia hosting. You can also use the Dev Desktop and so you can work on it locally if you like. If you do it with Acquia hosting it’s fully online. You don’t have to install anything to do the course. So, we can conduct a simple search on the site. Actually before I show you that, let me just show you what comes with the site. You get some sample content because it’s just a little bit easier – we just want you to get started as quickly as possible. So, we have all this content in there and we’ve got some articles, and some cities, and we have for example, content types. We’ve got a custom content type in there. The city content type and this gives you sort of an idea of the type of data that’s available on the site. So, let’s conduct a quick search on the site and see what we get.

You can see that the results are laid out in a meaningful way as we spoke about before in which you learned how to use the Display Suite Module to actually arrange how the search results show up. You can see how the maps are appearing and we’ll look at using a couple of different modules. Let me actually show you what modules we’ll be using in fact.

So, I’m going to go back into the course here and show you the modules that are used. Of course, here are all of the Apache Solr search modules that you’ll be looking at and the display modules like Display Suite and we’ve also compared that to Rich Snippets which kind of makes like a Google looking type search just out of the box. Of course the Facet API and these excellent widgets that we saw like the slider or the check boxes, et cetera, and the location modules. So, we look at location and how we collect that data, and then how we display that data with Gmap.

So, let’s look at these search results here. We can see that they’re listed in order. Somehow they’re ranked. We don’t know yet. We’re going to look at how these are – the biases that are set but you can also see we have as well active still the core search results and you can just compare what those look like. Pretty straightforward with the core search results and you can compare what those advanced search options look like. You’ll notice when we did the search we set the Apache Solr Search as the default.

So, one thing we’re going to do right now is we’re going to make it – well, actually I just want to show you what it looks like with spell correction. If I search for “nurban” we’ll be getting a suggestion, “Did you mean, urban?” You can actually search for those results that way. We can also improve these results.

Now, what I’m going to do is I’m going to show you the Auto Complete Module. The Auto Complete Module will give people instant results. It will also make a suggestion if it maybe thinks it sees a typo and it will say, “Did you mean this?” It will show us – it will be that intelligent search experience like I said people just want now. The facility for this is kind of so easy. We’re just going to go to Modules Listing. I’m going to select autocomplete and enable it.

[Pause] I want to go back and I attempt to do a different search. You could see I was starting to get some suggestions, the word pops up, and we start to see how many times that phrase occurs in the various search results. So, this again completely hides all of the work that has gone into this but for you it’s literally making the choice that you want the feature, installing the module, enabling it and it just – it does what you want it to do.

So, let’s look at something that might be complex and difficult with other systems, Custom Search Pages. So, take for example you may want to specify a preset filter on all of your content. Set a scope for search. You may want to have a search for a specific country. That relates to our content but you may be able to bring to mind some examples from your own site where you know that people just want to search your book of content or they just want to search your product’s content. Or they want to see your articles, something like that - some way that you’re actually filtering on something.

You can even specify a taxonomy term and that’s what we’re going to do in this case. We’re actually going to make a search based on a particular field, taxonomy field. So, in order for us to do that we have to assemble the custom filter that we’re going to create and search for what filters – we’re going to look at what filters are available and then we’re going to show you how to actually assemble this. So, first thing we’re going to look at are the custom filter options available. One of them is the country field because that’s what is on our content type or the tags field that’s for example available in the article’s content type. We can look at the unique term ID as well. So, we’ll actually find out what is the unique term for a specific country. So, I’m going to do a quick demo making that search page, locating the field ID, and writing the custom filter, and creating it.

So, let’s look back on our search page again. We’re going to see that – right now we have a tab with the content tab and the site search tab. The content tab is of course the core search we’re keeping around. Now, we’re going to add our own search page. So, I’m going to call this my Country Specific Page, just for that example. The search environment is Acquia Search and we’ll call this the Ireland Search tab. The Custom Field is what we’ll actually be looking at and let’s fill out the tab. I’d like it to be something like search/Ireland and we’ll select a custom filter. This is sort of where you stop because you need to know what that custom filter is going to be. There’s no way you would know this off the top of your head. I certainly couldn’t remember it.

So, I’m going to go to my Administration List, Reports, and look at my Apache Solr search index. This will actually give you some insight into how Apache Solr is looking at your content and what’s available to actually filter on. The thing we’re looking for here is this country field. This right here, field_country, is actually the name of the field. I’m going to show you the content type just so you can see is actually the name of the field on the city content type that is my country taxonomy term field or term reference, I should say.

So, this is the filter we’re going to use. Now, what’s missing in this case is the ID. The way we find that out is by going back to look – I’m going to go back to structure and look at my taxonomy terms, and the list of terms that are available. There are quite a lot of countries here. It turns out that Ireland’s on the next page. We’ll get the term ID. You can click edit. You can see the term ID or up in your browser you’ll see. It’s 107 in this case. So, that will be the custom filter we’ll be working with. So, I’m going to save that. I would expect now if I click on this link that I’ll get my Ireland search.

So, what’s happening now is that I’ll start to get a limit of filters available. I’m going to search for houses for example in Ireland. Now, instead of getting all of the other countries you can see I’m only getting results within this one country. Although this is amusing it looks like this may be mismarked, maybe the latitude and longitude is wrong here. There you go. These are just some examples. Okay. That is basically how you make a custom search page. You probably have some ideas now that you’ve been watching it and how you might be able to use that in your own examples.

Next, let’s look at optimizing search. Improving bias is probably one of the most important things you’re going to be doing on your site. You know what you have to think about I suppose is how people are searching your content and what’s the most important thing about your content. For example, if you want more recent time sensitive content to show up to the top that’s a bias you’d want to improve. The only way you really can be able to do this is through actually starting to analyze your search logs once you get them so it’s not like build it, set it, and let it go. You probably want to build it, see how people are responding to it and constantly tweaking and improving your search, and taking in customer feedback, and watching their behaviors.

One thing I’ll say and we’ll talk about this when I do the demo is just to be very careful about how you tweak these boost settings. Don’t always put everything to the highest setting because then everything is just flat. What you want to do is really through testing and learning you’ll get an idea of how those results are improved. So, the factors are multiplying the relevance. So, 8.0 would be eight times boosted over the regular value. So, start very low and test as you go.

As we’re playing around you may want to just do something very exaggerated just so you can see your result but it’s not necessary on a live site. So, we’re going to first conduct a test search. We’re going to keep that page open just so you can see the direct change and we’re going to change the bias, and we’ll look at the index again, and see what changes are going to be made.

So, let’s start here under – yes, sorry. We’ll do a search actually that’s what I mean to say and we’ll search for [pause] flowers. We can see these two cities popping up. What we’re going to do is improve the search so that more recent content shows up. So, I’m going to keep this open and one thing I’m going to change is the date of this. [Pause] I’m going to edit that and change this to one year ahead. [Pause] Okay. At this time they’re exactly the same time I suppose so it won’t actually make any difference. We’ll just refresh there. You can see that Glovertown is up top and Ura is just underneath that.

So, let’s improve these search results. [Pause] Go back to configuration, search meta data, Apache Solr search, and under Acquia Search we can work on the bias. Here we’re going to set the result biasing. So, if something is more recently created we’re going to boost it by two. So, we’re going to double it and save it. So, we’re changing the settings and it also means we have to re-index because now one item hasn’t been sent to the server. So, we’ve actually changed the value of that item. So, we’ve changed the date of that item. So, it’s something new in the index and plus we’re changing the settings. So, we’re going to [pause] index the [QH] content which goes off to the server as you know. One thing you can do is actually go over to administration [pause], configuration, and cron, and you can run cron. So, that will take a few minutes and we’ll go back to configuration again. Search and look at the status of the index. So, one item has been sent and not processed. This is going to take a minute. So, when the cron job is complete and it has run around you can see finally zero items remaining and that means that updated content has been searched.

So, let’s go back and look at the results again. It was Glovertown versus Ura. I changed the date and changed the bias. So, we’ll do that same search again for flowers. You can see Ura which is more recent content is now coming up to the top. Actually all of the results now are rearranged based on how recent something was. So, that is just a little peek at bias.

There are so many options so there is the result biasing as we looked at. You can see how you can improve things again by how many comments, maybe more recent comments. Whether something is promoted to the front page and then you can even have specific field biases. So, there’s already some that are set by default. Some things - a header one or heading two in your body text. That’s going to get more boost and seen as more important. As well you can make certain types of content get improved as well. That’s just what Apache Solr is offering us out of the box which is quite brilliant.

So next, we’ll look at facets. Facets are the way that people can filter through their search. We can get a peek at the some of these facets, for example, on the site. [Pause] So, let’s look now at facets. Again, we’re talking about how people search and how people look for content on your site. Like I said, “You’ll have to listen to your users.” There’s a good article here from Smashing Magazine a couple of years ago still very effective and important is about looking at your query logs to define what those facets are going to be. Using what’s already going on in your industry, that’s obvious, right? You want to see what people expect and what’s done already. You want to choose something that’s very important to your users and important to you. So, how are people influenced to find certain content? Maybe you want to encourage certain content or behaviors and to get active in their community or to purchase something. It depends on what you’re working with. So, we can keep that in mind when we look at the city content type you can see there’s some information available. Location data or information about the population, et cetera.

Facet API offers you some options you can see here on the left. For example, you can have a list of links. You can have links with check boxes, and get that multi-faceted search. Or you can add additional modules like the Facet API Tag Cloud or the Facet API slider which will let you give people some options based on the kind of data they have. So, if it’s more important or more – if a term is showing up more in the Tag Cloud, it gets bigger. With Facet sliders it bases it on, for example, numerical information.

You can also do things to improve the user experience. As we’ll see, you can decide where you want those Facet blocks to appear. You can simply rearrange them in your layout. So, in our case we’ll put the Facet API slider up across the top so we have a nice long slider to use and you can put things in the sidebar for example. So, this is what we’ll be doing.

In the course you’ll actually set these in an exercise and then you’re given other challenge exercises to explore some of the other ones. This is again an example of we’re going to teach you something that is most expedient and quick, and efficient for you to learn. Then we’re going to give you a bit more if you have some more time. If you want to dig in a little bit deeper, we’ll give you some advice and some hints about where to go next.

I’m going to show you that really quick. Under Structure, Blocks. This is again with all the modules that need to be enabled and downloaded as we looked at in some of the course material. That’s assuming that you’ve simply installed and enabled the modules and they become available in this disabled list here.

So, I’m going to take the population slider and put that into the content list up here and make sure it’s at the top of the content list, and save it, and go back to our search page and refresh and see what changes we’ve made. Again, this is on the same search and you can see the sliders available, and I can limit to cities of a specific size or population like that. Again, this is something that just works out of the box. There are just so many different options and once you start getting familiar with it you start to master it.

The great thing is that because all this technical complexity is sort of pushed into the background you can focus on the stuff that’s important for your site, and the user experience, and how that search experience works. You don’t have to spend time writing custom code and doing complicated things. It basically is this easy.

So, what’s next? I’d recommend if you want to check out a webinar that my colleague did in August, you can watch to get some tips on how to configure Solr search for your site. Of course, you can take this course online. You can check out our Acquia Product Courses on our site and go through these step by step in much more detail. So, if you are new to Drupal and you’ve watched this webinar, you probably zoomed through a lot of things very quickly, you probably have a lot of questions. That’s basically what the course is all about. It’s taking you through these things. Self paced in a way that you can go at your own pace but hopefully in enough detail to get a lot out of it.

Thank you. I hope to see you online.

Easily Create Maps in Drupal with Leaflet

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 -

Preparing for Acquia Certification

Click to see video transcript

Hannah Corey: Training sessions on Preparing for Acquia Certification with Heather James, who’s the Manager of Learning Services here at Acquia and Prasad Shirgaonkar who’s the Curriculum Developer here at Acquia. We’re really excited to have both of them on the call today.

Heather James: …for the Acquia certification, and we’re going to be looking at probably if we’re taking the exam you probably want to know what it’s like and if that is the case, then this is definitely the right place for you. I want to talk with you first today about the goals of the exam, you know how we actually chose to focus on specific skills, better actually outlined in the exam blueprint that’s probably available. Then, I’m going to hand it over to my colleague Prasad. He’s going to talk with you about the kinds of questions you’ll actually encounter on the exam and how to find your weak areas and how to improve on them. Finally, we’re going to look at the resources available so you can actually improve on your skills. I’ve actually been – I’m Heather I should say. I’ve been using Drupal since about 2002, using the early 4.0 releases. I’ve actually been with Acquia since 2009 on the training team. So, this certification idea has been a long ongoing discussion within the community, and I’m really excited to see those plans result in a program that I’m really proud to talk with you about today because I’m just amazed to see it come together. How about yourself Prasad?

Prasad Shirgaonkar: Hi. I’m Prasad. I’m a Drupal since 2006, Drupal 4.7 dates. Prior to joining us here, I was running my own Drupal service shop where I look on where 200 Drupal projects for clients on almost 12 countries in four years. Since last year, I’ve started doing full-time Drupal training, and I have conducted numerous workshops for individuals and in the price clients. Currently, I work on developing and conducting training programs for Drupal and Acquia products. I was also a part of core team, which made the certification program. I’m very excited to share a few tips about preparing for the certification in this webinar.

Heather James: That’s true. I think that’s what’s really great about your experience, Prasad, because you have been a developer for a long time. You had your own business and then as well you’ve been able to see how it is when you actually start training people. We’re going to hear a little bit about the – how we prepared it and some of the folks that have been involved in the program.

Prasad Shirgaonkar: Absolutely.

Heather James: Yes, it’s definitely good. Let’s look at the program and how it’s structured and what to expect. We actually have two tracks planned, but one is available right now. Specialist tracks are planned for front and back-end development, but our first certification track is for the common skills that any Drupal developer needs. For this first exam, we spoke – we sort of focused on those the skills that were common to the specialist and really required for most key roles in Drupal development. Further details are available on our certification pages and I think you know – I think one of the great things actually about the program is that you can either take the exam at a test center in person or you can take it online as a proctored exam observed by a real person. During that time, either in either case, you’re going to get 60 questions that you can answer in 90 minutes, which should be ample time for you to complete the exam. It costs $250.00 and you can register online.

What I’d recommend is that you watch your previous webinar with our colleague Peter Manijak. Today, we’re really picking up where that webinar left off. In that recording, you can find out details of what it’s like to take the exam. Peter also gives practical tips and follow - answers questions about what the online versus in person exam is like. The links that are in the slides here are going to be sent in the follow up e-mail that Hannah is going to post, so you’ll be able to download the slides and get these links. Next, we’re going to – so the first step really on the process of preparing for the exam is to understand what’s the point? What’s the goal of the exam? Understanding this will help you understand how the exam can actually improve your job prospects and get new opportunities. On the other hand, if you’re actually hiring manager yourself, it will help you understand how certification will help you build the team you need for successful Drupal deployments.

The goal from the very start was to be something that was effective and that we could stand by. We started by actually researching and comparing actual job descriptions out there in the wild. Things that were posted by our partners and our clients, and this helped us see what roles are being filled. We then validated that by interviewing our clients, partners, and our colleagues to see what matched up. Then, we used a job task analysis survey and that detailed specific skills in use that actual hiring managers were seeking. The whole point of the exam is to be able to say that at this point of time, we validate that this person has these particular skills. We know that these skills are those that are required and in need. To that end, the exam touches really on all areas of Drupal core architecture and extending Drupal.

You’re probably wondering right now if this exam is right for you. As you’ll see in the exam blueprint following, the certification does cover quite a breadth of knowledge. Many of the situations described in the exam would be things that you probably encounter through your own experience rather than technical knowledge or I should say not technical, theoretical knowledge. This means exam really isn’t for novices. We are considering other assessments to help people in earlier stages of their careers, but you would need to get some more hands-on experience if you have say, less than six months experience to this point. However, if you do have more than six months experience on real life Drupal projects, you should definitely take the exam and be confident that this is right for you. Those who have more experience than that should be able to test out quite easily actually.

Let’s look now at the details of the exam blueprint. The blueprint explains the top level domains for the exam. As you can see here, you can see how each of these knowledge domains makes up a certain percentage of your total exam score. You can see the components are actually broken down further online. Look at this blueprint when you start to look at the details of it, you’ll see that it really is requiring a fairly good understanding of those three core Drupal demand cycling, front end and back-end development in order to be ready for the exam. Because the past rate is fairly low, I mean if you compare it to other certifications, it is 65%. We provided some leeway for specialists. What we want to see, our developers who really understand the other domains because we’ve discovered that’s quite essential for a successful Drupal development.

What knowledge is needed? As you can see by the way things are weighted, you can tell a really aiming for balance with this exam. So, if you have the name recycled in your role without any knowledge or understanding or experience of either front end or back-end development in Drupal, you will need to take timeout and systematically learn those domains. Take time, take formal training and we’ll look at some of the resources that are available. Some of our relay, if you’ve only been doing front end or back-end development, you’ll know maybe somehow on your – if you’ve got a larger team especially people find their skills are siloed because of the task they’re given to do. They should – those people should take time to understand Drupal site building as well. Of course if this knowledge is needed and required, you’re probably wondering how we actually test for it in the exam, how we actually look at the specific areas. I’m going to pass it over to Prasad now, and he’s going to talk to you about all the different kinds of questions you’ll encounter.

Prasad Shirgaonkar: Yes, thanks Heather. Now, we know the exam objectives and the exam blueprint, you might have got an idea that we are almost covering all the three major domains of Drupal. That’s the Drupal site building, Drupal front-end development that’s teaming and back-end development that’s more your development. We know what knowledge is tested in the exam. Now, let’s see how this knowledge is going to be tested. We can do that by understanding the nature of questions. Typically people think of questions, of multiple choice questions as something like you are say, expected to remember the syntax or you are expected to memorize a few things. Let’s have a look at the nature of question that we have in the exam.

Basically, we are asking the nature of questions. They are all scenario-based questions? There are three parts to each question. There is the scenario, a question, and the options. A scenario actually describes a situation with the used case or a client requirement or possibly even an issue on a Drupal site. Then, a question is asked about the scenario or the problem. There are four or more charges given for possible solutions from which the candidate needs to select a correct answer or possibly multiple correct answers.

Let’s, have a look at a sample question. The scenario says something like this but you are running a popular local news portal. A mobile app developer in your area approached you for permission to syndicate your content on their mobile app. Now, they are requesting the content to be made available as a feed rather than an HTML format. So this is a typical, practical scenario or practical situation which you might encounter as a Drupal developer. Then, the question that we ask is that how can you provide a list of latest articles in RSS format? Then, the answers - the choices are to create a view with feed display or create a view with page display enabling the RSS filter, create a view with page display by selecting the RSS feed as a display to style output or create a view with the page display and then modifying your template file to provide output in RSS.

Obviously, only one of the answers is the correct answer and there are previous factors, which are like meaningful or wrong answers actually. So, you have to select the correct answer, discarding on all the incorrect answers.

If you look at this sample question, you may realize that the questions rely on application of Drupal concepts and knowledge rather than purely memorizing the facts, code or syntax. Now, this essentially means that just reading through the long list of documentation or books would not be sufficient for answering most of the questions. You need to have the real experience or understanding of sufficient number of used cases, applications, common scenarios in a Drupal project. Possibly, even support request and issues that they are handled in the past. Once you have all these information, then only you will be able to answer the questions which are asked.

If the nature of the exam is off this time, then how do we prepare really? What we suggest is actually first day of preparation is to find out your own strengths and weaknesses in the area of Drupal. Actually, a truly experienced Drupaler will likely to know his or her weaknesses much, much more than their strength. Now, after looking at the domains of site building, front-end development and back-end development, you might have made a judgment about where your own skills stand while reading the full domains listed. Now, it’s quite natural for a person to be more experienced than more proficient - but not the domains than others. For example, if you might be a very proficient site builder, you might have the lots of sites building using the UI, but you might not have developed the module. You might be a very good themer or UI builder but you might not have a well – done a lot of site building configurations. Same is for about module development. You might be proficient PHP developer, developing a lot of module, but might not know anything about Drupal theming there.

It’s quite likely even within a particular domain, not to have enough experience of all the topics. What we have come up with is that you have developed a small self-assessment tool, which you can access at this URL that’s bit.ly/acquiasat. That‘s the self-assessment tool. This is how the tool looks. What we have then is we have taken the list of all the exam objectives, including all the sub-objectives like in-site building like demonstrating the ability to create content by its sign, everything that we are covering in the exam blueprint. Next to each, actually you can put your own score in the area of zero to 10. Zero for the – we absolutely don’t know anything about an objective, and 10 if you are like master in that particular area. If you do that for all the exam objectives, rank your own skill for the exam objectives, and then you will come to know that anything which like having 8+ score, which implies your absolute strengths, anything between five to seven that implies you require some preparation for those objectives. Anything which is like less than zero possibly will require a lot of preparation or guided instructions for that.

The first step for actually preparing for the exam is to do a self-assessment overall the different objectives and find out where exactly you stand, so that you can plan your own preparation.

Now, of course once you know your weak areas, the next step is to work on your own weak areas. Let’s assume we will share some tips about working on site building if that’s your weaker area or front-end development or back-end development, all the three top level domains. Of course if you have basic HTML, CSS, and PHP as your weak area then you have possibly a lot of resources online about HTML, CSS and PHP preparations. We have nothing to talk about that. We’ll be focusing on the Drupal. If anyone of these three domains is your weak areas. Lets’ talk about site building if that’s your weak area. Before that, basically once we start at the – once you decide to work on your weak areas, there are two challenges that you are likely to face. The first one is to find and study documentation and knowledge resources for the topics from your weak areas. The second one is to find enough number of practical case studies covering the topics. The first one will be solved when we are actually sharing a list of resources, which are mapped to each exam objective.

You can go to those resources. I will share the link at the end of this webinar. The second one is a real challenge, is to find enough number of practical case studies covering all the topics. Let’s talk if your site building is your weak area, what exactly you can do to prepare. We suggest a particular way out. Now, select any three to five Drupal projects which either you or your team has done over last a year or so. Collect all the teams, review all the configurations and settings. Review content types, fill settings, refill settings, vocabularies, blocks, menus and views used on all the sites. Possibly you can even make a list of all the configurations made across all the sites, and just ask questions about each type of configuration that why the configurations are the way they are? What can be changed or improved, possibly work issues or support request were raised by the clients for those projects, what changes were made into the initial configurations and why those changes were required? This can possibly give you enough overview of all the different types of issues that were faced by your team across various types of Drupal installations and Drupal configurations. Of course, if you rated that along with the resources list that we share, we can actually gain a lot of insight into site building activity of Drupal if that’s your weaker area. What if front-end development is your weak area? This is just a similar approach, you can actually collect custom themes developed by your team over the last year. If you don’t have enough custom or themes developed by your team, you can actually select a few contributed themes from drupal.org.

Analyze those themes. Find out the templates which are used, the TPL files which are used. Review the CSS and redo JavaScript, review any pre-process functions implemented by the teams, and then ask the questions that if possible even gather the source, designs or wireframes, which were the specifications for those themes. Then, ask questions whether the themes were implemented exactly as per the designs. If not, what changes are required and why. Review the theme regions. Just ask questions whether the regions are optimum, is there any redundancy, can you reduce any other regions, can you add any regions? How regions are exactly implemented on the themes. Are there any specific theme settings being used. How CSS and JavaScript files are being called in the themes, and are there any other pre-process functions being used, could they be replaced with something else or could any other output be replaced by pre-process functions. Also review the template files or find out whether there are any template suggestions or custom template files implemented and the reasons behind those. This can give you - again reading this along with the specific documentations, for theme settings, for theming profiles, for theme regions, and pre-process functions, can give you a good overview and understanding of front-end development domain.

However, when you go to back-end development, a similar approach for studying may not be useful because your team might have developed possibly a few custom modules over the last year, but for custom modules, they might have very complex functionality or might have a very used case specific functionality. What we expect in this exam is that you have an overall understanding of Drupal’s API, core hook system, and their applications. If you haven’t done module development at all in your life and still want to attend this exam, of course you can prepare for this. Preparing for module development is actually easier than preparing for site building or theming, which are like last areas. For module development, you can attend the module development course, possibly you can build a small module on your own and explore all the APIs given. Actually, there is a module called as Examples Module in Drupal. You can download that from drupal.org/projects/examples that provides a very documented list of all the APIs or lots of APIs and lots of functions, which you can implement in your own module. You can actually try out some code in action and explore various aspects of module development.

These are the three different ways in which you can prepare for three different domains for site building. Collect or just get information of three to five main projects done by your team over the last year, go through all the configurations, review configurations and ask a lot of the brainstorming questions and find your answers online. About theme, similar theme, collect three to five good themes developed by your team or good contributed themes. Analyze those themes and ask a lot of questions and try to find out answers online. For module development, if you haven’t done module development then actually develop a module, develop a small module or attend the module development course. So, that’s how you can prepare for this exam or any one of the domains, which you are not proficient in the exam.

Once you prepare, once you are ready to take the exams, we’d love to share some tips about taking the exam. Now, as Heather said in the beginning this exam can be taken either online in the proctor or at the exam center. If you are taking an exam at the exam center, make sure you find the right address when you register from Webassessor. You can actually select an exam center which is closer to your location. Of course, just find it on the Google Map, plan your travel properly. Make sure that you arrive at least 15 minutes before your scheduled time. You need to bring the copy of your registration e-mail, so that there is a call with that exam center operator needs to know to activate your exam order. You also need to carry a photo ID, like your passport or driving license or whatever photo ID is accepted in your region. If at all you need to reschedule, make sure that you reschedule it at least 24 hours prior to your designated time. This is what would be the required at the exam center. Also, make sure that exam centers may have strict rules about keeping your belongings or keeping out your mobile especially or taking breaks during the exam. Just make sure that you understand those rules by talking to the operator. Also, the operators at the exam center are neither Drupalers, they are not Acquians, so they won’t know anything about the exam or the certification. They won’t be able to help you if you have any technical questions regarding the exam over there.

If you are taking the exam online at online proctored exam, you need to install a specific software from webassessor.com. Check the system requirements by logging into webassessor.com. Make sure to install necessary software at least one day before the scheduled time. Currently, the software doesn’t work on Chrome on Mac because a Flash related issues. So, you need to get either on – if you are on Mac, you need to take it either on Safari or Firefox. You install that software one day in advance. At that time of taking the exam, you need to select a silent room or possibly a silent corner in your office where no one is – nothing is going to distract you for 90 minutes at a stretch because you can’t take a break in the exam once you start the exam, or you have to finish it within 90 minutes flat.

Keep a bottle of water handy. That’s very useful when you’re taking the exam. Switch off your mobile phone. Keep it far away from you, so that you are not tempted to take mobile. Last one is that don’t use two monitors. Just use your laptop or desktop’s primary monitor only. Don’t connect to another monitor. This is an online proctored exam in the sense that when you are taking the exam, some real person, somewhere sitting in the world is actually monitoring what you are doing. This is to make sure that there is integrity of the exam is maintained well and we are not doing following any form of, say taking help while taking the exam from others. That’s why the proctor needs to make sure that the person is completely enrolled in the exam that’s why mobile phones or using two monitors and things like that are not allowed in this exam. I think these are the simple tips to follow for taking online exam, which will save your time and you can do exam efficiently.

Once you are either at the test center or you are taking the exam online, what tips to do when you are actually taking the exam? The first one is that don’t rush. Now 90 minutes are more than enough to answer 60 questions even if English is not your first language, it’s your second language, or from our experience or from the experience of exam takers over the last one month. Every minute given to you is done so that even if English is their second language it’s more than enough to read all the questions, understand the responses and give proper responses. So, don’t rush. There is no need to rush at all. Attempt all the questions for which you are sure about the answers first. So, basically start with the question that you know. The system allows you to save questions for a review later. You can always review all the questions later before you submit the final response.

For any questions you are not sure of the answer right away, just save it for review later and revisit the question after you have attempted all the others. The third thing about for all the developers basically is that don’t over think. If you have that enough Drupal sites, Drupal projects in your career and if you need a scenario, most of the times the first answer which comes out of your gut will tend to be the right answer. Just move with your gut feeling and answer questions. One thing I would like to mention is that there are no trick questions in the exam. It’s not your language test. So, we are not trying to trick you or not trying to give very strange language per se. They are very straightforward questions. So, take all the questions and to face value. We got some feedback from a few guys saying that for a couple of questions, couple of answers you will use choices look exactly the same, but when this happens, when you feel like two answer choices are exactly the same, just go to them again, review those exact same things and you will find out the difference.

These are the tips which you can – which will be possibly helpful for – if you are taking the exam either online or at the exam center. About the resources, I’ll pass back to Heather who will talk about the resources now.

Heather James: Thank you very much, Prasad. That’s a really good point. I’m going to talk about the resources. I think what’s interesting actually probably to know is that actually at each point on the – what we are developing in the exam but each point of the exam objectives. We needed to validate and make sure that the facts that we’re actually going to test were supported by published documentation and books. Those resources are actually the ones that we’re referring to. We can’t tell you what page it was on, but we can tell you that the information is out there and available from you to learn from. The resources actually are going to be summarized in this upcoming E-book, that’ll actually be out next week. If you’re watching this as the recording, I’ll make sure to update the recording page with a link to download it. The E-book is actually organized - the sections on resources are organized by the type of resource. There are first freely available resources from drupal.org. There are also published books. Then, we have separate sections for Drupalize.Me and BuildAModule. Drupalize.Me and BuildAModule are services that are available to our network subscriptions either free or with a reduced discount. The great thing is that you probably already have access to some of these things, and maybe books already on your shelf and we’re just going to point you in the right direction to various sections, et cetera.

If you do find yourself needing structured training, I’d recommend you check out our training courses on training.acquia.com, and there we have very structured training around theming, module development, and site building. They are fun. We very much – we try to make it - we create interesting problems for you. We use cases and make it not just hands on, but also let you think and be creative in the events. So at this point, I wanted to ask if anyone has any questions. You may have some questions that’s about the exam itself or you may have questions about some of the topics that are covered.

Hannah Corey: I’ll go.

Heather James: Yes, cool. Sorry, Hannah, pardon?

Hannah Corey: Yes, I had some questions come in. The first question is for the self-assessment. What total score would you suggest the passing grade on the exam?

Prasad Shirgaonkar: Okay. Can I take that, Heather?

Heather James: Yes.

Prasad Shirgaonkar: Okay. I think it’s a fairly interesting question and possibly a difficult one to answer because the self-assessment is done by that person understanding on his own perception of his own skills about each objective. The exam questions are – may or may not have the reflection of his own understanding. What we would suggest is that the total score, or the passing rate for the exam is 65%. So, you need to clear – have 65% questions correct in order to pass the exam. If you take that logic to the self-assessment, you would see that at least in the 65% areas – in the exam objectives, if you have your scoring, your own grading more than eight, then possibly that will reflect a passing grade for the exam.

Heather James: That’s a good point.

Hannah Corey: All right. We have some other questions coming. What Drupal versions are likely to be covered on the exam?

Heather James: We are actually covering Drupal 7 in this exam, so it’s fully on Drupal 7.

Hannah Corey: Great. The next question is, is there a link for the exam centers? Where can you find that information?

Heather James: Definitely, go to acquia.com/certification. There you can find a link to the exam center and registration. I saw another question actually come through asking will this exam have some trivial questions like this question came through and it says, will we have trivial question such as, where and what menu can you change permissions? That’s actually what we avoided. The global certification lead, that’s Peter Manijak, has a lot of experience in this area and to what he’s discovered and what he’s been able to share with us is that scenario-based questions like the ones that Prasad has spoke to us about and showed in this presentation help you solve a problem and see how you solve a problem I should say. They pose a situation in a context and ask you what you would use to either create a feature or debug something. That is far more interesting to us than can you remember the pass to - you know click pass to get something done. The truth is, we, nowadays as developers, have access to resources and documentation at our fingertips. We wouldn’t expect you to be able to remember some of these procedures off the top of your head.

Another question, I often hear asked is about the language of the exam. It’s actually in English. As you can see, there are 60 questions in 90 minutes. What we’ve been able to confirm, which is what Peter expected was that someone who’s a native English speaker can get through that quite easily in 90 minutes. Whereas someone who’s using English as a second language, they do need or require the full-time, but they do complete the exams. So, that’s why it is the length it is. Hopefully, that relays some of your concerns if you have them. Are there any other questions?

Hannah Corey: Yes. We have someone asking about if you could do a prep session at DrupalCon?

Heather James: That’s actually a good question. We will be running certification actually at DrupalCon, but I might take that suggestion over to my colleagues and see if we’ll have time to do a prep session. We are in the middle of organizing a Drupal certification workshop that’s probably a little too early to talk about it now. It’s interesting because we want to make sure that you can be prepared if you are somebody who is experienced, and you want to know what to expect and maybe fill any knowledge gaps that you have. So, we’ll have more information about that in May.

Hannah Corey: Awesome. We had a little feedback as well. Just asking for some additional sample questions and maybe this is something we can take into our blog post or the e-book might solve this. Heather, do you have any suggestions for them?

Heather James: Yes, both hands I think that isn’t the first time someone does - some more sample questions. We kept all the good ones for the exams. We are [Laughter] - we will be able to share as we develop for further examinations, we’ll be able to share more sample questions that will give you a good idea of what they’re like. We’ve chosen this one because its representative of the type of question that’s asked. Though you know just where things laid out, it was one that was extra you could say.

Hannah Corey: All right. I think that’s it for questions. Thanks everyone for attending, and thank you Prasad and Heather for the wonderful presentation. You guys want to add with anything else?

Heather James: No. Absolutely I’m really just – like I said, I’m really excited that this is finally available. I hope people find it very useful, hope that it opens doors for them.

Prasad Shirgaonkar: Absolutely. About preparation actually, if you had been working on Drupal for six months or more actually, just reviewing your own work and studying it or making it more comprehensive in the light of resources that we share, it’s certainly going to make you prepare for the exam. So, just go for it.

Hannah Corey: Great. Thanks. We’ll send out the slides and recording within the next 24 hours. Have a great afternoon, everyone.

- End of Recording -

Webinar: Drupal Step-by-Step: How We Built Our Training Site, Part 2

Click to see video transcript

Hannah: Today’s webinar is Drupal Step-by-Step, How We Build Our Training Site Part 2 – last week we had Part 1 and this is the second of the series – with speaker Dave Myburgh, who’s a Senior Engineer here at Acquia, and we also have Heather James on the line who’s the Manager of Learning Services here at Acquia.

David Myburgh: So today is Part 2. Last week we just spoke about how we built our training sites, some of the backend stuff that we did. Today, I’m going to talk about the frontend, theming and how we used Bootstrap to make it look all pretty. I’m a Senior Engineer in Acquia. I’ve been there for two-and-a-half years or so. I’m the lead developer on Acquia.com and a couple of other small sites, including the training site, obviously.

So what are we going to look at today? We’re going to see what is this thing called “Twitter Bootstrap” or just “Bootstrap”? We’re going to look at some of the modules that we used for helping us to style things on the frontend a little bit better, make things look nice; and look a bit more in-depth at how Bootstrap and Views can work together. We’ll look at the grid system that Bootstrap uses and we’ll look also at working with responsive layouts. Finally, we’ll look at some of the components that Bootstrap offers us.

So themers and site builders will benefit the most from this, I guess. If you have some experience in Drupal, well, it’s useful. If you're new to Drupal, you're definitely still going to pick up some new and fun things.

So this is what we started with. This is our old training site in Drupal 6, kind of old-looking. It’s not very modern look and difficult to work with and tweak stuff and modify things. So we ended up with this, much easier to work with for managers, keeps Heather happy, keeps me happy because it’s less coaching stuff that I have to do as well.

So to get the new design, what do we need? We want to just obviously update the old one, make it look more modern. Get a more consistent look across the site. Obviously, make sure it’s cross-browser. And most importantly, any new stuff that the training folks decided what to put on the site to make it easier for them to add new things, but still keep a consistent look and not have me do constant code pushes all the time to update stuff within. From my point of view, I would like to use SASS and Compass for the backend development work. It just makes working with the CSS and the styling side of things a lot easier and simpler for me. It’s something that I’ve been using and improved relatively, short period of time in the last year or two, but definitely it’s very useful stuff and very helpful.

So just a quick look at some of the benefits you can get from using the new system. This is one of our old pages and old aesthetic lining page. We’ve got a bunch of blocks on the right-hand side and those are physical Drupal blocks. So if you want to add a new block there, you’ve got to go add it on the “Add one block” page, edit it, position it correctly, all that kind of stuff.

On the new site, we basically converted that page into a single page with no actual blocks. Everything you see in front of you is all part and parcel of the node itself and it’s simply styled using classes that are provided to us pretty much by CSS. Obviously, you would need the full HTML text format. So it is one thing to consider when you're allowing other people, you may not be privileged to use this to add content to your site.

So what is this thing called “Twitter Bootstrap”? When I first read about it, I was like, “Okay.” People were talking about it all the time. It was kind of an abstract thing to me, but once I’ve been using it, I figured out it basically is a theme. That’s what you’ve – you’ve got to think of it as – you can look at getbootstrap.com for this is where all the information is stored, and it can be used on anything. This Bootstrap itself is not Drupal-specific. It can be used in any project. If you're writing straight HTML, you can just use it straight off. No problem. It was made by Twitter, hence the name “Twitter Bootstrap.” They use it internally, and I mentioned they released it as open source for the rest of the world to enjoy.

Some of its features, well, Bootstrap 3 now is mobile-first and also responsive. It’s cross-browser compatible and works well with IE8 and up. Nobody should be working with IE6 and IE7 anymore, we heard. Bootstrap 3 has a SASS and a LESS version. If you're using preprocessors, you don’t have to use those. You can just use a precompiled code for CSS as well. It comes with lots of very useful CSS and JS – JavaScript - components. It also has excellent documentation and a very big community. A lot of people have been using this framework as a theme. So there’s a lot of information out there on other sites that you can find useful tips and information. Just as a quick overview or a quick look at one little thing that they give you, a simple unordered list, if you just add two classes to the UL name and you have polls you automatically get inline navigation with the most run, a bucket on the active class as this is simply adding a class to existing HTML. So it really makes life for the themer a lot easier.

So how do we get Bootstrap into Drupal? So this wonderful chap Artoym who is here today, created a module or a theme – a base theme for us and we just enabled it on your sites and you are then able to use Bootstrap 3 in one of your sites. You do need to make a sub-theme, and we’ll talk about that in a little bit. There’s also a bunch of companion modules - or modules rather that work with Bootstrap in Drupal that can enhance its functionality, make it easier to use some of the Bootstrap components on your site as well.

So Drupal theme - it requires 1.7. Drupal core is Drupal 7 core. At the moment, I believe, is 1.4. So you do need to install the jQuery update module, or if you want to do it manually, which I don’t recommend, you can install jQuery 1.7 yourself. The problem recently was that Views UI used to break with 1.7. That has been fixed with more recent C tools updates. So that’s working fine now. But if you switched your jQuery to 1.8 or higher, Views UI will again break. So we usually use 1.7 as your jQuery option. JQuery update module allows you to choose different jQuery Views. I believe in version 2.5, which is not out yet, which is the next version, they will have a fix with this in that you can choose what jQuery version to use on your admin site. So your frontend could be 1.8, 1.9. 1.10, but then you just leave the default Drupal jQuery 01.5, whichever version you want as your admin, and that’s the way of Views you want to get. So hopefully, that’ll come out with 2.5. So your CSS preprocessor, the sub-theme of the Bootstrap Drupal theme currently uses LESS by default. I’m not familiar with LESS myself. I learned SASS, so I modified the sub-theme so that it uses SASS.

So what is SASS? LESS is also to kind of explain by this. They’re preprocessors, so you can write fancy CSS and have them compiled into regular CSS. SASS stands for Syntactically Awesome Style Sheets. You don’t want to say that too often too fast. It’s basically CSS with super powers is the way they like to think of themselves. It gives you extra functionality when you're writing CSS and your file is not called “.CSS” anymore; it’s called “.SCSS” or “SASS ECSS.” So one of the bigger things that I find for myself is variables. So like you're writing PHP, you can have a variable and you can assign it something, then you can reuse it later in your code. So the way it works with SASS is - the most obvious example that I can think of is, say, you have your theme based in color, so for us on Acquia, we have this nice blue color, and we can create a variable and we can say “Acquia dollar Acquia blue equals” and our hex code for that color. Then throughout out our SASS file, we’ll use dollar Acquia blue instead of the actual hex code. So then six months down the line, we have all our CSS working nicely. Six months down the line, marketing comes in and say, “Okay, we don’t want this blue anymore. We’re changing our colors to green,” or something. All you have to do is go back to your SASS file, change that one place where you set your variable to the blue hex code. You now set it to the green hex code, recompile your CSS, and everything changes to green, and marketing is happy. And you're happy because you only have to change one line of code. Another useful feature is nested rules. So a nested rule is basically when you have – a good example would be if you're trying to style a linked and an unordered list. You can have the rule on the UL. You can have the rule on the LI, and you can have a style, a rule on the A elements. So a normal CSS when you write it, you want to style your UL, you’d have UL open braces and your style. You’d have another line for ULLI open braces your style, and you’d have a third rule for ULLI A and whatever style you want on that. So it’s three lines; three separate sort of declarations. In SASS, what you can do is you can write just the UL open curly braces your style, and then before you close the braces, you indent, you type in LI, open the curly braces, write the style for that one, and then within that – within those braces, you put the “A,” also indent it. So you get this nice indented look. It makes it a lot easier to read and a lot easier to manage later on. So it’s just those kind of things that understands that, and then when it outputs your CSS in the end, it’ll limit actually automatically output those three individual styles that you’re used to seeing in regular CSS. The other thing that SASS brings to the table is mixins. It took me a while to figure out and understand what mixins were, but basically they’re just functions or scripts, if you want to think of it that way. So for example, if you want to do the rounded backends that you saw on that poll button, that is just a border radius declaration in CSS. But if you're – you may know that each browser has its own prefixer browser prefixed on the border radius. Let’s say, you can have moz-border-radius or webkit-border-radius; so it’s depending on the batch type of things out all the time. You need for – to have one border radius, you need to write four lines of codes. So basically a mixin would be you would have a function, you’d say, at the fourth – or add include border radius and then the number of your border radius and pixels, and then you would just mix them, that would then output the four lines of code that you need for each browser and the final border radius; very useful, very powerful. You can do some crazy stuff with that as one of our frontend guys does some pretty astounding things with this. So SASS needs to be installed locally on your machine where you're developing, let’s say, Ruby gem, just a little module for Ruby, and that gives you access to be able to use SASS and try to understand those kind of things for compilation later on. And it is compiled into a regular CSS file. So from a .SCSS file and with all the kind of codes stuff that you have in there, you’re basically just going to output a regular CSS file. You don’t have to do anything. You just run the compiler and it does it for you.

So let’s have a look at how we set up our sub-theme. So when you come with the base theme, you don’t really want to modify the base theme, because if you need to update it later on, then you're just going to wipe out all the changes you did or you're going to have difficulty implementing your changes back in the theme again. So Bootstrap Drupal theme gives you the option of creating a sub-theme. The default tutorial comes with LESS, which is fine. If you want to use LESS, follow the tutorial. No problem. So the basic concept is you need to download Bootstrap files and in your sub-theme, you create a Bootstrap folder. You add in the JavaScript – you have a folder for JavaScript, a folder for fonts, and a folder for CSS as well. Now, the JavaScript can be – well, let me start from the beginning where there’s the JavaScript thing. Bootstrap offers you six to eight different JavaScript to do functions or components, and you can include one or any of them in your sub-theme, or you can include them all in one already minified, compiled JS file, which is only 29 KB. On our site, we just use the full JS file, because we’re not sure like maybe later on, Heather’s going to decide she wants some new Avanti functionality. If she wanted that and it wasn’t already in there, I’d have to go push some codes to make it happen. So just install the whole thing. It’s only 29 KB. It’s not a huge deal. The fonts are the icon fonts that come with Bootstrap and the CSS file is just one big CSS file for all the Bootstrap CSS – all the styles that you already have available as the components.

So to make it SASS-friendly, we have to import. We use @import bootstrap in our main SCSS file that gives us all the mixins and those kind of things from Bootstrap. If you're going to be using Compass to do the compiling for you, you're going to have those config.rb; it’s a Ruby config file. You need to require Bootstrap SASS in that file as well. If you don’t understand this, don’t worry about it. When you start developing with SASS, you can come back, look at these slides, and you’ll get the hang of it. Each of the Bootstrap JS files, either the full JS file or each one needs to be added to your .info file, so they’d get loaded. The icon fonts are loaded using @font-face in your SCSS files. You can pick one, whichever one you want to use.

So this is kind of the layout that we have for our sub-theme. So we have the Bootstrap folder with the fonts, JS, and CSS folders. We have a separate CSS folder where our compiled CSS ends up into a single file. We have a SASS folder and in the LESS version of this sub-theme SASS, which is your replacement list, we have a folder called “Components,” and in there we create separate SCSS files for whatever kind of setup you want. So for us, we created a separate SCSS file for each sort of content type. So we have one for events, one for courses, one for general stuff, one for the home page, things like that. We will also have a styles.scss file in it and all that file does is import each component, and each component file in the components folder has an underscore in front of it that allows it to be imported only and not used in creating a new separate CSS file for each of those components. All those get compiled into styles SCSS, and then that gets compiled into styles.CSS later on. We have a templates folder for all our template overrides; node TPLs, page TPLs, those kind of things. We have a theme folder for some includes; preprocess include, theme include. We have our regular info file, our Ruby config file, and then also template.php, favicon, logo, screenshot; so those kind of things. So that’s what our sub-theme looks like and it’s more or less the recommended layout. Depending on how you work, you may want to change it a little bit.

So some of the modules we used, just to make things look better on the frontend, not everybody’s Bootstrap-related here. This is just general modules for doing stuff. Field Group - great little module, can be used to group fields on your node form as well as on the node display. Most useful thing in field group for node display is it provides you some elements that are HTML5 elements. So you could add like an aside or section element. Another module, Field Formatter Class, very useful, especially if you want to add specific classes to fields for output, and when you're using Bootstrap, it’s kind of useful to be able to do that, because then you can make your fields automatically have whatever styling you need just by adding that single clause without you having to override fields in the template file or something. Block Class does the same thing. It allows you to add a specific class to a block so it’s customizable. Font Awesome was something we used just to throw in a couple of icons here and there. It’s just – naturally, it’s another icon font and you just add a class to whatever thing you want and you get a nice icon on that. DraggableViews is more an admin useful module. It allows Heather to reorder the courses as she needs them reordered, whether it – most likely it’s not going to be alphabetical, so the view that outputs the thing is not going to be – you can’t just sort on random sorts. It will allow her to play around with that. We use Gmap for our main event page map and on each event node, the maps. Finally, we have Views Bootstrap, which is Bootstrap-specific, obviously, and allows – it gives you new view styles, then output your view in a Bootstrap friendly way using Bootstrap structure and classes.

So just a quick look at Field Formatter Class and Block Class. I’ll talk more about Views Bootstrap in a little bit. So Field Formatter Class on your managed display tab for your content type, you're going to see down at the bottom where it says “Class: pull-right, margin-let, margin-bottom.” Those are classes that we have in our theme and you can just assign to the actual field. For Block Class, when you configure the block, you’ll see another input field there, CSS classes, and you can add whatever classes you need in there. The col-md-6 is a grid class from Bootstrap, and Bootstrap is a 12-column grid, so by using the number six, we are saying this block is off the width of the page. I’ll talk more about the grid in a little bit as well.

So let me just show you live what those things are. So this is our display for events, and you can see your class here. So when you click on figure for the field, you simply just get a single input field and you can put your classes in, in a line separated by spaces. Then that works the same way for blocks. So here’s our nice map. So we’re just looking at what Gmap can output. Each of these little markers is a node and we use the location module to geo-locate an address, and then Gmap reads in the latitude and longitude of each little marker on the page for you; and each of our nodes has the same thing; it has a little map. Gmap is really useful. You can change the style depending on – you can output the size and all that kind of stuff.

So just a quick look at some of those things we do with those frontend things. Let’s go back in here. So some other Bootstrap modules that exist out there, we didn’t use them. Bootstrap Field Group, it allows you to do navigation, and navigation’s kind of set up on the frontend. It creates – the way you need it set up is you need to have a bootstrap field group, which has a class of nav or you choose - it’s a field type, a navigation group icon – item, and then you would have a second field group inside that for each navigation item, and within each of those field groups, you can have your fields. So it kind of duplicates what the Quick Tabs module does and then you can just click each tab and you would then see the content for the fields that were underneath each of those tabs; very useful. We didn’t use it on this particular site. I have used it on other sites; it’s quite nice. Display Suite if you like to use display suite for doing your frontend display. There’s a module that provides you Bootstrap compatible layouts using the Bootstrap grid. Also very useful; I have used it on other projects. There’s, of course, Bootstrap layouts, styles, and tabs for panels module. That’s pretty much the major sort of ones that you're going to be looking at. There’s a bunch more and as usual, searching for stuff on drupal.org is always – always it’s something interesting that’s going to come up.

So let’s look a little bit more in detail at Bootstrap and Views, seeing as most people are going to be using Views on your sites. On this page, this is a track node and each track has a bunch of courses associated with that particular track. So we’re showing - on the right-hand side of the track node, we show an accordion display and that is using the Views Bootstrap module. So you just click on the title and it’ll collapse it and open it as you go along.

So at the moment, we’re using the 3.x-dev version of the Views Bootstrap module. There was some issue with the current stable release. It didn’t work particularly well with the new Bootstrap 3 as far as I recall. There is a newer dev release out and as soon as there’s a proper release past January 31, 2014, it’ll be fine to use that stable release. So what does Views Bootstrap give you? It gives you a bunch of new styles that will basically be Bootstrap components. So Accordion which - just the open and closing of information. The Carousel slide show, kind of what Views slide show does. The Grid, same as the regular Views grid, except it uses Bootstrap classes. Media Object, it’s not video or audio. It’s actually a blog display. So if you have a small icon on the left, then your text for the blog teaser on the right - so a blog listing page or Twitter tweets listing page, that kind of thing. It has special formatting using Bootstrap classes for that. You can now put tabs, tables as well. Bootstrap has a bunch of different designs for tables and it also can do thumbnail layout. These are all Bootstrap-specific layouts. So if you're looking at a View, under format you will see these options listed. Choose the one you need. You can always check on Bootstrap documentation and see what is actually going to output. We’ll go through these in a little bit as well.

So let me just show you the track page. So here’s our track page of content management, and these are the courses - two of the courses in that particular track. So this is what an accordion is. You just open and close this button that’s basically using this one, this view which is Bootstrap accordion. It doesn’t have a lot of settings. The only setting it really has is what’s in the title field, and the title field is whatever is displayed here is the thing that you're going to click on to open and close your accordion. The one thing to note is that title field, make sure you're excluding it from the display. If you don’t, what’s going to happen is when you open this thing, you're going to see the title listed again right here. So you’ll probably know how much you want. What else? So the View – okay. Home page, this is our carousel or Bootstrap provides you. You can see here when you move to the right, you can scroll left or right, and that’s all straight Bootstrap. In fact, this particular carousel on our home page, we did it manually. So it’s actually embedded inside the node rather than using a view. We didn’t want to create a new content type just for a couple of slides. It’s not something that we’re going to be changing that much. All right. So that’s the other advantage is you don’t necessarily have to use Views or anything. You can manually type in all the code that you need and relatively easy to do as well. Okay.

So let’s look at the grids and a bit more about the responsive stuff. Bootstrap grid is a 12-column grid and it provides you with a couple of extra options that I’ve not seen before in other grid systems. On Acquia.com, we actually use Omega 3 and the only thing it has is a grid class with a number. So it’s basically grid 5, we’ll use a five-column display for whatever element, but Bootstrap gives you a few more options where you can specify at what breakpoints you want the element to use that amount of columns or when you want the element to actually be the full width or horizontal field types. So it’s a little confusing at first, but basically if you looked at, for example, col-md, which is for medium devices, we have an example on outside where we have col-md3. So by using three, it’s a quarter of 12, so that means you're going to get four blocks across the page. That’s using a quarter of the page and we actually have a display, we’re going to have four blocks. Then we move down below 992 pixels, it actually drops it down to two, and then obviously on the front, it will become one. So you really – for this kind of getting the grid options correctly sorted out, play around with them a little bit just to see exactly what they’re going to do. It took a little while for me to understand how this concept works, but very handy that you can actually specify the different breakpoints of when things are going to happen. You don’t have to do any coding for this. It’s all done for you by Bootstrap.

Some of the other responsive elements that Bootstrap gives you, responsive tables, very useful. Most tables, when you look at them without doing anything on the font, they kind of stick out to the right, break your display a little bit. Bootstrap gives you a table responsive class that you add to a third wrapper around your table, and essentially what it does is it makes your table scroll within the width of the font. So it doesn’t stick out anymore. You're just able to scroll left and right. It’s quite a nice option. I kind of liked that. A couple of other people have solved responsive tables in other ways. Some people collapse them down into lists. Other divs manages to keep the table in a table look, which I think is probably – for me, I find that the nicest solution. All right. And a bunch of other responsive helper classes. So if you want certain things to appear on bigger screens, but not on the font you get these classes for hidden or visible, and depending on what way you want things to show up or be hidden, you just choose the right class, and then Bootstrap handles the rest; very useful. We use this kind of stuff on Acquia.com. We actually do some stuff, but we had to write our own class, it seems, on Bootstrap. Yes, very useful. The other thing Bootstrap gives you is an image responsive class, which you just add directly onto the image tag, and that will make the image then responsive and resize down when you shrink your screen. Quite often, people will just basically blanket all image tags, all image elements with this kind of class in their own CSS. Their work generally may not use image responsive, but if you want specific image – if you're not doing that and you want specific images to be responsive, this is the class to use.

So a couple of other components that are available – there’s a lot of them. I’m going to go through a few. So some of the CSS stuff, just a bunch of classes that you can add on things. There’s this cool thing called “.lead.” It makes your font a little bit bigger. So it’s like an introduction for the text. Bootstrap does some cool stuff with lists. You can have inline classes to make the thing automatically inline. There’s some stuff for code formatting, headers, those kind of things. Forms are really nicely handled. You have a nice inline option, so that you can get input fields together on the same line. Quite often you want to do that with like first name, last name, those kind of things. Bootstrap makes all that kind of stuff easier to read. It’s really useful for keeping your forms standardized across various browsers. Buttons, super cool stuff, we use a fair but you have options for different colors and you can override those colors in variables in your SASS files. There’s different option - different classes with different sizes of buttons, different states of buttons; so like if it’s active or that kind of stuff. You can also group buttons together, so that if you have three or four buttons grouped together, you just get a vertical divider between the buttons and only the first and last one get the rounded corner. So it looks like a nice button bar. I’m going to demo – oh, I’ll show you what these things look like in a minute. Glyphicons, obviously, is your icon font. Jumbotron is a big announcement kind of block. It’s a particular format of HTML that you need for this to work, along with the class; very nice on the front page if you want to have product announcement, those kind of things. It has panels of the Drupal module, just – it’s like a highlighted header with some text load wrapped with a nice border. We use some of those on our sites as well.

So let’s have a look – so I’m just going to quickly show you panels. This is what I mean by panels. These four blocks are a panel – each of them is a panel, and these are the ones that I was talking about that have the grid class where they use a three-column – we’ll be using up three columns each. So when you shrink down your screen, texts get a little bit narrower as you go down. But when you get down below 991 pixels, it becomes a two-column option. Then eventually when you get down to mobile, it becomes full width.

Let’s have a look at some of the other CSS components. So typography, go over the headings. So it makes the font less big. Tables - you have different options for tables. You can just have plain tables of the vertical lines. You can have striped, bordered. Hover means when you move the mouse over, it gives you a highlight for the entire row, kind of nice if your tables are kind of big and you want to be able to see stuff easily. Forms, very useful, very standardized. This looks really pretty. Buttons, these are the different – the main nav and it’s just a different class depending on what you want to show. Sizes. And then states – so active state, you can – just by adding the class, it changes the format for you. A bunch of helper classes, so you can have backgrounds, those kind of things. All right. There’s a lot of information here. Whenever I’m working with the Bootstrap theme, I pretty much have this page open all the time, just to look at stuff, see what classes I can find, what classes I’m going to use, because usually quite often I’m finding new things like, “Oh, that’s an interesting way of doing something,” or I can also search, Google it, and other people have come up with some pretty interesting ideas about how Bootstrap altogether. So that’s basically the main CSS stuff.

So let’s have a look at some of the JavaScript things that they offer. You’ve already seen the accordion and the carousel. They have the modals option, so that you can pull out content that’s already on your page in a modal. So you click over button, maybe you hit in that content before. You click a button and pops it up nicely for you. It can also pull in the remote URL. It has tooltips which is essentially the same as when you hover over an element that has a title attribute and a choice it takes as in title. Tooltips does a similar thing. It’s a bit more customized. It looks a little nicer. It’s also fast. I find that the regular default tooltips, you’ve got to hover for like a second or two, and then it pops up. The Bootstrap tooltips pop up instantly, which is really nice. Popovers are basically like a callout. You click a button and the little thing pops out the side with a bit more information on what you want, on whatever you’ve clicked on; very useful if you're into those kind of things. Affix is the other one and that gives you like a sticky sidebar nav. I’ll show you those now.

Let’s look at the components. Oh! Yes, this is the button groups thing. Let me show you. So these are three separate buttons, and then when they’re grouped together, it makes it look like a nice button bar. Okay. So some of the JavaScript stuff, so modals, you have a little animations in these buttons. You click it. You get a nice modal. You can have buttons in the modal. You can do all sorts of cool stuff in there. You can see there’s a bunch of other ones: dropdown, tab, all those things. Tooltips, let me show you – where is it? Yes, so like on our event page, your service sticky sidebar, but each of these icons has a tooltip. It’s this little black or dark gray popup. It explains what the icon is. This button has one as well. This gives you a bit more information; very nice, very simple to do as well. Popovers – okay. So that wasn’t very clear on the way I explained it. This is what it looks like. Basically, it’s open and close on click, rather than a hover, gives you a nice formatted title and a bit of some text here. Then affix is a sticky sidebar which I’ve used it. You can see this manual on the right here, it doesn’t change position at all. Affix has a whole bunch of different options and I haven’t used it myself. Our actual sticky sidebar is done differently, but that’s – it’s got some fairly interesting options. So that’s pretty much how - a look at Bootstrap and how we used it. Our entire site is responsive obviously, we try to use the classes as much as possible. That avoids any inline styling. We have no inline styling on this site – on the training site. Heather can then – as I’ve mentioned, she can come in, add some stuff. She did – I can show you the private page again. That’s the old one and the new one. All of this is basically within the node itself and she made this all just by looking at the various classes and seeing what they can do. So it’s a bunch of panels with grid classes. Let me show you here. Let’s see, it’s a little bit slow to look at it. So we’ve got a col-sn-6. So it’ll - and you can collapse down on small on the font. You’ve got your panel headings, panel title; and you do have to follow some HTML structure to get these things to work correctly, but I think it’s a pretty small price to pay to have the nice functionality that Bootstrap offers us. And it really does make my life a lot easier. I haven’t done any CSS pushes since we launched, and Heather’s been able to manage the site all by herself. No problems. So that’s pretty much it. If there’s any questions, I’ll be happy to take them. Thanks for listening.

Heather James: Thank you so much. I’ve sensed other people are probably thinking of questions, Dave. [Laughter] I know I’d add some. I thought it was interesting that after I did a little blog post about this live tutorial you’d be doing, that we had a little controversy internally, and I thought it’d be interesting to talk about that because people may be wondering when it’s appropriate to apply this and when it’s not. [Laughter] So just to give people some context, one of our colleagues sort of didn’t – he’s sort of like, “Oh, no. This is a dangerous technique, because it means people will say, ‘Oh, we can just have unfiltered full HTML in all of our body fields and do all of our layout within our body fields.’” The stories from my experience from the old site, I had only a handful of one-off full pages like that private training page, and I would only be using those blocks on that page. So I was actually putting a lot of overhead on the site, having to go create a blog and then control it’s visibility to get it displayed the way I wanted it to look. So it wasn’t really the right use of that tool either. So when I saw this solution, I thought, “Oh, this is going to save me a lot of time.” So Dave, I wonder if you wanted to sort of say what your response was about when this is not an appropriate technique and not an appropriate theme.

David Myburgh: Definitely. So yes, like I did mention, for some of the elements that you want, some of the components that you want to display, you do need to have the ability to answer full HTML. Those H3’s with a bunch of classes, by default, the Drupal filter system that takes formats filtered HTML would just strip all that stuff out in one word. So you do need full HTML and of course, with full HTML allow – users can then also post in stuff like scripts and do all sorts of crazy stuff. So you’ve got to be very careful about who you're allowing to edit, take things/stuff on your site. If it’s only your admin users that are going to be editing stuff, fine. Give them full HTML; that’s okay as long as they know what they’re doing. If it’s open to regular authenticated users, you're probably looking for a bit of trouble there. It’s not recommended. So allowing the general public to use Bootstrap elements for display is probably not a brilliant idea. This is more for the backend, so admin people and possibly trusted editors, those kind of things. Really, what I would like is – sorry. What I would like to see is – I just thought of this today, actually, when this discussion started - is some way that we could allow classes to be added into filtered HTML. I haven’t looked to see if there’s a module. There probably is a module that does that already. But yes, that would be an ideal solution. So if you can add a class without having to add – without the ability to add full HTML, which would include scripts and unpleasant things like that.
Heather James: Yes, definitely. I think that one of the – I sort of had a further conversation with another colleague about this and we discussed the particular client situations we see – unfortunately seen a few times where on the content type, they’d have multiple body fields and they’d have one body field that would allow their site builders to do something like you’ve shown, that they could have multiple columns and unfortunately, using things like table base layouts where they’re migrating old HTML content over, and then they’d add a second body field for their mobile site. So they’d actually be using a mobile redirect and they would have to select and show a different body field that would be mobile friendly. So this solution is quite different, because when I set in those panels, I can also specify not only that it’s – how many, I suppose…
David Myburgh: Columns? Columns, yes.
Heather James: …columns, yes, in the grid. Excuse me. [Laughter] But I can also specify how it should behave when the page gets resized, because it is responsive out of the box. So it’s quite different from even what some of our problematic client situations are. So I hope with that, people got their curiosity piqued to try this out. I wonder if there are any questions, Hannah, from the audience?
Hannah: Yes, the first question is “Where can I find documentation defining the classes available?”
David Myburgh: Okay. So that’s all on getbootstrap.com. Let me show you. So this site – yes, let’s go to the top here; pretty long. So if you go to getbootstrap.com, you're going to find everything there. They’ve got the CSS stuff, the component stuff, and the JavaScript stuff. So it’s all here. Like I said, every time I’m working with Bootstrap, I pretty much always have this open. It’s a great reference tool; documentation is very good.
Hannah: Okay, if anybody has any additional questions, please ask them now. [Pause] All right. That’s it for questions. Dave, thank you so much for the great presentation, and thank you so much…
David Myburgh: Welcome.
Hannah: …Heather, for joining us as well. Again, Crosstalk recording will be posted to our website in the next 24 hours. Dave and Heather, would you like to end with anything?
Heather James: No, I just wanted to add that we have a couple of webinars coming up. If you are interested, there’s actually one specifically on mapping and that’s with some Drupal like me folks. So if you saw the map that we have on our site, you may be curious about how to integrate maps in yours and that might be useful for people.
David Myburgh: Yes.
Hannah: Okay. Great. Thanks so much, everyone. Have a great afternoon.
David Myburgh: Yes. Thanks.
Heather James: Bye
David Myburgh: Bye.
- End of Recording –

Drupal Step-by-Step: How We Built Our Training Site, Part 1

Click to see video transcript

Moderator: Today's webinar is Drupal Step-By-Step, How We Built Our Training Site Part One with Dave Myburgh, who is the senior engineer here at Acquia. We're excited to have Dave on the call. Heather James will also be on the call, who's the Manager of Learning Services here at Acquia.

Dave Myburgh: Today, I'm just going to go through some of the site architecture and construction of how we moved our old training.acquia.com site from Drupal 6 to Drupal 7. A little bit about me, I'm a senior engineer at Acquia. I've been here for about two and a half years now. I'm the lead engineer on acquia.com I also have a bunch of other small sites that I look after, including now training.acquia.com.

The things we're going to cover today is a little bit about the site architecture, some of the modules that we used in building the new site. How we put together some of our content types. We'll talk a little bit about the data migration from Drupal 6 to Drupal 7. I'll show you some interesting views where we throw in a couple of arguments on contextual focus. Then in the last two little bits we're going to talk about how performance got improved a little bit and how we made maintenance easier for all of us involved in the site.

Who will benefit from this talk? Developers and site builders mostly. If you have some experience in Drupal, that will definitely help you out a little bit, but if you're new to Drupal as well, you'll definitely pick a couple of interesting and useful tips.

Just a preview of where we were and what we ended up with. On the left is our old training sites kind of 90’s style looking and I think we did a fairly good job upgrading it to a more modern look. Definitely a lot easier to use now as well.

Some of the requirements for this project; we wanted to keep the basic site architecture the same. The landing pages, content types more or less the same. We did drop some content and we did add one or two new things, but for the most part the main architecture is more or less the same. What we wanted to improve was a better editing experience for us as admins as well as for the partners, who are actually creating the events on the site for us. We wanted to better handle the Events Status, because sometimes we had issues where an event got cancelled and it was a complicated process on how to manage cancelled events. Publishing Workflow, we wanted to help make that a little bit better and if I need to use the management for the partners on how to deal with the bunch of stuff on the site for them to make their life a lot easier.

Some of the building blocks. Right. I'm streaming to a demo. I will show you a little bit of the site looks like right now. Here's our front page. I'm just using a local copy of the site just so that we don’t have any issues, technical difficulties. The site focused on events. We're going to look at the upcoming events. We have a nice map and at the top, we show online events and then we show our various in-person events. I'm just going to pick one of these guys. There's one group of module development.

This is the Event Page. We have all the various important information on the right side. We show some information about the course that the event is going to be doing. Click through unto the course that's related to this event. It'll tell you all the details; the level, the track that the course is in. So several courses can form a part of a certain track. You'll see the upcoming events for a particular course. I'll click you through to the track. So this is for developers and these other courses that you can find for this particular track. So we have three content types here that we're look at now. We're having an event node which has a node reference to a course which itself is a node reference to track. All right. So that's basically an overview of the most important part of the site.

All right. So next. So our main site architecture; events, courses and tracks. We have a couple of static landing pages for general information. I think resources, private training, that kind of thing.

Let's look a bit more in depth at some of the content types that we have. Event Nodes. The Event Nodes have the location, the date, the cost. That's the actual thing that you're going to be attending to learn about a particular subject. The Course Nodes, which are a node reference from the event have the learning objective, the pre-requisite, that kind of information. Finally, the Track Nodes are simply a grouping of courses. Like a category but we're using node reference to link all of those together.

Event Nodes. These are created by our partners. They have, like I have mentioned already, a node reference to a Course Node and by the node reference we actually displayed the course information or a brief part of that information at the top of each event node as you saw. The address for the actual event is handled with the Location Module. In fact, our Drupal 6 site and our Drupal 7 site both used Location Modules. That actually made our migration, which I'll talk about later, a little bit easier. Events can be in-person where you go to a place to actually physically attend it or they can be online. That designation will affect the display of the map. If it's online, obviously, there's no physical location so there's no need for a map.

Then we have Events Status Options. So when the partner is actually creating the nodes, they can set the status of the event. We have a Draft Event which is not visible to anybody. We have Cancelled Events which are, as well, not visible. Then we Tentative Events which are events that are probably going to happen. Finally, we have Confirmed Events. I don't know if you'll be able to see those two, but I'll show you a bit more in depth later. Some of the content type changes are quite nice, especially moving to Drupal 7. We have vertical tabs which make organization of the various fields a lot nicer visually. It's easier to follow the track of the node from where things are. It just makes it easier for everybody to handle.

All right. A little bit more detail on the Events Status thing because this is one of the more important features that we added to the new site to help everybody. As you can see, the field is a list field using radio buttons. So you can only select one thing at a time, obviously, and depending on which option you select, different things will happen to the node. You'll see a different badge or button displayed on the actual node itself. As I mentioned, draft and cancelled events are unpublished so people don’t get to see them - the point is if it's not happening.

Tentative has the orange button. Confirmed is green. We actually use pre-processed field function to install the button. Adding a class to the icon and the pop-up text. When you hover over something, you'll see some interesting texts. Particularly the Tentative Events, we link to another page which explains what the event is. Those buttons then get displayed on each Event Node right next to the event detail.

Let's have a like at the node form. I'll show you how the Event Node has put together. So I'm just going to use this same event that we looked at a little bit earlier. We edited it, we got the title, the usual kind of thing. We have our node reference link to the Course Nodes. So we just simply list the various course nodes to choose the one that the event is going to be on. Our Events Status is positioned just at the top right. That's pretty important so we did some special formatting just to have it nicely positioned. The regular body - just so in case you're wondering, I'm using [BU] editor as the default editor. I don’t personally like [BU Editor], they do weird things. Hopefully in Drupal 8 that will be much nicer.

A couple of other things. Text Formatting Help. I just took that out of the way. Here's a signup link. Each department will have their place that we actually go do the signups. We've grouped some of the details together in a vertical tab. So dates, costs, delivery, and the language. Location is the Location Module. You enter in your various address details, you got a little nice map that automatically geo-codes the latitude and the longitude which we'll then use later on the main Events Page. All the Event Nodes get shown here. Then Provided is just a bunch of things that will get provided at the event.

That's what the node form looks like. This is what the partners and the administrators are going to see. Let's have a look at how this was put together. Content types, and then managed fields. Using Field Group Module allows us to group stuff really nicely. Status for the Event Status section. That is a couple of external things we can add. Different types of fields, not just regular field bits or in case the details of the vertical tab. This one is using a HTML 5 site field type. It's just a way to differentiate. That allow us then to target the status field group and stick it over to the right. The rest of the stuff is just the main body. Group things together nicely. You can add classes and stuff to do whatever special styling, kind of things you need.

On the display sites of managed fields, this is what the form is going to look like when people edit the node. Display is obviously what gets shown up on the front end. We have Event Details. We have basically status, body and location. That's the only thing that gets shown through the node display settings. But if you remember, we have all the actual event details on the right hand side and that's done with the View and I'll show you that in a little bit later as well.

That's just the basic idea of how we put together at least the Event Nodes type. You can see here we use the module as field formatting class so that we can actually add specific classes to the fields for output. Sometimes, the default classes that Drupal has are not what we want or they're too generic. It’s always nice just to throw in your own classes. It allows you to do fancy things like have generic classes like adding a margin to the left and to the bottom if you want rather than having to style and add a specific CSS thing in your custom style sheet. You can just add in existing classes.

Let's carry on here. Some of the modules we used for that field formatting class like I mentioned, it's the custom class on a field for display. GMap actually outputs the map on the node themselves and uses the location information. Then obviously, Location is for adding the address. It does the actual geo-coding on the back-end for us.

Data Migration. Initially, when we said okay, we're upgrading from Drupal 6 to Drupal 7, the initial thought is usually, “Okay. You just run a regular update.” But with any site that has more than like one or two content sites, usually you're going to run into some kind of weird problems and you end up spending a lot of time trying to fix stuff. My Preference, and I don't think I've actually ever done a regular Drupal 6 to Drupal 7 update, is to actually migrate data.

There's a couple of advantages to this. One is that you can exclude data that you don’t actually want anymore. You can also finesse the data, or tweak it a little bit if you need to change some stuff. Sometimes, an old site might have the date in a weird format and you want to use the UNIX timestamp in the new site. During migration, you can actually do things like you can actually change the way the data is. To migrate the data in this example in the site, I used the Migrate Module.

Now, in other modules that I used that works with Migrate is called Migrate D2D. This is a Drupal to Drupal Migration Module. It's build specifically to migrate Drupal 5 to Drupal 6 to Drupal 7. In fact, this is more or less I think what's pretty much going into Drupal 8's core setup, which is kind of nice. The nice thing with the D2D Module is it gives you a user interface, but the one caveat at the moment is that you need to use these two specific versions of the module; the RC1 of Migrate and the 2.1 B21 of Migrate D2D. Without those versions, you don’t get the user interface. So just be aware of that.

The way we did the migration is we initially first migrated our user across. What that does is it allows the old user IDs to be matched to new user IDs. Then when we import our content, say, Joe Shmoe created a page or also an event or something, his new user ID which is probably going to be different in the new site will then get correctly assigned to the node so you don’t lose your authors for the various bits of content.

The other thing you better watch out for when you're migrating content is that you migrate content in the right order. So users usually come first. If you have files to migrate, you want to migrate those pretty much next. In our situation, we have Tracks, Course and Event Nodes which are all nodes referencing each other. We want Tracks first because Courses need them, and then we want Courses before Events because Events need a node reference to Courses. You've got to migrate that content in the right order. During each migration of each type of content, a map is created by the Migrate Module and the map says, “Okay. This is the old node ID. This is the new node ID.” When I'm migrating the Event Nodes and I'm linking to Course which had an old node ID of, say, 25. The new node ID is what, 300 or whatever, it will map correctly and you'll get data linking to the right stuff.

The only custom work I had to do in this migration was for Event Nodes, which is one of the major benefits of Migrate D2D. That's the link for the module. It gives you a very nice user interface where you can click what the source and what your destination fields are going to be. You can manually set some fields, and basically you have to write a whole lot less custom codes. I don't think if you can see this too clearly, but basically on the left-hand side you're going to get your destination fields.

This is all running on the Drupal 7 site. You already have your content types created with a field that you want. So they're all listed on the left-hand side. The source field, which is the next column, you get a dropdown for all the fields from the content type that you're importing from and you can map them to whatever fields need to be. You can set a default value, which is the third column there.

Then in the last column is called the Source Migration. Once you've migrated anything like your users, you can what they call a Source Migration. That Source Migration is the mapping of the old user ID to the new user ID. If we were importing Event Nodes here, you would a Source Migration for your Course Node reference field so it would then map the correct course node IDs to the new nodes.

The custom module that we did for the events, I had to do that. There was no avoiding it because Migrate doesn't know how to handle the location field at all. I think it was called CCK Location in Drupal 6, and it doesn't have any migrate settings for that, so I have to do it manually. The location is obviously on the Event Node. We also didn't want to import all the very old events. We just want to basically the most recent and anything obviously that's going to be still coming up.

Let's have a quick look at the code that I did. This is very, very simple. If you didn't use Migrate D2D, you would then have to create the same custom module but you would then physically have to write in here all your mappings for each field. What your source field is, what is the destination field is, all that kinds of stuff. You'd have to basically write a whole lot of codes to do that. In this case, the most important thing that I needed to do was make each location field - so address, address to, cities, state, country, that kind of thing - available as options in the Migrate D2D UI. Then I can just simply map it to the new fields. What we do is, in your migration class, you create a new migration class and you basically pull in the main query, the database query that Migrate is going to be doing. You join in the tables that the old Location Module in Drupal 6 used.

The last line in the field, basically you say which fields you want to map. So if for whatever reason you didn't want to map the latitude and the longitude field, you could just exclude them. You don’t list them there and then they don’t show up in the UI. I pretty much just took every single column and if I didn't want to use it, I simply don’t map it in the UI. I just leave it blank. By doing this, I would then have all the location bits of data. A separate field that I could then map to the new location field in Drupal 7.

The other thing we wanted to do was exclude the old events content. So in the function prepare road, you do this kind of stuff. This allows you to modify your incoming data if you wanted to. Like I mentioned before, if your data was in a weird format and you wanted to change it to a different format, you could do it here. The other thing you do is you return “false” or something and that basically makes sure it does not get imported. What I did is I checked the event dates which is using value “2” which would be the end time of an event, making sure that that has passed. I check what the current time is right now, what the time I'm doing this migration. If “now” is greater than the event date; in other words, has the event passed? I return “false” which means, “Just ignore it. Don’t bother with this road. Leave it alone.” Then afterwards, you just need to return “true” and so if now it lists an event date; i.e. the event in the future, it's going to return “true” and it will continuing doing with whatever it needs to do to migrate the data in.

That's literally all that I needed to do and write custom code for the migration anyway. A lot easier than having to write hundreds of lines of code to do mappings and that sorts of other things.

I want to do some interesting views. Most of the content is normally accessible. We don’t really to do anything fancy. Except for if you want to have content displayed in a nice way in certain cases like the events having all the details on the right-hand side in a little block. The simplest way to do a lot of our stuff is using Views. Views is great because it has caching. You can do pretty much anything you want with it and it's the most used module, so everything works most of the time pretty well. We have used Views in various places to show things like upcoming events, the courses in this track as you can see here. These are all using contextual focus and, in some cases, relationships to actually pull in the data from other nodes that are linking to your current page or actually in the case of the event sidebar, showing content from the Event Node itself in a block. We do it on Event Node, Course Node and Tracks and I have a couple of administration views for some advance content management where I can search titles and that kind of stuff. The default Drupal content admin is lacking a little bit in some cases.

Like I said, Event Detail. This is actually a block created by Views and the View actually just pulls in the fields from the node that it's actually on at the moment and throws them into a block. Let's have a look at how that View is built.

This is the Event Detail Block. Basically, we're just creating an unformatted list. We have the field that we want to show in that block; signup, costs, state, all that kind of stuff. Obviously, always by default have it published and content type is for events.

Now, how does Views know what node it's on and what field to actually use? If you just did it like this and you can see it shows you just basically get the fields every single event node on the site, which is probably not what you want. We use a thing called Contextual Filters. Now, we use the node ID as a contextual filter. Let me show you how that's configured. By default, it says display all results from the specified field when both the values are not available. But what we do is we select provide a default value and the default value - you could specified a fixed value but we use the content ID from the URL.

If you look at an event node on our site, the URL is events/something and the name, the title. So it's using URLs. But in reality, the actual node URL is always going to be node/a number. In fact, the node ID. So Views knows this and it can always find that ID. It pulls in the I'd, it loads it up and it looks for the use fields and then generate a block for us. This is the node ID of that same node that you saw a little bit earlier, the Event Node. If you don’t have anything here, by default the query shows you nothing. There's no node ID.

Update the preview and you see all the fields. This is just the fields and they're pretty much they're in a raw state. We'll do some pre-processing on the View field to make them look all pretty. You can see it provided for you is just a straight text in-person, but when you actually look at the display here, it looks a lot nicer. Basically, what we're looking at is a simple contextual folder we're were pulling the node ID from the current URL of the node. So it knows, “Pull the information from this node, not any other nodes.”

Now, if we look at our Course Nodes, on our Course Nodes we show a block of upcoming events. These are events that have a node reference to the node you're actually looking at. So I call this a reverse node reference or a view using the reverse node reference. It's a little bit more complicated. Here's the View. In that table, we want to be creating a table, obviously. We want to show the title, date, cities, province, various information. Then we throw in a link to actually go to the Event Node itself. We have some folders. We have the exposed dates folder and country as well as an exposed folder. The magic happens in contextual focus again, using a node ID, as well as in this case, you need to use a relationship.

Because right now, if you used a straight node ID and you'll see it's being to be using the same setup where it uses content ID from URL. If you do that, you're looking at the Course Node because that's the node you're on at the moment but you want the Event Node that actually reference this Course Node. So we need to use a thing called a Relationship. Basically the only relationship that you can use are node reference fields. So we're using the relationship of field course, which is the field name that we use in the Event Node.

We just simply add it in and then we make sure that our contextual folder, content node ID, is actually using this relationship. By default it does not use the relationship, but like I said then you'll only be looking at the Course Node you're on and obviously you won't find the event fields. We use the relationship, it can then go through the reverse node reference and find event nodes that are referencing the node you're on and then show the relevant data.

Don’t worry if this stuff sounds a bit confusing, because it is. I struggle through it about how to set up these things. Once I've done it, I write down my instructions on what to do so, “Okay. User relationships, use the relationship on the contextual folders for the node ID.” That kind of stuff. Then if I don’t use it for a couple of weeks or a couple of months, I always forget. I just go back to my list of useful tips and find out how to do it. These are somewhat complicated things. They're not very intuitive. That's probably one of the more complicated kind of setups that we have for Views. We do this kind of View in various places. You can see it on the Track Nodes which list the courses that is using the same setup.

A little bit on improving performance. The biggest performance gain that we really got was just using Drupal 7 over Drupal 6. It has been caching of modules we use as much as possible. We have very little custom code. We only used custom code when it was absolutely needed. We try as much as possible to do everything with Views like you saw. I mean, you could write custom code to generate the blocks yourself but why do that when you Views. It does it all very well and has great caching. We actually only have eight blocks on the entire site and seven of them are actually created by Views. We have one custom block that creates the login link and it will use a profile dropdown when you're actually logged in.

Then performance-wise, for myself as the admin as the developer on the site, we were initially on SPN which is horribly slow. We managed to switch over to get the new site and it just makes my life a lot easier.

Maintenance. This one of the things where us as the admins, we're struggling a bit with handling a lot of the data and the content, dealing with certain events not happening or cancellation as I mentioned. So we created the Event Status setup, which depending on what radio button is checked, the Event Node will then automatically be published or unpublished. We do it using the Rules Module. So it will enter the value of that field and do stuff accordingly whenever the node is saved.

We gave our partners a lot more power to manage their own events. The screen show on the right is what a partner would see when they log in. They can see all their events. They can filter automatically by Confirmed and Unconfirmed which is Tentative and Cancelled events. The partners are the only ones who can see Cancelled Events because they're unpublished. We gave them bulk operations on each of these lists so they could then select the whole bunch of events and say, “Okay. All of these are cancelled.” Or, “All of these are confirmed.” As we go. We gave them also the option to override some of the stuff that's published and unpublished.

On the admin side, we use a theme called Shiny. It gives you nice big buttons. The text is a little bit bigger. It handles a lot of contract modules, like Views. It has scheming already for that just to make our life a bit easier. We could use 7, which is built in Drupal 1, but there are a few things I didn't like about it too much. Shiny just looks a lot nicer and fitted more with the front end view. The front end theme is Bootstrap. It looks a little bit like it. We can't actually use for the Bootstrap as the backend because Views does not work with it. Bootstrap requires jQuery 1.7 and the Views UI tends to break horribly if you do that with jQuery. We run jQuery update on the frontend but not for the backend.

Custom Site Module. Pretty much every site I've ever built is at least something that you want to write custom. You want to modify a couple of things, maybe tweaks to the user interface. On the admin side, override some theme functions. Field processing, that kind of stuff. You can also do some of those things in the theme layer as well, but sometimes you also just want to do in the modules so it's always ineffective regardless of the theme. So in Our Custom Site Module, we have things like collapsing the text format information. Below text areas, usually on the Drupal site, you can have a bunch of information about the text format using full HTML, those kind of things. Most of the time, people don’t really need to see that stuff as it takes up space.

I basically did essentially like a full alter and wrapped that whole little thing in a collapsed field set. Just using regular Drupal collapsible field sets. So it does it all by itself. I don’t have to write any JS or anything for that. I also added a documentation link just below that that information, so it's below the text area. That allows people who are editing the nodes if they want to add in some classes, to get some kind of an effect. Maybe to make a button or a panel or something like that. They get a link straight to Bootstrap information. They can see what classes they need to use, how they need to set up an HTML if they want to do that. That link was added in as well just to make life easier for everybody.

Then the Custom Side Module is also going to include some custom actions, which is what you saw with the partner/admin Cancelled, Confirmed, Unconfirmed events. Those actions we created and they're all in the module. Lastly, we use the module for the exportable. So Views, Rules, whatever else you want to export. All right.

That's pretty much it. If there are any questions, feel free to ask them now. I'm just going to the next slide. I'm just going to show you is, some of the modules we use that I may have not mentioned earlier. One was draggable Views. That allows our admin side people to reorder stuff in tables on our course listing views. You want to be able to reorder the courses randomly. It's easy to drag. You just look at page and drag it around. The Google Analytics EP Module allows you to add custom Google Analytics events on things. You just write a little bit of code. It's very simple AVI. You write some code and basically, you can say, “Okay. On this track, every button clicks to this button or for that link.” It will do it and automatically feed into your Google Analytics account. You'll be able to see events there of how many times people have clicked on Google and those things.

The other one, Menu Position, is for bread crumbs so you can say, “Okay. All Event Nodes should fall under the Upcoming Events menu item.” Then they get the right breadcrumbs. Just simple things like that's pretty much the main module to use for the site and use both operations obviously. That's pretty much it. Custom Modules, the Migration Module and the Toolkit Module. That's it. Any questions?

Heather James: Yes, I have a question, Dave. [Laughter]

Dave Myburgh: Sure, go for it.

Heather James: Yes. I don't know if I ever asked you. I'm curious, why did you use Views? I'm talking about the event display and the detailed information from the event, you put it over into a visual sidebar but it's obviously all the same node. Why did you use that instead of Display Suite in this case?

Dave Myburgh: Yes, a good question. I have used Display Suite on other sites and I do like it. We're only really doing something fancy on Event Nodes, so I don’t really see the need for slapping in the whole mess of things that Display Suite to do something fairly simple. If we had more content types and we needed to do more fancy stuff, yes, we could definitely switch to Display Suite to do that. Literally, this is the only content site where we were doing something like this. I did add some little JS to make this thing sticky. That was the other reason I wanted it in a sidebars so that when people are scrolling down, they'll don’t use the signup link as well.

Heather James: Right. Oh, very good. Well, another thing I wanted to know then about this issue, this choice that you're going to use, is obviously someone might hear this and think, “Oh, boy. There's like a map every time an event is loaded.” But you've obviously done some caching because it's a very speedy site.

Dave Myburgh: Yes.

Heather James: Could you show us how the caching configuration on that View?

Dave Myburgh: Literally, you don’t have to do anything. You just run it. You set up your View and it's automatically cached for you. The other thing is we use Varnish as a frontend cache. That also helps. I literally have not selected any specific caching. The default uses caching. It works fine with this setup.

Heather James: All right. Creative, cool.

Dave Myburgh: It's pretty straightforward. There's no craziness that you have to do with using Views. It's built-in cache is pretty much sufficient for everything.

Heather James: Cool. I was going to ask questions about like the use of Twitter Bootstrap and Views and then I realized; oh, we're going to actually talk about that next week. I'm really excited about that. It's made my life so much easier as well.

Dave Myburgh: Right. Yes. So yes, next week as Heather mentioned, we're going to talk about the frontend side of the site. How we used Twitter Bootstrap; how Views and Twitter Bootstrap can work together quite nicely. Grid system, responsive layout and all that kind of stuff. One of the cool things with the site and in fact, I didn’t mention it earlier is that the whole thing is pretty responsive and works really nicely on the mobile phone as well. It all works out-of-the-box for Twitter Bootstrap. You don’t have to do anything. You have to tweak a few things here and there obviously, but for the most part, it just works straight out of the box which is great saving me a little pain and something.

Heather James: Yes, and it all comes free. There's so much stuff that comes free with the Twitter Bootstrap. It's kind of shocking.

Dave Myburgh: Yes. I mean, all these buttons are just bootstrap classes. This little popup that you see in the black, that's just a bootstrap thing. There's a lot less coding and customization that you have to do with Bootstrap.

Heather James: Brilliant. Oh, gosh. I'm actually amazed. Hanna, are there any other questions from the audience?

Moderator: Yes. The first question that came in is; in pushing from SPM, did you just start with a new “get repository” or is there a tool to bring over all the history that is in SPM?

Dave Myburgh: I believe there is a way to bring SPM history across, but because the site is in Drupal 6 we didn't really bother. We didn't have a huge amount of history anyway. I literally I got the SPAM checked out and then just made that into a rule to delete the SPAM folder. It was pretty simple and then did the Drupal 7 Bootstrap on top of that to override the whole thing.

Moderator: Great. If anybody has any additional questions, can you please ask them now? Okay, I think that's it for questions. Heather and Dave, do you want to end with anything?

Heather James: Well, I just wanted to say I'm so glad that you could come in and do this presentation, Dave. The whole site is just so simple and really elegant. It's kind of funny when you're showing some of these tricks, it's like, oh, it means I didn't have to do a lot of work. I love your version of lazy [Laughter] and doing things in an easy way.

Dave Myburgh: I figure if I do things simple like that, it's actually going to save me a lot of time and you guys didn't have to come back and say, “Oh, wait. We need this fixing. We need to do this.” It's pretty much all done automatically.

Heather James: Yes, thanks. I'm looking forward to next week, too.

Moderator: Great.

Dave Myburgh: Yes, thanks everyone for listening.

Moderator: Yes. Thank you everyone for attending and thank you, Dave and Heather. Dave especially for the wonderful presentation. We can't wait until next week. The slides and the recording of the webinar will be posted on the website in the next 24 hours and we'll also email you a copy. Thanks so much everyone.

Dave Myburgh: Thanks, bye.

Heather James: Okay, bye.

Drupal 7 Tutorial: Features Module

Click to see video transcript

Moderator: Webinar is a Drupal 7 tutorial with the features module with Prasad Shirgaonkar who’s the Curriculum Developer for our Learning Services Department here at Acquia. We’re really excited to have Prasad on the call. Thank you, Prasad, for presenting to us today.

Prasad Shirgaonkar: Hello, everyone. So good morning, afternoon, evening to everyone. We are going to talk on the Features module today. Just a quick introduction of myself, I work as a Curriculum Developer for Acquia Learning Services. I design and conduct training programs on Drupal as well as on Acquia products. I worked for over 20 years and I have been working on Drupal since Drupal 4.7. Today, we are going to talk about one of the key challenges faced by Drupal developers. That is the configurations management challenge. Let’s talk about challenge first and then obviously we follow by the solution

Prasad Shirgaonkar: Yes. Perfect. Okay. So we’re going to talk about one of the key challenges and that’s about the config management or the configurations management challenge and obviously it will be followed by the solution. Let’s first look at the challenge, what exactly is the challenge first. If you followed Drupal’s recommended development practices, you will typically have a well-defined development workflow. A typical Drupal development workflow consists of multiple environments where your code resides. For example, you may have a local development environment, and a staging environment, and production environment there remotely. You do development on your local environment, you post your code to your staging environment, you do some testing over there, and once the testing is finalized, you push your code to the production environment.

Now, a Drupal site. Typically, the components of a Drupal site as you are aware are the code which are your modules and themes, the configurations which are the content types and views and vocabularies and all the configurations that you do using Drupal’s GUI and the content, that’s the nodes, and terms, and users blocks, all the contents which is added by users to the site. So typically, code resides in code files, so modules and themes are in their own individual files, the .module files and .tpl.php files, java script files, and CSS files, and so on. The content on the other hand, that resides in the database so the nodes and terms and users, they’re all form of the database. Up to Drupal 7, the interesting part was the configurations that we do for building a site like the content types and views, they also reserved. The definitions are also stored in the database.

Now, when you are doing the initial development of your website, copying your code and data or the database from your one environment to another environment, it’s a very straightforward process. So if you’re using some version control system like GIT, you just check-in your code into GIT and check-out on your stage environment and database, you simply take the database down from the environment and push it to another environment and all your environments are getting synced, obviously. When you go down the development stages and when you are doing the continuous development of your website, copying code is simply straightforward but copying database from an environment to another environment becomes increasingly difficult. In some stage, it might become even impossible.

Now, this is because the developer develops the code locally, he adds his own data and does the testing, pushes the code to staging environment. On staging environment, the client test users might add some data independently and when they add the data, they do their own testing and then the code is pushed to the production environment. In production environment, then there’s a live data, the actual data added.

Now, if you copy over your database from one stage, one environment to another environment, it wipes out the data off the target environment. That’s why it becomes almost impossible to copy all the data on the database or actually the configurations that’s stored in the database from an environment to another environment. So this is one of the most prominent challenges faced by Drupal developers. So how do we manage Drupal’s site configurations? How do we move configurations from one environment to another environment without affecting the data or content of the target environment? That’s the challenge that we are going to discuss today and as everything else in Drupal, there’s a module for that. That module is called as features. So what is features module? So this is the URL from where you can get features module, it is drupal.org/project/features. Features modules, as its own name says, it enables the capture and management of features in Drupal.

Now, a feature can be defined as a finite, a defined set of functionality or entities which taken together can satisfy a certain use case. So take the example of, say, a news article. So you have content-type name news articles. You can have a view in which produces various pages or blocks. You could have some taxonomy terms which are used for that particular content type. On that bundle together can create a news feature for your website. What features module does is that it converts and stores site configurations in code rather than in the database.

Now, here are various applications or use cases of features module. We can move your site configurations from database to code which makes it extremely easy to move between environments like the development, staging, and production. We can also check-in in a version control system, like if you just define all your configurations in the database, it’s impossible to check them in in a version control system. Say for example you want to revert back to a previous version of a view, which might be an extremely complex view, it’s absolutely impossible to do it without Drupal’s UI. If you convert that into code and if you version control it properly, you can very easily revert back to a specific version in the past. Another great application that it has got is that you can distribute these features as independent features or independent modules and re-use them across various sites. So suppose you are developing a large set of sites and all the sites require, say, use functionality or requires a user listing functionality or requires, say, a products catalogue. You create it once, you convert that into a feature, and you can use it across multiple sites to minimize your effort or minimize duplication.

So how does features module do it? Let’s have a quick demo of features module. I’m using my local environment and on my local environment I have this dev site and staging site. Now right, now both of these sites or both the environments are on the single machine but they could have been on completely different machines or completely different places, but for this demo purpose, I’m using it on just a single machine but two different code bases completely. So both the sites have almost the same set of modules, but different data. As you can see, the site names and the home pages and everything is slightly different. Now, suppose my dev site is having, say, a content type. That’s news and also a view, news, which pulls the data of that content type and displays it as a page. That functionality is not there on my staging site. Now, if I want to push this specific functionality from my dev environment to my staging environment, I first of all check if I have features module enabled, so I had downloaded and enabled the features module. So enable the module. Features functionality is available on the structure and features. There is no feature right now so I’ll just create a feature. I’ll give a name to my feature, let’s call it as “News”. Just give a unique description. A package, I can just give, say, “My features” and I’ll give a version for this particular feature.

Now, on the right-hand side, I can see various components that I can select. So inside this, what I’m going to select now is the news content type. It could automatically detect the various dependencies that are required to give news content type and I’ll also select news view. So I select all the features that I want to be bundled in this particular feature. I could either download the feature so that it will create code files and download it into a tar or open “Advanced options” and I’ll give a path where it can generate, give an existing path where it can generate the feature and I will click “Generate feature”. Now, if I go to my code base, I’ll find that under the site, so we’ll use the path which I’ve specified. It has created a new folder called the “news”. Inside, features has created several files which are these feature files. I’ll go back to my URL and go to features page again and I can see that it has created a new feature, the news feature which is currently disabled, so I’ll just enable it on the current environment.

Now, we’ll see the use kits; why we need it too or why we should enable it on the source environment. That we’ll be in a few minutes. So this is enabled, I have the news feature of news content type and view, now that’s bundled into a feature.

Now let’s move that to my target environment so just copy this module with folder, you go to my target environment and you’ll have the same folder features custom. I’ll just put it as that folder. Going back to my target environment, I’ll just check. I’ll verify features module is enabled, so you see that features modules is enabled. I can also see that this item module might be just inside that group, it’s the news module. I could either enable it from here or I can just go and check from my features site and I’ll see the news feature is added on my staging environment as well. I’ll enable it and bam, I have a news view added over here and the content types. I have the news content type added over here. So this has absolutely saved me a lot of time of rebuilding that content type as well as a view on the stage. It could be actually a bundle of like multiple content types and multiple views. You can bundle inside a single view, a single feature, and post it from one environment to another environment. So that’s the basic use case or basic use, basic application of features module.

Going further in the workflow of features module, what happens if we make changes to our configuration? So in the content type, say, news content type. If I want to add a new field later on, and I added a new field which is the location field and the text-based field. Now, this on the dev site, if I go to structures and features overview page, and I’ll also add inside the view, if I make some changes, say, I don’t know the behavior. So “no data”. So I’ve made some changes to my content type, I’ve made some changes to my view. If I go to structure and features now, it shows me the state as overridden. What that means is that the configurations which are stored in the code of features are now different than the configurations which are stored in the database. So I need to either to match them, I need to regenerate the code on my source site. So I’ll just click see what’s happening so that you can be sure that the database is different and I go to recreate, and under recreate, under advanced options, and just generate the feature. So after I generate, I’ll just view it again and make sure that it’s in the default state. Now, I need to copy the newly generated code from my source site, that’s my source site from where I’ll just copy this new and better code and I’ll just replace the code on my destination site.

So I’m just doing it fairly crudely over here. I really should be doing it and checking it in a version control system and checking out from that system in the real world. Now, if I go to my staging environment and go to structure, and features, just let me try clearing the cache. Okay, so it has the empty text as well as I can see that it has created on content types in news as either the new feed. So basically whatever changes I do on one environment, I can keep on adding, keep on just reflecting those changes or transferring those changes from one environment to another fairly easily with features module. Going back to our – let’s have some discussion on some other features of the features module. So some intricacies of features modules and how do we extend features module. There are some unique terminologies with features module. Those datasets that we saw on the features page, sometimes, that shows a state that’s overridden that we saw. There’s an option to revert or there’s an option to update the feature. So when we want to save, make changes, use site configurations in the database. When we do revert, actually what it does is that it changes the configurations in the database to match with that in the features module’s code. When we update a feature, what it does is that it creates and produces a newer version, a newer code versions between the configurations from the database.

So these two terms are used quite often with features module. The key question that people asked is that what exactly can be ‘feature’ized? So these are the things which can be ‘feature’ized or which the configurations can be stored in features module. From the core, we can store content types, we can store vocabulary definitions, user loads, permissions, field definitions, text formats, menus and menu items, and image styles. They all can be exported to a feature. From contributed modules, we can store the views definitions, panels, mini-panels, rules that we use for sites, context, as well as the display suite configuration. These all can be ‘feature’ized and many, many other contributed modules. They can export their own settings to features module. What cannot be ‘feature’ized are field like content. So things like nodes, terms, users, and your custom blocks that you add, and the native blocks that you add to the site. These cannot be ‘feature’ized because that’s content and they cannot be stored as a part of code.

A couple of advanced usages of features modules, if you use the module called the Strongarm module that exposes Drupal’s entire variables system to features which basically means that you can export things like your site name, the site slogan, or your team setting, and anything that is stored in the variables table that can be exported into a feature. If you use Diff module, you can actually compare when it shows that feature is overridden. It shows what exactly is the difference. That, you can be using Diff module. Features module has got fantastic integration with Drush. There are lots of Drush command like we can lift all the features, you can see the components of an individual feature. You can see the differences in the feature, in the database and the code. You can expose features, you can revert features, and of course you can update features. So these are all the extensions or advanced uses of the features module.

Just a little slide on resources, where you can find all these, so features module on drupal.org is at drupal.org/project/features, then comprehensive documentation along with examples on drupal.org, and the links for Strongarm module, and Diff modules. So this was a brief presentation about the features module, its use cases, and how to use that module. I’m open for questions now.

Moderator: Great. Thanks, Prasad. If anybody has any questions, could you please ask them now in the Q&A section? We had one come in so far. Can installation of features be automated during Drupal installation like installation profiles in some way?

Prasad Shirgaonkar: Yes, perfectly. It can be. So when you create features, they actually become like your modules. Sorry, just a minute, I just stopped sharing my desktop. Okay. When you create features, they become like modules and you can include them as part of installation profiles and they can be automatically enabled while installing new sites.

Moderator: Awesome. The next question is using Drupal 6 here still. Is there a very big difference between 6 and 7 in the features module?

Prasad Shirgaonkar: Yes. The main difference is in the URL features module but the core, I think, that it does. The core content, the core entity that can be exported. That hasn’t changed.

Moderator: Okay. As a reminder, slides and recording will be posted to our website. I think that’s it for questions. If anybody has any follow up questions, you can reach out to me or Prasad and we can get them answered for you. Prasad, would you like to end with anything?

Prasad Shirgaonkar: No. I just would like to say that for doing the normal day-to-day, Drupal Development workflow, and if you are especially working on complex projects, features is an absolutely must have step in your Drupal workflow. It saves a lot of time for development as well as keeps our code, our configurations completely under our control. So it’s absolutely worth spending time and exploring that module. Make sure that you use it and make it a part of your day-to-day workflow.

Moderator: All right, thanks so much everyone. Thanks Prasad.

Prasad Shirgaonkar: Thanks, bye.

- End of Recording -