Image_Layout_1¶
The managed template “Image_Layout_1” is a special template for the single image function of ASA2.
Main features¶
Optimized for single image embedding
Customizable without programming skills
Demo page¶
To see this template in action with different examples, please refer to the demo page:
Example¶
Example shortcode:
[asa2_img img="3" size="LargeImage" width="500" height="375" show_title="yes" show_button="no" tpl="Image_Layout_1" country_code="UK"]B00T9OEYXM[/asa2_img]
Global Options¶
On ASA 2’s admin page “Templates” you can open a customization context window for each managed template. Just hover the mouse cursor over a template row and click the link “Customize” to open it. These settings will effect the appearance of this template.
Note
The globally applied options can be dynamically overwritten via shortcode options.
The following screenshot illustrates the options window by means of the “Book” template:
Shortcode Options¶
In addition to the global options mentioned above, it is also possible to overwrite these settings dynamically in a WordPress shortcode, like this:
// general syntax:
[asa2 option="value"]ASIN[/asa2]
Take a look at other examples.
Complete Options List¶
Complete list of all options available for the template “Image_Layout_1”:
Layout | |||
---|---|---|---|
Option | Type | Values | Description |
is_image_hover | bool | "yes" / "no" | Use image hover effect. Price and ratings are displayed over the image during mouse over, on AMP pages below the image. |
min_width | int | 0 between 9999 | Min width. Minimum width of the outer dimensions of the template in pixels. |
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. |
Image | |||
Option | Type | Values | Description |
img_link_to | string |
|
Image links to |
image_size | string |
|
Image size |
image_max_width | int | 0 between 999 | Image max width. In pixels. 0 - 999. 0 for none. |
Title | |||
Option | Type | Values | Description |
title_link_to | string |
|
Title links to |
show_title | bool | "yes" / "no" | Show title |
title_color | string | CSS compatible color value, like hex values (#ff0000) or color names (red) | Title color. No default. The title will be displayed in the default text color of your page, if none is set here. |
title_font_css | string | custom text | Title font style. Utilizes the CSS font property. Example: "15px arial, sans-serif;" |
title_length | int | 0 between 999 | Title max length. Limits the title to a maximum length of characters. 0 for unlimited. |
Price | |||
Option | Type | Values | Description |
price_color | string | CSS compatible color value, like hex values (#ff0000) or color names (red) | Price color. The color in which the price text is displayed. |
price_font_css | string | custom text | Price font style. Utilizes the CSS font property. Example: "15px arial, sans-serif;" |
hide_price | bool | "yes" / "no" | Hide price(s) |
show_price_disclaimer | bool | "yes" / "no" | Show price disclaimer. "Details" link next to date of last update. |
last_update_format | string | custom text | Last item update date format. Used in price disclaimer. Supports PHP date function format. Example: d.m.Y H:i:s |
show_merchant | bool | "yes" / "no" | Show product merchant (if available) |
Button | |||
Option | Type | Values | Description |
show_button | bool | "yes" / "no" | Show button |
button_target | string |
|
Button target. Decides whether the button should link to the product page or the buy page. |
button_max_width | string | custom text | Button max width. CSS value like "50%" or "250px". |
Misc | |||
Option | Type | Values | Description |
disclaimer | string |
|
Disclaimer. Shows a disclaimer text. |
structured_data | string |
|
Structured Data. Include structured data at the end of the template |
custom_css | string |
|
Custom CSS. Custom CSS that is applied to all occurrences of this template on a page and is only included once in the source code. |
Shortcode Options Examples¶
// with option "size" you can select the image resolution
[asa2_img img="6" size="TinyImage" tpl="Image_Layout_1"]B00T9OEYXM[/asa2_img]
// with options "width" and "height" you can adjust to image dimensions
[asa2_img img="4" size="MediumImage" width="160" height="119" show_title="no" show_button="no" tpl="Image_Layout_1" country_code="UK"]B00T9OEYXM[/asa2_img]