The Image Resize features involve several AppConfigs, all in the IMAGERESIZE config group. Those AppConfigs are:
UseImageResize | CategoryImg_icon | CategoryImg_medium | CategoryImg_large |
DistributorImg_icon | DistributorImg_medium | DistributorImg_large | ManufacturerImg_icon |
ManufacturerImg_medium | ManufacturerImg_large | ProductImg_icon | ProductImg_medium |
ProductImg_large | ProductImg_swatch | SectionImg_icon | SectionImg_medium |
SectionImg_large | VariantImg_icon | VariantImg_medium | VariantImg_large |
DefaultWidth_icon | DefaultHeight_icon | DefaultWidth_medium | DefaultHeight_medium |
DefaultWidth_large | DefaultHeight_large | DefaultQuality | DefaultStretch |
DefaultCrop | DefaultCropHorizontal | DefaultCropVertical | DefaultFillColor |
LargeCreatesOthers | LargeOverwritesOthers | MultiColorMakesSwatchAndMap | SwatchStyleAuto |
MultiMakesMicros | MicroStyle | UseImagesForMultiNav | UseRolloverForMultiNav |
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 Name | Config Default Value |
DefaultWidth_icon | Default icon width (150) |
DefaultHeight_icon | Default icon height (150) |
DefaultWidth_medium | Default medium width (250) |
DefaultHeight_medium | Default medium height (250) |
DefaultWidth_large | Default large width (500) |
DefaultHeight_large | Default large height (500) |
DefaultQuality | Default quality (100) |
DefaultStretch | Default stretch (true) |
DefaultCrop | Default crop (true) |
DefaultCropHorizontal | Default crop horizontal (center) |
DefaultCropVertical | Default crop vertical (middle) |
DefaultFillColor | Default 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;)