change background color in product image thumb

  • Posts: 32
  • Thank you received: 2
10 years 3 months ago #189012

-- HikaShop version -- : 2.3.5
-- Joomla version -- : 3.3.6
-- PHP version -- : 5.4
-- Browser(s) name and version -- : Safari 5.1.10

Hi Nicolas, (thank you for Hikashop, it's wonderful!)

I am trying to change the background color in my product image thumbnails. When they are not square, the default color appearing is white and I cannot figure out where to change it in the hikashop options or my css.




In the HikaShop Options for my category and product display Menu Items, I have tried changing the background color in 'Parameters for Products' and 'Parameters for Div' from white (#FFF) to black (#000), but it makes no difference.

Here is a list of css codes I have attempted: (in Hikashop's frontend_default.css)

div.hikashop_subcontainer.thumbnail {
background-color: #000 !important;
}

div.hikashop_product_image {
background-color: #000 !important;
}

div.hikashop_product_image_subdiv {
background-color: #000 !important;
}

img.hikashop_product_listing_image {
background-color: #000 !important;
}

I have also tried each of the above changes ensuring that I emptied Safari's cache after updating my css.

Here are the forum posts I have read that did not help:

www.hikashop.com/forum/4-how-to/58596-ch...mbnails-product.html

hikashop.com/forum/product-category-disp...-preview-images.html

Attachments:
Last edit: 10 years 3 months ago by prettysitepublishing.

Please Log in or Create an account to join the conversation.

  • Posts: 26230
  • Thank you received: 4035
  • MODERATOR
10 years 3 months ago #189032

Hi,

The second thread contains your solution.
You can also use this forum thread:
www.hikashop.com/forum/product-category-...-problem.html#172915
Which explain the same thing about the "background" parameter when you are using the function "getThumbnail".

I'm not sure you applied the modification because the thumbnail path is still "100x100f" for the image in your product listing.
So maybe you didn't override the right view for your product listing.
But the background in your listing should be "fix" in the image generation, not in the CSS.
You are forcing the size of the image to something square ; if the image is not square, the function will put in into a square so this bands are added.

Regards,


Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

Please Log in or Create an account to join the conversation.

  • Posts: 32
  • Thank you received: 2
10 years 3 months ago #189613

Hi Jerome, thank you for the helpful reply.

I have gone to the Hikashop component >Display>Views>Product> listing_img_title

and I have added the background command to the $image_options array. It now appears as follows:

_____

$image_options = array('default' => true,'forcesize'=>$this->config->get('image_force_size',true),'scale'=>$this->config->get('image_scale_mode','inside'),'background' => '#000000');

_____

I have also cleared my cache and reset Safari, but the appearance is the same. This has not changed the background color in my product thumbnails.

I have also gone to my image.php file ("administrator/components/com_hikashop/helpers/image.php") and found the line:
_____

$bgcolor = $this->_getBackgroundColor($thumb, @$options);
_____

is there a modification I must make here to 'background' to set the color to black instead of white?

Please Log in or Create an account to join the conversation.

  • Posts: 26230
  • Thank you received: 4035
  • MODERATOR
10 years 3 months ago #189694

Hi,

The image path is right so the background parameter is right read by the function.
I think that it could be a problem of color allocation.
Can you please try to update the function _getBackgroudColor with this code

	function _getBackgroundColor($resource, $color) {
		if(!empty($color)) {
			if(is_array($color)) {
				$bgcolor = imagecolorallocatealpha($resource, $color[0], $color[1], $color[2], 0);
				if($bgcolor === false || $bgcolor === -1)
					$bgcolor = imagecolorallocate($resource, $color[0], $color[1], $color[2]);
			} elseif( is_string($color) ) {
				$rgb = str_split(ltrim($color, '#'), 2);
				$bgcolor = imagecolorallocatealpha($resource, hexdec($rgb[0]), hexdec($rgb[1]), hexdec($rgb[2]), 0);
				if($bgcolor === false || $bgcolor === -1)
					$bgcolor = imagecolorallocate($resource, hexdec($rgb[0]), hexdec($rgb[1]), hexdec($rgb[2]));
			}
		}
		if(empty($bgcolor)) {
			$bgcolor = imagecolorallocatealpha($resource, 255, 255, 255, 0);
			if($bgcolor === false || $bgcolor === -1)
				$bgcolor = imagecolorallocate($resource, 255, 255, 255);
		}
		return $bgcolor;
	}
You will have then to empty the thumbnail folder "100x100fc000000" so HikaShop will have to recreate the thubmnail image.
If the problem persist, we will require a FTP access in order to debug and test it directly ; you will be able to send us such access using the "contact us" page (with a link to this forum thread).

Regards,


Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.
The following user(s) said Thank You: prettysitepublishing

Please Log in or Create an account to join the conversation.

  • Posts: 32
  • Thank you received: 2
10 years 2 months ago #192497

IT'S FIXED!!!!

At first I thought this didn't work, but then...I learned that 255,255,255 is white and 0,0,0 is black. So I used:

	function _getBackgroundColor($resource, $color) {
		if(!empty($color)) {
			if(is_array($color)) {
				$bgcolor = imagecolorallocatealpha($resource, $color[0], $color[1], $color[2], 0);
				if($bgcolor === false || $bgcolor === -1)
					$bgcolor = imagecolorallocate($resource, $color[0], $color[1], $color[2]);
			} elseif( is_string($color) ) {
				$rgb = str_split(ltrim($color, '#'), 2);
				$bgcolor = imagecolorallocatealpha($resource, hexdec($rgb[0]), hexdec($rgb[1]), hexdec($rgb[2]), 0);
				if($bgcolor === false || $bgcolor === -1)
					$bgcolor = imagecolorallocate($resource, hexdec($rgb[0]), hexdec($rgb[1]), hexdec($rgb[2]));
			}
		}
		if(empty($bgcolor)) {
			$bgcolor = imagecolorallocatealpha($resource, 0, 0, 0, 0);
			if($bgcolor === false || $bgcolor === -1)
				$bgcolor = imagecolorallocate($resource, 0, 0, 0);
		}
		return $bgcolor;
	}

Thank you so much Jermome!

Last edit: 10 years 2 months ago by Jerome. Reason: [code] is nice

Please Log in or Create an account to join the conversation.

  • Posts: 26230
  • Thank you received: 4035
  • MODERATOR
10 years 2 months ago #192517

Hi,

Regarding your code, I'm sorry but I don't think it solve the issue.
You change the default background color in HikaShop core file ; it means that you will loose that modification with the next update.
Because we won't change the default background color in HikaShop ; it will stay white as it is since the first version of HIkaShop (otherwise all other HikaShop users will have some issues).

Our goal here is to let you use a parameter to change the background color ; so the issue is not really fixed.

Regards,


Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

Please Log in or Create an account to join the conversation.

Time to create page: 0.069 seconds
Powered by Kunena Forum