Image Blurriness

  • Posts: 138
  • Thank you received: 0
13 years 5 months ago #16981

Nicholas my images are blurry on the product page for some reason. I followed the instructions in the manual and deleted the images from the thumbnail page and even resized my images to the exact dimensions forced by my css but the images are still appearing blurry. What can I do to fix this? Do I have to make changes to the image itself?

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

  • Posts: 82683
  • Thank you received: 13337
  • MODERATOR
13 years 5 months ago #16983

On the page: daydreamercreative.cloudaccess.net/shopp...duct/show/cid-1.html
You have the image: daydreamercreative.cloudaccess.net/media..._hika_2108763782.jpg
The size of that thumbnail is 164*127
In your CSS, you force it to be: 360*280
So, your browser resize it to a bigger size and thus the image is blurry.

If you want your product page image to be 360*280, you need to go to the tab "files" of the configuration, then, set the thumbnail width and height to 360 and 280, save the configuration and then, delete your thumbnails.
HikaShop will recreate them with the new size.

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

  • Posts: 138
  • Thank you received: 0
13 years 5 months ago #16988

I find it unfortunate that I cannot have different size images between the category and product page. I think this a feature that should be added on the next version of Hikashop. How can I move the price and button display to be closer to the bottom of the picture? At the moment it is too far below the images on the category page. daydreamercreative.cloudaccess.net/tees.html

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

  • Posts: 82683
  • Thank you received: 13337
  • MODERATOR
13 years 5 months ago #16989

You can have different image size with CSS.
Instead of having a small thumbnail size so that it fits in your listing and then overriding it in CSS for your product page (that's why it's blurry), you need to do it the other way around:
a big thumbnail size so that it fits your product page and then override it in CSS for your product listing.

That's something we want to add in hikashop soon as apparently some users have a hard time with images size CSS override.


For the gap between the image and the button, you need to use also some CSS, like explained on that thread:
www.hikashop.com/support/forum/4-how-to/...h.html?lang=en#16160

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

  • Posts: 138
  • Thank you received: 0
13 years 5 months ago #16990

Right...right! So if this (.hikashop_product_main_image_thumb img{
width: 280px!important;
height: 360px!important;
} )overrides for the product page what would be the code that overrides the image size on the category page?

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

  • Posts: 82683
  • Thank you received: 13337
  • MODERATOR
13 years 5 months ago #16991

You can do like that: www.hikashop.com/support/forum/4-how-to/...r.html?lang=en#15830

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

Time to create page: 0.063 seconds
Powered by Kunena Forum