Product images resize

  • Posts: 221
  • Thank you received: 6
  • Hikashop Business
4 years 1 week ago #330482

-- url of the page with the problem -- : aketo.kz/paneli-operatora/simvolnye/prod...ategory_pathway-1854
-- HikaShop version -- : 4.4.1
-- Joomla version -- : 3.9.25
-- PHP version -- : 7.2
-- Browser(s) name and version -- : chrome

If to attach a few images (2 and more) in "files and images" of product settings and to choose not to store image localy and include only ALT and path to images

then on product page the resized images is not equal to set upted value in "system->configuration->general->images->maximum size of images in the product page" if you onmouseover image thumbnail but equal to image original size.

Also Default size for thumbnails ; can be override per menu/module. seems not working at all

How to fix ?

Last edit: 4 years 1 week ago by Bender. Reason: additional

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

  • Posts: 83404
  • Thank you received: 13498
  • MODERATOR
4 years 1 week ago #330483

Hi,

The original image size is 1000*1000. Just open the image on a new tab and you'll see that it's 1000*1000:
file.aketo.kz/avtor/owen/smi2/images/100...2-m-rezhim-green.png
So when you hover on the thumbnail, you don't get the image with the original size nor the size you setup in the HikaShop configuration. Because of your template CSS, the image size is the maximum space available in the area.
And that's what different from the size of the main image by default, which is the size you configured in the configuration (I suppose of 400*400).
To make it consistent, please edit the file show_block_img.php via the menu Display>Views and change the line:

$attr = 'title="'.$this->escape(@$image->file_description).'" onmouseover="return window.localPage.changeImage(this, \'hikashop_main_image'.$variant_name.'\', \''.$img->url.'\', '.$img->width.', '.$img->height.', \''.str_replace(array("'", '"'),array("\'", '"'),@$image->file_description).'\', \''.str_replace(array("'", '"'),array("\'", '"'),@$image->file_name).'\');"';
to:
$main_image_size = $img->width.', '.$img->height;
			if($img->external && $img->req_width && $img->req_height)
				$main_image_size .= $img->req_width.', '.$img->req_height;
			$attr = 'title="'.$this->escape(@$image->file_description).'" onmouseover="return window.localPage.changeImage(this, \'hikashop_main_image'.$variant_name.'\', \''.$img->url.'\', '.$main_image_size.', \''.str_replace(array("'", '"'),array("\'", '"'),@$image->file_description).'\', \''.str_replace(array("'", '"'),array("\'", '"'),@$image->file_name).'\');"';

Regarding thumbnails size you can configure in menu items and modules, please note that this is the size of the thumbnails on the listings. For the size of the thumbnails on the product details page, this can be changed with CSS:
www.hikashop.com/support/documentation/8...ling.html#thumbnails

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

  • Posts: 221
  • Thank you received: 6
  • Hikashop Business
4 years 6 days ago #330580

Appreciat. Now it works well.

a bit what this piece of code

$main_image_size .= $img->req_width.', '.$img->req_height;
i think .= need to replace to =

One more question about resizing attached images please:

If to attache image like in previous case in product listing it show differ than uploaded pictures
could you check please two products named = KIPPRIBOR HT-4044.ZA2 [M02] and KIPPRIBOR HT-6044.ZD3 [M02]
on this url aketo.kz/kippribor/tverdotelnye-rele/trekhfaznye-do-120a-ht
they are second and third in first row.

As i got, uploaded picture have a 200x200 thumbnail , but attached picture has no one, but resized not to 200x200, but 200x112
original images sizes of both products are in equal = full hd

how to make attached images looks like uploaded ?

Last edit: 4 years 6 days ago by Bender.

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

  • Posts: 83404
  • Thank you received: 13498
  • MODERATOR
4 years 6 days ago #330597

Hi,

Indeed, it should be = instead of .=
We'll change that on our end.

The thing is that with the image uploaded, HikaShop adds white borders are the top and bottom so that the thumbnails has the exact dimension you asked in the configuration even though the ratio of the image doesn't correspond to the ratio asked.
But for external URL images, HikaShop can't add these white borders and that's why you see it not centered vertically compared to the other images.
But you can solve that with a bit of CSS code:
stackoverflow.com/a/11716065
I've done a test on your URL and it works fine:
i.imgur.com/wqsjWIl.png

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

  • Posts: 221
  • Thank you received: 6
  • Hikashop Business
