how to change Product Image orientation from horizontal to vertical?

  • Posts: 7
  • Thank you received: 0
10 months 3 weeks ago #354696

-- url of the page with the problem -- : leinetal.de
-- HikaShop version -- : 4.7.5
-- Joomla version -- : 4.3.4
-- PHP version -- : 8.1.22
-- Browser(s) name and version -- : all browser
-- Error-message(debug-mod must be tuned on) -- : no error message

Hello,
unfortunately, I can not figure out how to change the product image orientation.

The image i vertical and displayed in the correct orientation only if you click on the product image when the pop-up shows the image.

But on the product page, it is displayed in a horizontal orientation.

As my vendors tend to upload images of "Art" in both orientations, the "preview" shall be displayed as the pop-up image:

please have a look here:
leinetal.de/marktplatz/kategorien/produk...-postkarte-der-loewe

I'm sure that I'm simply looking not at the right spot to change that.

Any help is very appreciated :-)

sunny regards
Bernd

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

  • Posts: 82048
  • Thank you received: 13190
  • MODERATOR
10 months 3 weeks ago #354700

Hi,

HikaShop uses the GD library available by default with PHP to process images.
Unfortunately, GD doesn't take into account the EXIF data of images.
This has been an open issue for many years:
github.com/libgd/libgd/issues/341
Because of that, when the tool used to capture the image used the EXIF data of the image to specify the rotation of the image, instead of really rotating the image, the thumbnails generated from these images ignore the rotation in the EXIF data and thus the thumbnails look rotated.
Unfortunately, it seems that for GD to include this will require many more years of waiting.
So we actually worked on this many years ago to manually process the EXIF data.
And thus, since HikaShop 3.3.0, HikaShop will take into account the EXIF data to auto rotate the images for the thumbnails.

However:
- if the images was uploaded and used on an HikaShop older than this version, even if you updated later on, the thumbnails generated from the original image would still not be regenerated and thus would still not take into account the EXIF rotation.
- similarly, before PHP 7.2, many EXIF formats where not supported by PHP ( www.php.net/manual/en/function.exif-read-data.php ), even with the code in HikaShop, it couldn't read the EXIF data properly. So if you uploaded the image before moving to a version of PHP newer than 7.1, you would have to same problem.

This all means that normally, if you delete the images/com_hikashop/upload/thumbnails/ folder in order to let HikaShop generate the thumbnails, since you're using a recent version of PHP and a recent version of HikaShop, it should normally regenerate automatically the thumbnails with the correct auto rotation.
I actually tried to use your image on HikaShop 4.7.5 with PHP 8.1 on my end, and the auto rotation was properly taken into account.

Last edit: 10 months 3 weeks ago by nicolas.

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

  • Posts: 7
  • Thank you received: 0
10 months 2 weeks ago #354782

Thank you for explanation.
I will check tomorrow & report.

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

  • Posts: 7
  • Thank you received: 0
10 months 2 weeks ago #354797

Hi, i have deleted all content in that thubnail folder you mentioned above.

This does not have any Impact :-(

What would be my next step?
sunny regards
Bernd

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

  • Posts: 7
  • Thank you received: 0
10 months 2 weeks ago #354798

p.s Cache is deactivated and i checked from different devices browser etc.

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

  • Posts: 4616
  • Thank you received: 623
  • MODERATOR
10 months 2 weeks ago #354800

Hello,

It's a bit of a hack but why not use CSS?

Now it remains to be seen whether this can be suitable in all cases, and especially the sizes of your images.
If on the product page the main image is always the same then there is a good chance that it will work with very little adjustment

Example :

.hikashop_product_page div#hikashop_main_image_div img {
    transform: rotate(90deg);
}
Where "hikashop_product_page" is here to be sure that the command css is use only on product page.
Therefore note that you will have to add another CSS command to first adjust the positioning of the image.
Regards

Last edit: 10 months 2 weeks ago by Philip.

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

Time to create page: 0.065 seconds
Powered by Kunena Forum