Featured products homepage image dimensions

[innocuous]

How do I change the image dimensions of featured products on homepage?

Using PS 1.5.1

Currently it is displaying 124px x 124px images.

 

I want to change to 210px x268px.

 

I have modded the layout to single column frontpage with width 976px, so accomodating 4 products/row should not be a problem.

 

Can anyone help? Unable to find where to set the width!

 

ps- developing site on localhost so cannot give preview

[vekia]

How do I change the image dimensions of featured products on homepage?

Using PS 1.5.1

Currently it is displaying 124px x 124px images.

 

I want to change to 210px x268px.

 

I have modded the layout to single column frontpage with width 976px, so accomodating 4 products/row should not be a problem.

 

Can anyone help? Unable to find where to set the width!

 

ps- developing site on localhost so cannot give preview

 

it is not as simple as it seems. For the first you must configure "Images" settings in back office. go to preferences -> images and add new position with image dimensions you want. Next you must change the image parameter in homefeatured.tpl file

[innocuous]

Thanks. I change in the backoffice. I could not find any image settings in homefeatured.tpl.

 

However when I refreshed the homepage, the images were resized!

 

Thanks a lot!

[innocuous]

I changed on BO but even the category pages are displaying the bigger sizes now!

I had changed home_default so I guess that propogated everywhere.

 

I undid and added new called "featured_default" and set it to 210x268 for products.

I went to homefeatured.tpl and changed image param to:

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

<a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'featured_default')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" />{if isset($product.new) && $product.new == 1}<span class="new">{l s='New' mod='homefeatured'}</span>{/if}</a>

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

 

I replaced home_default with featured_default in above. Thats the only place I could find home_default.

 

At first the image did not display. I regenerated thumbnails from BO and they are showing now. BUT again they are 124x124px only.

 

So this did not work.

[vekia]

I changed on BO but even the category pages are displaying the bigger sizes now!

I had changed home_default so I guess that propogated everywhere.

 

I undid and added new called "featured_default" and set it to 210x268 for products.

I went to homefeatured.tpl and changed image param to:

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

<a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'featured_default')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" />{if isset($product.new) && $product.new == 1}<span class="new">{l s='New' mod='homefeatured'}</span>{/if}</a>

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

 

I replaced home_default with featured_default in above. Thats the only place I could find home_default.

 

At first the image did not display. I regenerated thumbnails from BO and they are showing now. BUT again they are 124x124px only.

 

So this did not work.

 

hi, you must change also width and height parameter, exactly as below:

 

<a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'featured_default')}" height="{$featuredSize.height}" width="{$featuredSize.width}" alt="{$product.name|escape:html:'UTF-8'}" />{if isset($product.new) && $product.new == 1}<span class="new">{l s='New' mod='homefeatured'}</span>{/if}</a>

[innocuous]

Funny, I tried that earlier but it didn't work! Tried again now and it worked.

 

Thanks a ton!

[johnchristy]

hi

 

this way i enlarged the image size, but the featured product image frame is stll the same size. means the image is not fitted to the image frame now. where can i change the featured image frame size?

 

John

[vekia]

what do you mean by image frame?

 

Can you prepare a screenshot?

[BoKr]

Anyway,

 

I think it is also possible to change the dimensions directly:

height="{$featuredSize.height}" width="{$featuredSize.width}

							 or

height="215" width="215}

 

 

And that leads me to my issue and question:

 

"What is the purpose of adding a new dimension setting with a new 'name' in BO/prefereces/images.

E.g.:

 

Is the purpose to create a new reference for variables and besides that are those images resized in a very sophisticated way?

I am asking that since I am using the Prestashop ALT theme that has in my case a center tab width of 678px

#center_column {
   margin: 0 0 30px;
   overflow: hidden;
   width: 678px;
}
#left_column, #center_column, #right_column {
   float: left;
}
* {
   margin: 0;
   padding: 0;
}

 

and I got huge problems to create a nice featured product list in the center column.

I tried with ca. 125px and without margin. So I could display tons of featured images. But only since I took out the

product description, price, more and cart button.

 

I do not like this way so I decided to create something like this template uses:

http://www.prestacrea.com/templates-prestashop/124-template-prestashop-jeanslook.html

 

Problem is that my images in the ALT template with a 600x600 thickbox do not look nice then.

 

May be I have to rebuild all thumbs?

Or is there another way/trick to get sharp images in any given frame size in the featured product list?

 

thanks alot!

 

 

PS:

Can you help me with the code for new products,too?

<a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image">
  <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'featureprod')}" height="{$featuredSize.height}" width="$featuredSize.width" alt="{$product.name|escape:html:'UTF-8'}" style="border:1px solid #E1E9EC" /> <br />

{* />{if isset($product.new) && $product.new == 1}<span class="new">{l s='New' mod='homefeatured'}</span>{/if}*}

    </a>

I have troubles to merge those lines.

 

PS 1.4.9

[xroot2]

hi, you must change also width and height parameter, exactly as below:

 

<a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'featured_default')}" height="{$featuredSize.height}" width="{$featuredSize.width}" alt="{$product.name|escape:html:'UTF-8'}" />{if isset($product.new) && $product.new == 1}<span class="new">{l s='New' mod='homefeatured'}</span>{/if}</a>

Images are placed in <li><li> when you change img dementions  you need to change <li> width display to...

 

<li style="width:210px;" class="ajax_block_product {if $smarty.foreach.homeFeaturedProducts.first}first_item{elseif $smarty.foreach.homeFeaturedProducts.last}last_item{else}item{/if} {if $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 1} {/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - $totModulo)}last_line{/if}">

 

it will display your image in proper demention

Edited January 26, 2014 by xroot2 (see edit history)

[Jaje]

In the previous version I just changed homefeatured.css (featured-products_block_center li), entered width/height  that I wanted and then change it in the back office and everything worked well. In the 1.5.6.2 version changing this only seem to effect the area around the picture, any tip which line I should change/add to change only picture dimensions? Thanks.

[vekia]

In the previous version I just changed homefeatured.css (featured-products_block_center li), entered width/height  that I wanted and then change it in the back office and everything worked well. In the 1.5.6.2 version changing this only seem to effect the area around the picture, any tip which line I should change/add to change only picture dimensions? Thanks.

in fact, everything depends on theme, some of them uses <li> (with definition: display:inline-block) and some of them just simple li.

can you share url to your website, please?