Need the product list thumbnails to be a little bit zoomed

armenak · April 1, 2013

Hi Guys,

I've recently discovered Prestashop and liked it very much. Many thanks to developers for this Open Source solution.

For this moment, I have one question and kindly ask someone to help.

My product list thumbnails are set to 220*330, so when I upload an image with a smaller height, a white border appears on the top of the thumbnail ( please, see the attached file) .

For new product tab, I use loftab module and this module seems to zoom the thumnails, so the above kind borders do not appear ( please, see the attached file).

I would like to have all my product list images a little bit zoomed, not enlarged (as it can be done in preferences/images). What should I change in coding?

Thank you !

vekia · April 1, 2013

I wonder how exactly the code in lof module looks like. I mean the code in the browser, I guess that there I'll find a hint

your store is online? if so, can you paste url? if not, maybe paste here piece of code? (with css styles)

armenak · April 2, 2013

Thank you for quick response. I really appreciate it.

As a demo I use this templete http://www.leotheme.com/prestashop/themes/200-leo-tshirt.html . II use loftab version 1.5 and in its folder there are 2 files, so post them both:

First, default.tpl

{if ($showTips == "lof-tooltip") AND ($checkversion >= 1.4)}

jQuery(document).ready(function() {ldelim}

jQuery("body").delegate("#lof-tabnews-module-{$moduleId}", 'mouseenter', function(){ldelim}

jQuery(".lof-tool-item-{$moduleId}").tooltip({ldelim}

effect: 'slide',

offset: [0, 2],

onBeforeShow: function(event, position) {ldelim}

this.getTip().appendTo(document.body);

return true;{rdelim}{rdelim}

);

{rdelim});

{/if}

var lofatabs = new Array();

var key = 0;

</script>

{if ($featuredTab == 1)}

lofatabs[key] = 'featuredTab-content';

key++;

</script>

<span class="bg-tabs-middle">{l s='Featured' mod='loftabs'}</span>

</span>

</a>

</div>

</li>

{/if}

{if ($newTab == 1)}

lofatabs[key] = 'newTab-content';

key++;

</script>

<span class="bg-tabs-middle">{l s='New Products' mod='loftabs'}</span>

</span>

</a>

</div>

</li>

{/if}

{if ($bestsellerTab == 1)}

lofatabs[key] = 'bestsellerTab-content';

key++;

</script>

<span class="bg-tabs-middle">{l s='Best Seller' mod='loftabs'}</span>

</span>

</a>

</div>

</li>

{/if}

{if ($specialTab == 1)}

lofatabs[key] = 'specialTab-content';

key++;

</script>

<span class="bg-tabs-middle">{l s='Specials' mod='loftabs'}</span>

</span>

</a>

</div>

</li>

{/if}

{if ($enablemanu == 1) AND ($manus != '')}

{foreach from=$manus item=manu}

{assign var='manustr' value="manu-"|cat:$manu.id_manufacturer}

lofatabs[key] = 'manuTab-content-{$manu.id_manufacturer}';

key++;

</script>

</span>

</a>

</div>

</li>

{/foreach}

{/if}

{if ($enableCate == 1)}

{foreach from=$cates item=cate}

{assign var='catestr' value='cate-'|cat:$cate.id_category}

lofatabs[key] = 'cateTab-content-{$cate.id_category}';

key++;

</script>

</span>

</a>

</div>

</li>

{/foreach}

{/if}

</ul>

</div>

{if $featuredTab == 1}

{include file="$featuredUrlLayouts"}

</div>

{/if}

{if $newTab == 1}

{include file="$newProductsUrlLayouts"}

</div>

{/if}

{if $bestsellerTab == 1}

{include file="$bestSellerUrlLayouts"}

</div>

{/if}

{if $specialTab == 1}

{include file="$specialUrlLayouts"}

</div>

{/if}

{if $enablemanu == 1}

{foreach from=$manus item=manu}

{include file="$manuUrlLayouts"}

</div>

{/foreach}

{/if}

{if $enableCate}

{foreach from=$cates item=cate}

{include file="$cateUrlLayouts"}

</div>

{/foreach}

{/if}

</div>

</div>

Edited April 2, 2013 by armenak (see edit history)

armenak · April 2, 2013

Second file - newproduct.tpl

{if (!empty($loflistNewProducts[0]))}

{if $firstAjax}

{if $showTips == 'lof-tipbox'}

/* <![CDATA[ */

jQuery(document).ready(function($) {ldelim}

jQuery("body").delegate("#lof-tabnews-module-{$moduleId}", 'mouseenter', function(){ldelim}

$(".lof-box-tools-new .product_label").hover(function() {ldelim}

$(".lof-box-tools-new .product_label").removeClass("open");

$(this).removeClass("opacize").addClass("open");

{rdelim}, function () {ldelim}

$(this).removeClass("open");

{rdelim});

$(".lof-box-tools-new .product_label .close").click(function() {ldelim}

$(this).parents(".product_label").removeClass("open");

$(".lof-box-tools-new .product_label").removeClass("opacize");

{rdelim});

/* ]]> */

</script>

{/if}

{if $totalPages > 1}

jQuery(document).ready(function() {ldelim}

jQuery("#lof-content-main-new-{$moduleId}").lofeasySliderTabs({ldelim}

prevId: 'lof-prev-new-{$moduleId}',

nextId: 'lof-next-new-{$moduleId}',

catId: 'new',

totalPage: {$totalPages},

moduleTheme: '{$theme}',

auto: {$autoPlay},

widthPage: {if $moduleWidth == 'auto'}'auto'{else}{$moduleWidth}{/if},

speed: {$speed},

continuous: true,

controlsShow:false

{rdelim});

</script>

{/if}

{if ($totalPages > 1 AND ($showButton == 1))}

</div>

{/if}

{/if}

{if $firstAjax}

{/if}

{foreach from=$loflistNewProducts[0] key=i item=item}

{if $showImage == 1}

{if $item.lof_online_only_icon != '' AND $onlineIcon == 1}

{/if}

{if $item.lof_sale_icon != '' AND $saleIcon == 1}

{/if}

{if $item.lof_new_icon != '' AND $newIcon == 1}

{/if}

{if $item.lof_features != '' AND $featureIcon == 1}

{/if}

{if ($showTips == "lof-tipbox")}

<span class="lof-price">{if !$priceDisplay}{convertPrice price=$item.price}{else}{convertPrice price=$item.price_tax_exc}{/if}</span>

{if $item.specific_prices AND ($priceSpecial == 1)} <span class="lof-price-discount">{displayWtPrice p=$item.price_without_reduction}</span>{/if}

</div>

<div class="box-detail"><a href="<?php echo $item['link'];?>">{l s='Detail' mod='loftabs'}</a></div>

</div>

{/if}

</div>

{if (($showTips == "lof-tooltip") AND ($checkversion >= 1.4))}

</div>

</div>

{/if}

{if ($showTitle == 1)}<h4><a href="{$item.link}" target="{$target}">{$item.name|truncate:20:'...'|escape:'htmlall':'UTF-8'}</a></h4>{/if}

{if ($showPuplic == 1)}

{$item.dateAdd}

</span>

{/if}

{if ($showDesc == 1)}<div class="lof-main-description"><p>{$item.description}</p></div>{/if}

{if ($showPrice == 1)}

<span class="lof-price">{if !$priceDisplay}{convertPrice price=$item.price}{else}{convertPrice price=$item.price_tax_exc}{/if}</span>

{if $item.specific_prices AND ($priceSpecial == 1)} <span class="lof-price-discount">{displayWtPrice p=$item.price_without_reduction}</span>{/if}

</span>

<a class="lof-detail" href="{$item.link}"><span>{l s='detail' mod='loftabs'}</span></a>

</div>

{/if}

{if (($item.quantity > 0 OR $item.allow_oosp))}

<a class="lof-add-cart ajax_add_to_cart_button" rel="ajax_id_product_{$item.id_product}" href="{$site_url}cart.php?add&id_product={$item.id_product}&token={$token}"><span>{l s='Add to cart' mod='loftabs'}</span></a>

{else}

<span class="lof-add-cart">{l s='Add to cart' mod='loftabs'}</span>

{/if}

</div>

{if ( ($i+1) % $limitnumcols== 0 AND $i < count($loflistNewProducts[0])-1 )}

{/if}

{/foreach}

{if $firstAjax}

</li>

{if $totalPages >= 2}

{section name=foo start=1 loop=$totalPages step=1}

</li>

{/section}

{/if}

</ul>

{/if}

{if $firstAjax}

</div>

{/if}

armenak · April 2, 2013

please, find attached global.css

Thank you.

global.css

Edited April 2, 2013 by armenak (see edit history)

armenak · April 3, 2013

Any idea? Nobody knows ?

Sign In

Need the product list thumbnails to be a little bit zoomed

Recommended Posts

armenak

Link to comment

Share on other sites

vekia

Link to comment

Share on other sites

armenak

Link to comment

Share on other sites

armenak

Link to comment

Share on other sites

armenak

Link to comment

Share on other sites

armenak

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Go back to prestashop.com