Is it possible to have different frontpage page--front.tpl.php based on user´s device (mobile/desktop)?

Question

I am using the Detect_Mobile module in order to detect whether the user is coming from a mobile/tablet device or not. I would not like to use other modules as Mobile switch or Mobile tools because those are too big modules for my needs and also have cache bugs that appear when visiting again the frontpage, anyway that is not the point now.

I already detect the user´s device by using the Detect_Mobile library and module and I know it works because when I access the site by mobile I am redirecting the site to a different website so as testing I am using the next code in my template.php from my theme:

    <?php 

    include 'sites/all/libraries/Mobile_Detect/Mobile_Detect.php';
    $detect = new Mobile_Detect();

    if (drupal_is_front_page()) {

     $GLOBALS['conf']['cache'] = FALSE; /*otherwise 2nd time shows desktop frontpage on mobile*/

        if ($detect->isMobile() or $detect->isTablet()) {
            header("Location: "); /*for testing goal*/
        exit;
       }
    }

    ?>

So the previous code works because the site gets redirected to another site address when the user´s access is by mobile/tablet but the point is that I don't want to redirect the site to another link like this: header("Location: /mobile.php");
What I want is to have 2 frontpages templates loaded based on user´s device:

page--front.tpl.php => normal(desktop) frontpage and loaded by default page--frontmob.tpl.php => mobile/tablet frontpage and loaded when user´s device is mobile/tablet

Then I dont know if what I want is possible to do in Drupal but after reading some other examples like:

https://stackoverflow.com/questions/8840051/how-to-redirect-mobile-visitors-from-drupal-site-to-mobile-site-on-other-domain

Your best bet would be to write a small module and implement hook_init() which happens before the page is even built.

function MYMODULE_init() { include("PATH/TO/Mobile_Detect.php");

$detect = new Mobile_Detect(); if ($detect->isMobile()) { header('Location: http://newdomain.com/'); drupal_exit(); } }

And also this: http://example.com/serving-different-pagetplphp-different-browser-types-ie-ie6-your-drupal-theme

<?php
include('browser_detection.php');
if ((browser_detection('browser') == 'ie' ) &&
            (browser_detection('number') >= 5 ) &&
            (browser_detection('number') < 7  )) {
  include "page-ie.tpl.php";
  return;
} else {
  include "page-normal.tpl.php";
  return;
}
?>

Then I came out with the following code in my template.php of my theme:

<?php 

        include 'sites/all/libraries/Mobile_Detect/Mobile_Detect.php';
        $detect = new Mobile_Detect();

        if (drupal_is_front_page()) {

         $GLOBALS['conf']['cache'] = FALSE; /*otherwise 2nd time shows desktop frontpage on mobile*/

            if ($detect->isMobile() or $detect->isTablet()) {
                include 'sites/all/themes/mytheme/page--frontmob.tpl.php';
            return;
        } else {
            include 'sites/all/themes/mytheme/page--front.tpl.php';
            return;
            }
        }

        ?>

But what the previous code does is calling both of the frontpages templates do both are showing on frontpage when loading the site: page--frontmob.tpl.php and page--front.tpl.php without caring the if statement about devices... so it feels like one page is embeding another page.... and still shows the next errors:

Notice: Undefined variable: logo in include() (line 14 of /sites/all/themes/mytheme/page--front.tpl.php).
Notice: Undefined variable: page in include() (line 26 of /sites/all/themes/myclassiclive/page--front.tpl.php).
Warning: call_user_func_array() expects parameter 1 to be a valid callback, no array or string given in theme_get_registry() (line 277 of /includes/theme.inc).

So please help!!! I really have tried already many times to solve this problem but without success... I am new in Drupal.. so I guess the code I am using has something wrong...

I would appreciate so much for your soon help to fix that code or either use it in a different way... REMEMBER I am using Mobile_Detect(working fine) and REMEMBER I have not a different THEME for mobile that´s why I am not using Mobile switch or other similar modules but I have just 2 different frontpages templates on my theme based on user´s device... so:

mytheme/page--front.tpl.php
mytheme/page--frontmob.tpl.php

Rest of the sites pages works as desktop based on page.tpl.php.

Or should I do a small module(using hook_boot/hook_init) in order to be able to replace mytheme/page--front.tpl.php for mytheme/page--frontmob.tpl.php when detecting the mobile/tablet device? as here was suggested for somebody else with a little similar situation?

I there is NO a solution for this then I guess I have to use the redirection option with header("Location: http://www.example.com/mobile.php");

Answer 1

This is possible. You can use template_preprocess_page(). If you have the Devel module enabled you can dpm($variables) in the hook. Within the variables array is the theme_hook_suggestions element with a bunch of values which loads the template files upon output. So within template_preprocess_page you can add your device detection snippet and modify the element to load your template files. This article explains how to work with template suggestions and manipulate them to your needs.

Answer 2

You can use the Theme Key module. You can achieve features like:

• individually-styled channels

• a front-page / "splash" screen

• a date/time-selected Christmas theme

• mobile themes for different auto-detected mobile devices

• special themes for "limited" or "old" browsers

• content, user, or role -specific themes

• indicating your environment (production, staging, testing, sandbox, … )

• testing your redesign safely on a live server

• ...

ThemeKey should play well with internal and external page caches, like Boost or Varnish, even for anonymous users.

We use it in my company for a high-traffic site and works ok.

In your case, you can create a subtheme that is almost equal to the main theme and make your customizations there.