Setting Up Image Resizing for SuiteCommerce

This topic applies to

Applies to

SuiteCommerce Web Stores

If you want to resize images files for your website, you can use the Image Resizing section on the Web Site Setup page. Here, you can specify the maximum height and width of the image and an ID for the image size. You will use the Image Size ID to include a specified image size in a template.

To set up Image Resizing for SuiteCommerce

  1. Go to Setup > > Set Up Web Site.

  2. Click Edit next to the web site you want to modify.

  3. Click the Advanced subtab.

  4. Go to the Image Resizing section and modify the following fields:

    • Image Size ID – Assign an ID for the image resize definition. Use a name that denotes a particular image size.

      For example, you may want to configure two different sizes for image on your site. In the Image Size ID field, enter thumbnail, and then in the next row, enter rectangle.

      Note

      To allow resizing of an image slider, you must add a homeslider Image Size ID (at 200 pixels wide by 220 pixels high) and a homecell Image Size ID (at 125 wide by 125 pixels high).


    • Description – (Optional)

    • Enabled – Check this box so that you can use the Image Size ID with the Item Search API. If an Image Size ID is not enabled, then the Item Search API ignores the image size you set up, and returns the image in its original size.

      For example, if the enabled check box is cleared here, and the Image Size ID is included in a website template, the Image Size ID you set up is ignored, and the original image size is rendered.

    • Maximum Width and Maximum Height – Enter the values you want to use for the maximum height and width of the image. You can specify one or neither. For example, if you enter a value for Maximum Width, the Maximum Height is automatically calculated.

      Note that the image aspect ratio is stored with the image file in the file cabinet. Automatic resizing is based on the image aspect ratio. Width and height are computed.

  5. Click Save after you have set your specifications for image resizing.

Important

Resized images are generated when they are first requested. They are not generated when they are uploaded to File Cabinet.


After you have set up resizing images for your SuiteCommerce site, you can use the Commerce API to include image resize settings for a site. For more information, see Using the Commerce API to Resize Images.

To confirm images are associated with the correct item records, see Viewing Images on Item Records with SuiteCommerce.

Using the Commerce API to Resize Images

Calls to the Item Search API return image URLs without resize information. However, you can call the Commerce API from an SSP application to return the image resize settings for a site. Use the sitesettings.imagesizes field to get the image sizing parameters. The JSON response contains an array of objects that includes the urlsuffix for each Image Resize ID that has been defined for the site. The urlsuffix can then be used to construct the correct image URL. For more information on the sitesettings.imagesizes field, see sitesettings.

Note the following examples:

  • An image URL without parameters, such as http://mysite.com/images/OU9613.media.orange.01.jpg? displays on the site as follows:

    http://mysite.com/images/OU9613.media.orange.01.jpg?resizeid=10&resizeh=230&resizew=201 
  • An image URL that includes a parameter, such as http://mysite.com/images/OU9613.media.orange.01.jpg?&variant=3, displays the following URL on the site:

    http://mysite.com/images/OU9613.media.orange.01.jpg?variant=3&resizeid=10&resizeh=230&resizew=201 

The following image resize data is included in the JSON response for the sitesettings.imagesizes field.

  • maxwidth–maximum resized image width in pixels

  • maxheight–maximum resized image height in pixels

  • urlsuffix–suffix that should be added to the image URL to return a resized image

  • name–value from the Image Resize ID field (image resize definition) as entered on the Web Site Setup page

  • internalid–internal system ID of resize definition

Note the following example of image resize data in the JSON response for the sitesettings.imagesizes field:

"imagesizes":[ 
      { 
         "maxwidth":100, 
         "internalid":104, 
         "urlsuffix":"resizeid=104&resizeh=100&resizew=100", 
         "maxheight":100, 
         "name":"large" 
      }, 
      { 
         "maxwidth":800, 
         "internalid":103, 
         "urlsuffix":"resizeid=103&resizeh=600&resizew=800", 
         "maxheight":600, 
         "name":"medium" 
      }, 
      { 
         "maxwidth":100, 
         "internalid":102, 
         "urlsuffix":"resizeid=102&resizeh=100&resizew=100", 
         "maxheight":100, 
         "name":"small" 
      }