ASA 2 Update 1.3 brings new image features

Did you know that you can access all Amazon product images with ASA 2, not just the main image? The Amazon Product Advertising API delivers all images as so called “image sets”. In most cases, every image is available in different sizes, from “swatch” or “small” up to “large” or even “hires”.

Amazon product images slideshow

ASA 2 provides a variety of placeholders to access those images. If you do not want to create own templates, you can stick to ASA 2’s shipped managed templates, which already utilize those placeholders. For example you can configure the default template “Horizontal_box” to display a beautiful slideshow of all product images at the position of the main image:

If you want to create your own slideshow, e.g. with another kind of Javascript library, you can achieve this with placeholder {{ ImageSetsArray }}. It contains an array of all product images.

Custom slideshow

With ASA 2’s powerful template engine, it is very easy to build your own image gallery, like so:

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

Shortcut function “gallery”

There is another shortcut function called “gallery” which generates an HTML list of all product images:

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

Read more about the options of the “gallery” function on its documentation page.

Direct access to Amazon product images

New with ASA 2 version 1.3 (see changelog) is the template filter “get” which can be applied on placeholder {{ ImageSetsArray }}. With it you can retrieve just a single image of the image set.

Taking the example product above, if you wanted to show image number 5, this template syntax would give you a ready to use img HTML tag with the large version of the image:

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

If you want to build the image tag by yourself, append the additional option “url”:

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

See all options of the get filter.

But you do not have to create a template, if you just want to display an image of an Amazon product. You can use ASA 2’s shortcode option “value” to directly output the placeholder’s value, like in this example for the large version of image number 5:

Image 5 large

Image 5 medium

Image 5 small

Additional info

Please refer to the always up-to-date online documentation for more details about ASA 2’s product image placeholders.