Skip to main content


The image loop process, cache and display images, categories, contents and folders images.
{loop type="image" name="the-loop-name" [argument="value"], [...]}


allow_zoomIf true, the loop il allowed to resize an image to match the required width and height, causing, in most cases, a quality loss. If false, the image will never be zoomed. Default is false.allow_zoom="true"
background_colorThe color applied to empty image parts during processing. Use rgb or rrggbb color formatbackground_color="cc8000" or background_color="fff"
base64If true, the loop will have a new output with the image in base64base64="true"
brand **a brand identifier. The loop will return this brand's imagesbrand="2"
category **a category identifier. The loop will return this category's imagescategory="2"
content **a content identifier. The loop will return this content's imagescontent="2"
effectsOne or more comma separated effects definitions, that will be applied to the image in the specified order. Please see below a detailed description of available effects
Expected values
excludeA single or a comma-separated list of image IDs to exclude from the list.exclude="456,123"
folder **a folder identifier. The loop will return this folder's imagesfolder="2"
heightA height in pixels, for resizing image. If only the height is provided, the image ratio is preserved.height="200"
idA single or a list of image"2", id="1,4,7"
ignore_processing_errorsIf true, the loop will return a result even if the image processing fails, and set the PROCESSING_ERROR variable to true if an error occurs. If false, images for which the processing fails are not returned.ignore_processing_errors="false"
langA language identifier, to specify the language in which the image information will be returned
orderA list of values see sorting possible valuesmanualorder="alpha_reverse"
product **a product identifier. The loop will return this product's imagesproduct="2"
qualityThe generated image quality, from 0(!) to 100%. The default value is 75% (you can hange this in the Administration panel)quality="70"
resize_modeIf 'crop', the image will have the exact specified width and height, and will be cropped if required. If the source image is smaller than the required width and/or height, you have to set allow_zoom to true, otherwise the generated image will be smaller than required. If 'borders', the image will have the exact specified width and height, and some borders may be added. The border color is the one specified by 'background_color'. If 'none' or missing, the image ratio is preserved, and depending od this ratio, may not have the exact width and height required.resize_mode="crop"
rotationThe rotation angle in degrees (positive or negative) applied to the image. The background color of the empty areas is the one specified by 'background_color'rotation="90"
source **see Expected valuessource="category"
source_idThe identifier of the object provided in the "source" parameter. Only considered if the "source" argument is presentsource_id="2"
visibleA boolean value.yesvisible="no"
widthA width in pixels, for resizing image. If only the width is provided, the image ratio is preserved.width="200"

Plus the global arguments


$CHAPOthe image chapo
$DESCRIPTIONthe image description
$IDthe image ID
$IMAGE_BASE64only available if base64 param is set to true
$IMAGE_PATHThe absolute path to the generated image file
$IMAGE_URLThe absolute URL to the generated image.
$LOCALEThe locale used for this research
$OBJECT_IDThe object ID
$OBJECT_TYPEThe object type (e.g., produc, category, etc. see 'source' parameter for possible values)
$ORIGINAL_IMAGE_PATHThe absolute path to the original image file
$ORIGINAL_IMAGE_URLThe absolute URL to the original image
$POSITIONthe position of this image in the object's image list
$POSTSCRIPTUMthe image postscriptum
$PROCESSING_ERRORtrue if the image processing fails. In this case, $IMAGE_URL, $ORIGINAL_IMAGE_URL, and $IMAGE_PATH will be empty.
$TITLEthe image title
$VISIBLEtrue if the image is visible. False otherwise

Plus the global outputs


Example 1

Resize category images the 200x100, adding (white) borders if required.

{loop type="image" name="image_test" category="$ID" width="200" height="100" resize_mode="borders"}
<img src="{$IMAGE_URL}" alt="{$TITLE}" />

Same behaviour, using the “source” style parameters

{loop type="image" name="image_test" source="category" source_id="$ID" width="200" height="100" resize_mode="borders"}
<img src="{$IMAGE_URL}" alt="{$TITLE}" />

Example 2

Resize 1 category images the 200x100, cropping id necessary, and transforming the image in grayscale, with a gamma razised to 1.1

="grayscale,gamma:1.1" limit="1"}
<a href="{$ORIGINAL_IMAGE_URL}"><img src="{$IMAGE_URL}" alt="{$TITLE}" /></a>

Order possible values


Ascending valueDescending valueSorted fields
randompseudo-random order

effects expected values


blurblur the imageblur:5
colorize:colorapply a color mask to the image. The color format is $rgb or $rrggbb.colorize:$ff2244
gamma:valuechange the image Gamma to the specified value.gamma:0.7
grayscale or greyscaleswitch image to grayscale
hflip or horizontal_flipflip the image horizontally.
negativetransform the image in its negative equivalent.
vflip or vertical_flipflip the image vertically.

Souce expected values