Request a Call Back

Enter your number and one of our friendly ecommerce experts will be in touch. All fields are required.

Speak to our experts today 0333 004 0333
Speak to one of our experts today or Request a Callback
User Guides

EKM Tag: [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.
no
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'';

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.
no
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...
Intempo Inconcert iPod Dock in Black
Intempo Inconcert iPod Dock in Black Intempo Inconcert iPod Dock in Black Intempo Inconcert iPod Dock in Black Intempo Inconcert iPod Dock in Black
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...
Intempo Inconcert iPod Dock in Black
Intempo Inconcert iPod Dock in Black Intempo Inconcert iPod Dock in Black
Intempo Inconcert iPod Dock in Black Intempo Inconcert iPod Dock in Black
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...
Intempo Inconcert iPod Dock in Black
Intempo Inconcert iPod Dock in Black
Intempo Inconcert iPod Dock in Black
Intempo Inconcert iPod Dock in Black
Intempo Inconcert iPod Dock in Black
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...
Intempo Inconcert iPod Dock in Black
Intempo Inconcert iPod Dock in Black
Intempo Inconcert iPod Dock in Black
Intempo Inconcert iPod Dock in Black
Intempo Inconcert iPod Dock in Black
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...
Intempo Inconcert iPod Dock in Black
Intempo Inconcert iPod Dock in Black
Intempo Inconcert iPod Dock in Black
Intempo Inconcert iPod Dock in Black
Intempo Inconcert iPod Dock in Black
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...
Intempo Inconcert iPod Dock in Black Intempo Inconcert iPod Dock in Black Intempo Inconcert iPod Dock in Black
Intempo Inconcert iPod Dock in Black Intempo Inconcert iPod Dock in Black

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]