Skip to main content

Responsive Product Image

7 years 9 months ago - 7 years 9 months ago #302361 by marcusadamski
Responsive Product Image was created by marcusadamski
-- 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: 7 years 9 months ago by marcusadamski.

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

7 years 9 months ago #302368 by nicolas
Replied by nicolas on topic Responsive Product Image
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.

7 years 9 months ago #302394 by marcusadamski
Replied by marcusadamski on topic Responsive Product Image
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.

7 years 9 months ago #302406 by marcusadamski
Replied by marcusadamski on topic Responsive Product Image
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
The following user(s) said Thank You: minminiweb, Valserine

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

7 years 6 months ago #305783 by wim.stevens
Replied by wim.stevens on topic Responsive Product Image
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, minminiweb

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

5 years 7 months ago #331243 by knuffiwuffi
Replied by knuffiwuffi on topic Responsive Product Image
Was looking for responsive image with module product list.
This works for me:
Code:
/* <><><><><><><><><><><><><><><><><><><><><><><><><> 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; }

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

5 years 7 months ago #331245 by knuffiwuffi
Replied by knuffiwuffi on topic Responsive Product Image
And a fix for badges:
Code:
/* <><><><><><><><><><><><><><><><><><><><><><><><><> 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; }

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

Time to create page: 0.072 seconds
Powered by Kunena Forum