Responsive Product Image

  • Posts: 5
  • Thank you received: 0
3 months 2 weeks ago #302361

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

This results in the product image fitting the product grid box, but when I resize the screen size to more of a portrait format, and the products are displayed in one column, the image size stays the same leaving varying margins around the image.

Is there a way to make the product listing images within a grid responsive, so they resize with the screen? Maybe my settings are wrong?

Many thanks for your help,
Marc

Last edit: 3 months 2 weeks ago by marcusadamski.

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

  • Posts: 65411
  • Thank you received: 9529
  • MODERATOR
3 months 2 weeks ago #302368

Hi,

Since the thumbnails are generated on the server side for the width configured in the settings, the thumbnail's real image file has always the same size. But you can add some CSS if you want to change the image size on the browser based on the width available.
stackoverflow.com/questions/16217355/aut...owser-size-using-css
Now, some of the divs also have some CSS to fix the height/width so that the badges can display properly but that can also be changed with CSS.
www.hikashop.com/support/documentation/1...ize-the-display.html

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

  • Posts: 5
  • Thank you received: 0
3 months 2 weeks ago #302394

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.

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

  • Posts: 5
  • Thank you received: 0
3 months 2 weeks ago #302406

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

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

  • Posts: 1
  • Thank you received: 1
  • Hikashop Business
1 week 4 days ago #305783

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.

The following user(s) said Thank You: nicolas

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

Time to create page: 0.077 seconds
Powered by Kunena Forum