Change image background (Theme Configurator)

[thabisomak]

Hi Guys

 

I've added a few images to my home page (home hook) using the Theme Configurator.

Problem is, If the images are too small, the white background appears.

 

i need help changing this background as I've changed my store's background from white.

 

I'm using Prestashop 1.6.1.10

[rocky]

I think it's following on line 247 of classes/ImageManager.php (in PrestaShop v1.6.1.11) that sets the background color of image thumbnails:

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

The parameters 255, 255, 255 are the RGB code for white. Change them to the RGB code of the background colour you want, then go to Preferences > Images and regenerate your thumbnails.

[thabisomak]

I think it's following on line 247 (in PrestaShop v1.6.1.11) that sets the background color of image thumbnails:

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

The parameters 255, 255, 255 are the RGB code for white. Change them to the RGB code of the background colour you want, then go to Preferences > Images and regenerate your thumbnails.

 

Thanks for your response, however this solution changes the background colour of the product images.

I need the background colour of the images from the Theme Configurator

[rocky]

The Theme Configurator module also uses the ImageManager::resize function, so changing it should affect the images generated by that module, as well as product images. If you need to have the change effect images from the Theme Configurator module only, you'll need to override the ImageManager class to add a parameter such as $theme_configurator and then override the module to pass in true for that parameter. Then you can add code like:

if ($theme_configurator) {
    $white = imagecolorallocate($dest_image, 0, 0, 0);
} else {
    $white = imagecolorallocate($dest_image, 255, 255, 255);
}

[thabisomak]

 

The Theme Configurator module also uses the ImageManager::resize function, so changing it should affect the images generated by that module, as well as product images. If you need to have the change effect images from the Theme Configurator module only, you'll need to override the ImageManager class to add a parameter such as $theme_configurator and then override the module to pass in true for that parameter. Then you can add code like:

if ($theme_configurator) {
    $white = imagecolorallocate($dest_image, 0, 0, 0);
} else {
    $white = imagecolorallocate($dest_image, 255, 255, 255);
}

I wish I understood everything you just said....but I'm still finding my way around, teaching myself as I go. 

 

How would I go about doing this, and which code would I edit?

[rocky]

I'll try to explain what to write, but it's not a simple change. You'd need to create override/classes/ImageManager.php with the following:

<?php

class ImageManager extends ImageManagerCore
{
    /**
     * Resize, cut and optimize image
     *
     * @param string $src_file   Image object from $_FILE
     * @param string $dst_file   Destination filename
     * @param int    $dst_width  Desired width (optional)
     * @param int    $dst_height Desired height (optional)
     * @param string $file_type
     * @param bool   $force_type
     * @param int    $error
     * @param int    $tgt_width
     * @param int    $tgt_height
     * @param int    $quality
     * @param int    $src_width
     * @param int    $src_height
     * @return bool Operation result
     */
    public static function resize($src_file, $dst_file, $dst_width = null, $dst_height = null, $file_type = 'jpg',
                                $force_type = false, &$error = 0, &$tgt_width = null, &$tgt_height = null, $quality = 5,
                                &$src_width = null, &$src_height = null, $theme_configurator = false)
    {
        if (PHP_VERSION_ID < 50300) {
            clearstatcache();
        } else {
            clearstatcache(true, $src_file);
        }

        if (!file_exists($src_file) || !filesize($src_file)) {
            return !($error = self::ERROR_FILE_NOT_EXIST);
        }

        list($tmp_width, $tmp_height, $type) = getimagesize($src_file);
        $rotate = 0;
        if (function_exists('exif_read_data') && function_exists('mb_strtolower')) {
            $exif = @exif_read_data($src_file);

            if ($exif && isset($exif['Orientation'])) {
                switch ($exif['Orientation']) {
                    case 3:
                        $src_width = $tmp_width;
                        $src_height = $tmp_height;
                        $rotate = 180;
                        break;

                    case 6:
                        $src_width = $tmp_height;
                        $src_height = $tmp_width;
                        $rotate = -90;
                        break;

                    case 8:
                        $src_width = $tmp_height;
                        $src_height = $tmp_width;
                        $rotate = 90;
                        break;

                    default:
                        $src_width = $tmp_width;
                        $src_height = $tmp_height;
                }
            } else {
                $src_width = $tmp_width;
                $src_height = $tmp_height;
            }
        } else {
            $src_width = $tmp_width;
            $src_height = $tmp_height;
        }

        // 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) && !$force_type) {
            $file_type = 'png';
        }

