How to handle different sized images

  • Posts: 4
  • Thank you received: 0
13 years 9 months ago #5828

Hi There -
I'm new to HikaShop but getting the hang of it. I am having difficulty with the product page display because of differing image sizes. I have about 5 images per product and they are different sizes - some are horizontal (e.g. 524 x 350) and some are vertical (e.g. 279 x 550). When I hover over the thumbnails on the product page, the entire page jumps around as it resizes the displayed image.

I've searched the forum but can't seem to find the answer.

Any ideas?

Thanks!

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

  • Posts: 82821
  • Thank you received: 13368
  • MODERATOR
13 years 9 months ago #5836

Hi,

That's indeed the first time someone report us the problem. Could you give the URL of your website ?

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

  • Posts: 242
  • Thank you received: 0
13 years 9 months ago #5850

Good Morning,

I have experienced the same problem and would like to see a solution. You can see an example here .

Regards,
Ed

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

  • Posts: 82821
  • Thank you received: 13368
  • MODERATOR
13 years 9 months ago #5852

You can just add some CSS (in the config under the tab display in the zone CSS) to fix the height of the main image div:

#hikashop_main_image_div{
height: 105px;
}

We'll do something on our end to set the height automatically based on the thumbnails height option in the config in future releases.

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

  • Posts: 242
  • Thank you received: 0
13 years 9 months ago #5854

Thanks Nicolas,

That works!

Ed

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

  • Posts: 242
  • Thank you received: 0
13 years 9 months ago #5858

Hi Nicolas,

I spoke a little too soon. Look at this example (product with characteristics). Changing the characteristic (Resolution) causes the display to jump and revert to the default height for images.

Regards,
Ed

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

  • Posts: 82821
  • Thank you received: 13368
  • MODERATOR
13 years 9 months ago #5861

You need to add that CSS also for the divs of the variants:
hikashop_main_image_div_11 and hikashop_main_image_div_10 in your case.

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

  • Posts: 242
  • Thank you received: 0
13 years 9 months ago #5863

That fixed the image jumping problem, but there is still a problem when you first click the Resolution drop-down. Images remain in place but all the text jumps down a notch.

Ed

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

  • Posts: 82821
  • Thank you received: 13368
  • MODERATOR
13 years 9 months ago #5874

Could you edit the file show of the view product via the menu Display->Views and remove the line :
?><br/><?php

That should solve the problem.

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

  • Posts: 4
  • Thank you received: 0
13 years 9 months ago #5878

Thank you - the original CSS fix suggested worked great for me!

John

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

  • Posts: 242
  • Thank you received: 0
13 years 9 months ago #5880

@nicolas - Thanks, that seems to have solved the problems.

@John - Sorry to hijack your thread, but one thing seemed to lead to another. Glad to hear your problem was resolved.

Ed

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

  • Posts: 242
  • Thank you received: 0
13 years 9 months ago #6220

Nicolas,

Your code changes fixed my problems, but 1.4.4 broke them again. I thought maybe changes in 1.4.4 were conflicting with the suggestions offered in this thread, so I took them out, but there is still a problem. Sample image attached.

Ed

Attachments:

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

  • Posts: 82821
  • Thank you received: 13368
  • MODERATOR
13 years 9 months ago #6224

I went on that page with both chrome and IE8 : highdesertvideo.com/hdv_development/dvd-.../category_pathway-30
And I didn't see the problem you're reporting.

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

  • Posts: 242
  • Thank you received: 0
13 years 9 months ago #6237

Sorry, the site you went to is the dev site, which even though updated to 1.4.4 doesn't have the same problem, even with the fixes in this thread left in. The only other change to that page on the live site was the Product.php change to prevent the Characteristic from being added to the Product Name, but I took that out and it didn't fix it. The live site is www.HighDesertVideo.com but you will need login credentials to see the Hikashop pages. I'll send that to you through support email.

While there, could you put something in the cart and go through checkout. It seems that most of the time, you have to hit Next twice at the Address and Shipping steps before moving on.

Thanks,
Ed

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

  • Posts: 242
  • Thank you received: 0
13 years 9 months ago #6238

Nicolas,

Once you are logged in this page should display the problem (same as screen shot above). Also note how the row of thumbnail images jumps up when the Resolution option is changed.

Hoping to get this shop live soon and add it to your showcase thread! Still need to do some work on email messages though.

Thanks,
Ed

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

  • Posts: 82821
  • Thank you received: 13368
  • MODERATOR
13 years 9 months ago #6239

I think that it is because the thumbnails were resized based on a height of 170px, but you changed the thumbnails height to 150px later on without deleting the thumbnails folder in media/com_hikashop/upload. So the calculations on divs height made by HikaShop are based on that 150px but your vertical image which is 170px height is bigger, thus the problem.

Deleting the thumbnails folder so that HikaShop can recreate the thumbnails based on the new height setting should solve the problem.

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

  • Posts: 242
  • Thank you received: 0
13 years 9 months ago #6241

I thought it must have something to do with image sizes since that is about the only difference between the dev and live sites.

Checking the thumbnail folder, the only thing there are some logo images that were inserted through the Hikashop product interface. All these images in question were uploaded via FTP. Where do I find the thumbnails for those?

Thanks,
Ed

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

  • Posts: 242
  • Thank you received: 0
13 years 9 months ago #6242

The login credentials that I sent will get you into the backend of both the live and dev sites if that will help.

Ed

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

  • Posts: 82821
  • Thank you received: 13368
  • MODERATOR
13 years 9 months ago #6243

If you uploaded the images via FTP, you must know where they are ? I'm not sure I understand your question ?
Looking at your configuration, the upload folder is the default one:
media/com_hikashop/upload/
So, your images must be there, and the thumbnails for those images must be in the folder media/com_hikashop/upload/thumbnails.

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

  • Posts: 242
  • Thank you received: 0
13 years 9 months ago #6244

Yes, the images were uploaded to the default folder via FTP and all products, including image filename, were imported via CSV file. No thumbnail files were ever created for all those product image files. I had noticed that before, but assumed that the thumbnails were being created on-the-fly. If thumbnail files exist, I have no idea where they are.

Ed

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

Time to create page: 0.109 seconds
Powered by Kunena Forum