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"

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 :
  • 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_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}