Larger image on the product page?

I don't know anything about CSS, but know some basic HTML coding. Can it be done via HTML code? If so, how? I need to adjust some image sizes. I hope it can be done.

Sorted the issue of only the main image being larger. in the view "product" "show.php", you need to change:

$image = reset($variant->images);
if(!$this->config->get('thumbnail')){

to:

$image = reset($variant->images);
if(!$this->config->get('image')){

Yeah that's right Nicolas

If anyone wants to do the same thing, you need to edit both instances int he PHP (as described above) and put the following line in your CSS (If you want all the images to be affected by the CSS, rather than just the initial product image):

#hikashop_product_image_main img{ XXX-STUFF-XXX; }

#hikashop_product_image_main img{height: 300px !important; width: 300px !important; border: 1px solid white; margin: 30px !important;}

Just realised that the above styling expands the size of all the images ...Which is a problem if you have more than one image to select from for a product or a variant.

Nicolas, do you know any solutions to this? An example is at deadlink. If you select the characteristic Textile = "Black Vintage" you'll see the secondary images come up at the bottom.

I've tried adding the following to the CSS, with no success:

#hikashop_small_image_div img{height: 50px !important; width: 50px !important; border: 1px solid white;}


Any suggestions?

Thanks Nicolas, that worked!

The images are now the right size but they still draw on the thumb image, meaning it's poorly rendered at a larger size.

I assume I'll need to edit: product > show.php. Do you know which lines? The only mention of Thumbnail I can find is "$height = $this->config->get('thumbnail_y');" and I assume this is just to set the height rather than source the image?

Sorted this out myself by using the guidance at www.hikashop.com/support/documentation/5...p-config.html#images

Sorry for pestering you Nicolas!

Hi there,

So i've followed this thread, been able to get my images to appear larger, as well as larger thumbnails.

However, I seem to keep coming across the same problem - I can't get the images to not be blurry after having fixed the sizing issue.

I've gone into my files - media/com_hikashop/upload and cleared out all thumbnails. But the problem still persists!

Help!

Sorry if this is a bit obvious, but have you cleared your browser cache?

Done that, but the problem still persists!

Just realised that the module wasn't active. I'm able to use it to edit the main category page of the shop, but I can't figure out where to go to edit the product page images/thumbnails, etc.

Nicolas,

I am able to increase size of main picture of product in product page, however am still unable to solve the picture quality issue despite deleting all previous thumbnail files via FTP and clearing my browser cache.

Also, I realise that after adding ".hikashop_product_main_image_thumb img{width: 250px!important; height: 250px!important;}" to the frontend file, those products which have a few thumbnail pictures are having its main product image overlapped by the smaller thumbnail pictures. Meaning all the content (words and thumbnail pictures) below the main product picture did not move downwards despite the change in main product picture size.

Please help above two problems, thanks!

Hi Nicolas,

Thanks, I am able to solve the product image problem.

However, after trying to make a smaller thumbnail picture for the product div page with ".hikashop_product_image img {width: 100px !important; height: 100px !important; }", they are able to be reduced to my desired size of 100x100px, but now there is a huge gap between picture and title, please see the following screenshot.

nicolas wrote:

For your products and categories listings, you should edit their options via the menu Display->Content menus/modules and set the "images width/height" options so that they take the correct size. You should not use CSS for that. Otherwise, the div around the image won't have the proper height and you will get that big blank space (which can however be corrected with a bit more CSS).