RocketTheme - TOPIC: [Solved] Preparing to Use Mobile Detect via Gantry 5 Doc's

Welcome Guest! Login

0 items Join Now

TGoodrich
Rocketeer
Posts: 79
Thanks: 1

SOLVED Preparing to Use Mobile Detect via Gantry 5 Doc's

Posted 8 years 1 month ago

Hi, I followed the instructions for Preparing to Use Mobile Detect in the Gantry 5 Doc's.

I have implemented it in a few places on my site and it works but I'm not sure if my code is completley correct. I am hoping someone with more experience could look over the below code and tell me if it looks correct. I am particully curious about the parts in the code that use "%-", "-%" or just "%" as I do not know or understand the difference between them or how they are supposed to be used. An explaination on this may prove helpful.

Here is a code snippit I used in the page_head.html.twig". I need "block head_mobile_background" part checked.

<head>
    {% block head_meta %}
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        {% if gantry.config.page.head.meta -%}
            {% for attributes in gantry.config.page.head.meta -%}
                {%- for key, value in attributes %}
                    <meta name="{{ key|e }}" property="{{ key|e }}" content="{{ value|e }}" />
                {% endfor -%}
            {%- endfor -%}
        {%- endif -%}

        {% if gantry.config.page.assets.favicon %}
        <link rel="icon" type="image/x-icon" href="{{ url(gantry.config.page.assets.favicon) }}" />
        {% endif %}

        {% if gantry.config.page.assets.touchicon %}
        <link rel="apple-touch-icon" sizes="180x180" href="{{ url(gantry.config.page.assets.touchicon) }}">
        <link rel="icon" sizes="192x192" href="{{ url(gantry.config.page.assets.touchicon) }}">
        {% endif %}
    {% endblock %}

    {%- block head_title -%}
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Title</title>
    {%- endblock %}

    {% block head_application -%}
        {{ gantry.styles('head')|join("\n")|raw }}
        {{ gantry.scripts('head')|join("\n")|raw }}
    {%- endblock %}
    
    {% block head_mobile_background -%}
        {%- if gantry.mobile_detect.isMobile() -%}
    		<style type="text/css">body {background-image: none !important;}</style>
	{%- endif -%}
    {%- endblock %}
	
    {% block head_ie_stylesheets -%}
        <!--[if (gte IE 8)&(lte IE 9)]>
        <script type="text/javascript" src="{{ url('gantry-assets://js/html5shiv-printshiv.min.js') }}"></script>
        <link rel="stylesheet" href="{{ url('gantry-engine://css/nucleus-ie9.css') }}" type="text/css"/>
        <script type="text/javascript" src="{{ url('gantry-assets://js/matchmedia.polyfill.js') }}"></script>
        <![endif]-->
    {% endblock -%}

    {% block head %}{% endblock %}
    {% block head_custom %}
        {% if gantry.config.page.head.head_bottom %}
        {{ gantry.config.page.head.head_bottom|raw }}
        {% endif %}
    {% endblock %}
</head>

The code below is from page.html.twig. In this one I need the part "if gantry.mobile_detect.isMobile" checked.

<html{{ gantry.page.htmlAttributes|raw }}>
    {{ page_head|raw }}
    {% block page_body -%}
    <body{{ gantry.page.bodyAttributes({'class': [offcanvas_position, gantry.page.preset, 'g-style-' ~ gantry.theme.preset]})|raw }}>
        {{ gantry.config.page.body.body_top|raw }}
        {{ page_offcanvas|raw }}
        {%- if gantry.mobile_detect.isMobile() -%}
    		<div id="g-mobile-background"></div>
	{%- endif -%}
        <div id="g-page-surround">
            {% if page_offcanvas|trim %}
            <div class="g-offcanvas-hide g-offcanvas-toggle" data-offcanvas-toggle><i class="fa fa-fw fa-bars"></i></div>
            {% endif %}
            {{ page_top|raw }}
            {{ page_layout|raw }}
            {{ page_bottom|raw }}
        </div>
        <script type="text/javascript" src="{{ url('gantry-assets://js/main.js') }}"></script>
        {{ page_footer|raw }}
        {{ gantry.config.page.body.body_bottom|raw }}
    </body>
    {%- endblock %}

</html>

And finally in a custom module I have used:

<?php
require_once './templates/g5_hydrogen/custom/includes/Mobile_Detect.php';
$detect = new Mobile_Detect;
?>
<?php if ( $detect->isMobile() ) {
echo '';
} else {
echo '
<div>Left this code out as it is not relevent</div>
';
}
?>

#1286017

Time to create page: 0.032 seconds