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')){

That code is present twice on that view. The problem you're describing sounds like you changed only the first occurrence of the code and not the second one.

Yeah that's right Nicolas :side:

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 :dry: ...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?

There is no id called hikashop_small_image_div, that's why it doesn't work.

you should try like this:
#hikashop_product_image_main .hikashop_image_small_link img{height: 50px !important; width: 50px !important; border: 1px solid white;}

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!

If you have the latest version of HikaShop, the indications on that thread are outdated.
Since 1.5.3, you have the possibility to set thumbnails width and height for each products listing module and menu in its hikashop options.
The thumbnails height and width on the product pages can be configured with the corresponding option in the Files tab of the config.

You don't need to use any CSS or code modification.

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.

The thumbnails height and width on the product pages can be configured with the corresponding option in the Files tab of the config.

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,

You don't need any CSS to modify the size of thumbnails. Just use the thumbnails width/height options in the Display tab of the configuration.

The image quality might come from the original image quality.
For example, if you set the options images width/height in the configuration, when you upload an image, it will be resized automatically with that size, and then a thumbnail will be generated for it with the thumbnails width/height options. So if the options images width/height have been set with a small value before uploading the image, no matter what thumbnail size you choose, the original image will have that small size.
The solution is you remove the values you have for the options images width/height and upload again your image.

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.



2nd problem, I don't know how to manually edit the size of the thumbnails in categories listing page, please see the following screenshot, the categories pictures follows my product page pictures size.

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).

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).

Hi Nicolas,

I am able to go to Display->Content menus/modules, but I am unable to find the settings for the "images width/height". Please guide me. Thanks!

When you edit a module/menu, on the right side of the screen, you should find these options if you're using the latest version of HikaShop.