Image Loop

The image loop process, cache and display products, categories, contents and folders images.

{loop type="image" name="the-loop-name" [argument="value"], [...]}

Important informations :

* : argument is required
** : at least one of ** marked argument is required

Global arguments

Argument	Description
backend_context	Determine if loop is use in backend context. default : false example : backend_context="on"
force_return	force return result for i18n tables even if there is no record default : false example : force_return="on"
limit	The maximum number of results to display. example : limit="10"
name *	The loop name. This name must be unique and is used to reference this loop further in the page (see ifloop, elseloop or pageloop)
offset	The first product to display offset. Will not be used if `page` argument is set. default : 0 example : offset="1"
page	The page to display. example : page="2"

Loop arguments

Argument	Description
allow_zoom	If 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. example : allow_zoom="true"
background_color	The color applied to empty image parts during processing. Use rgb or rrggbb color format example : background_color="cc8000" or background_color="fff"
base64	If true, the loop will have a new output with the image in base64 example : base64="true"
brand **	a brand identifier. The loop will return this brand's images example : brand="2"
category **	a category identifier. The loop will return this category's images example : category="2"
content **	a content identifier. The loop will return this content's images example : content="2"
effects	One 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 : blur : blur the image. Example: blur:5 colorize:color : apply a color mask to the image. The color format is $rgb or $rrggbb. Example: colorize:$ff2244. gamma:value : change the image Gamma to the specified value. Example: gamma:0.7. grayscale or greyscale : switch image to grayscale. hflip or horizontal_flip : flip the image horizontally. negative : transform the image in its negative equivalent. vflip or vertical_flip : flip the image vertically. example : effects="greyscale,gamma:0.7,vflip"
exclude	A single or a comma-separated list of image IDs to exclude from the list. example : exclude="456,123"
folder **	a folder identifier. The loop will return this folder's images example : folder="2"
height	A height in pixels, for resizing image. If only the height is provided, the image ratio is preserved. example : height="200"
id	A single or a list of image ids. example : id="2", id="1,4,7"
ignore_processing_errors	If 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. example : ignore_processing_errors="false"
lang	A language identifier, to specify the language in which the image information will be returned
order	A list of values Expected values : alpha : alphabetical order on title alpha-reverse : reverse alphabetical order on title manual : order by ascending position manual-reverse : order by descending position random : return images in pseudo-random order default : manual example : order="alpha_reverse"
product **	a product identifier. The loop will return this product's images example : product="2"
quality	The generated image quality, from 0(!) to 100%. The default value is 75% (you can hange this in the Administration panel) example : quality="70"
resize_mode	If '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. example : resize_mode="crop"
rotation	The 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' example : rotation="90"
source **	Expected values : brand category content folder module product example : source="category"
source_id	The identifier of the object provided in the "source" parameter. Only considered if the "source" argument is present example : source_id="2"
visible	A boolean value. default : yes example : visible="no"
width	A width in pixels, for resizing image. If only the width is provided, the image ratio is preserved. example : width="200"

Global outputs

Variable	Description
$LOOP_COUNT	the current results index, starting from 1
$LOOP_TOTAL	the total number of results returned by the loop
$CREATE_DATE	The creation date of this Image
$UPDATE_DATE	The last modification date of this Image

Loop outputs

Variable	Description
$CHAPO	the image chapo
$DESCRIPTION	the image description
$ID	the image ID
$IMAGE_BASE64	only available if base64 param is set to true
$IMAGE_PATH	The absolute path to the generated image file
$IMAGE_URL	The absolute URL to the generated image.
$LOCALE	The locale used for this research
$OBJECT_ID	The object ID
$OBJECT_TYPE	The object type (e.g., produc, category, etc. see 'source' parameter for possible values)
$ORIGINAL_IMAGE_PATH	The absolute path to the original image file
$ORIGINAL_IMAGE_URL	The absolute URL to the original image
$POSITION	the position of this image in the object's image list
$POSTSCRIPTUM	the image postscriptum
$PROCESSING_ERROR	true if the image processing fails. In this case, $IMAGE_URL, $ORIGINAL_IMAGE_URL, and $IMAGE_PATH will be empty.
$TITLE	the image title
$VISIBLE	true if the image is visible. False otherwise

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}" />
{/loop}

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}" />
{/loop}

Example 2

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

{loop type="image" name="image_test" category="$ID" width="200" height="100" resize_mode="crop" effects="grayscale,gamma:1.1" limit="1"}
    <a href="{$ORIGINAL_IMAGE_URL}"><img src="{$IMAGE_URL}" alt="{$TITLE}" /></a>
{/loop}