3 years 10 months ago #332455

Hi.
If to use external image and 4.2.2 update than New product page thumbnail features function does not work properly,
because it uses original image size instead resized as it define in attributes on line 111
look example here aketo.kz/owen/paneli-operatora/smi2/product/oven-smi2-m

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

  • Posts: 4816
  • Thank you received: 654
  • MODERATOR
3 years 10 months ago #332469

Hello,

Thanks for your returns, this allow us to provide a fix to the 4.4.2 for this case, and so to have this fix can you provide an update to check that it solve your current issue, please ?

Note : Check that you don't use some override that will prevent you to see the fix results.

Awaiting your returns
Regards

Last edit: 3 years 10 months ago by Philip.

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

  • Posts: 221
  • Thank you received: 6
  • Hikashop Business
3 years 10 months ago #332515

i think we need also to add code which you provide us earlier in show_block_img
on line 181 as it in v4.4.2

if($img->external && $img->req_width && $img->req_height)
				{
					$img->width=$img->req_width;
					$img->height=$img->req_height;
				}

before this code
$attr = $thumbnail_class.' title="'.$this->escape(@$image->file_description).'" onmouseover="return window.localPage.changeImage('				. 'this, \'hikashop_main_image'.$variant_name.'\', \''.$img->url.'\', '.$img->width.', '.$img->height.', \''.str_replace(array("'", '"'),				array("\'", '"'),@$image->file_description).'\', \''.str_replace(array("'", '"'),array("\'", '"'),@$image->file_name).'\', '.$key.');"';

Because in this issue we use external image 1000x1000 and 400x400 in configuration. So if to set target.width = 400; target.height = 400; in changeImage function HK v4.4.2 New product page thumbnail feature work well.

But the changeImage function located only in two places in file = first on it definition and the second where it call.
so probably this fix is right.

also
a.hikashop_slide_prev_active,
a.hikashop_slide_next_active {
    display: /*inline-*/block;
	z-index: 999;
}
works to display arrows correct left/right sides in frontend_default.css
i mean - display: block; intead display: inline-block;

Also i noticed similar external image bug in backend while order display (it show actual size image but not resized)
but did not checked code yet.

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

  • Posts: 4816
  • Thank you received: 654
  • MODERATOR
3 years 10 months ago #332520

Hello,

Thanks for your returns and informations, can we consider that your frontend problem is solved before talking about the backend?
If yes, can you details more your display issue throught annotated screenshot and details to try to better understand the context ?

Regards

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

  • Posts: 221
  • Thank you received: 6
  • Hikashop Business
3 years 10 months ago #332638

Hi, yes now this issue with frontend is solved

here is picture to show difference photos.app.goo.gl/hFBHXA5mwfcDKXMT8

Last edit: 3 years 10 months ago by Bender.

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

  • Posts: 221
  • Thank you received: 6
  • Hikashop Business
3 years 10 months ago #332639

about backend issue with same external image

order / show_products.php
on line 148-149

echo '<img class="hikashop_order_item_image" title="'.$this->escape(@$product->images[0]->file_description).'" 
			alt="'.$this->escape(@$product->images[0]->file_name).'" src="'.$img->url.'"/>';
do not include width and heigth parametrs of IMG tag at all

so if to include
echo '<img width="'.$width.'" height="'.$height.'" class="hikashop_order_item_image" title="'.$this->escape(@$product->images[0]->file_description).'" alt="'.$this->escape(@$product->images[0]->file_name).'" src="'.$img->url.'"/>';

it works

photos.app.goo.gl/Ht9PaMZCHJrjRH8R6

Last edit: 3 years 10 months ago by Bender.

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

  • Posts: 4816
  • Thank you received: 654
  • MODERATOR
3 years 9 months ago #332652

Hello,

Thanks for your return and suggestions, this help us to improve the HikaShop code !
Regards

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

Time to create page: 0.078 seconds
Powered by Kunena Forum