Product Image Sizes

  • Posts: 19
  • Thank you received: 0
13 years 11 months ago #2943

Hi,

I understand that in Configuration > Files you can specify an image size for thumbnails and a max image size for popup images (- and it all works fine for me).

I have also read a post explaining how to specify the "rollover" image size on the Product page via the div#hikashop_product_left_part img.hikashop_child_image entry in the frontend_custom.css.

However, I can't work out how to specify the main image size on the Product page. It seems to display the same thumbnail image that is shown on the Product Listing page. I've tried adding the following

#hikashop_main_image{
margin : 2px;
height:350px;
}

to the frontend_custom.css - but end up just stretching the image out of shape. Is there an easier answer?

Under Configuration > Files I've set:

  • Image width: 400
  • Image height: 400
but that seems to have no effect.

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

  • Posts: 82821
  • Thank you received: 13368
  • MODERATOR
13 years 11 months ago #2946

When you set the image width and height option in the configuration, you are setting the width and height of the full image which will be displayed in a popup when the user click on the image thumbnail on the product page.
The thumbnail on the product page and the thumbnail on the listing of products are the same image. Instead of trying to enlarge the product page image with CSS, you should try the opposite: increase the thumbnail size and reduce the image size on the listing of product with CSS. This way you won't loose the image quality.

Now, we use the thumbnail size to add some dynamic inline CSS in the item box HTML of the listing of products so you might have issues with that though.

The thing is that it was never meant to be possible to have different thumbnail sizes for the listing of products and the product page.

Last edit: 13 years 11 months ago by nicolas.

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

  • Posts: 19
  • Thank you received: 0
13 years 11 months ago #2949

Wow Nicolas what a fast reply - and late Sunday evening too!

Thanks for the info - I will try using the CSS the other way round (i.e. to reduce the listing image size) as you suggest.

Is this perhaps something the HikaShop might look at in the future? I have a client who sells bikes, so they really want to have an impressive Product page with a good sized image rather than a thumbnail - much more attractive and impressive for customers to look at.

I imagine that the ability to have a large Product page image would be useful for many clients that sell larger (- and shiny new, visually attractive -) products.

Julian.

Last edit: 13 years 11 months ago by td001.

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

  • Posts: 82821
  • Thank you received: 13368
  • MODERATOR
13 years 11 months ago #2951

HikaShop allows you to easily edit any view to do special customizations like these.
You can just go in the menu Display->Views and edit the file show of the view product and change the image display.
You could for example add the code :

<img src="<?php echo $this->image->uploadFolder_url.$image->file_path; ?>" />

To display the full image directly... But then it won't work if you have several images.

Another option is to use images directly in the description either directly or with effects like we have on our product pages, and remove the image display from the show file of the product view.

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

  • Posts: 6
  • Thank you received: 0
12 years 4 months ago #55240

Hi There, Doing my research and reviving an old thread just because I am having this issue. My 'rollover' thumbnails and my product thumbnails (on menu->catagory listing) are not the same size. I have been playing around in show_block_img and that doesn't seem to change the size of the 'rollover' images in the product display. show_default also doesn't have an option to enlarge the thumbnails.
Have I done something wrong? The roll over images are tiny, whereas the product display thumbs are quite big (i'm happy with them).

Thanks for your ongoing help.

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

  • Posts: 82821
  • Thank you received: 13368
  • MODERATOR
12 years 4 months ago #55283

Since then we have added options for all that. So you don't have to edit any code in the views of hikashop.

For the main image display on the product page, you have size options in the Files tab of the configuration.

For the mini thumbnails under it, you can change their size via a simple CSS modification:
www.hikashop.com/en/support/documentatio...ling.html#thumbnails

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

Time to create page: 0.070 seconds
Powered by Kunena Forum