[solved] Changing Product Image Size On Category Pages.

[rjfire]

My image is 1290 x 846. I go to the back office and click preferences>Images then change my category image preference to a smaller size and for some reason it stays only one size and doesn't fit in the boarder (See image) How do i edit the image size?

 

Thank you

-Ray

Edited August 5, 2013 by vekia (see edit history)

[Paulito]

Did you regenerate images

 

Paul

[rjfire]

Yes, every time i updated the image size i would regenerate them. And still no changes its really strange.

[Paulito]

Emptied cache?

[rjfire]

i did on my browser yes

[vekia]

you have to setup the size in proportion to the file size, then you will not have the white borders

(hope that i understood you well;) )

[rjfire]

I did that though :/ 1290 x 846 is the pictures size, i divided it by 3 for the category pictures and it did not move. I even set it to the original size and nothing happens. Right now the Category preference is 645 x 432 which is 1290 x 846 / 2. Still no luck :/

[rjfire]

Here is a screen shot of my image preferences if anyone needs to see it

 

[vekia]

thanks for clarification, can you say image type name for thumbnail that you attached:

 

?

[rjfire]

what do you mean image type name? like .jpg? because thats what it is. Not sure what you mean though haha sorry also did you see the other image i posted?

[vekia]

I mean that each image in your store has got own "type", each image types used in your store are defined in the preferences > images tab. Thumbnail that i pasted above also.

 

I suppose that you wondering how to check image type?

just right click on it and copy its url, in the picture name you will see something from this list:

 

 

just paste the name here

[rjfire]

Oh see that's what im not sure of. that picture is from my "Category" page. like i make a category for my products ex. "Women" then i click there and see all the products in that category. So when i go to the Category_Alysum and change the size it doesnt work :/

[vekia]

but the thumbnail looks like product picture, so it is picture for product, not for "category"

from pictures list only circled "image types" are related to the products

 

i just wondering which one is on thumbnail, so please share the image name (right click on product thumbnail > get picture url)

[rjfire]

I right clicked on the image and copied the image url "56-home_alysum/lace-line-turtleneck.jpg" is what it gave

[rjfire]

and it is a product sorry but it's located on the category page but yeah the url for it is http://(websitename)56-home_alysum/lace-line-turtleneck.jpg

[vekia]

thanks, so your thumb for product "cover" category items list is "home_alysum"

 

the size of it is 645x845

and it isn't proportional for 1290 x 846

 

setup the size, save changes and regenerate thumbnails for "home_alysum"

[rjfire]

645 x 845 isnt?? i divided 1290 x 846 by 2 and rounded up to get it 0,0 what should i put? and thanks for the tip btw! about copying the image url

[rjfire]

oh wait! 845 i had the wrong number there 0,0 for some reason, okay i put the proper number 432 now and im testing it

[rjfire]

IT WORKED! now i just gotta fix the Carousel on my home page the url for that is "large_alysum" so i gotta figure that out now XD haha thank you sooooo much!

[rjfire]

Now im in a pickle because the Carousel for products is messed up. The person who made it says it uses home_Alysum and large_Alysum so that is a little bit of an issue because i fixed the one i really needed to fix now the carousel is messy so i need to figure its best settings. here is a picture

 

 

[vekia]

so maybe it will be better to define new picture type for carousel? then you will be able to use separate images: one for carousel, home_alysum for product cover pictures

[rjfire]

i didn't know that was possible, how would i go about doing that now? haha sorry for all the trouble

[vekia]

just create new image type in the preferences > images

1. click on add new
   
2. define new picture name, for example carousel_alysum
   
3. define correct width and height (the same as original home_alysum)
   
4. check only "products"
   

save changes and regenerate thumbnails for this image type.

 

then edit the carousel module to use this new image type

[rjfire]

alright i can do all that no problem but the editing the carousel module to use the new image type is where it gets scary for me I have no idea how to do that, i'd assume it's in manage hooks? sorry im a web dev noob.

[vekia]

no worries, i will help you, just create new image types and let me know if this step is "ready"

 

then please paste here contents of the .php + .tpl file from carousell module

[rjfire]

the new type is ready for the files im going to have to do some digging

[rjfire]

in the php file this is what i get (this is the default one from my themes file but not on my ftp)

 

 

<?php

class productsCarousel extends Module

