Create Custom Resize IDs for SuiteCommerce Images

SuiteCommerce includes standard resize IDs that allow for specifying the height and width of certain images. More information about the native standard resize ID setup is within this blog article.

Custom Resize IDs can be added to expand the number of resize options beyond what is natively available. This would be most useful if you want to manage the resizing of a specific group of images without affecting other images on the site.

Setting up custom Resize IDs and surfacing them to the site

The following steps are needed to set up custom Resize IDs and to surface them to the site:

1. Navigate to the Website Setup Record Images Tab (Commerce → Websites → Website List → Edit Website → Images)
2. Add an entry to the Image Resizing Table with a custom ID and maximum width and height.
   1. Note that the custom resize ID used should not match any of the native resize IDs provided by NetSuite. The native resize IDs are thumbnail, main, tinythumb, zoom, fullscreen, homeslider, and homecell.
3. Save the Website Setup Record
4. Within the SuiteCommerce theme, identify the template file with the image reference to update. In this case, we are looking to update the resize ID used for the thumbnails on Commerce Category pages.
   1. A handlebar is called to receive the correct source for the image. ‘ResizeImage’ is the function name, ‘image’ is the reference to the image URL, and ‘thumbnail’ is the resize ID for the image.

src="{{resizeImage image 'thumbnail'}}"

5. Replace the resize ID with your custom resize ID. In this case, we are switching out ‘thumbnail’ with 'ccthumbnail'. This tells the code to reference our custom image resize ID for this specific image on the site.

src="{{resizeImage image 'ccthumbnail'}}"

7. Deploy and activate your theme update to the site.

8. Now you can manage their custom resize IDs from NetSuite!

Got stuck on a step in this article?

We like to update our blogs and articles to make sure they help resolve any troubleshooting difficulties you are having. Sometimes, there is a related feature to enable or a field to fill out that we miss during the instructions. If this article didn't resolve the issue, please use the chat and let us know so that we can update this article!

Oracle NetSuite Alliance Partner & Commerce Partner

If you have general questions about SuiteCommerce or more specific questions about how our team can support your business as you implement NetSuite or SuiteCommerce, feel free to contact us anytime. Anchor Group is a certified Oracle NetSuite Alliance Partner and Commerce Partner equipped to handle all kinds of NetSuite and SuiteCommerce projects, large or small!