Changing the White Background in Product Photos

[RosesCCRS]

I am not sure if this question should go to the template developer from where I bought my template but I thought I would try it here.

 

The product photos are set at a perfect square. I like how that looks uniform on the page BUT the white background is a bit stark. Is there a way to change the white background to a pattern or other color? In the example below the photo on the right has an added background which is a pattern I am using throughout the site. The photo on the left is how a product looks without a background. I am going to have multiple sellers selling their creations on the site, I am using the Agile Multi Seller module and I know most of the artists will not want to resize their photos into squares so a background or color will make the sizing less noticeable.

 

Thanks in advance for your advise!

[Jiten rash (away)]

change or set background on css li tag

[PascalVG]

It will happen automatically, when you use PNG pictures and set the image quality setting (Preferences->Images to use PNG for all images. It will the make the background transparent.

 

 

If you really want ANOTHER colour or so, edit the value in

/classes/ImageManager.php, function:

 * Resize, cut and optimize image
 *
 * @param string $src_file Image object from $_FILE
 * @param string $dst_file Destination filename
 * @param integer $dst_width Desired width (optional)
 * @param integer $dst_height Desired height (optional)
 * @param string $file_type
 * @return boolean Operation result
 */
public static function resize($src_file, $dst_file, $dst_width = null, $dst_height = null, $file_type = 'jpg', $force_type = false)
{

 

In there, is the code where is checked if PNG. If not then change (Red lines):

 

// If image is a PNG and the output is PNG, fill with transparency. Else fill with white background.

if ($file_type == 'png' && $type == IMAGETYPE_PNG)

{

imagealphablending($dest_image, false);

imagesavealpha($dest_image, true);

$transparent = imagecolorallocatealpha($dest_image, 255, 255, 255, 127);

imagefilledrectangle($dest_image, 0, 0, $dst_width, $dst_height, $transparent);

}

else

{

$white = imagecolorallocate($dest_image, 255, 255, 255);

imagefilledrectangle ($dest_image, 0, 0, $dst_width, $dst_height, $white);

}

 

Hope this helps,

pascal

[vekia]

that's right

you can also define other size for the image under the preferences > images tab. Size must be proportional to images that you uploaded. It's a bit hard to achieve, especially when you're using different sizes. In this case - Pascal's method will as you expect