Skip to main content

How to handle different sized images

More
15 years 8 months ago #5828 by JohnnyMac
How to handle different sized images was created by JohnnyMac
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.

More
15 years 8 months ago #5836 by nicolas
Replied by nicolas on topic Re: How to handle different sized images
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.

More
15 years 8 months ago #5850 by hdracing
Replied by hdracing on topic Re: How to handle different sized images
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.

More
15 years 8 months ago #5852 by nicolas
Replied by nicolas on topic Re: How to handle different sized images
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.

More
15 years 8 months ago #5854 by hdracing
Replied by hdracing on topic Re: How to handle different sized images
Thanks Nicolas,

That works!

Ed

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

More
15 years 8 months ago #5858 by hdracing
Replied by hdracing on topic Re: How to handle different sized images
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.

More
15 years 8 months ago #5861 by nicolas
Replied by nicolas on topic Re: How to handle different sized images
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.

More
15 years 8 months ago #5863 by hdracing
Replied by hdracing on topic Re: How to handle different sized images
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.

More
15 years 8 months ago #5874 by nicolas
Replied by nicolas on topic Re: How to handle different sized images
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.

More
15 years 8 months ago #5878 by JohnnyMac
Replied by JohnnyMac on topic Re: How to handle different sized images
Thank you - the original CSS fix suggested worked great for me!

John

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

More
15 years 8 months ago #5880 by hdracing
Replied by hdracing on topic Re: How to handle different sized images
@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.

More
15 years 8 months ago #6220 by hdracing
Replied by hdracing on topic Re: How to handle different sized images
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
[img

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

More
15 years 8 months ago #6224 by nicolas
Replied by nicolas on topic Re: How to handle different sized images
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.

More
15 years 8 months ago #6237 by hdracing
Replied by hdracing on topic Re: How to handle different sized images
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.

More
15 years 8 months ago #6238 by hdracing
Replied by hdracing on topic Re: How to handle different sized images
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.

More
15 years 8 months ago #6239 by nicolas
Replied by nicolas on topic Re: How to handle different sized images
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.

More
15 years 8 months ago #6241 by hdracing
Replied by hdracing on topic Re: How to handle different sized images
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.

More
15 years 8 months ago #6242 by hdracing
Replied by hdracing on topic Re: How to handle different sized images
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.

More
15 years 8 months ago #6243 by nicolas
Replied by nicolas on topic Re: How to handle different sized images
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.

More
15 years 8 months ago #6244 by hdracing
Replied by hdracing on topic Re: How to handle different sized images
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.291 seconds
Powered by Kunena Forum