{

private $_html = '';

private $_postErrors = array();

 

function __construct()

{

$this->name = 'productsCarousel';

$this->tab = 'others';

$this->version = '1.1';

$this->author = 'Promokit Co.';

$this->need_instance = 0;

 

parent::__construct();

 

$this->page = basename(__FILE__, '.php');

$this->displayName = $this->l('Products Carousel on the homepage');

$this->description = $this->l('Displays Products Carousel in Your Homepage');

}

 

function install()

{

if (!Configuration::updateValue('CAROUSEL_PRODUCTS_NUMBER', 8) OR

!Configuration::updateValue('PRODUCTS_TYPE', 0) OR

!Configuration::updateValue('PRODUCTS_VISIBLE', 5) OR

!Configuration::updateValue('PRODUCTS_TO_SCROLL', 1) OR

!Configuration::updateValue('CELL_WIDTH', 164) OR

!parent::install() OR

!$this->registerHook('header') OR

!$this->registerHook('displayHome')

) return false;

return true;

}

 

 

public function uninstall()

{

return (parent::uninstall());

}

 

public function getContent()

{

$output = '<div style="width:800px; margin:0 auto"><h2>'.$this->displayName.'</h2>';

if (Tools::isSubmit('submitHomeFeatured'))

{

Configuration::updateValue('PRODUCTS_TYPE', intval(Tools::getValue('products_type')));

$nbr = intval(Tools::getValue('nbr'));

$products_visible = intval(Tools::getValue('products_visible'));

$products_to_scroll = intval(Tools::getValue('products_to_scroll'));

$cell_width = intval(Tools::getValue('cell_width'));

if (!$nbr OR $nbr <= 0 OR !Validate::isInt($nbr))

$errors[] = $this->l('Invalid number of products');

else

Configuration::updateValue('CAROUSEL_PRODUCTS_NUMBER', $nbr); /*---------------------*/

if (!$products_visible OR $products_visible <= 0 OR !Validate::isInt($products_visible))

$errors[] = $this->l('Invalid number of products number');

else

Configuration::updateValue('PRODUCTS_VISIBLE', $products_visible); /*---------------------*/

if (!$products_to_scroll OR $products_to_scroll <= 0 OR !Validate::isInt($products_to_scroll))

$errors[] = $this->l('Invalid number of visible products');

else

Configuration::updateValue('PRODUCTS_TO_SCROLL', $products_to_scroll);/*---------------------*/

if (!$products_to_scroll OR $products_to_scroll <= 0 OR !Validate::isInt($products_to_scroll))

$errors[] = $this->l('Invalid number of products to scroll');

else

Configuration::updateValue('CELL_WIDTH', $cell_width);

if (isset($errors) AND sizeof($errors))

$output .= $this->displayError(implode('<br />', $errors));

else

$output .= $this->displayConfirmation($this->l('Settings updated'));

}

$output .= "</div>";

return $output.$this->displayForm();

}

 

public function displayForm()

{

 

$output = '

<form action="'.$_SERVER['REQUEST_URI'].'" method="post" style="width:800px; margin:0 auto">

<fieldset><legend><img src="'.$this->_path.'logo.png" width="16" height="16" alt="" title="" />'.$this->l('Carousel settings').'</legend>

<h4>Products type</h4>

<div style="overflow:hidden">

<label style="text-align:right; width:200px;">'.$this->l('Featured products').'</label><input type="radio" name="products_type" value="1" '.((Configuration::get('PRODUCTS_TYPE') == 1) ? 'checked="checked" ' : '').'/>

</div>

<div style="overflow:hidden">

<label style="text-align:right; width:200px;">'.$this->l('New products').'</label>

<input type="radio" name="products_type" value="0" '.((Configuration::get('PRODUCTS_TYPE') == 0) ? 'checked="checked" ' : '').'/>

</div>

<div style="overflow:hidden">

<label style="text-align:right; width:200px;">'.$this->l('Special products').'</label>

<input type="radio" name="products_type" value="2" '.((Configuration::get('PRODUCTS_TYPE') == 2) ? 'checked="checked" ' : '').'/>

</div>

<h4>Quantity Products</h4>

<div style="overflow:hidden">

<label style="text-align:right; width:200px;">'.$this->l('The number of all products').'</label>

<input type="text" size="1" name="nbr" value="'.(Configuration::get('CAROUSEL_PRODUCTS_NUMBER')).'" />

</div>

<br/>

<div style="overflow:hidden">

<label style="text-align:right; width:200px;">'.$this->l('The number of visible products').'</label>

<input type="text" size="1" name="products_visible" value="'.(Configuration::get('PRODUCTS_VISIBLE')).'" />

</div>

<br/>

<div style="overflow:hidden">

<label style="text-align:right; width:200px;">'.$this->l('The number of items to scroll').'</label>

<input type="text" size="1" name="products_to_scroll" value="'.(Configuration::get('PRODUCTS_TO_SCROLL')).'" />

</div>

 

<br/><br/>

<input type="submit" name="submitHomeFeatured" value="'.$this->l('Save').'" class="button" />

</fieldset>

</form>';

return $output;

}

 

public function getImages($products, $params) {

 

foreach ($products as $key => $product) {

 

$imgholder = Image::getImages((int)($params['cookie']->id_lang), $product["id_product"]);

foreach ($imgholder as $k => $img) {

if ($k < 2) {

if ($k == 0) {

$productData[$key]["prodCover"] = Image::getCover($product["id_product"]); // get product cover image

 

} else {

$productData[$key]["image"] = $img["id_image"];

}

$productData[$key]["data"] = $product;

}

}

}

 

return $productData;

}

 

public function hookDisplayHome($params)

{

$idLang = (int)($params['cookie']->id_lang);

$category = new Category(Context::getContext()->shop->getCategory(), Configuration::get('PS_LANG_DEFAULT'));

$nb = (int)(Configuration::get('CAROUSEL_PRODUCTS_NUMBER'));

 

$orderBy = Tools::getProductsOrder('by', Tools::getValue('orderby'));

$orderWay = Tools::getProductsOrder('way', Tools::getValue('orderway'));

 

$new = Product::getNewProducts($idLang, 0, (int)(Configuration::get('CAROUSEL_PRODUCTS_NUMBER'))); /*get new products*/

$featured = $category->getProducts($idLang, 1, ($nb ? $nb : 10)); /* get featured products */

$specials = Product::getPricesDrop($idLang, 0, (Configuration::get('CAROUSEL_PRODUCTS_NUMBER')), false, $orderBy, $orderWay); /* get special products */

 

switch (Configuration::get('PRODUCTS_TYPE')) {

case 0:

$products = $this->getImages($new, $params);

break;

case 1:

$products = $this->getImages($featured, $params);

break;

case 2:

$products = $this->getImages($specials, $params);

break;

default:

$products = $this->getImages($featured, $params);

}

 

$this->smarty->assign(array(

'pth' => $this->_path,

'carouselProducts' => $products,

'products_type' => Configuration::get('PRODUCTS_TYPE'),

'visible_products' => Configuration::get('PRODUCTS_VISIBLE'),

'products_to_scroll' => Configuration::get('PRODUCTS_TO_SCROLL')

));

 

return $this->display(__FILE__, 'productsCarousel.tpl');

}

 

public function hookHeader($params)

{

$this->context->controller->addCSS($this->_path.'css/productsCarousel.css', 'all');

$this->context->controller->addJS($this->_path.'js/jquery.hoverdir.js');

$this->context->controller->addJS($this->_path.'js/modernizr.custom.97074.js'); // for hover effect

}

 

public function hookTop($params)

{

return $this->hookDisplayHome($params);

}

 

}

