Looking for the v10 manual? Visit our new user's guide!
 
Search Descriptions Version
 
 
This article applies to: MultiStore

Image Resize Configuration


The Image Resize features involve several AppConfigs, all in the IMAGERESIZE config group. Those AppConfigs are:

UseImageResizeCategoryImg_iconCategoryImg_mediumCategoryImg_large
DistributorImg_iconDistributorImg_mediumDistributorImg_largeManufacturerImg_icon
ManufacturerImg_mediumManufacturerImg_largeProductImg_iconProductImg_medium
ProductImg_largeProductImg_swatchSectionImg_iconSectionImg_medium
SectionImg_largeVariantImg_iconVariantImg_mediumVariantImg_large
DefaultWidth_iconDefaultHeight_iconDefaultWidth_mediumDefaultHeight_medium
DefaultWidth_largeDefaultHeight_largeDefaultQualityDefaultStretch
DefaultCropDefaultCropHorizontalDefaultCropVerticalDefaultFillColor
LargeCreatesOthersLargeOverwritesOthersMultiColorMakesSwatchAndMapSwatchStyleAuto
MultiMakesMicrosMicroStyleUseImagesForMultiNavUseRolloverForMultiNav



The “DefaultXXXX” AppConfigs

These AppConfigs are the defaults for all of the resizing functions. If a value is not set for one of the other specific AppConfigs, these default values are used. These should never be left blank, but they can be changed if the majority of your images are going to need different default values. These values are explained in more detail later for specific AppConfigs.

Config NameConfig Default Value
DefaultWidth_iconDefault icon width (150)
DefaultHeight_iconDefault icon height (150)
DefaultWidth_mediumDefault medium width (250)
DefaultHeight_mediumDefault medium height (250)
DefaultWidth_largeDefault large width (500)
DefaultHeight_largeDefault large height (500)
DefaultQualityDefault quality (100)
DefaultStretchDefault stretch (true)
DefaultCropDefault crop (true)
DefaultCropHorizontalDefault crop horizontal (center)
DefaultCropVerticalDefault crop vertical (middle)
DefaultFillColorDefault fill color (#FFFFFF)


The Sizing AppConfigs (icon and medium)

All of the sizing “_icon” and “_medium” AppConfigs can control some, all, or none of the following properties of the icon/medium images:

width – a number representing the width (in pixels)
height – a number representing the height (in pixels)
quality – a number from 1 to 100 representing the percentage of the original quality to retain in the resized image
resize –this value will override the value in the UseImageResize AppConfig. If you have a specific image group you don’t want resizing, add resize:false to its AppConfig to disable it for that group (true/false)
crop –this value will override the value in the DefaultCrop AppConfig. If you have a specific image group you don’t want cropped, add crop:false to its AppConfig to disable it for that group (true/false)
cropv –this will override the value in the DefaultCropVertical AppConfig (top/bottom/middle)
croph –this will override the value in the DefaultFill AppConfig (left/right/center)
fill – this will override the value in the DefaultFill AppConfig (any 6-digit hex color value with a preceding “#” - #00FF00, etc)
stretch – determines whether an image will stretch to fill the resized width and height specified (true/false – see below for example)

Example values:

CategoryImg_icon – width:150;height:150;crop:false;quality:100;
CategoryImg_medium – crop:true;width:250;croph:left;height:250;quality:80;
ProductImg_icon – resize:false;
ProductImg_medium – quality:100;height:250;stretch:true;width250;


The Sizing AppConfigs (large)

The “_large” AppConfigs have all of the same properties as the “_small” and “_medium” AppConfigs, along with 2 additional properties (more on what these do later):

largecreates – overrides whatever value is in the LargeCreatesOthers AppConfig (true/false)
largeoverwrites – overrides whatever value is in the LargeOverwritesOthers AppConfig (true/false)

Example Values:

CategoryImg_large – width:500;height:100;largecreates:true;largeoverwrites:false;
ProductImg_large – crop:true;croph:center;quality:100;width:500;height:100;
ManufacturerImg_large – resize:false;


AutoOthers AppConfigs

LargeCreatesOthers
LargeOverwritesOthers

These 2 AppConfigs control the creation of icon and medium images when a large image is uploaded. If LargeCreatesOthers is set to true, then icon and medium images will be created according to the respective “_icon” and “_medium” AppConfigs. If LargeOverwritesOthers is set to true, or the attribute largeoverwrites:true is specified for a particular large image group, then even if an icon or medium image already exist, they will be over-written with the images created when the large image is uploaded. If this is set to true and you are uploading in the multi-image manager, the medium multi images and the icon multi images will also be created. If LargeOverwritesOthers is set to false or the attribute largeoverwrites:false is specified, then medium and icon images will only be created if medium and icon images do not already exist.


Additional Resizing AppConfigs

These additional AppConfigs will add some time saving functionality and some user-friendly features to the store front-end.

MultiColorMakesSwatchAndMap – If set to true and a variant has multiple colors, then when uploading images in the large multi-image manager a swatch will be automatically created from the images uploaded into the first column, based on the style width and height supplied in the SwatchStyleAuto AppConfig. For example, if there are 5 colors specified and 5 images are uploaded in the first column, those 5 images will be resized to the width and height specified in SwatchStyleAuto (width:25;height:25;) and combined into one image 125 pixels wide and 25 high. The HTML map code will also be generated for you. (true/false)

SwatchStyleAuto – takes width and height parameters (width:25;height25;) that define the sizes of small swatch images before they are combined into a single image

MultiMakesMicros – if set to true, the micro images are created for images uploaded into the first row (no-color) of the medium multi image manager. These micros are created according to the width and height specified in the MicroStyle AppConfig and are stored in the newly created /images/product/micros directory. These micro images can then be used instead of the number icons when viewing a product through use of the UseImagesForMultiNav AppConfig. (true/false) NOTE: Even if MultiMakesMicros is set to false, deleting a medium multi-image will result in the micro image related to it being deleted as well.

UseImagesForMultiNav – if set to true, micro images will replace the number icons on the product detail page for products with multiple images. If a micro image does not exist then the “no picture” image will be shown sized on the fly to match the width and height specified in MicroStyle. (true/false)

UseRolloverForMultiNav – if set to true then on a product page with multiple images, the images will change on rollover rather than on click. (true/false)

MicroStyle – width and height parameters to use for creating the micro images if MultiMakesMicros is set to true. MicroStyle can also have the “cols,” “colspacing,” and “rowspacing” attributes that specify the number of micros in a row, the spacing between each image in the row, and the spacing between each row. (width:40;height:40;cols:4;colspacing:10;rowspacing:10;)