Redirect mobile devices to alternate URL with Varnish 3.0 and Drupal 6

This is a short note for ourselves, but it might help others considering the (new for now) rules of Google indexing of non-mobile sites.

Drupal 6 does not really provide all the stuff that would be really useful to switch the theme of your site depending on the browser being on a mobile device or not.
There are a few modules that should help you, like switchtheme, and mobile_subdomain, but in the end, you can also do it as follows.

Setting up Apache (or web server x)

Let’s assume your site is called your.site.com and you want mobile devices to see another theme.

Define the m.site.com subdomain in your DNS configuration and point it to the same server.

In your web server configuration, add an alias for that second URL.

Apache

Just add the new subdomain as a ServerAlias directive:

ServerName your.site.com
ServerAlias m.site.com

Nginx

Just add the new subdomain after “server_name your.site.com”, like so:

server_name your.site.com m.site.com;

Setting up Drupal 6

Build a small module yourself (based on Switchtheme) with just what you need, and a mobile theme (in this case called mymobiletheme). I won’t say anything about the theme itself. You can test it in admin mode if you want. Just make sure it works and it’s not dependent on the URL or something like that.

Let’s say your module is called mobile_yoursite. You would have just two files:

// mobile_yoursite/mobile_yoursite.info file
name = Yoursite mobile theme switcher
description = Changes the theme depending on the calling URL
package = Yoursite
core = 6.x
; Information added by drupal.org packaging script on 2013-03-26
version = "6.x-1.0"
core = "6.x"
project = "mobile_yoursite"
datestamp = "1364280012"
// mobile_yoursite/mobile_yoursite.module file
<?php
/**
 * Switch theme to Garland when request comes on m.site.com
 */
function mobile_yoursite_init() {
  global $custom_theme;
  if ($_SERVER['HTTP_HOST'] == 'm.site.com' || $_SERVER['SERVER_NAME'] == 'm.site.com') {
    $custom_theme = 'mymobiletheme';
  }
}

Copy the module inside the sites/all/modules/ folder (or sites/default/modules if you prefer) and enable it.

Now if you load m.site.com directly, you should see the site with the mobile theme.

If you have issues refreshing and getting on the wrong site, make sure the configuration of caching does NOT include CSS and JS optimization, as this is sometimes a cause of trouble for themes switching.

Setting up Varnish

This only works with Varnish 3+, so if you use an older version… sorry.

Go to your Varnish configuration directory (where your default.vcl is). Download this file: https://raw.githubusercontent.com/willemk/varnish-mobiletranslate/master/mobile_detect.vcl right into that folder.

Edit your default.vcl file:

# At the very beginning
include “mobile_detect.vcl”;
# Inside vcl_recv
if (req.http.host ~ “^your\.site\.com$”) {
call devicedetect;
if (req.http.X-UA-Device ~ “^mobile”) {
error 750 “Moved Temporarily”;
}
}
# Inside vcl_error
if (obj.status == 750) {
set obj.http.Location = “http://m.site.com” + req.url;
set obj.http.host = “m.site.com”;
set obj.status = 302;
return(deliver);
}

Now reload your Varnish configuration (you can test your config with “varnishd -Cf /etc/varnish/default.vcl” if you like.

Now load your page through a mobile device… you should be automatically redirected to m.site.com.

It's only fair to share...Share on Facebook
Facebook
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Share on Tumblr
Tumblr
Email this to someone
email

Leave a Reply

Your email address will not be published. Required fields are marked *