Table of Contents
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.
Get ASA 2 Pro
Follow me on Twitter.
Learn more about me and the story behind ASA in this interview on expertentesten.de (in German).
- ASA2 update 1.17.0 – Improved transparency and error handling during product updates and many more - August 20, 2023
- New ASA2 update fixes many issues. Additionally redesigned options section. - July 5, 2023
- ASA update 1.16.5 released - March 5, 2023