How to use mobile detect

Kirby 2 Solved ✅
1

Hi, i’ve tried to install mobile detect but it seems not to work.

I followed the instruction and put the folder to my /plugin
Next step was to create a snippet with a device specific postfix. ‘Mobile’ in my case

I put
<?php snippet_detect('project'); ?>

to my project.php file, but mobile devices are not identified

I tried it without the snippet as well, but nothing seems to work properly

<?php if(s::get('device_class') == 'mobile'): ?>
  This is only displayed on mobile.
<?php endif; ?>

Do i really need a snippet? Or did i missunderstand the basic settings for the plugin?
I use Kirby version 2.3.2

Thanks for your help!

2

Have you made sure that your folder is called “detect”, like the main file of the plugin?

3

yes, the file in the lib folder is called mobile_detect

4

No, I mean your folder structure should look like this:

/site/plugins/detect/detect.php

If you can’t get it to work and don’t need the session variable, you can use my alternative plugin, which is basically just a wrapper for the Mobile Detect library.

5

Ok, i installed your plugin and it works!
But the desktop content is still displayed, is there another code snippet to get rid of the desktop content?

Is it possible to put php code inside the "echo “…”; ?

6

Could you post your code please?

For code you only want to display on desktop, you should do this:

<?php
if(!detect()->isMobile()) {
 snippet('show-me-on-desktop-only');
}

Instead of a snippet, you may also just put your code.

7 
<?php
if (detect()->isMobile()) { ?>
<div>Test</div>
<?php } ?>

i tried it with that code and it works. But how can i make sure that the desktop content is not shown?

The whole structure is like

<?php snippet('header') ?>
<?php snippet('menu') ?>
<main>//Desktop content</main>

<?php
if (detect()->isMobile()) { ?>
<div>Test</div>
<?php } ?>

<?php snippet('footer') ?>
<?php snippet('javascript') ?>
8

As I said above, the content you only want to shown on desktop goes within the opposite if-statement:

<?php snippet('header') ?>
<?php snippet('menu') ?>

<?php
// this content will only be shown on desktop (not on smartphone or tablet)
if(!detect()->isMobile()): ?>
<main>//Desktop content</main>
<?php endif ?>

<?php
// this will only be shown on mobile, not on desktop
if (detect()->isMobile()) { ?>
<div>Test</div>
<?php } ?>

<?php snippet('footer') ?>
<?php snippet('javascript') ?>
1 Like
9

Sorry i didn’t get that :slight_smile: Thanks for your answer!

10

Nice, it works! :grinning:

11

Its kind of tricky…
My code structure now is

<?php
if(!detect()->isMobile()): ?>

Desktop Content

<?php endif ?>


<?php
if (detect()->isTablet()) { ?>

Tablet content

<?php } ?>


<?php
if (detect()->isMobile()) { ?>

Mobile content

<?php } ?>

But on tablet view tablet and mobile are visible.

12

But not impossible:

<?php
// Only on smartphone
if (detect()->isMobile() && !detect()->isTablet()) {

// mobile content
}
?>
1 Like
13 
<?php
if (detect()->isMobile() && !detect()->isTablet()) { ?>

<?php } ?>

Works fine! Thank you one more time Sonja

14

tip: alternativ syntax for control structures could be easier to read and debug. @texnixe did use it, too.

15

Hi,

How should the code be formulated if I want to show desktop content on both desktop and tablet devices and have separate mobile content?

At the moment the separation between mobile and desktop devices works fine, but on tablet I get the content twice. This is what I have used:

<?php
	if(detect()->isMobile() && !detect()->isTablet()) {
// Only mobile content
} ?>

<?php
	if(!detect()->isMobile() || (detect()->isTablet()) {
// Desktop and tablet content
} ?>

What am I missing? :thinking:

16

The second one should be

<?php
	if(!detect()->isMobile() ||  ( detect()->isMobile() && detect()->isTablet()) {
// Desktop and tablet content
} ?>
1 Like
17

Thank you texnixe, now it works! :thumbsup:

There were some small typos in the code above, however (extra spaces and one missing parentheses). Here is an edited version in case someone uses the same code:

<?php
	if(!detect()->isMobile() || (detect()->isMobile() && detect()->isTablet())) {
// Desktop and tablet content
} ?>
18

Unfortunately both plugins don’t seem to work for me. The code doesn’t seem to detect since I am getting same content for both desktop and mobile. I am running a multilang site. Is this supposed to work only for pages with one language?

Thanks

19

Do you have caching enabled?

20

Caching is disabled when developing.