Larger image on the product page?

Is it possible to get a larger image on the product page? Right now it is just the same size as the thumbnail in the product listing and the product page looks really empty with such a small image besides it is hard to see without clicking the image for full size.

There is only one size of thumbnails created by hikashop. If you need different sizes, you will have to set the biggest one in the config under the tab files (you will have to delete the folder media/com_hikashop/upload/thumbnails via FTP after your modification so that hikashop can recreate the thumbnails automatically). Then, you will be able to reduce the thumbnails where you want them smaller using CSS (you can edit the CSS of hikashop in the config under the tab display):


For listings of products: .hikashop_product_image img {width: XXXpx !important; height: YYYpx !important; }
For the product page : #hikashop_main_image img {width: XXXpx !important; height: YYYpx !important; }
and for the div of the main image on the product page: .hikashop_product_main_image_thumb img{width: XXXpx !important; height: YYYpx !important;}

where XXX and YYY are the width and height desired.

For the product page's small thumbnails: div#hikashop_product_left_part img.hikashop_child_image{ margin : XXXpx; height:YYYpx; }

Awesome, thanks Nicolas, I will give it a try now

I created a class with the string .hikashop_product_main_image_thumb img{width: xxxpx!important; height: xxxpx!important;} and it resized the image on product page.

Oh cool, so where do I paste this code?

You can edit the CSS of hikashop in the config under the tab display. You can put it at the end of the front end CSS file.

Thanks

Try to edit tmpl/show.php line 38


if(!$this->config->get('thumbnail'))

to

if(!$this->config->get('image'))

This will display your main image, I hope this can help

Thanks so much!!!!!

myownfixz wrote:

Try to edit tmpl/show.php line 38


if(!$this->config->get('thumbnail'))

to

if(!$this->config->get('image'))

This will display your main image, I hope this can help

Thanks, that was very helpful!

Some of my items have different aspect ratios.

Is there a way I can just set maximum width, and Hika can resize the image, keeping the aspect ratio?

Also, if an item has a single image, this solution works great. But if the item has multiple images, it messes up the display.

See the link below:

baselinesupplies.co.uk/shop/hikashop-men...gory_pathway-16.html

Any ideas?

You can configure just the width or just the height in the images options of the files tab of the configuration so that hikashop determines automatically the best size.

For the multiple images issue, that's because you need to add some CSS as well:
#hikashop_main_image_thumb_div { height: XXXpx !important;}

where XXX is the height of your images.

that fixed my issue. Thanks very much for the fast response

oh, this has led to another issue. The problem is fixed until I change a characteristic, and then the page loads with the wrong layout again. A quick refresh fixes the problem, but customers arent generally that smart.

example:
baselinesupplies.co.uk/shop/hikashop-men...gory_pathway-37.html
change size and the bug is visable

thanks in advance for any help you can give

Then please try with that CSS instead:

.hikashop_product_main_image_thumb{ height: XXXpx !important;}

where XXX is the height of your images.

Fixed it

Although the image size problem is now fixed, we notice a lot of our images now apear quite blurry. The full size image is great, but the image on the main product page doesnt look great. Maybe its something to do with the images being re-sized?

example:
baselinesupplies.co.uk/shop/hikashop-men...gory_pathway-21.html

Indeed. When you change the size of thumbnails in the configuration, you need to delete the files of the folder media/com_hikashop/upload/thumbnail so that they are recreated with the new size. Otherwise, it's your browser which is scaling up the thumbnail with a significant quality loss.

myownfixz wrote:

Try to edit tmpl/show.php line 38


if(!$this->config->get('thumbnail'))

to

if(!$this->config->get('image'))

This will display your main image, I hope this can help

I have tired editing this to use the larger image, however it only works for the initial image, not for characteristics.

For an example try changing the textile and feet characteristic on this testing product page:

deadlink

What would I need to do to use the full image on all characteristics?

Thanks,

Phil