Show picture only on desktop devices?

prestalearn · February 2, 2014

I have added two pictures to my header.tpl but I only want these images to be shown while browsing my site with a computer and not by smartphones, ipads etc since it messes the layout up.

Is it possible to add some kind of code that only displays the image if the customer uses a desktop device? Like the following (just a mockup for you to get the idea):

If user.device = desktop then
<img src"showimage.png>
else
nothing
end if

Anton_bcn · February 2, 2014

Just another mockup :

Google it: "How to detect mobile devices php" or "How to detect mobile devices javascript"

Implement it on you store.

Ray UK · February 2, 2014

Googling something for php and adding it into PS isn't that easy.

PS uses smarty

This should work for you

{if FrontController::ismobile()==true}
<!-- Show nothing -->
{else}
<img src"showimage.png>
{/if}

Edited February 2, 2014 by MerseyRay (see edit history)

prestalearn · February 2, 2014

Googling something for php and adding it into PS isn't that easy.

PS uses smarty

This should work for you
{if FrontController::ismobile()==true}

{else}
<img src"showimage.png>
{/if}

Thanks for the suggestion. However if I add that code my header.tpl the whole page just displays the content before the code and disables everything else of the page.

Edited February 2, 2014 by prestalearn (see edit history)

Rhapsody · February 2, 2014

If using the default Prestashop theme, have you tried enabling the mobile theme in the BO with the settings at the bottom of the Themes page?

Edited February 2, 2014 by Rhapsody (see edit history)

prestalearn · February 2, 2014

If using the default Prestashop theme, have you tried enabling the mobile theme in the BO with the settings at the bottom of the Themes page?

Yes its enabled.

Ray UK · February 2, 2014

Thanks for the suggestion. However if I add that code my header.tpl the whole page just displays the content before the code and disables everything else of the page.

Strange, as I use this code all over our store and it works perfectly for us

I notice in your code you left out a " at the end, so try this

{if FrontController::ismobile()==true}
THIS IS A DESKTOP
{else}
THIS IS A MOBILE
{/if}

On a desktop you will see

THIS IS A DESKTOP

And on a mobile you will see

THIS IS A MOBILE

And by the way, if you have the mobile theme enabled, then you just edit the mobile theme and dont need to bother doing this code

Check out my website in my signature, try it on your desktop and then your mobile.

You will notice the "facebook & twitter" which is in the right colum does not show on your mobile.

I have used this coding inside their tpl files

Edited February 2, 2014 by MerseyRay (see edit history)

prestalearn · February 2, 2014

Strange, as I use this code all over our store and it works perfectly for us

I notice in your code you left out a " at the end, so try this
{if FrontController::ismobile()==true}
THIS IS A DESKTOP
{else}
THIS IS A MOBILE
{/if}
On a desktop you will see

THIS IS A DESKTOP

And on a mobile you will see

THIS IS A MOBILE

And by the way, if you have the mobile theme enabled, then you just edit the mobile theme and dont need to bother doing this code

Check out my website in my signature, try it on your desktop and then your mobile.

You will notice the "facebook & twitter" which is in the right colum does not show on your mobile.

I have used this coding inside their tpl files

Thanks for the suggestion, however that code also stops the rest of the page from showing :/

Ray UK · February 2, 2014

Can you paste your header.tpl file here ?

prestalearn · February 2, 2014

Here it is, thanks in your efforts in trying to help me!

