We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 33657
    • 128 Posts
    This is an auto-generated topic for Mobile Detection 2.0-rc1 by zurie.

    Brief Description:

    Mobile Detection - plugin for MODx Revolution 2.0

    Version 2.0rc1 by Zuriel Andrusyshyn

    Code based on plugin originally posted by Peter Hoeflehner
    Plugin originally created for Modx EVO by everettg_99 and noahlearner

    Inspiration from this forum thread:
    http://modxcms.com/forums/index.php/topic,40357.0.html

    DESCRIPTION:
    This plugin combines browser detection and a URL-parameter override to
    show/hide portions of any template delineated by <mobile> and <standard> tags.

    REQUIREMENTS and EXAMPLES:

    YOU MUST DOWNLOAD MOBILEESP and place it in your website (at the root, or
    anywhere you want but it must be modified in the plugin code if its not in the root.)

    /* include the mobileESP detection script
    The latest copy can always be found at: "http://mobileesp.googlecode.com/svn/PHP/mdetect.php"

    Change this line in the script if you move it out of root - include("mdetect.php");
    */

    For this to have any effect, you must delineate one or more portions of your
    template(s) with <mobile> and <standard> tags, e.g.

    Template Example A:
    <html>
    <head>
    <title>[[*pagetitle]]</title>
    <meta name=description content="[[*description]]" />
    <mobile>
    <link type="text/css" rel="stylesheet" href="mobile.css" />
    </mobile>
    <standard>
    <link type="text/css" rel="stylesheet" href="standard_one.css" />
    <link type="text/css" rel="stylesheet" href="standard_two.css" />
    <script type="text/javascript" src="menu.js"></script>
    </standard>
    </head>
    <mobile>
    <body class="narrow">
    </mobile>
    <standard>
    <body class="huge">
    </standard>

    [[*content]]
    </body>
    </html>

    OR

    Template Example B:
    <mobile>[[$my_mobile_template]]</mobile>
    <standard>[[$my_standard_template]]</standard>


    USAGE:
    Without modifications, the user’s browser is detected *once* and a cookie is set
    to store the value; if a mobile browser is detected, <standard> portions of
    the template will be deleted, leaving only <mobile> portions.
    URL parameters can override the results of the browser detection, e.g.:

    http://www.yoursite.com/some/page?browser=mobile

    http://www.yoursite.com/some/page?browser=standard

    http://www.yoursite.com/some/page?browser=detect

    "browser=mobile" will cause all portions of the template wrapped with <standard>
    tags to be deleted.

    "browser=standard" will cause all <mobile> nodes to be deleted.

    "browser=detect" triggers browser detection and clears the cookie. Whatever the
    result of browser detection will cause the respective nodes to be preserved.


    CONFIGURATION:

    Use Cookie: default is yes. Normal use (i.e. use cookie = yes) is that browser
    detection is run only ONCE per visitor, and the result is stored in the cookie.
    If the user chooses to override the template, this can be done via the URLs, e.g.
    mydomain.com/?browser=mobile. If cookies are disabled, then the browser detection is run for each page request
    for each user.

    force_browser_detect_variable: The name of the parameter that will trigger the overrides, e.g.
    if this is set to ’x’, then http://www.yoursite.com/some/page?x=mobile
    will trigger the mobile template to be used.

    Mobile node: default mobile. This affects your template code, e.g.
    <mobile></mobile> but it does NOT affect the browser override, e.g.
    www.yoursite.com?browser=mobi

    Standard node: default standard. This affects your template code, e.g.
    <standard></standard> but it does NOT affect the browser override, e.g.
    www.yoursite.com?browser=full

    force_browser_detect: default detect. This string identifies how you can force the
    user’s browser to be detected. E.g. www.yoursite.com?browser=detect

    force_browser_standard: default full. This string identifies how you can force the
    user’s browser to be detected. E.g. www.yoursite.com?browser=full

    force_browser_mobile: default mobi. This string identifies how you can force the
    user’s browser to be detected. E.g. www.yoursite.com?browser=mobi

    The following variables are from the script available at
    http://mobileesp.com/
    Some of its settings have been exposed for easy configuration within MODx.

    The function $uagent_obj detects if your mobile device matches up to any mobile phone on the market and returns true or false if they do. I have pulled some of the more important ones out and given you access to them.

    * iPad - Only targets iPAD. Good to turn off if you want iPad to be a full browser and not a mobile site.

    * iPhone - These are modern touchscreen phones with WebKit browsers. These browsers handle CSS and JavaScript very well, which means that modest AJAX sites with native (iPhone or other) style components typically work great.

    * Detect Rich CSS - These devices can handle CSS reasonable well, so that iPhone- or Android-style UIs generally look fine. Unfortunately, JavaScript support is poor. For these reasons, in most cases, it’s probably best to serve these devices the generic mobile site rather than the iPhone Tier site. Includes: Symbian S60 Open Source Browser, ’High’ BlackBerry Devices, Windows Mobile, other Webkit-based devices.

    * Detect Other Phones - Detects for all other mobile devices, with an emphasis on feature phones. For these devices, it’s best to serve only the most basic styling, limited to little more than text color, alignment, and bold/italics. JavaScript support is virtually non-existent for these devices.
      • 2453
      • 26 Posts
      YES! smiley Thank you.
        • 33657
        • 128 Posts
        Hopefully the instructions are simple enough in the plugin source. I tried to make it as simple as possible. Enjoy!
          • 7155
          • 160 Posts
          "browser=mobile" will cause all portions of the template wrapped with <standard>
          tags to be deleted.

          Thank-you for sharing, Zurie.

          I have one question based on what you said (quoted above)

          When you say delete do you mean it literally deletes that part of the template or it merely ignore it. Like an if...else... setup? Does it not have an impact on performance?
            • 33657
            • 128 Posts
            Quote from: designetic at Mar 02, 2011, 08:52 AM

            When you say delete do you mean it literally deletes that part of the template or it merely ignore it. Like an if...else... setup? Does it not have an impact on performance?

            it only deletes it from the "rendered page" that a user would see in firefox, safari, chrome, or IE, etc... The actual code is always still there. its a nondestructive delete of just what a user sees at that time. you could think of it as temporarily ignoring the code, so no worries, all your code is safe and sound in modx. I haven’t tested the performance but I haven’t noticed any slowdown on anything. Your browser is pretty good at caching stuff so to render 1 or 2k of text isn’t going to be a issue. Unless you did thousands upon thousands of <mobile><standard> code in a single page, I doubt you’d ever notice it.
              • 7155
              • 160 Posts
              Quote from: zurie at Mar 02, 2011, 02:19 PM

              it only deletes it from the "rendered page" that a user would see in firefox, safari, chrome, or IE, etc... The actual code is always still there. its a nondestructive delete of just what a user sees at that time. you could think of it as temporarily ignoring the code, so no worries, all your code is safe and sound in modx. I haven’t tested the performance but I haven’t noticed any slowdown on anything. Your browser is pretty good at caching stuff so to render 1 or 2k of text isn’t going to be a issue. Unless you did thousands upon thousands of <mobile><standard> code in a single page, I doubt you’d ever notice it.

              thanks for explaining
                • 36686
                • 165 Posts
                The function $uagent_obj detects if your mobile device matches up to any mobile phone on the market and returns true or false if they do. I have pulled some of the more important ones out and given you access to them.

                Great script! Can you give an example of how to target iPhone and iPad specifically?

                  • 33657
                  • 128 Posts
                  I am not sure I am clear on what you want?

                  You have 2 versions of a site. 1 is for standard browsers and 1 is for mobile browsers.

                  are you saying you want ipad to be standard and iphone to be mobile? or are you saying you want a standard browser for ie / firefox/ chrome / and then 2 additional sites, one for iphone only and one for ipad only?

                  currently the script is not setup to redirect to 3 sites but only 2. mobile / standard. now if you want your ipads to use the same site standard uses, just go into the plugin settings.

                  to do this


                  • Log into modx
                  • Click on the Elements Tab
                  • Expand the plugins list by double clicking on the plugins row
                  • Click on the Mobile Detection plugin
                  • In the middle of the site, click the "properties" tab
                  • Click Default Properties Locked to UNLOCK the properties
                  • Switch iPAD to "NO"

                  this is where you setup whether or not the browser is a mobile device. YES will redirect that device to your mobile site, and NO will keep it as a standard browser.

                  you can also change other settings here like the redirection keywords browser?=standard or browser?=full etc etc.. as well as if you should create a cookie or other useful things.

                  hopefully this helps out.
                    • 36686
                    • 165 Posts
                    Hi zurie, thanks for explaining how to change the properties! I rarely use plugins in MODx so that’s probably why I was confused – to someone else I’m sure it would be obvious smiley

                    What I really wanted to do was to have 3 versions – one for iPhone, one for iPad and one "standard" – but since that isn’t supported I switched off all_other_mobile and created a page where iPhone/iPad users have to select version. I think it will do the job for now, but in the future it would be awesome to be able to have more than 2 versions, if you want to add it to your wishlist for future releases wink

                    All in all though, a very useful plugin! Well done!
                      • 33657
                      • 128 Posts
                      you can check

                      http://www.hand-interactive.com/detect/mobileesp_demo_php.htm


                      this is a tester page that pushes back true or false for every detection scheme.

                      I essentially do this in the plugin but they all just come back as mobile

                      you could customize the plugin for your liking and do the ipad to something else or redirect or whatever you want to do.

                      its all there. it may be above the scope of what you want to do though, but it is possible to do. smiley

                      in fact I see a new tier "detect_tier_tablet" so maybe i’ll make a new tag like <tablet> and you can put tablet code in there. but I have to think about it because I don’t want it to get more complicated than it needs to be.