[Solved] Help with productscategory display

[innocuous]

I changed width of images in productscategory to 120px instead of default 60px.

In product page I have hidden left and right columns and centre column to 940px

 

This has messed up the pagination/display grid.

Pls see attachment

 

 

Can someone pls help?

 

PS 1.5.1 default theme.

I just made changes to the width:60px to width 120px. NO other changes in css or tpl files.

 

productscategory.tpl file:

---------------------------------

 

{if count($categoryProducts) > 0 && $categoryProducts !== false}

<div class="clearfix blockproductscategory">

<h2 class="productscategory_h2">{l s='Similar products:' mod='productscategory'}</h2>

<div id="{if count($categoryProducts) > 5}productscategory{else}productscategory_noscroll{/if}">

{if count($categoryProducts) > 5}<a id="productscategory_scroll_left" title="{l s='Previous' mod='productscategory'}" href="javascript:{ldelim}{rdelim}">{l s='Previous' mod='productscategory'}</a>{/if}

<div id="productscategory_list">

<ul {if count($categoryProducts) > 5}style="width: {math equation="width * nbImages" width=107 nbImages=$categoryProducts|@count}px"{/if}>

 

{foreach from=$categoryProducts item='categoryProduct' name=categoryProduct}

<li {if count($categoryProducts) < 6}style="width:120px"{/if}>

<a href="{$link->getProductLink($categoryProduct.id_product, $categoryProduct.link_rewrite, $categoryProduct.category, $categoryProduct.ean13)}" class="lnk_img" title="{$categoryProduct.name|htmlspecialchars}"><img src="{$link->getImageLink($categoryProduct.link_rewrite, $categoryProduct.id_image, 'home_default')}" alt="{$categoryProduct.name|htmlspecialchars}" /></a>

<p class="product_name">

<a href="{$link->getProductLink($categoryProduct.id_product, $categoryProduct.link_rewrite, $categoryProduct.category, $categoryProduct.ean13)}" title="{$categoryProduct.name|htmlspecialchars}">{$categoryProduct.name|truncate:14:'...'|escape:'htmlall':'UTF-8'}</a>

</p>

{if $ProdDisplayPrice AND $categoryProduct.show_price == 1 AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}

<p class="price_display">

<span class="price">{convertPrice price=$categoryProduct.displayed_price}</span>

</p>

{else}

<br />

{/if}

</li>

{/foreach}

</ul>

</div>

{if count($categoryProducts) > 5}<a id="productscategory_scroll_right" title="{l s='Next' mod='productscategory'}" href="javascript:{ldelim}{rdelim}">{l s='Next' mod='productscategory'}</a>{/if}

</div>

<script type="text/javascript">

$('#productscategory_list').trigger('goto', [{$middlePosition}-3]);

</script>

</div>

{/if}

Edited October 22, 2012 by innocuous (see edit history)

[innocuous]

Solved! Googling around I found that we need to first calculate the width of all the images put together.

 

<ul {if count($categoryProducts) > 5}style="width: {math equation="width * nbImages" width=107 nbImages=$categoryProducts|@count}px"{/if}>

 

The above line does that. So I changed width=107 to width=175 and that did the trick!

 

hope it helps someone too