        if (!$src_width) {
            return !($error = self::ERROR_FILE_WIDTH);
        }
        if (!$dst_width) {
            $dst_width = $src_width;
        }
        if (!$dst_height) {
            $dst_height = $src_height;
        }

        $width_diff = $dst_width / $src_width;
        $height_diff = $dst_height / $src_height;

        $ps_image_generation_method = Configuration::get('PS_IMAGE_GENERATION_METHOD');
        if ($width_diff > 1 && $height_diff > 1) {
            $next_width = $src_width;
            $next_height = $src_height;
        } else {
            if ($ps_image_generation_method == 2 || (!$ps_image_generation_method && $width_diff > $height_diff)) {
                $next_height = $dst_height;
                $next_width = round(($src_width * $next_height) / $src_height);
                $dst_width = (int)(!$ps_image_generation_method ? $dst_width : $next_width);
            } else {
                $next_width = $dst_width;
                $next_height = round($src_height * $dst_width / $src_width);
                $dst_height = (int)(!$ps_image_generation_method ? $dst_height : $next_height);
            }
        }

        if (!ImageManager::checkImageMemoryLimit($src_file)) {
            return !($error = self::ERROR_MEMORY_LIMIT);
        }

        $tgt_width  = $dst_width;
        $tgt_height = $dst_height;

        $dest_image = imagecreatetruecolor($dst_width, $dst_height);

        // 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 {
            if ($theme_configurator) {
                $white = imagecolorallocate($dest_image, 0, 0, 0);
            } else {
                $white = imagecolorallocate($dest_image, 255, 255, 255);            
            }
            imagefilledrectangle($dest_image, 0, 0, $dst_width, $dst_height, $white);
        }

        $src_image = ImageManager::create($type, $src_file);
        if ($rotate) {
            $src_image = imagerotate($src_image, $rotate, 0);
        }

        if ($dst_width >= $src_width && $dst_height >= $src_height) {
            imagecopyresized($dest_image, $src_image, (int)(($dst_width - $next_width) / 2), (int)(($dst_height - $next_height) / 2), 0, 0, $next_width, $next_height, $src_width, $src_height);
        } else {
            ImageManager::imagecopyresampled($dest_image, $src_image, (int)(($dst_width - $next_width) / 2), (int)(($dst_height - $next_height) / 2), 0, 0, $next_width, $next_height, $src_width, $src_height, $quality);
        }
        $write_file = ImageManager::write($file_type, $dest_image, $dst_file);
        @imagedestroy($src_image);
        return $write_file;
    }
}

Change the following line to the RGB colour you want:

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

You'll also need to create override/modules/themeconfigurator/themeconfigurator.php with the following:

<?php

class ThemeConfiguratorOverride extends ThemeConfigurator
{
	protected function uploadImage($image, $image_w = '', $image_h = '')
	{
		$res = false;
		if (is_array($image) && (ImageManager::validateUpload($image, $this->max_image_size) === false) && ($tmp_name = tempnam(_PS_TMP_IMG_DIR_, 'PS')) && move_uploaded_file($image['tmp_name'], $tmp_name))
		{
			$salt = sha1(microtime());
			$pathinfo = pathinfo($image['name']);
			$img_name = $salt.'_'.Tools::str2url($pathinfo['filename']).'.'.$pathinfo['extension'];

            $error = 0;
            $tgt_width = null;
            $tgt_height = null;
            $src_width = null;
            $src_height = null;

			if (ImageManager::resize($tmp_name, str_replace(DIRECTORY_SEPARATOR.'override'.DIRECTORY_SEPARATOR, DIRECTORY_SEPARATOR, dirname(__FILE__)).'/img/'.$img_name, $image_w, $image_h, 'jpg', false, $error, $tgt_width, $tgt_height, 5, $src_width, $src_height, true))
				$res = true;
		}

		if (!$res)
		{
			$this->context->smarty->assign('error', $this->l('An error occurred during the image upload.'));
			return false;
		}

		return $img_name;
	}
}

After creating these files, go to Advanced Parameters > Performance and then click the "Clear cache" button (or manually delete cache/class_index.php) so PrestaShop can find the overrides.

[WPicking]

Sorry if my question is not at the right place, but talking about images I have the following problem: in the Them Configurator, I want to display 6 images (identical in size), ie 2 rows of 3 images. But the second row is apparently made of a small image plus a landscape image. So I cannot have 3+3 but only 3+2+1 for my 6 images.

Does anybody know where I could change that parameter if the css files ?

 

Many thanks !