Сообщений в теме: 10

[P.K]

Hi

I would like to have different layout for the mobile users. The different layout will be used instead of the full layout when the site is opened from mobile. This is done so that only a few elements can be shown on mobiles so as to reduce bandwidth. can you suggest some way to achieve this

 

thanks in advance

[Kess]

Hello,

 

I usually use this plugin for such purposes. Works well for me.

[P.K]

Hello Kess

The plugin seems to solve the problem of detecting mobile devices but i want a reduced layout for mobiles containing less elements then desktop layout to reduce the load. How do i make it??

thanks

[Kess]

You can edit item templates to add the device checking there. So you can add different conditions when rendering positions. Like this, for example:

<?php if ($detect = 'mobile')  : ?>


	<?php if ($this->checkPosition('title')) : ?>
		<h1 class="item-title"><?php echo $this->renderPosition('title'); ?></h1>
	<?php endif; ?>


	<?php if ($this->checkPosition('image-mobile')) : ?>
		<div class="item-image align-<?php echo $align; ?>">
			<?php echo $this->renderPosition('image-mobile'); ?>
		</div>
	<?php endif; ?>


	<?php if ($this->checkPosition('meta')) : ?>
		<ul class="item-metadata">
			<?php echo $this->renderPosition('meta', array('style' => 'list')); ?>
		</ul>
	<?php endif; ?>
	

<?php else : ?>


	<?php if ($this->checkPosition('title')) : ?>
		<h1 class="item-title"><?php echo $this->renderPosition('title'); ?></h1>
	<?php endif; ?>


	<?php if ($this->checkPosition('image')) : ?>
		<div class="item-image align-<?php echo $align; ?>">
			<?php echo $this->renderPosition('image'); ?>
		</div>
	<?php endif; ?>


	<?php if ($this->checkPosition('properties')) : ?>
		<ul class="item-properties">
			<?php echo $this->renderPosition('properties', array('style' => 'list')); ?>
		</ul>
	<?php endif; ?>


	<?php if ($this->checkPosition('text')) : ?>
		<?php echo $this->renderPosition('text', array('style' => 'block')); ?>
	<?php endif; ?>


	<?php if ($this->checkPosition('meta')) : ?>
		<ul class="item-metadata">
			<?php echo $this->renderPosition('meta', array('style' => 'list')); ?>
		</ul>
	<?php endif; ?>


<?php endif; ?>

Notice that the mobile part has less positions in it and there is even a position called "image-mobile" where you can assign a smaller image without pop-up.

[P.K]

Hello Kess 

Got it. Just let me know how should i include the package in joomla and how do i use include that?

thanks

[P.K]

Any update on this?

[Kess]

Hello,

 

I'm sorry for a delay.

 

I can tell you how I usually use it. 

 

Download the main package from that website . One file from there is enough to make it work - "Mobile_Detect.php".

 

Usually I put it in my Joomla template, near index.php. Then in the index.php I write something like this:

require_once 'Mobile_Detect.php';

$detect = new Mobile_Detect;
$device = 'desktop';

if ($detect->isTablet()) {
    $device = 'tablet';
}

if ($detect->isMobile() && !$detect->isTablet()) {
    $device = 'mobile';
}

Also, for development purposes, I also add this code as well:

$app = JFactory::getApplication();

$jinput = $app->input;
if ($jinput->get('device')) {
   $device = $jinput->get('device', '');
}

This allows me to override detection by adding url parameter. Like www.example.com?device=tablet, or ?device=mobile. It's only needed during development of course.

 

If you need to use it in an item template, you can use similar code there.

[P.K]

Hello

I tried to add the code in my joomla template file but there is something missing.

When i use the variable in item template file nothing happens and desktop version is displayed. Can you check the code again?

thanks

[Kess]

Hello,

 

The $device variable will not be available in the item template automatically if you just put that code in the Joomla template. You will need to duplicate this code in every file where you need detection. Note that the path to the Mobile_Detect.php will be different if included from those files.

 

Actually, you don't have to put it in the index.php of your Joomla template. That was just an example how I use it. Usually, my Joomla templates have two different layouts - one for desktops and tablets, the other one for mobile phones.

[P.K]

Hello

I got it. But i am facing another problem that if i am including it in my template file and also in the item template then the item page is not working and on rest of the pages detection is working fine. I dont know the reason why this is happening