Image Resize

The Built-in Image Editor of Connected Business allows automatic or manual resizing, cropping and/or rotating of item images. You can use this feature to adjust the dimensions of your item images (large, medium, icon, mobile and minicart) using the size settings in the application.

Before making any modifications, it is recommended to keep a copy of the original image in case you encounter any errors while resizing the image.


Load the Image Editor

To load the image editor, go to eCommerce or Inventory module > Item > Find Item and select an item. In the Item Detail form, select Web Option tab > Images and either click the Load Web Image button or double click the Image Preview field to load the item image. Upon selecting the image, the image editor will be displayed with the tabs for Large, Medium, Icon, Minicart and Mobile sizes.

Click Image to Enlarge

Click Image to Enlarge

To modify an existing image for the item, right click on the image and select Edit Image.

In resizing the images, you have the option to use either the Default or the Custom settings (click the Settings button).

Default Setting

In Default Settings, the system will automatically resize the images according to the values defined for each image size option in the Application Configuration.

Make sure to set the UseImageResize appconfig to TRUE for the system to automatically resize the images.

Click Image to Enlarge

Refer to the following application configurations to check and define the values for each image size.

Image Size AppConfig Parameters
Large DefaultHeight_large
DefaultWidth_large
Medium DefaultHeight_medium
DefaultWidth_medium
Icon DefaultHeight_icon
DefaultWidth_icon
MiniCart MiniCartStyle
Mobile MobileImageStyle


Custom Setting

In Custom Settings, you can set your own image dimensions, crop and even change the angle of the image as preferred. If you select this setting, the Image Resize and Image Crop section will be enabled allowing you to resize or crop the image.

The Image Resize and Image Crop functions are disabled if Default Setting is used.

Click Image to Enlarge

In Custom Setting, you can make use of the following functions:

Changes made in the image only applies to the currently selected image size (e.g. large) You have to manually edit the image for each image size.

Resize Image

You can use the Resize Image section to resize and / or rotate images. Tick the Image Size checkbox to use this function. In resizing the image, enter the desired value for the width and height and click the Resize Image button to modify the size of the currently selected image size (e.g. large, medium, etc.)

Click Image to Enlarge

Rotate Image

Aside from resizing the image, you can also rotate the angle of the image by entering a value in the Rotate by Degree field.

Click Image to Enlarge

Proportionally Adjust Width and Height

You can also adjust the image width in proportion to to the height. To do this, tick the Constrain Proportion checkbox and adjust the vertical scroll to the desired dimension. Doing this will automatically adjsut the height of the image in proportion to the width.

Click Image to Enlarge

Crop Image

Tick the Crop checkbox to use this function. In cropping the image, you can either:

    • Set the values for the x and y coordinates, as well as the width and height, and click the Crop Image button, or
    • Select the area to be cropped in the image and click Crop Image button.

Click Image to Enlarge

Click Save and Close to apply the changes made. Any saved modifications on the item image size will be automatically reflected in the webstore.

 

  • Wednesday, 24 October 2012