More examples can be found on the demo page:
Single Image Demo Page
On this page, ASA’s managed template “Image_Layout_1” is used. It is a special template for the single image function of ASA2. It is customizable in general and per shortcode.
Contents
Main features
Example
This example shows image number 5 of product with ASIN B07B12XRBL and uses some shortcode options to change the layout on the fly:
[asa2_img img="5" size="LargeImage" width="500" height="375" show_title="yes" show_button="no" tpl="Image_Layout_1" country_code="UK"]B07B12XRBL[/asa2_img]
Customization
On ASA 2’s admin page “Templates” you can customize the general options of template “Image_Layout_1“. These settings will effect every usage of this template.
Shortcode options
Besides the general settings, it is possible to overwrite template options per shortcode.
Example “size”
With option “size” you can select the image resolution.
Usually those sizes are:
- SwatchImage
- SmallImage
- ThumbnailImage
- TinyImage
- MediumImage (Default)
- LargeImage
- HiResImage
[asa2_img img="3" size="MediumImage" width="110" height="82" show_title="no" show_button="no" tpl="Image_Layout_1" country_code="UK"]B07B12XRBL[/asa2_img]
Example “width” and “height”
With options “width” and “height” you can adjust to image dimensions to your need:
[asa2_img img="4" size="MediumImage" width="160" height="119" show_title="no" show_button="no" tpl="Image_Layout_1" country_code="UK"]B07B12XRBL[/asa2_img]
All available options:
Following you find a list of all available shortcode options for template “Flat_box_vertical”:
Option | Type | Values | Description |
---|---|---|---|
is_image_hover | bool | "yes" / "no" | Use image hover effect |
background_color | string | CSS compatible color value, like hex values (#ff0000) or color names (red) | Background color |
border_color | string | CSS compatible color value, like hex values (#ff0000) or color names (red) | Border color |
border_width | int | 0 between 99 | Border width (in pixels, 0 for no border) |
border_radius | int | 0 between 99 | Border radius (in pixels, > 0 for rounded corners) |
img_link_to | string |
|
Image links to |
title_link_to | string |
|
Title links to |
title_color | string | CSS compatible color value, like hex values (#ff0000) or color names (red) | Title color |
title_font_css | string | custom text | Title font style. Utilizes the CSS font property. |
title_length | int | 0 between 999 | Title max length. Limits the title to a maximum length of characters. 0 for unlimited |
price_color | string | CSS compatible color value, like hex values (#ff0000) or color names (red) | Price color |
price_font_css | string | custom text | Price font style. Utilizes the CSS font property. |
button_target | string |
|
Button target |
button_max_width | int | 0 between 999 | Button max width in pixel. Default is 100% |
disclaimer | string |
|
Disclaimer |