{*
* 2007-2013 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2013 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 " lang="{$lang_iso}"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8 ie7" lang="{$lang_iso}"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9 ie8" lang="{$lang_iso}"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js ie9" lang="{$lang_iso}"> <![endif]-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">
	<head>
		<title>{$meta_title|escape:'htmlall':'UTF-8'}</title>
{if isset($meta_description) AND $meta_description}
		<meta name="description" content="{$meta_description|escape:html:'UTF-8'}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
		<meta name="keywords" content="{$meta_keywords|escape:html:'UTF-8'}" />
{/if}
		<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1">
		<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
		<meta http-equiv="content-language" content="{$meta_language}" />
		<meta name="generator" content="PrestaShop" />
		<meta name="robots" content="{if isset($nobots)}no{/if}index,{if isset($nofollow) && $nofollow}no{/if}follow" />
		<link rel="icon" type="image/vnd.microsoft.icon" href="{$favicon_url}?{$img_update_time}" />
		<link rel="shortcut icon" type="image/x-icon" href="{$favicon_url}?{$img_update_time}" />
		<script type="text/javascript">
			var baseDir = '{$content_dir|addslashes}';
			var baseUri = '{$base_uri|addslashes}';
			var static_token = '{$static_token|addslashes}';
			var token = '{$token|addslashes}';
			var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
			var priceDisplayMethod = {$priceDisplay};
			var roundMode = {$roundMode};
		</script>
		
		<link href="http://fonts.googleapis.com/css?family=Roboto:400,900italic,900,700italic,700,500italic,400italic,300italic,300" rel="stylesheet" type="text/css" />
		<link href="{$css_dir}pw.css" rel="stylesheet" type="text/css" />
		{if isset($meta_brand)}
<meta itemprop="productID" content="{$meta_productID}" />
<meta itemprop="url" content="{$meta_url}" />
{/if}
		
{if isset($css_files)}
	<link href="{$css_dir}animate.css" rel="stylesheet" type="text/css" />
	{foreach from=$css_files key=css_uri item=media}
	<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
	{/foreach}
	<link href="{$css_dir}ezmark.css" rel="stylesheet" type="text/css" />
	<link href="{$css_dir}pw_css3.css" rel="stylesheet" type="text/css" />
	{if $PWDESIGNER_THEME_CHOICE == $theme_blue}
		<link href="{$css_dir}theme_blue.css" rel="stylesheet" type="text/css" />
	{elseif $PWDESIGNER_THEME_CHOICE == $theme_green}
		<link href="{$css_dir}theme_green.css" rel="stylesheet" type="text/css" />
	{elseif $PWDESIGNER_THEME_CHOICE == $theme_black}
		<link href="{$css_dir}theme_black.css" rel="stylesheet" type="text/css" />
	{elseif $PWDESIGNER_THEME_CHOICE == $theme_orange}
		<link href="{$css_dir}theme_orange.css" rel="stylesheet" type="text/css" />
	{elseif $PWDESIGNER_THEME_CHOICE == $theme_purple}
		<link href="{$css_dir}theme_purple.css" rel="stylesheet" type="text/css" />
	{/if}
{/if}
{if isset($js_files)}
	{foreach from=$js_files item=js_uri}
	<script type="text/javascript" src="{$js_uri}"></script>
	{/foreach}
{/if}
	{if $page_name == 'index'}
	<script type="text/javascript" src="{$js_dir}owlslider.js"></script>
	{/if}
	<script type="text/javascript" src="{$js_dir}pw.js"></script>
		{$HOOK_HEADER}
		{if isset($fontlink)}
		<link href="http://fonts.googleapis.com/css?family={$fontlink}" rel="stylesheet" type="text/css" />
		{/if}
		{if isset($menufontlink)}
		<link href="http://fonts.googleapis.com/css?family={$menufontlink}" rel="stylesheet" type="text/css" />
		{/if}
		{if isset($headfontlink)}
		<link href="http://fonts.googleapis.com/css?family={$headfontlink}" rel="stylesheet" type="text/css" />
		{/if}
		{if isset($pricefontlink)}
		<link href="http://fonts.googleapis.com/css?family={$pricefontlink}" rel="stylesheet" type="text/css" />
		{/if}
	</head>
	
	<body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="{if $PWDESIGNER_DISPLAY_BOXEDFULL == $boxed}boxed{else}fullw{/if} {if $PWDESIGNER_SHOW_RCOL == 'showrcol'}theme_showrcol{else}theme_hidercol{/if} {if $PWDESIGNER_RCOL_CAT == 1}theme_catcol{else}theme_nocatcol{/if} {if $PWDESIGNER_RCOL_CMS == 1}theme_cmscol{else}theme_nocmscol{/if} {if $PWDESIGNER_RCOL_ORDER}theme_ordercol{else}theme_noordercol{/if} {if $hide_left_column}hide-left-column {/if} {if $hide_right_column}hide-right-column {/if} {if $content_only} content_only {/if}">
	{if !$content_only}
		{if isset($restricted_country_mode) && $restricted_country_mode}
		<div id="restricted-country">
			<p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>
		</div>
		{/if}
		<div id="page" class="clearfix">

			<!-- Header -->
			<div id="header">
				<div id="header_right">
					{$HOOK_TOP}
				</div>
				{if isset($PWDESIGNER_HEADER_PHONE) || isset($PWDESIGNER_HEADER_MAIL)}
				<ul class="quick-contact">
					{if isset($PWDESIGNER_HEADER_PHONE)}
					<li class="quick-contact-call"><a href="callto:{$PWDESIGNER_HEADER_PHONE}" title="{l s='Call our support team (Skype link)'}">{$PWDESIGNER_HEADER_PHONE}</a></li>
					{/if}
					{if isset($PWDESIGNER_HEADER_MAIL)}
					<li class="quick-contact-mail"><a href="mailto:{$PWDESIGNER_HEADER_MAIL}" title="{l s='Send an email to our customer service'}">{$PWDESIGNER_HEADER_MAIL}</a></li>
					{/if}
				</ul>
				{/if}
				
				
				
{if FrontController::ismobile()==true}
<img style="margin-top:-50px; margin-left:40px;" id="hikon1" alt=""
src="{$img_ps_dir}icon.png" style="border:0px;">
{else}
{/if}
				
				
				
		

					
				<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
					<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if}/>
				</a>
			</div>

			<div id="columns" class="clearfix">
				{include file="$tpl_dir./breadcrumb.tpl"}
				<!-- Left -->
				<div id="left_column" class="clearfix">
					{$HOOK_LEFT_COLUMN}
				</div>

				<!-- Center -->
				<div id="center_column" class="clearfix">
	{/if}

