Announcement

Collapse
No announcement yet.

Theme customization: showing different content for mobile phones

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Theme customization: showing different content for mobile phones

    Warning: the functionality here is described in terms of 4.x version and may not work correctly in earlier versions.

    In modern tube site designs you sometimes need to show separate content for phones in comparison to other devices with bigger screen. One way is to create a separate site version on a mobile subdomain with a separate set of pages with completely separate design. This is a huge effort however and this is not what this post is about.

    Another way is to show some parts of page separated for phones and other devices. If you think about advertising here, this is not the case, since starting from KVS 4.0 you can easily configure this via advertising settings and you don't need any template customization described here.

    Showing separate template code for different devices

    In /admin/include/pre_initialize_page_code.php add the following block:

    PHP Code:
    include_once("$config[project_path]/admin/include/mobiledetect/Mobile_Detect.php");
    if (
    class_exists('Mobile_Detect'))
    {
        
    $mobiledetect = new Mobile_Detect();
        if (
    $mobiledetect->isMobile() && !$mobiledetect->isTablet())
        {
            
    $config['device'] = 'phone';
        }

    If you need to have separation between all mobiles (phones + tablets) and PCs, then you use this:

    PHP Code:
    include_once("$config[project_path]/admin/include/mobiledetect/Mobile_Detect.php");
    if (
    class_exists('Mobile_Detect'))
    {
        
    $mobiledetect = new Mobile_Detect();
        if (
    $mobiledetect->isMobile())
        {
            
    $config['device'] = 'mobile';
        }

    Then in templates anywhere you need you can use this approach:

    HTML Code:
    {{if $config.device=='phone'}}
        mobile phone
    {{else}}
        pc / tablet
    {{/if}}
    For the 2nd variant of PHP code you should use this template code:

    HTML Code:
    {{if $config.device=='mobile'}}
        mobile phone + tablet
    {{else}}
        pc
    {{/if}}
    Performance implications

    Using this approach will affect your server's performance because caching % will be reduced x2 times approximately. Since you want to show separate code for different devices, KVS will have to keep 2 versions of each cache: one for phones and another one for all other devices. This will mean higher load on your database.

  • #2
    What a smart way of doing this. As you said, it's a huge undertaking creating the whole separate pages for phone users. I'm going to play around with this a bit and see what this is actually capable of!

    Comment

    Working...
    X