Alternative to the Mobile Tools Module for Drupal. Go mobile the easy way.

Alternative to the Mobile Tools Module for Drupal.  Go mobile the easy way.

There is a great way to handle mobile devices for Drupal and it is not the Mobile tools module... If you are confined to one url, willing to turn off caching and like to forward users away from content then use the module tools module.

 

I have the basic criteria for my sites:

1, Full caching enabled, including page compression and combined files.

2, Intelligent redirects. If a user comes in via a outside link they should be redirected to that piece of content in mobile form.

3, Mobile home page and menus. I need to be able to serve up mobile optimized views via the sites main navigation and offer my mobile users a separate homepage.

The mobile tools module offers a easy point and click solution. It has the ability to handle a mobile url and theme switching. The problem is that theme switching on the same url does not work with Drupal's caching system. So I tried the mobile url approach. Even worse this just dumps users on the mobile homepage.

Easy solution:

1, Make a separate sub domain or url (mobile.yourdomain.com for example)

2, Add a settings file and folder for the new URL. (mobile.yourdomain.com/settings.php)

3, Set the theme & front page conf variables in the new settings.php files.

4, Switch the theme/url with JavaScript not PHP!!! This keeps drupal's caching in check and allows you to retain the requested page path.

 

Settings.php file for your mobile url

Uncomment out the $conf = array(). Now add the variables for frontpage and theme.

$conf = array(
'theme_default' => 'mobilewebkit',
'site_frontpage' => 'node/2140'
);

 

Javascript to switch URL's:

In your page.tpl file add this to your desktop theme and change the your domain.com variable to your site. You could probably get fancy and populate this with PHP if you needed more url flexibility. If you do do that keep the function client side (Java Script) for caching.

function MobileSwitch(){
	if((navigator.userAgent.match(/iPhone/i)) 
	||(navigator.userAgent.match(/Android/i)) 
	||(navigator.userAgent.match(/iPod/i)))
	{ 
		//switch for the three browsers above;
		var urlTofwd = "http://mobile.yourdomain.com" + location.pathname;					
		location.replace(urlTofwd);
	}
	
	else{
		//do nothing for desktop browsers;
		}
	}
MobileSwitch();

 

Now Inverse the switch for you mobile page.tpl files to send desktop browsers to the full version of your site:

 

function MobileSwitch(){
	if((navigator.userAgent.match(/iPhone/i)) 
	||(navigator.userAgent.match(/Android/i)) 
	||(navigator.userAgent.match(/iPod/i)))
	{ 
		//do nothing for these browsers;
	}
	else{
		var urlTofwd = "http://www.yourdomain.com" + location.pathname ;
		location.replace(urlTofwd);
 		}
	}
MobileSwitch();

The + location.pathname ; tacks on the requested page path to your new URL. This keeps the redirect as unobtrusive as possible to your user. A pet peeve of mine is getting dumped on a sites homepage after coming form a google result.

 

There you have it, four easy steps to go mobile for your drupal site.

Comments

phxjGEWtiZAmp

