Skip to main content

Blog Post

Control your Drupal Page Layout with Context and Delta

by Mediacurrent Team
March 1, 2012

UPDATE: 4/11/2012

If you checked out the Inside Look at the Omega Theme blog post a few months ago, you may be eager to re-theme your Drupal site to take advantage of the awesome capabilities of Responsive Design. There are, however, a few more modules you may want to pair with the Omega theme when tackling your mobile site design.

With the Delta module, you can build custom page layouts by making new versions of the theme settings page; then apply those unique layouts on particular pages, sections, or user roles via the Context module. While designed specifically for the Omega theme, Delta will also work with other themes. Mobile Tools can help you to detect users viewing your site with mobile device to further customize the theme just for them. Let's take a closer look.

Delta Module

If you’ve ever wanted a very different layout for the home page of your website, or perhaps for a landing page that needs to be stripped of menus and extraneous blocks, you’ve likely had to go and create a custom page.tpl.php (template file) within your Drupal theme. But instead, what if you could control the layout of your whole site (for both desktop browsers and mobile browsers) with the Omega theme, and then have different instances of those settings for different scenarios?

The Delta module is the way to do just that. Rearrange sidebars, add or remove entire regions, or change up the layout of the whole page without ever having to touch code. Once you’ve set up the generic layout for your theme in the settings page (, install and enable the Delta module. On the theme settings page, you’ll see a new Delta tab link appear at the top. Here you can create a new Delta template. You have two options: to either start over completely with entirely new theme settings, or to reference the original theme settings page in all areas except those that you change in this Delta template (Update: There is currently a bug with the Delta Preserve mode, but there is a workaround.)

Delta + Context

The magic comes into play when you combine Delta and the Context module. Context provides a user interface which allows you to introduce conditional statements into the theming layer. For example, you can specify that all URL paths that begin with /news* or /events* should use Delta Template XYZ, instead of the core theme settings. In this way, these pages can have a different layout than the rest of the site. (Update: You may need to enable the "Context Layouts" on the module page for this to work.)

You can also use context to hide or show blocks, add body classes, add section titles and more based on conditions like URL paths, user roles, or taxonomy terms. Context is a very powerful tool.

Mobile Tools + Context

Specifically relating to responsive design and mobile web, you can harness the power of context combined with a module called Mobile Tools to build a custom mobile experience. We can already use the Omega theme to rearrange the elements on the page to fit mobile devices, but what if there are elements that are either too wide, or too memory-intensive for a mobile device? Perhaps you just have an over-abundance of content that could be pared down a bit for mobile user. First, you may want to consider paring down that content for your desktop users too (less is more). But if perhaps the front page contains a Flash banner ad that’s 960px wide, not only would we want to hide that from mobile users, but we would want to remove it from the markup completely so that mobile users aren’t waiting for that media to download to their device.

With mobile tools, you introduce device detection into the equation. After installing this module you can create a new contextual rule with “mobile devices” as a condition. You can then specify that if a device is mobile, android, iPhone, Blackberry, etc. as the conditional statement, then apply Delta Template XYZ as the reaction. You can also opt to simply disable a particular region as a reaction, which comes as a part of Context 3.x (Delta not required).

Note: if you experience any technical difficulties with Delta templates not working, be sure your context conditions are correct and the context is actually being applied. Also, the Mobile Tools project page seems to imply that you must install Browscap or Wurfl to detect mobile devices. This is not the case, I've found that Mobile Tools itself does a great job of detecting mobile, as well as distinctive operating systems like iPhones vs. Android.

Using Mobile Tools to carve out exceptions for devices may seem to go against the spirit of a responsive design, but every now and then there are exceptions to the rule and there are things we need to remove for mobile users. Do your best to first try to find a solution that can present the content to all users before opting to remove a region. There are some multimedia slideshow options that are responsive by design, which would work nicely within Omega. There are even a few Drupal modules in the works for responsive slideshows or integrating responsive images with views slideshow. 

Sometimes the best mobile experience is one that has a pared down version of the site with the most important info displayed prominently, with some of the unnecessary extras cut out for the sake of speed and performance. It’s up to you to make the call one way or the other, but at least now you’ll have a full set of tools to get the job done right!


Update (4/11/2012)

One thing to be aware of when using Mobile Tools is caching issues. If you switch themes based on device type, there is a chance that caching will bypass the device detection for the next user and pull the incorrect theme from the cache. This can be solved by reading the documentation in the file and adjusting your settings.php file accordingly. Relying on user agent detection on the server to decide which device class specific components to include could be an issue for some. There's a lot of debate about how accurate user agent detection is.

Additional Resources:

An Inside Look at the Omega Theme | Mediacurrent Blog Post

Responsive Design + Drupal | Mediacurrent Blog Post

Free Drupal Whitepaper | The Mobile Web and Drupal



Related Insights