EKM Tag Documentation - ekm:productimage

This tag is used to output all 5 of your product images on a product page. You can choose from 6 predefined layouts or create your own using HTML/CSS and the attribute tags.

This tag can only be used on the product page. Lightbox will only appear if the feature is installed in the backend of your EKM shop.

Tag Information
Image Styles
Nesting This Tag

Basic Use

In its basic use the product image tag will output the product's main image and all extra images. The default style is "STYLE1".


[ekm:productimage][/ekm:productimage]

Full Use

As well as some predefined styles the product image tag also allows you to fully customise the layout and sizes of the product images.


[ekm:productimage]
    width='auto';
    height='auto';
    constrain_proportions='yes';
    opentype='popup';
    images_layout='[image_1]<br /> [image_2][image_3][image_4][image_5]';
    extra_images_width='auto';
    extra_images_height='auto';
    extra_constrain_proportions='yes';
[/ekm:productimage]

Tag Attributes

Main Image Width

width='200'';

Specify the maximum width you would like your main image to be. This will not be exceeded.

If you would like the image width to be limited, but the height to remain unlimited then leave the height attribute set to auto.

Value

Description

auto

Sets the width to the value set in the Design section of your EKM shop or to the default width of 200px

{user defined}

Define your own integer value for the image width. This is a pixel value without the unit (px) on the end.

Main Image Height

height='200'';

Specify the maximum height you would like your main image to be. This will not be exceeded.

If you would like the image height to be limited, but the width to remain unlimited then leave the width attribute set to auto.

Value

Description

auto

Sets the height to the value set in the Design section of your EKM shop or to the default height of 200px

{user defined}

Define your own integer value for the image height. This is a pixel value without the unit (px) on the end.

Constrain Main Image Proportions

constrain_proportions='yes'';

Specify whether or not you would like to constrain images to a maximum ratio. If the width and height are both set to the same value, the system will scale the images down until either the height or width (which ever hits first) hits this value and stops scaling

Both width and height must be the same value

If this value is not included in the tag the system will default to yes

Value

Description

yes

Images will be constrained to a maximum height and width.

Images will not be constrained to a maximum height and width.

Open Type

opentype='popup'';

Specify how you would like the images to be displayed when clicked.

If you have the lightbox or product image zoomer installed this attribute will be ignored.

Value

Description

view

Opens the image in the current browser window on a blank page.

templateview

Opens the image in the current browser window within the current shop's design.

popup

Opens the image in a popup window sized to fit around the image. This popup will close after 20 seconds.

Image Layout

image_layout='popup'';

Choose a predefined image layout or define your own using the attribute tags.

Value

Description

STYLE1

Uses the predefined layout of style 1

STYLE2

Uses the predefined layout of style 2

STYLE3

Uses the predefined layout of style 3

STYLE4

Uses the predefined layout of style 4

STYLE5

Uses the predefined layout of style 5

STYLE6

Uses the predefined layout of style 6

{user defined}

Define your own image layout using HTML and attribute tags..

This attribute allows you to specify your own image layout on the product page with HTML.

Value

Description

[image_1]

Displays the image and link for the main image.

[image_1_url]

Displays the image path for the main image.

[image_2]

Displays the image and link for the first extra image.

[image_2_url]

Displays the image path for the first extra image.

[image_3]

Displays the image and link for the second extra image.

[image_3_url]

Displays the image path for the second extra image.

[image_4]

Displays the image and link for the third extra image.

[image_4_url]

Displays the image path for the third extra image.

[image_5]

Displays the image and link for the fourth extra image.

[image_5_url]

Displays the image path for the fourth extra image.

Extra Images Width

extra_images_width='auto'';

Specify the maximum width you would like your extra images to display at.

Value

Description

auto

Will display extra images at the default width or, if set, the value set in the Design section of your EKM shop.

{user defined}

Specify an integer width for the extra images. This is a pixel value without the unit (px).

Extra Images Height

extra_images_height='auto'';

Specify the maximum height you would like your extra images to display at.

Value

Description

auto

Will display extra images at the default height or, if set, the value set in the Design section of your EKM shop.

{user defined}

Specify an integer height for the extra images. This is a pixel value without the unit (px).

Constrain Extra Image Proportions

extra_constrain_proportions='yes'';

Both width and height must be the same value

If this value is not included in the tag the system will default to yes

Value

Description

yes

Images will be constrained to a maximum height and width.

Images will not be constrained to a maximum height and width.

This tag has a number of predefined layout styles. Below are examples for each of the styles and how they will look on your website.

STYLE 1

The image tag, where the images_layout attribute is set to STYLE1 will be layed out with the main image on top and 1 row of extra images


[ekm:productimage]images_layout='STYLE1';[/ekm:productimage]

This would output something like...

STYLE 2

The image tag, where the images_layout attribute is set to STYLE2 will be layed out with the main image on top and 2 rows of 2 extra images.


[ekm:productimage]images_layout='STYLE2';[/ekm:productimage]

This would output something like...

STYLE 3

The image tag, where the images_layout attribute is set to STYLE2 will be layed out with the main image on top and each extra image on a seperate row.


[ekm:productimage]images_layout='STYLE3';[/ekm:productimage]

This would output something like...

STYLE 4

The image tag, where the images_layout attribute is set to STYLE4 will be layed out with the main image on the left and all extra images to the right in a single column.


[ekm:productimage]images_layout='STYLE4';[/ekm:productimage]

This would output something like...

STYLE 5

The image tag, where the images_layout attribute is set to STYLE5 will be layed out with the main image on the right and all extra images to the left in a single column.


[ekm:productimage]images_layout='STYLE5';[/ekm:productimage]

This would output something like...

STYLE 6

The image tag, where the images_layout attribute is set to STYLE6 will be layed out with the main image on the right and all extra images to the left in a single column.


[ekm:productimage]images_layout='STYLE6';[/ekm:productimage]

This would output something like...

The EKM system allows for some tags to be nested within other tags.

Nesting This Tag

When nesting this tag you do not need to make any alterations.


[ekm:if]
    iftype='EQUALS';
    ifvalue='1';
    ifvalue2='1';
    ifthen='[ekm:productimage][/ekm:productimage]';
    ifelse='';
[/ekm:if]

EKM Tag: [ekm:productimage]