Responsive Product Image

-- HikaShop version -- : 4.0.1
-- Joomla version -- : 3.9.1
-- PHP version -- : 7.1.25


Hello,

Using the free HikaShop and working through the documentation, I'm trying to discover the best approach to display my product images.

Displaying my products listings as a grid, with two columns, the available thumbnail image size is 314px wide. Consequently in the main configuration screen, I set:

• Thumbnail -> Yes
• Thumbnail (width) -> 314px [leaving the height empty]
• Force Image size -> Yes
• Image scale mode -> Keep ratio

Thanks for explanation Nicolas. I understood HikaShop was responsive and as such expected product images to automatically adjust to the browser size "out of the box". After all, displaying a list of products and their images is a main feature of any online shop.

So without manually adjusting the CSS, the only option would be to specify the product thumbnails to have a width of around 200px so they work on small screened mobiles (and therefore have a large margin on anything larger ).

Are there any other options to obtain responsive images within HikaShop's configuration; for instance not forcing thumbnails or not specifying the image size dimensions?


Again, thanks for your help.

Actually after experimenting a little further; if the thumbnail width and height are not specified in the Hika configuration, then the product listing images do resize with the browser.

My apologies, I just misunderstood how the configuration worked.

Thanks

I struggled with the same issue.
Setting the image height/width to <blank> did not work for me. Some container divs had their size specified at 0px !
I made a few changes to the css

.hikashop_products_listing .hk_img_pane_window,
.hikashop_products_listing .hk_img_pane_product,
.hikashop_products_listing .hikashop_product_image_subdiv{
width: 100% !important;
}


.hikashop_products_listing .hikashop_product_listing_image {
margin: auto; /* om te centreren */
}

.hikashop_products_listing .hikashop_subcontainer {
padding: 10px;
}

img.hikashop_product_listing_image {
width:100%;
}
With this css it is allowed to leave the image size empty.

Was looking for responsive image with module product list.
This works for me:

/* <><><><><><><><><><><><><><><><><><><><><><><><><>
DO NOT TOUCH CODE BELOW
hikashop - module product list
<><><><><><><><><><><><><><><><><><><><><><><><><> */

/* hikashop - module product list - image responsive */
.hikashop_module .hikashop_product_image,
.hikashop_module .hikashop_product_image_subdiv {
	width: 100% !important;
	height: auto !important;
}

And a fix for badges:

/* <><><><><><><><><><><><><><><><><><><><><><><><><>
DO NOT TOUCH CODE BELOW
hikashop - module product list
<><><><><><><><><><><><><><><><><><><><><><><><><> */

/* hikashop - module product list - badge responsive */
$hikashop-badge-width: 20%;

/* hikashop - module product list - badge responsive */
.hikashop_module .hikashop_product_image_subdiv .hikashop_badge_topleft_div img,
.hikashop_module .hikashop_product_image_subdiv .hikashop_badge_topright_div img,
.hikashop_module .hikashop_product_image_subdiv .hikashop_badge_bottomleft_div img,
.hikashop_module .hikashop_product_image_subdiv .hikashop_badge_bottomright_div img {
	width: 100% !important;
	height: auto !important;
}

/* hikashop - module product list - badge responsive */
.hikashop_module .hikashop_product_image_subdiv .hikashop_badge_topleft_div,
.hikashop_module .hikashop_product_image_subdiv .hikashop_badge_topright_div,
.hikashop_module .hikashop_product_image_subdiv .hikashop_badge_bottomleft_div,
.hikashop_module .hikashop_product_image_subdiv .hikashop_badge_bottomright_div {
	width: $hikashop-badge-width !important;
	height: auto !important;
}