vekia · February 2, 2014

in fact isMobile function doesnt exist in front controller.

as far as i remember somewhere i created this function and shared m y solution on prestashop forum

Ray UK · February 3, 2014

Correct Vekia, you did create this when I asked.

in the classes/controllers/frontcontroller.php file you need to create this function.

public static function ismobile(){
$browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
    if ($browser == true){
    return true;
    }
}

I forgot about that bit

Im assuming this only detects iPhones though, so you may need to add more HTTP_USER_AGENT's

Edited February 3, 2014 by MerseyRay (see edit history)

prestalearn · February 3, 2014

Thanks! That seems to work now.

As you say I think I need to add all kind of smartphones etc then. Because I guess there is no general concept for all smartphones etc?

vekia · February 4, 2014

$isMobile = (bool)preg_match('#\b(ip(hone|od|ad)|android|opera m(ob|in)i|windows (phone|ce)|blackberry|tablet'.
                    '|s(ymbian|eries60|amsung)|p(laybook|alm|rofile/midp|laystation portable)|nokia|fennec|htc[\-_]'.
                    '|mobile|up\.browser|[1-4][0-9]{2}x[1-4][0-9]{2})\b#i', $_SERVER['HTTP_USER_AGENT'] );

+

if ($isMobile==true){
return true;
} else {
return false;
}

prestalearn · February 4, 2014

Wonderfull thanks!

prestalearn · August 13, 2014

Has someone gotten this to work on Prestashop 1.6?

When adding this:

public static function ismobile(){
$browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
    if ($browser == true){
    return true;
    }
}

At the top of my frontcontroller.php the whole shop just renders a blank page...

Any help would really be appriciated!

prestalearn · August 18, 2014

Trying again, if someone would have the possiblity to try it on their 1.6 install of prestashop I would really be gratefull

vekia · August 18, 2014

Has someone gotten this to work on Prestashop 1.6?

When adding this:
public static function ismobile(){
$browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
    if ($browser == true){
    return true;
    }
}
At the top of my frontcontroller.php the whole shop just renders a blank page...

Any help would really be appriciated!

blank page = errors

turn on error reporting, will see what's going on (error report)

prestalearn · August 18, 2014

blank page = errors

turn on error reporting, will see what's going on (error report)

Thanks!

Im getting this:

Parse error: syntax error, unexpected T_PUBLIC in /public_html/classes/controller/FrontController.php on line 29

Show picture only on desktop devices?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in