Version 4.3.0 changes the hikashop_child_image size in the product page display

  • Posts: 5
  • Thank you received: 1
4 years 6 months ago #319084

-- url of the page with the problem -- : stage.palazzetti.ca/shop/seatimg/product/bel-air
-- HikaShop version -- : 4.3.0
-- Joomla version -- : 3.9.18
-- PHP version -- : 7.3
-- Browser(s) name and version -- : safari and firefox
-- Error-message(debug-mod must be tuned on) -- : NO ERRORS DURING UPDATE

Updating from hikashop 4.2.2: the _child_image of a produc page becomes distorted horizontally (too wide).

I have solved the issue by adding to the file:
/media/com_hikashop/frontend_default.caa:img.hikashop_child_image
just below the existing height:30; the following line
width:100;

It is interesting that our thumb images are a100x100 px and that the previous version was sizing them correctly. Version 4.3.0 seems to override the default height of 30px to 100px (as the old version did) but then it takes the width from somewhere else....

Question: Can I find another place where I can override this outside of the standard hikashop files?

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

  • Posts: 82867
  • Thank you received: 13373
  • MODERATOR
4 years 6 months ago #319089

Hi,

The issue I see on your link is that the width and height of the img tag are specified as attributes, and then in the CSS the height is forced but the width is not mentioned. Because of that, it uses the width of the img tag and you get the image distorded.
If I check on my end on a localhost website with the latest version of HikaShop, I don't have the width/height attributes set in the img tag and thus the problem doesn't happen. So I don't think it's linked to the update of your HikaShop.
So I suppose it's either some "optimization" system plugin adding these attributes to all the images on your website, or you have a template override of the show_block_img view file which specifies these attributes.
A simple solution is to just add such CSS:

img.hikashop_child_image {
    width: auto;
}
That way, the browser will calculate the width automatically based on the height you specified in the CSS and keep the ratio of the image so that it's not distorded. You can add such CSS in your template CSS or in the CSS of HikaShop.

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

  • Posts: 5
  • Thank you received: 1
4 years 6 months ago #319422

Hi Nicolas,
Thank you for your suggestions and explanations for a better way to solve the issue. In any case, as I said, I solved it, and all I have to do is to make sure I check the default css when there will be another update.

However, I thought that it could be useful to you to know why this is happening. I have re-created for you from the akeeba backup a stage.palazzetti.ca site, then upgraded joomla. I decided NOT to update the 14 extensions that needed to be updated. I'd like you to update the 13 extensions and leave out ONLY hikashop.
You can then display any product such as this one:
stage.palazzetti.ca/shop/seating/product/artika
before hika update and after hika update.

You will see that the main product thumb pictures work, but become distorted. This is to prove to you that it is hikashop new code that is changing something, and consequently I thought that you may want to understand the reasons for this, perhaps by checking the code of the 2 versions via DIFF.

In order to facilitate your possible analysis, I have copied in the root directory also a backup file: site-stage.palazzetti.ca-20200512-233541utc.jpa as well as the kickstart which will be all backed up if you do one more backup with akeeba or if you restore it on your computer.

Also in order to give you administrator access, I created an admin login as follows:
user: nicolas
pwd: hikashop

Regards, Paolo

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

  • Posts: 82867
  • Thank you received: 13373
  • MODERATOR
4 years 6 months ago #319423

Hi,

Well, yes and no.
I already knew what are the differences between the two versions. It's that before we didn't set the height and width attributes of the img tags for these thumbnails and now we do.
There is nothing bad in doing that, in fact it's better.
But the CSS of your template (or your custom CSS?) interacts with these thumbnails in a way that distord them with the width and height attributes specified in the img tag. And that's why you didn't had the issue before as these attributes were not there.

So I think don't we should change anything in HikaShop, but I appreciate the effort you took to help us here.

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

  • Posts: 5
  • Thank you received: 1
4 years 6 months ago #319440

Thank you Nicolas,
I was not suggesting you need to change hikashop. I was just trying to pinpoint how things happened.
I am not a PHP or web programmer, so I will try to identify the "custom"css and experiment on it, but for now I only managed to modify the default css of hikashop.

So thank you. I will remove your superuser login from our stage area.

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

Time to create page: 0.056 seconds
Powered by Kunena Forum