In this lesson we will go over one of the main reason for using Context over core blocks; exportability. Using the Features module we are able to take all of the work we do in the Context UI and export it as standalone or with other features. The advantage of this is now all of our settings are stored in code and are deployable.
Much like using Context to enhance the core block system, the Bean module takes blocks to a whole new level. The Bean module makes blocks act more like content types. It allows for different block types and for adding fields to blocks. We are also able to manage the display of a block, which comes in handy with Context. We can have a block look different based on the Context of the block.
Additional resources
In this lesson we will install the Bean module and tour the changes it adds to the core block system. We will also look at and learn about block types, and how we can add fields to these types.
Now that Blocks are fieldable and we can have different types, lets demo how this works. In this lesson we will create different block types and show how they can be used just like content. We will also show how we can edit a block that was created with Bean.
In this lesson we will demonstrate how Beans are available in the Context UI. We will place some of the these blocks in different locations and also demonstrate how using different block displays with different context allows us to have a block appear differently based on context.
One of the biggest downsides of the core block system are its permissions. To allow different roles to do different things with blocks is basically an all or none permission. The Bean module provides more granularity for block permissions. We can now add the ability to have site content creators create blocks but not give them permissions to all the other block admin pages.
Additional resources
There are two main areas of translation for your Drupal site: the user interface and the content. The user interface text is mostly provided by the software, stored in the code itself. This is sometimes referred to as "hard-coded." While content is generated by users of the site, and stored in the database. Drupal core comes with the Locale module, which works with the user interface text and gives you a nice set of tools that lets you import existing translations, create or edit your own, or export your site’s translations for use on other sites. In this lesson we'll take a tour of the Locale module and discuss translation files, translating strings, language switching, and how to get a localized installation.
Additional resources
The first step to using any of Drupal’s multilingual features is installing a translation, so that Drupal has more than one language to choose from. As mentioned previously, you can use a localized distribution so that you install your language during the site installation process. Alternatively, you can easily add a language after you have installed the site by using the “Localization update” module. In this lesson we'll get the right pieces in place and get two different languages installed on the site.
Additional resources
Drupal Translations on localize.drupal.org
Using Drupal, 2nd edition
Using Drupal source code
With several language translations installed on our site, we need to make a choice about how and when Drupal will use our new languages. In this lesson, we'll review the Locale module configuration to make sure it is performing the way we want it to, by setting language detection and selection, and then enabling our language switcher.
Additional resources
You may notice that even though you are using a translation that you have installed, there might still be some untranslated text peeking out here and there. This will become more likely as you add contributed modules. Almost no site will have absolutely 100% language coverage out of the box, so you will probably need to translate a few items yourself. Drupal has a built-in system to do this with the Locale module, but there is also a contributed “Localization client” module which extends this core feature. In this lesson we'll take a look at Localization Client, see why want to use it, and how it works.
Additional resources
Localization Client project
Using Drupal, 2nd edition
Using Drupal source code
When it comes to translating your site’s content in Drupal 7, we have two possibilities. There is the core “Content translation” module and the contributed “Entity translation” module. They have quite different approaches to translation. So, in this lesson we'll compare the Content and Entity Translation modules, and take a look at how node translations work.
Additional resources
Video about the difference between Content and Entity
Using Drupal, 2nd edition
Using Drupal source code
In this tutorial, I will show you how you can add a class to the wrapper markup for a field using Display Suite, Display Suite Extras, and Display Suite's field templates.
Additional resources
In this tutorial, I will demonstrate how you can change the HTML selectors of the regions and layout wrapper markup using Display Suite.
Additional resources
In this series of tutorials on how markup is affected in Drupal when using Display Suite, I showed you:
- How to affect markup using Display Suite (DS)
- How to create a custom layout to use in DS
- How to add and utilize custom CSS classes in DS
- How to configure custom markup wrappers
- How to utilize Display Suite’s field templates UI to customize markup output on fields
Additional resources
In this tutorial, I'll give you a tour of the field templates interface in Display Suite. I'll show you how to enable Display Suite field templates and walk you through how to customize the markup for each type of field template. I’ll also demonstrate how CSS classes can be applied to various components of field output using the Display Suite's "Expert" field template.
Additional resources
In the original theme, the width, margin, and padding of the elements that make up the search component are set using pixels. Since the width is static, it's breaking out of the sidebar region when the screen size is small enough.
In this lesson, we'll refactor the styles in the search form so that it flexes with its parent container, instead of breaking it. In working through this example, you'll learn the merits of keeping components flexible and respectful of their parent containers.
Additional resources
https://github.com/DrupalizeMe/demo-rwd-7x (checkout branch 12-search-form)
As we design for mobile, we want to look critically at each component and what it's communicating or how it's adding value. Now that we've refactored our theme to be more mobile-friendly, some elements in our header appear redundant when viewed in a narrow, stacked content column. This is causing our header elements to fill up that important initial screen on mobile. We want to ensure that our valued mobile users get more content and fewer redundant header elements when the page first loads.
In this lesson, we'll identify a breakpoint where the header gets too cluttered with elements essentially communicating the same thing. Then we'll add a new set of media queries, creating styles that will present a more mobile-friendly first impression of our site.
Additional resources
https://github.com/DrupalizeMe/demo-rwd-7x (checkout branch 13-mobile-friendly-header)
Some of the content that's been added to our case study site isn't responding ideally as the viewport size increases and decreases. We have an HTML table that is a bit too flexible, making the columns too narrow for the text inside them to be very readable. The images in our slideshow are presenting us with a problem when the screen size gets too big: the images are scaling up and losing their quality in the process. To address these miscellaneous problems, we'll change how our content is placed, find some new breakpoints, and add new media queries for our grid_6 regions. We'll also learn some CSS tricks that will transform our table data into lists, making it more legible and sensibly presented on smaller screens.
Additional resources
https://github.com/DrupalizeMe/demo-rwd-7x (checkout branch 14-cleaning-up)
Do you want to know how to contribute translations to Drupal core or other contributed modules and themes? Have you ever wondered how translations are managed in Drupal? It all happens in the community at localize.drupal.org. This tutorial gives a tour of localize.drupal.org and then teaches you how to join translation groups and contribute translated strings back to the Drupal community.