SOLVED! Mobile category images

[mickeyboy1]

Hope this is the right place.....

 

Right guys/gals, i am having an issue trying to find out how to resize the category image when viewing site on a mobile phone

At the moment when viewing from an android phone in portrait view ,you can only see the right hand side of the category image 

The image is ok in landscape on the same android phone

It is also ok on a tablet in any mode(landscape or portrait)

 

PS version 1.6.0.9

Modified default-bootstrap theme

 

Thanks in advance

 

MB

Edited September 29, 2014 by mickeyboy1 (see edit history)

[PascalVG]

Hi MB,

 

interesting, as default-bootstrap theme normally shouldn't show the category image on smaller screens at all.

 

Can you provide a link to your site?

 

pascal

[mickeyboy1]

Yes sorry i forgot to add this in

 

It is: http://www.rtuna.co.uk/Upgrade_test/shop/

 

Thanks mb

[mickeyboy1]

Anyone help on this please

 

 

thanks in advance mb

[PascalVG]

Probably you have to edit file themes/Biketuna/category.tpl (make backup):

 

Find the llne that has :  content_scene_cat_bg   on it

<div class="content_scene_cat_bg" {if $category->id_image}style="background:url({$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}) 0 bottom no-repeat; background-size:contain; min-height:{$categorySize.height}px;" {/if}>

 

 

As you will probably see, there you see some style similar to this: (May differ a little)

 

style="background:url({$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}) 0 bottom no-repeat; background-size:contain; min-height:{$categorySize.height}px;"

 

 

Try to change it into something like:

 

style="background:url({$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}) center top no-repeat; background-size:contain; min-height:{$categorySize.height}px;background-color: transparent!important; width:100%;"

 

Save and reload the page. see if that helps.

 

Let me know,

pascal.

[mickeyboy1]

Hiya Pascal, thanks for replying.

I have looked through category.tpl file and cannot find content_scene_cat_bg in there at all.

Here is my category.tpl contents as it wouldnt let me upload the file

{*
* 2007-2012 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-2012 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}

{include file="$tpl_dir./breadcrumb.tpl"}
{include file="$tpl_dir./errors.tpl"}

{if isset($category)}
	{if $category->id AND $category->active}
		<h1>
			{strip}
				{$category->name|escape:'htmlall':'UTF-8'}
				{if isset($categoryNameComplement)}
					{$categoryNameComplement|escape:'htmlall':'UTF-8'}
				{/if}
			{/strip}
		</h1>
		
		<div class="resumecat category-product-count">
			{include file="$tpl_dir./category-count.tpl"}
		</div>
		
		{if $scenes || $category->description || $category->id_image}
		<div class="content_scene_cat">
			{if $scenes}
				<!-- Scenes -->
				{include file="$tpl_dir./scenes.tpl" scenes=$scenes}
			{else}
				<!-- Category image -->
				{if $category->id_image}
				<div class="align_center">
					<img src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')}" alt="{$category->name|escape:'htmlall':'UTF-8'}" title="{$category->name|escape:'htmlall':'UTF-8'}" id="categoryImage" width="{$categorySize.width}" height="{$categorySize.height}" />
				</div>
				{/if}
			{/if}

			{if $category->description}
				<div class="cat_desc">
				{if strlen($category->description) > 120}
					<p id="category_description_short">{$category->description|truncate:120}</p>
					<p id="category_description_full" style="display:none">{$category->description}</p>
					<a href="#" onclick="$('#category_description_short').hide(); $('#category_description_full').show(); $(this).hide(); return false;" class="lnk_more">{l s='More'}</a>
				{else}
					<p>{$category->description}</p>
				{/if}
				</div>
			{/if}
		</div>
		{/if}
		{if isset($subcategories)}
		<!-- Subcategories -->
		<div id="subcategories">
			<h3>{l s='Subcategories'}</h3>
			<ul class="inline_list">
			{foreach from=$subcategories item=subcategory}
				<li class="clearfix">
					<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}" class="img">
						{if $subcategory.id_image}
							<img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'subcat_default')}" alt="" width="{$subcatSize.width}" height="{$subcatSize.height}" />
						{else}
							<img src="{$img_cat_dir}default-subcat_default.jpg" alt="" width="{$subcatSize.width}" height="{$subcatSize.height}" />
						{/if}
					</a>
					<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" class="cat_name">{$subcategory.name|escape:'htmlall':'UTF-8'}</a>
					{if $subcategory.description}
						<p class="cat_desc">{$subcategory.description}</p>
					{/if}
				</li>
			{/foreach}
			</ul>
			<br class="clear"/>
		</div>
		{/if}

		{if $products}
			<div class="content_sortPagiBar">
				{include file="$tpl_dir./pagination.tpl"}
				<div class="sortPagiBar clearfix">
					{include file="./product-sort.tpl"}
					{include file="./product-compare.tpl"}
					{include file="./nbr-product-page.tpl"}
				</div>
			</div>
			
			{include file="./product-list.tpl" products=$products} 
			
			<div class="content_sortPagiBar">
				<div class="sortPagiBar clearfix">
					{include file="./product-sort.tpl"}
					{include file="./product-compare.tpl"}
					{include file="./nbr-product-page.tpl"}
				</div>
				{include file="./pagination.tpl"}
			</div>
		{/if}
		
	{elseif $category->id}
		<p class="warning">{l s='This category is currently unavailable.'}</p>
	{/if} 
	
{/if}

Thanks mb

[PascalVG]

Hi mb,

 

are you sure this is the category.tpl file from the modified bootstrap-default theme folder? (i.e. themes/Biketuna/category.tpl )

The above code doesn't resemble the one used on the page...

 

please check. If it is that file already, I can offer to have a look at your files, and see if I can find it. Then I need some ftp access to your files, or cPanel or so for that matter. If you want that and trust me with it, please PM me the login URL and login info. (Don't give this info here, for everyone to see...!)

 

pascal

[mickeyboy1]

Hiya Pascal, my bad i was looking at the wrong file....sorry

 

I changed the code and it works perfectly in mobile view in portrait mode, only problem is when in landscape mode or on normal pc/laptop the category images are now slightly smaller than the container

 

Is this possible to have it work fine on mobile view and also full container size in laptop view??

 

Thanks for your help so far

 

mb

 

EDIT: i have slightly changed the min-height and have got it working fine.

This is the new code...

<div class="content_scene_cat_bg"{if $category->id_image} style="background:url({$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}) center top no-repeat; background-size:contain; min-height:185px;background-color: transparent!important; width:100%;"{/if}>

Thank you very much for your help Pascal,  i shall mark this thread as solved

 

mb

Edited September 29, 2014 by mickeyboy1 (see edit history)

[PascalVG]

Hi mb,

 

 

I checked the problem and even after your change, there is still for some 'medium width' sizes some problem: (try narrowing your browser window slowly and look at the image to see for yourself)

 

 

 

To fix it, change it a little more, to min-height: 218px,

 

 

(actually, you could have changed it here:)

 

 

 

 

My 2 cents,

pascal.

 

[mickeyboy1]

Many thanks again Pascal

 

Its good to have another set of eyes looking at things

 

Thanks mb

[sweetcherries]

This worked for me Pascal, thank you!

[D-fox]

Works ok thank you

PascalVG