Our community forums have moved. Visit our Help Center to join the discussions.

Our feature requests board has moved. Visit our Help Center to post and vote on new ideas.




17
Vote

Larger Product/Sales Image Sizes

Allow for larger image size generation and selection in the system.

The visual presentation of a product in any business is typically the #1 decision factor of buyers. Poor image : No sale.

The system generates small 400 x 400 pixels size images of products on the Product & Online Designer pages. Furthermore, the largest selectable size for images on Shop pages is 300 x 300 pixels. These images look quite blurry/jaggy on larger desktop monitors and most portable devices with retina (hi-res) displays.

As you push forward with greater 'Responsive' templating/css support in upcoming releases, the thumbnail sizes the system generates will also need to support this variability of sizes.

Sidenote: We have already custom built a Responsive DN template/css and are strugling with these low-res thumbnails .

Solution.

Provide a settings function to allow the system to auto generate larger thumbnail images. Critically, it should work with all the original hi-res image of products that are either in your Supplier catalogs or that users like myself have uploaded custom products with hi-res images. (Please don't make us upload every product and colour over again.)

I understand this will require some pretty intensive processing time, where it will have to cycle through existing catalogs in 'Batch', furthermore, may require greater DecoNetwork storage capacity.

Implementation.

From a responsive front-end perspective, many websites are built with a standard thumbnail size, eg 300 x 300 and a larger 'Retina' size thumbnail, eg. 600 x 600. File naming convention often follows "productname_thumb@2x.jpg", @3x and so on as the system is able to generate increasing larger image thumbnails.

This is often implemented alongside a javascript, ie. retina.js. This senses the display environment and auto swaps out the img src tag to the larger pixel density image.

Final.

The above implementation of setting a per-site system minimum size of image thumbnail in combination with generation of larger thumbnails, facilitated via javascript dynamic image serving should do the trick. If you want to get fancy, of course combine this with 'lazy loading' and then we're getting a truly responsive solution.

By Emma-Jane Hamilton on 13 December 2016 Implemented!

Comments


Cristofer Cruz says:

While we don't support retina, with the upgrade to DecoNetwork 8 we now allow the use of 600x600 product view and custom thumbnail sizes in your listings.
By Cristofer Cruz on 27 March 2019