[rjfire]

in the .tpl i get (also this is from the default theme not from my ftp)

 

 

{if $page_name == "index"}

<div class="clear"></div>

<!-- jCarousel library -->

<div class="preloadImg"><div></div></div>

<div id="productsCarousel" class="main">

<div class="container_border">

{if $products_type == 0}

<h4>{l s='New products' mod='productsCarousel'}</h4>

{elseif $products_type == 1}

<h4>{l s='Featured products' mod='productsCarousel'}</h4>

{elseif $products_type == 2}

<h4>{l s='Special products' mod='productsCarousel'}</h4>

{/if}

<button class="nav_prev"></button>

<button class="nav_next"></button>

<div class="viewport_container">

<div class="viewport">

<div class="jCarouselLite">

{if $carouselProducts}

<ul id="da-thumbs" class="da-thumbs carouFredSel">

{foreach from=$carouselProducts item=product name=products}

{assign var='productLink' value=$link->getProductLink($product.data.id_product, $product.data.link_rewrite)}

<li class="block_product ajax_block_product slide">

<div class="carouselContainer">

<a href="{$productLink}" title="{$product.data.legend}" class="slide-animate product_image_crs">

<img src="{$link->getImageLink($product.data.link_rewrite, "{$product.prodCover.id_product}-{$product.prodCover.id_image}", $img_name.home)}" alt="{$product.data.name|escape:html:'UTF-8'}" class="add_to_cart_image" />

