[SOLVED] How to reduce image-container width (list view) - Prestashop 1.6 ?

[IgorOsnitsky]

Hello, Prestashop gurus and newbies!

 

First of all many thanks for this forum as a huge information, knowledge and know-how source.

It helps even people with minor skills in smarty and css like me.  

I found many answers for my questions even without any new topic placing.

 

I would be pleased if You could give me some feeddback how to get more compact view of product-list (list view) and product pages in default-bootstrap theme.

 

I tried  to resize images (home-default) from 250*250 to 150*150 in order to make view of product listing more compact and to get the rows narrow. 

Grid view is ok - I get the decision changing No of columns per page from 3 to 4.

 

The height of image-container is getting smaller but the width is the same as for default sizes (250 * 250). The image container is getting rectangular rather than squared.

 

I cannot find the decision playing with product-list.tpl and product_list.css.

How to remove those background side fields (marked with red crosses - screen attached)  and to get squared view of the container?

 

Appreciate Your comments

 

Edited October 31, 2014 by IgorOsnitsky (see edit history)

[Liofey]

similar problem with me

[moy2010]

That seems like a padding space in the div. If you share your URL, we could tell you how to fix it .

[IgorOsnitsky]

Hi!

 

Thanks for Your attention. 

Please take a look - http://mk-i-tochka.ru/7-kofty-bluzki-vodolazki

 

I have not found the way through the product_list.css  editing

[DrunkBug]

li.ajax_block_product > div.product-container > div.row > div.left-block col-xs-4 col-xs-5 col-md-4

Now, for this <div class="left-block col-xs-4 col-xs-5 col-md-4">, change columns numbers, try to change col-md-4 to col-md-3 and you'll see how it shrinks. Don't forget to change other divs in div.product-container to fill 12 columns in a row. This part is responsive, so the other way is to make that column fixed-width, but again, don't forget to change everything else in product-container div then.

[IgorOsnitsky]

Hello, DrunkBug!  

 

Thanks for Your attention. Guess You mean product-list.tpl 

 

I have found something like this in my file - it looks different:

<li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-12 col-sm-4 col-md-3{else} col-xs-12 col-sm-6 col-md-3{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLine == 0} last-in-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLine == 1} first-in-line{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModulo)} last-line{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 0} last-item-of-tablet-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 1} first-item-of-tablet-line{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 0} last-item-of-mobile-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 1} first-item-of-mobile-line{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModuloMobile)} last-mobile-line{/if}">

<div class="product-container" itemscope itemtype="http://schema.org/Product">

<div class="left-block">

<div class="product-image-container">

<a class="product_img_link" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url">

<img class="replace-2x img-responsive" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />

</a>

 

 

 

I have made some minor changes here to adopt 4  columns in the grid  view: 

(thanks to tutorial - http://blog.belvg.com/how-to-change-default-grid-in-prestashop-1-6.html ) 

 

Guess I should to read something more about the template structure because I am not good in this language. 

Thank You in advance for Your recommends.

[DrunkBug]

Oh, sorry, didn't looked myself into .tpl file. My bad. You need to change /themes/your_theme/js/global.js file. Find in that file function display(view){}, in that function, find this line, it's line number 237 in default file on my installation:

html += '<div class="left-block col-xs-4 col-xs-5 col-md-4">' + $(element).find('.left-block').html() + '</div>';

So here you can change what I told you to change. Also, below this line, find those two lines:

html += '<div class="center-block col-xs-4 col-xs-7 col-md-4">';

html += '<div class="right-block col-xs-4 col-xs-12 col-md-4"><div class="right-block-content row">';

Change those too, to fit 12 columns grid. I.e., if you change on left-block col-md-4 to col-md-3, change right-block or center-block to col-md-5 etc.

[IgorOsnitsky]

Many thanks, DrunkBug ! 

 

I played with col-md- parameter for left-block, center block as You recommend  and see now that the view is appropriate.

 

html += '<div class="left-block col-xs-4 col-xs-5 col-md-3">' + $(element).find('.left-block').html() + '</div>';
html += '<div class="center-block col-xs-4 col-xs-7 col-md-5">';

Left-block                   col-md-*    changed from 4 to 3

Center-block              col-md-*     changed from 4 to 5

 

to balance the full width of the product-list.tpl  

 

More or less understood structure of columns - thank You very much.

 

Also warm words for other Prestashop forum users who shares useful things on that issue.

 

Like those topics

 

http://www.prestashop.com/forums/topic/345937-prestashop-product-center-column-width-100/

 

http://www.prestashop.com/forums/topic/337177-solved-get-smaller-product-boxes/

 

and many others...