How to use different template for mobile version

bobthebob01
Topic Author
Offline
Elite Member

13 years 1 week ago #20338 by bobthebob01

How to use different template for mobile version was created by bobthebob01

Hi,

I have to create a mobile version for smartphone of a client website. I'm planing on using FC since it became my favorite CCK, and allow me to really customize the output while providing a super easy admin interface to my client.

But the mobile version will have obviously a different template and use certain feature specifically for iPhone etc.

Is there a way and/or how would one go about loading a different template for smart phone only. Since FC does not use template overrides, i can't see how to achieve that.

Could a FC plugin allow to assign different template such as having a suffix "_mobile" to a template name. So you for desktop version FC would use "blog" template and when the user agent is a smartphone it would use "blog_mobile"?

Or would it be better to use a "if" and "else" statement within a template file. So it would the template would have 2 parts with something like:
if user agent = iPhone
....
else
....

any ideas would be greatly appreciated.

thanks

Please Log in or Create an account to join the conversation.

krapaic
Offline
New Member

13 years 1 week ago - 13 years 1 week ago #20341 by krapaic

Replied by krapaic on topic How to use different template for mobile version

mmm first thing that comes to mind is to create a sub template in the directory of your flexi template and once you detect smartphone UA you simply show that subtemplate instead of default/blog/custom.

Code:

//example: item.php

defined( '_JEXEC' ) or die( 'Restricted access' );
// first define the template name
$tmpl = $this->tmpl; // for backwards compatiblity

if (YourWaytoDetectSmartPhone())
{
   $this->loadTemplate('mobile');
}
else
{ ?>
...the original template
<div id="flexicontent" class="flexicontent item<?php echo $this->item->id; ?> type<?php echo $this->item->type_id; ?>">
...bla bla bla
</div>

you create a file item_mobile.php (be sure to match loadTemplate parameter for filename) and there you implement your smartphone layout (you can also simply ignore position like ggppdk suggested )

Last edit: 13 years 1 week ago by krapaic.

Please Log in or Create an account to join the conversation.

bobthebob01
Topic Author
Offline
Elite Member

13 years 1 week ago #20350 by bobthebob01

Replied by bobthebob01 on topic How to use different template for mobile version

really??? that simple? LOL i really love FC and its community.

This is the kind of post that should be sticky or added to the documentation.

Thanks a lot.

Please Log in or Create an account to join the conversation.

micker
Offline
Administrator

13 years 1 week ago #20357 by micker

Replied by micker on topic How to use different template for mobile version

Impressive tips !

FLEXIcontent is Free but involves a very big effort on our part.
Like the our support? (for a bug-free FC, despite being huge extension) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing reviews. Thanks![/size]

Please Log in or Create an account to join the conversation.

krapaic
Offline
New Member

13 years 1 week ago #20359 by krapaic

Replied by krapaic on topic How to use different template for mobile version

Thanks to both of you, but first i need confirmation it works, it's just a hunch, i've never tested.

In order to detect SmartPhone, maybe it's enought to use JBrowser, i know from version 1.6 there's a method JBrowser::isMobile() but i don't know if it's done client side or server side.

Please Log in or Create an account to join the conversation.

ggppdk
Offline
Administrator

13 years 1 week ago #20375 by ggppdk

Replied by ggppdk on topic How to use different template for mobile version

To detect mobile browser maybe this will do the trick:

Code:

<?php
    $useragent = $_SERVER['HTTP_USER_AGENT'];
    $useragent = strtolower($useragent);
 
    if(strrpos($useragent,"iphone") > 0 || strrpos($useragent,"symbianos") > 0 || strrpos($useragent,"ipad") > 0 || strrpos($useragent,"ipod") > 0 || strrpos($useragent,"android") > 0 || strrpos($useragent,"blackberry") > 0 || strrpos($useragent,"samsung") > 0 || strrpos($useragent,"nokia") > 0 || strrpos($useragent,"windows ce") > 0 || strrpos($useragent,"sonyericsson") > 0 || strrpos($useragent,"webos") > 0 || strrpos($useragent,"wap") > 0 || strrpos($useragent,"motor") > 0 || strrpos($useragent,"symbian") > 0)
        echo "Go with Mobile Device!!!";
    else
        echo "Go with normal browser!!!";
?>

Read more: 4rapiddev.com/tips-and-tricks/de ... z1db9zLluZ

or google it

Regards

-- Flexicontent is Free but involves a big effort on our part.
Like the our support? (for a bug-free FC, despite having a long list of functions) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing with a 5-star...

Please Log in or Create an account to join the conversation.