how to make image background transparent

[nostradamus]

i would like to make the product images background transparent. my product images are transparent gif files. and now its showing a white background instead of transparent.


i'm using the defeult thema

[San Diego]

hi

under backend
preferences
image
there you declare the size of your pics
upload it in the correct size
to get ride of the white
try a bit
can´t remember that someone found a solution to make it transparent
thats how i have it and i upload them 600x450
small 45 px 30 px Ändern Löschen
2 medium 80 px 60 px Ändern Löschen
3 large 300 px 225 px Ändern Löschen
4 thickbox 600 px 450 px Ändern Löschen
5 category 200 px 150 px Ändern Löschen
6 home 129 px 94 px Ändern Löschen
7 large_scene 300 px 200 px Ändern Löschen
8 thumb_scene 161 px 58 px Ändern Löschen
sd

[nostradamus]

its not the size that's the problem. I'm setting up a clothing store for my [spam-filter]. but the T Shirt images are transparent and shows white background instead of transparent.

i cant find the white background in the css. maybe it can be replast with a transparent gif file in the css.


the white part must com from somwhere

[San Diego]

hi,
there you may find it somehow, it is beyond my knowledge, he changed the code, so black becomes white, maybe you can
change it to become transparent.

http://www.prestashop.com/forums/viewthread/15988/general_discussion/black_background_solved/

hope it helps

sd

[guitarplayer]

Hello,


Well .jpg's can't have transparent backgrounds and the Prestashop solution generates .jpg's, to get it to have a transparent background you would have to change the product image generation file (I don't know which one does this for the moment) by changing where it is written .jpg to .gif or .png (these 2 formats support transparent backgrounds).

If you change the .css to transparent it'll do nothing as the images are .jpg's (they don't support transparency).


Best,

GuitarPlayer.

[nostradamus]

can someone tell me where to find it and change it?

[henribaeyens]

everything is going on in images.inc.php

in the function imageResize, a white canvas is generated and the image is placed in this canvas.

   $white = imagecolorallocate($destImage, 255, 255, 255);
   imagefill($destImage, 0, 0, $white);

You have two choices: fill the canvas with a color that matches your pages' background or make a transparent canvas:

//Make a transparent canvas
$trans = imagecolorresolve($destImage,255,255,255);
imagecolortransparent($destImage, $trans);
imagealphablending($destImage, false);

In the latter case, the image would have to be saved as a png or gif.

[Site]

Which in the below would need changing if I needed it to be 255, 0 , 0 red?

               /* Allow to keep nice look even if resized */
               $white = imagecolorallocate($newImage, 255, 255, 255);
               imagefill($newImage, 0, 0, $white);
               imagecopyresampled($newImage, $imageGd, 0, 0, 0, 0, $ratioX, $size, $x, $y);
               imagecolortransparent($newImage, $white);

Managed to do it...

   $white = imagecolorallocate($destImage, 255, 0, 0);
   imagefill($destImage, 0, 0, $white);

[sc157]

I am still trying to enable transparency. I see the following code in images.inc.php, but could you please advise? What needs to be edited?

$white = imagecolorallocate($destImage, 255, 255, 255);
   imagefill($destImage, 0, 0, $white);

   imagecopyresampled($destImage, $sourceImage, $borderWidth, $borderHeight, 0, 0, $nextWidth, $nextHeight, $sourceWidth, $sourceHeight);
   imagecolortransparent($destImage, $white);
   return (returnDestImage($fileType, $destImage, $destFile));
}

How does Henri's second piece of code fit into this? I'd like to have a PNG with a truly transparent canvas, not a JPG with a color that blends in. This is for Prestashop 1.3.1. Thank you very much.

[Laelenie]

there is a module that solves this issue automatically:

http://addons.prestashop.com/en/front-office-features/2844-transparent-png-support.html

[Bru]

Hi,

Simplest solution is:

In Back Office Preferences Images

 

set

Image quality

Use JPEG

x Use PNG only if the base image is in PNG format

Use PNG for all images

 

With some program like Photoshop,Photopaint,ACDsee or other Convert Your product picture from

*.jpg to *.png

 

then

in Back Office Catalog

Current product

2. Images

Browse and import this *.png file as usual

 

Then transparency work well!

[corint1]

don't work ... how make png in presta? only jpg

[Bru]

I made some, but by my opinion, non system solution to avoid transparency and background color problem. (PS 1.4.6.2)

 

My solution is: new imageResize(...) function and changes in *.tpl and *.css files

 

To save original I rename imageResize(...) function in images.inc.php.

Then I create following imageResize(...) function