{if isset($product.image)}

<div>

<img src="{$link->getImageLink($product.data.link_rewrite, "{$product.data.id_product}-{$product.image}", $img_name.large)}" alt="{$product.data.name|escape:html:'UTF-8'}" />

</div>

{/if}

</a>

<a class="f_title" href="{$productLink}" title="{$product.data.legend}">{$product.data.name|escape:htmlall:'UTF-8'|truncate:35}</a>

{if $product.data.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}

<div class="price">

 

<span>{convertPrice price=$product.data.price_without_reduction}</span>

{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}

<a class="exclusive ajax_add_to_cart_button" rel="ajax_id_product_{$product.data.id_product}" href="{$link->getPageLink('cart.php')}?qty=1&id_product={$product.data.id_product}&token={$static_token}&add" title="{l s='Add to cart' mod='productsCarousel'}">{l s='Add to cart' mod='productsCarousel'}</a>

{else}

<a href="{$productLink}" class="button exclusive">{l s='View' mod='productsCarousel'}</a>

{/if}

</div>

{/if}

</div>

</li>

{/foreach}

</ul>

{else}<b>{l s='No products' mod='productsCarousel'}</b>{/if}

</div>

</div>

</div>

</div>

</div>

<script type="text/javascript">

$(function() {

$('#da-thumbs > li > div.carouselContainer a').each( function() { $(this).hoverdir(); } );

});

</script>

{/if}

[vekia]

are you sure that these files are from carousel module? BOTH?

[rjfire]

yep i went into the theme i bought in my downloads folder navigated to the modules and found productcarousel opened it and found these files

[rjfire]

I can make you a temp account on the BE of my site and let you do it really quickly if you want? it's your choice haha i think it might just be a little easier

[vekia]

hello

 

what is the name of the module that you use for this?

i suppose that it is free - then i will check it on my own demo store

[rjfire]

Producs carousel on the home page by promokit Co. I dont think its free but it came with my theme

[rjfire]

any tips at all? the carousel has gotten worse. When u put your cursor over it it is supposed to display alternate photos from the product but this shows both in the same photo area 0.0

[vekia]

it's really hard to help without sources. Image definition you've got here:

 

<img src="{$link->getImageLink($product.data.link_rewrite, "{$product.prodCover.id_product}-{$product.prodCover.id_image}", $img_name.home)}" alt="{$product.data.name|escape:html:'UTF-8'}" class="add_to_cart_image" />

 

<img src="{$link->getImageLink($product.data.link_rewrite, "{$product.data.id_product}-{$product.image}", $img_name.large)}" alt="{$product.data.name|escape:html:'UTF-8'}" />

[rjfire]

i can give you an account to do what ever u need to fix it or something if you like

[vekia]

i will need only ftp access to change the sources of the files mentioned here

[rjfire]

okay no problem i will PM u now with the info.

[rjfire]

My team mate Alex has just messaged u saying the ftp info

[vekia]

thanks

 

turn CCC off and turn force compilation ON

[vekia]

done, can you check it now?

[rjfire]

omg dude you are amazing!!!! THANK YOU SO MUCH! im so happy to find people like you in the presta community You have no idea how happy i am right now!! Thank you so much again

[vekia]

im glad that i could help you

can i mark this topic as [solved] ?

[rjfire]

yes of course haha thanks again! ^.^

[syndrom18]

I have the same problem and don't know how to solve it.Images are not changed. What needs to be changed? Please help

[vekia]

after size change you need to regenerate thumbs

[ubkstore]

i am facing this problem, my product images are not seen in full!!

 

attached the images please advise what should be done

 

i am new to prestashop and dont have much technical knowleage

[Sandeep Tiwari]

Thanks Vekia, that solves my issue

[louis323]

http://hp-projects.nl/index.php?id_category=3&controller=category&id_lang=2 have also a problem with the size of the img.

they are to smal.... can`t get it to work.