Images¶

The following placeholders are all related to the item’s images.

{{ MainImageURL }}¶

Contains the URL of the main image. Depending on what is set as the size in the template options, this can be the SmallImageURL, MediumImageURL or LargeImageURL.

{{ MainImageWidth }}¶

Contains the with in pixel of the main image, e.g. “75”. Depending on what is set as the size in the template options, this can be the SmallImageWidth, MediumImageWidth or LargeImageWidth.

{{ MainImageHeigth }}¶

Contains the height in pixel of the main image, e.g. “75”. Depending on what is set as the size in the template options, this can be the SmallImageHeight , MediumImageHeight or LargeImageHeight .

{{ SmallImageWidth }}¶

The width of the small image in pixel, e.g. “75”.

{{ SmallImageHeight }}¶

The height of the small image in pixel, e.g. “75”.

{{ SmallImageURL }}¶

The URL of the small image.

<img src="{{ SmallImageURL }}" width="{{ SmallImageWidth }}" height="{{ SmallImageHeight }}">

{{ MediumImageWidth }}¶

The width of the medium image in pixel, e.g. “160”.

{{ MediumImageHeight }}¶

The height of the medium image in pixel, e.g. “120”.

{{ MediumImageURL }}¶

The URL of the medium image.

<img src="{{ MediumImageURL }}" width="{{ MediumImageWidth }}" height="{{ MediumImageHeight }}">

{{ MissingImageUrl }}¶

Contains the URL to an image that symbolizes a missing product image.

{{ MissingImageWidth }}¶

The width of the missing product image in pixel.

{{ MissingImageHeight }}¶

The height of the missing product image in pixel.

{{ LargeImageWidth }}¶

The width of the large image in pixel, e.g. “500”.

{{ LargeImageHeight }}¶

The height of the large image in pixel, e.g. “380”.

{{ LargeImageURL }}¶

The URL of the large image.

<img src="{{ LargeImageURL }}" width="{{ LargeImageWidth }}" height="{{ LargeImageHeight }}">

{{ ImageSetsArray }}¶

An array containing all information about the product images delivered by Amazon API. It can be used best by looping through the contents like this lightbox gallery example shows:

{% if ImageSetsArray is not empty %}
    <h4>Gallery</h4>
    <div class="asa2_gallery">
    {% for imgSet in ImageSetsArray %}
        <a href="{{ imgSet.LargeImage.URL }}" rel="lightbox[{{ ASIN }}]"><img src="{{ imgSet.MediumImage.URL }}" /></a>
    {% endfor %}
    </div>
{% endif %}

{{ ImageSetsTotal }}¶

The total amount of image sets (integer).

{{ ImageSetsArray|gallery }}¶

The gallery filter is a very useful helper to get an HTML formatted list out of {{ ImageSetsArray }}.

By default, it generates a <ul><li> list with images in “small” format which are linked to images in “large” format. But this can be customized completely.

// Default parameters
gallery($thumbSize = 'small', $targetSize = 'large', $outer = '<ul>%s</ul>', $inner = '<li>%s</li>', $link = '<a href="%s">%s</a>')

Options¶

Parameter	Description	Default
$thumbSize	The size of the thumbnail images. If there is no image with this size, the loop will continue.	small
$targetSize	The size of the linked images. If there is no image with this size, no image will be linked. To prevent linking to a larger size image, set it to `false`.	large
$outer	The outer list container. It must contain “%s” where the list will be inserted.	<ul>%s</ul>
$inner	The list item container. It must contain “%s” where the image will be inserted.	<li>%s</li>
$link	The target link format. Must contain two “%s”. The first for the target image URL, the second for the thumbnail image.	<a href=”%s”>%s</a>

Possible images sizes
swatch
small
thumbnail
tiny
medium
large
hires

Example with custom outer class and lightbox:

{{ ImageSetsArray|gallery("medium", "large", "<ul class='product_gallery'>%s</ul>", "<li>%s</li>", "<a href='%s' rel='lightbox'>%s</a>") }}

Example for showing the large images without links:

{{ ImageSetsArray|gallery("large", false) }}

{{ ImageSetsArray|get }}¶

With filter get on placeholder ImageSetsArray you can access single images of a product.

Usage in templates¶

This example will build an img tag with the second image of the image set in medium size:

<img src="{{ ImageSetsArray|get(2, 'medium', 'url') }}">

This example will generate an img tag with image number 9 and large size:

{{ ImageSetsArray|get(9, 'large') }}

Usage in shortcodes¶

This example will generate an img tag with image number 12 in large size:

[asa2 value="ImageSetsArray|get(12, 'large')"]B00SDTTH5E[/asa2]

Options¶

Parameter

Description

Default

$number

The number of the image.

If there is no image with this number, the result will be empty.

1

$size

The size of the image.

If there is no image with this size, the result will be empty.

large

$type

The result type.

“tag” will return an img tag ready to use.

“url” will return image URL.

tag

Possible images sizes
swatch
small
thumbnail
tiny
medium
large
hires