/**
* Proportionaly shrink and optimize image
*
* @param array   $sourceFile image object from $_FILE
* @param string  $destFile Destination filename
* @param integer $mW maximum Destination image width (if $sW > $sH)
* @param integer $mH maximum Destination image height (if $sW <= $sH)
* @param string  $fileType (gif, png, jpg)
*
* @return boolean Operation result
*/
function imageResize($sourceFile, $destFile, $mW = NULL, $mH = NULL, $fileType = 'jpg')
{
 if (!file_exists($sourceFile)) { return false; }
 /* read information from $sourceFile to variables for source file */
 list($sW, $sH, $type, $attr) = getimagesize($sourceFile);
 if (!$sW) { return false; }  // $sW = 0
 if ($type < 1 or $type > 3) { return false; }  // no one of (1-gif, 2-png, 3-jpg)

 if ($mW == NULL) { $mW = $sW; }
 if ($mH == NULL) { $mH = $sH; }
 // If PS_IMAGE_QUALITY is activated, the generated image will be a PNG with .jpg as a file extension.
 // This allow for higher quality and for transparency. JPG source files will also benefit from a higher quality
 // because JPG reencoding by GD, even with max quality setting, degrades the image.
 if (Configuration::get('PS_IMAGE_QUALITY') == 'png_all' ||
 (Configuration::get('PS_IMAGE_QUALITY') == 'png' && $type == IMAGETYPE_PNG))
 { $fileType = 'png'; }


// ------------ set destination image dimmensions $dW, $dH ------------------------
 // $sW, $sH - source image dimmensions, sW-sourcewidth, sH-sourceHeight
 // $dW, $dH - destination image dimmensions, dW-destinationwidth, dH-destinationHeight
 // $mW, $mH - maximum destination image dimmensions, mW-maximumwidth, mH-maximumHeight

 switch (true):
 case ($sW <= $mW and $sH <= $mH): // if both Source dimmensions are smaller then Maximum dimmensions
$dW = $sW;  $dH = $sH;  break;  // Destination dimmensions = Source dimmensions

 // here some Source image dimmension is bigger then relevant Maximum image dimmension
 // i.e. ($sW > $mW or $sH > $mH)  
 case ($sH > $sW):  $dH = $mH;  $dW = (int)(($mH * $sW) / $sH);  break;  // adjust destination width
 case ($sH <= $sW): $dW = $mW;  $dH = (int)(($mW * $sH) / $sW);  break;  // adjust destination height
 default:
return false;  break;
 endswitch;
// ------------ end of set destination image dimmensions $dW, $dH -------------------

 $sourceImage = createSrcImage($type, $sourceFile);  // gif, png or jpg
 $destImage = imagecreatetruecolor($dW, $dH);		// define $destImage
 imagecopyresampled($destImage, $sourceImage, 0, 0, 0, 0, $dW, $dH, $sW, $sH);
 // create image file with quality set in BackOffice or default quality 7-png, 90-jpg
 return (returnDestImage($fileType, $destImage, $destFile));
}

You can test this function - in BackOffice add some images for your products.

PrestaShop *.tpl files will display all images like square (depend on BackOffice Image settings), therefore new added images will look mostly broader.

 

Because now new added images are not squares, and I want to save previous pages look and behavior, I must change all *.tpl and *.css files which display these images. (I needed to change circa 7 tpl and css files)

 

Here is example how to do it for e.g. Featured Product block:

1.

copy modules/homefeatured directory to themes/yourtheme/modules/homefeatured dir.

delete themes/yourtheme/modules/homefeatured/homefeatured.php

now You can edit themes/yourtheme/modules/homefeatured/homefeatured.tpl

2. replace:

<a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image">
 <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" />
</a>

with:

<div class="b_d01" style="height:{$homeSize.height}px; width:{$homeSize.width}px;">
 <a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image">
<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.name|escape:html:'UTF-8'}" />
 </a>
</div>

3. in proper *.css file, here "themes/yourtheme/css/global.css" add following style:

/*
need because of modified imageResize(...) function in images.inc.php.
for images in Featured Products block (homefeatured.tpl)
*/
div#featured-products_block_center div.b_d01 a.product_image img {
 display: block;  float: none;
 margin-left: auto;  margin-right: auto;
}

The similar pattern you can use for all *.tpl files which display product images.

 

Then in BackOffice for your products, delete previous images and add new images.

Look of previously saved images will stay unchanged.

 

Bru

[9smiths]

I know this post is old, but here's how I solved this problem:

 

Go to "product_list.css" in "themes/yourtheme/css." Under "#product_list a.product_img_link" delete "border: 1px solid #ccc."  Also converting to png and selecting "Use PNGs" in Backoffice --> Preferences --> Images gave all my images transparent backgrounds.

 

HTH! :-D