ysnfvr , [url=http://gamrrgolevmj.com/]gamrrgolevmj[/url], [link=http://zidqsfaleoqb.com/]zidqsfaleoqb[/link], http://ixaeiluaaplm.com/

Anonymous Mon, 01/23/2012 - 02:40

vhYOtKkwqoBDJq

WVb1Ji fcwibuqbrbvi

Anonymous Sat, 01/21/2012 - 01:55

AYFhowRAIFrQojnwfym

UDD2vS , [url=http://qtawlhbaipod.com/]qtawlhbaipod[/url], [link=http://dqyozqoixizq.com/]dqyozqoixizq[/link], http://swfbngixxxgp.com/

Anonymous Fri, 01/20/2012 - 06:13

HAfXQxTBVNNFHyrHa

P5QCRJ djzxfnbbhldd

Anonymous Fri, 01/20/2012 - 02:21

vBDHfnThtz

I feel satisfied after reiadng that one.

Anonymous Thu, 01/19/2012 - 11:04

plEQTrjpQxHW

49pE5Y , [url=http://wktwerfwlfha.com/]wktwerfwlfha[/url], [link=http://ktazsjubonya.com/]ktazsjubonya[/link], http://etyneljnvbql.com/

Anonymous Fri, 09/16/2011 - 09:23

qUkeGCLmEOD

eur59E lfczoirovxwl

Anonymous Fri, 09/16/2011 - 01:10

vyKkIPYFebLmG

99zerK , [url=http://kbvipotcycbe.com/]kbvipotcycbe[/url], [link=http://zzvkkdbxspco.com/]zzvkkdbxspco[/link], http://pwlvnehvvqgo.com/

Anonymous Thu, 09/15/2011 - 04:23

limjCJMRCkYeyO

ljpILR tamrnhbkbcxx

Anonymous Wed, 09/14/2011 - 00:23

GkrmRJmSzLyuOTZ

This is exactly what I was looking for. Thanks for wtirnig!

Anonymous Tue, 09/13/2011 - 12:00

Your article has info missing

Here are some suggestions:
1. You didn't specify there is a need of a mobile theme installed.
2. there is no
$conf = array(
'theme_default' => 'mobilewebkit',
'site_frontpage' => 'node/2140'
);

but
$conf['site_name'] = 'My Drupal site';
$conf['theme_default'] = 'theme_mobile';

3.I don't get what is this:
'site_frontpage' => 'node/2140'?

Appreciate if you can answer to these.

Anonymous Fri, 09/02/2011 - 02:44

Your solution doesn't work!

Your solution doesn't work! You get stuck on mobile.domain.com with either a blank screen, server error.

Are you sure the settings.php should be placed in
mobile/all/default/settings.php on mobile folder?

Or maybe some hacks in .htaccess?

Thanks

Anonymous Fri, 09/02/2011 - 02:27

extra info

I got the message
Forbidden : you don't have the permission to access / on this server.

Anonymous Fri, 09/02/2011 - 01:36

Got 500 server error on m.domain.com

I made 2 themes: the original and the mobile versios. I placed them both in sites/all/themes/

In the m.domain.com folder I placed the settings.php file.

Now it does do the redirection on my iphone but it gives me the 500 server error. This means it doesn't display the root site.

Could you help me?

Anonymous Fri, 09/02/2011 - 01:33

respond

I had got a desire to begin my own company, however I did not earn enough of cash to do this. Thank heaven my close colleague advised to take the business loans. So I used the term loan and realized my dream.

Anonymous Sun, 07/17/2011 - 01:00

|

2011-08-24_11-16-00 -> 5336c843cf4acc86b31546368921af5c :: 3f278fb432679a1452d06733faf http://www.hedindesign.com/?3f278fb432679a1452d06733faf,

Anonymous Wed, 08/24/2011 - 06:13

xJinBryantq

Afterward that woman told horizon t101 treadmill review me this pitiful story: Mamma, you didn't ship me any wealth, plus the Vet and also nurse sounded dissatisfied, so I took a lot of my own shirts down to a soup residence and also pawned them, that she might grant me a space plus soup 'til I might notice from you. Even as Abraham imagined God, plus it was accounted to that man for righteousness. It's nearly all correct! Plus Sebastian recognised whose grip it was, and also rushing pell-mell from the area, dipped heels over face downstairs, but preferred himself up at the foot plus flung open the highway portal.

Anonymous Sat, 01/14/2012 - 08:57

Thanks for your solution!

Thanks for your solution! This rocks!

But I have a tidy problem, which is I do want to allow mobile user to switch back to the full site when they want to, or go to mobile version even if they are on desktop browser, it is possible to implement such thing as a link, like yahoo.com?

Thanks so much!!!

Anonymous Sun, 05/29/2011 - 19:21

I like this KISS approach

But, have you find any workable way to switch image size ?
I mean, to have the desktop site show a large image and the m version to show a smaller one?
I'm speaking of images in contents, obviously, not in the theme...
I have been messing around without much success

the only hack I have found is having images in a fixed set of sizes (e.g 800x600, 640x480 ...) and overriding their width and height in CSS with CSS attribute selectors in the mobile theme, such as:
img[width="640"] { width: 320px; }

but that's really a nasty hack ...

Anonymous Sat, 04/02/2011 - 21:10

Switch image sizes with image cache

I have found that if you can leverage image cache module you have a option to set the image size dependant on the theme.

To do this you will need to use the imagefield module and either node embed or roll your own way to get them in there.

So let's say we have two image cache presets like: full_embed & mobile_embed. The cck field name would be "field_embed_image". The code in each themes node template would look like:

"---<?php print theme('imagecache', 'full_embed', $field_embed_image[0]['filepath']); ?>---"

or

"---<?php print theme('imagecache', 'mobile_embed', $field_embed_image[0]['filepath']); ?>---"

Anonymous Wed, 04/20/2011 - 08:58

ipad?

seems to get confused with ipad vs/ ipod/iphone...im using this:

function MobileSwitch(){
if((navigator.userAgent.match(/iPhone/i))
||(navigator.userAgent.match(/Android/i))
||(navigator.userAgent.match(/iPad/i))
||(navigator.userAgent.match(/iPod/i)))
{
//switch for the three browsers above;
var urlTofwd = "http://m.lawofficer.com" + location.pathname;
location.replace(urlTofwd);
}

else{
//do nothing for desktop browsers;
}
}
MobileSwitch();

any ideas?

Anonymous Wed, 11/10/2010 - 11:26

So iPad is not resolving to the mobile version?

Sorry do you want the ipad on the mobile site? If so it looks like what you have there should do it. Set your safari browser user agent to ipad or use your ipad (if you have one) and alert out the user agent string. That should let you know why it is not firing.

erik-hedin Wed, 04/20/2011 - 12:45

One Site

So, does this prevent the need for two sites then? Can the mobile themes just be pulled from the main site?

Kim

Anonymous Thu, 05/27/2010 - 13:39

Kim, One site but two url's.

Kim, One site but two url's. Drupal's caching works better with two urls. This allows you to also have a mobile specific homepage if you want.

erik-hedin Sun, 05/30/2010 - 19:31

I'm not getting something

As far as I can see, when you redirect to the new url, there has to be a drupal installation living there. In my case I would have to duplicate my site because the subdomain lives in a different place than the main site. I'm not exactly a Drupal master (or PHP master or anything master) but I feel like I'm missing something. I can understand Kim's confusion.

In any case, I don't care so much that the url changes. I'm more concerned about showing a different homepage if the user is on a mobile browser. If that's possible through a url redirect to a page on the current site I'd find this useful, but as is I'm not getting it. That's probably my fault, but I thought I'd throw that out there. Thanks!

Anonymous Mon, 10/25/2010 - 11:45

Same DB same files different URL

Drupal parses the url with the settings.php Then you can select the same database & show the same homepage. In the sub domain settings of your host or dns point the mobile url to the same folder.

Having a separate mobile URL just gives you options for a different theme and clears up any caching issues that drupal might serve for the desktop url. IE if you have caching turned on a mobile user might see a cached version of a page and vice versa.

erik-hedin Mon, 10/25/2010 - 12:14

Different Homepage

After staring at what you wrote and tooling around a bit I think I get it. What I'm not quite getting is how to create a different homepage. If they're working off the same database then that would preclude having two different versions of the index page, right? Is there a way to redirect mobile users to a mobile home page or have two different homepages based on whether the browser is mobile or not? You've been gracious enough to answer my first question, but feel free to not answer this one if I'm asking something outside of the realm of your theme. Thanks!

Anonymous Tue, 10/26/2010 - 12:43

Settings .php has a array for front page.

When you set the theme in settings.php you can set a different var for the front page.

erik-hedin Wed, 04/20/2011 - 12:46

Answer to my own question

Well, in any case, I solved my problem by using the current dev version of Mobile Tools and some code jiggery here: http://drupal.org/node/703708

Thanks!

Anonymous Mon, 11/01/2010 - 06:54
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters shown in the image.

Web Gibblets

The blog is where we post little tidbits of information. Building and designing sites is done in fresh snow. A lot of times you find a new way to do something that is relatively undocumented. Luckily for us all of our peeps are just a google search away.

Monthly archive