Larger image on the product page?

  • Posts: 51
  • Thank you received: 0
13 years 7 months ago #10150

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.

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

  • Posts: 82726
  • Thank you received: 13342
  • MODERATOR
13 years 7 months ago #10151

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; }

Last edit: 13 years 6 months ago by nicolas.
The following user(s) said Thank You: edward68

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

  • Posts: 392
  • Thank you received: 0
13 years 6 months ago #14868

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

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

  • Posts: 138
  • Thank you received: 0
13 years 6 months ago #15285

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.

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

  • Posts: 392
  • Thank you received: 0
13 years 6 months ago #15447

Oh cool, so where do I paste this code? :)

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

  • Posts: 82726
  • Thank you received: 13342
  • MODERATOR
13 years 6 months ago #15456

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.

The following user(s) said Thank You: edward68

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

  • Posts: 392
  • Thank you received: 0
13 years 6 months ago #15527

Thanks :)

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

  • Posts: 1
  • Thank you received: 1
13 years 6 months ago #15697

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

Last edit: 13 years 6 months ago by myownfixz.
The following user(s) said Thank You: edward68

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

  • Posts: 392
  • Thank you received: 0
13 years 6 months ago #15698

Thanks so much!!!!! :)

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

  • Posts: 1
  • Thank you received: 0
13 years 5 months ago #17124

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!

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

  • Posts: 8
  • Thank you received: 0
13 years 4 months ago #20187

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?

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

  • Posts: 8
  • Thank you received: 0
13 years 4 months ago #20188

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?

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

  • Posts: 82726
  • Thank you received: 13342
  • MODERATOR
13 years 4 months ago #20191

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.

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

  • Posts: 8
  • Thank you received: 0
13 years 4 months ago #20194

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

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

  • Posts: 8
  • Thank you received: 0
13 years 4 months ago #20201

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

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

  • Posts: 82726
  • Thank you received: 13342
  • MODERATOR
13 years 4 months ago #20205

Then please try with that CSS instead:

.hikashop_product_main_image_thumb{ height: XXXpx !important;}

where XXX is the height of your images.

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

  • Posts: 8
  • Thank you received: 0
13 years 4 months ago #20219

Fixed it <3

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

  • Posts: 8
  • Thank you received: 0
13 years 4 months ago #20291

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

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

  • Posts: 82726
  • Thank you received: 13342
  • MODERATOR
13 years 4 months ago #20303

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.

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

  • Posts: 152
  • Thank you received: 0
13 years 3 months ago #21171

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

Create your own style of luxury bespoke furniture online
Last edit: 11 years 5 months ago by plantpotphil.

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

Time to create page: 0.140 seconds
Powered by Kunena Forum