Working with images in ShopSite templates can be tricky, especially if you need to insert custom image attributes, or you need more control over how the HTML is generated. Fortunately, ShopSite provides template tag modifiers that can make it much easier.
Overview of Images in ShopSite
Images in ShopSite are stored in the media directory, which is located inside the directory where ShopSite publishes your pages. ShopSite can be configured to create up to three smaller versions of your product images under Images -> Configure. You can set additional default attributes for images under Images -> Configure, including border, horizontal and vertical spacing, and others. If you enable resized images, ShopSite will create a new version of your product image at each of the specified dimensions after uploading, and save it in one of three resized image subdirectories (in the same directory as the original image):
ss_size1 - the first resized image
ss_size2 - the second resized image
ss_size3 - the third resized image
When you assign an image to a product using Edit Product Info -> Product Image, you have the option to select the product image size (Product Image Size). You may also enter a custom alt attribute for the image using the Description field beneath the selected image. If this field is left blank, ShopSite will insert a default alt attribute (generally the filename of the image). The same is true for the More Info Page Image (with its description and More Info Page Image Size), as well as with the Extra More Info Image Fields (with their description and the More Info Extra Image Size, that sets the size to use for all Extra More Info images).
Product Image Template Tags
The basic product graphic template tag is:
This will generate the full HTML for the Product Image you have selected, and the source URL will reflect the Product Image Size.
For example:
might generate:
<img src="http://www.mystore.com/media/product_image.png" alt="product_image.png" width="300" height="187" vspace="3" hspace="3" border="0">
if the Product Image Size were set to Original; but, if you had the second resized image selected as the Product Image Size, it would generate:
<img src="http://www.mystore.com/media/ss_size2/product_image.png" alt="product_image.png" width="300" height="187" vspace="3" hspace="3" border="0">
(note the image source URL contains ss_size2, the subdirectory where ShopSite stored your second resized image).
You can use the following image template tags in your product templates to reference images for each product:
[-- PRODUCT.Graphic --]
[-- PRODUCT.MoreInformationGraphic --]
[-- PRODUCT.MoreInfoImage1 --]
[-- PRODUCT.MoreInfoImage2 --]
[-- PRODUCT.MoreInfoImage3 --]
[-- PRODUCT.MoreInfoImage4 --]
.
.
.
[-- PRODUCT.MoreInfoImage20 --]
[-- MoreInfoImageRow --] - MoreInfo page only--outputs all of the MoreInfo page images, displayed in rows, as defined in Preferences > More Info Pages
It is good practice to test if an image is set for a product before generating the output by using -
[-- IF ... --]
paired with
[-- END_IF --]
for example:
[-- IF PRODUCT.MoreInfoImage1 --]
<div class="product_image">[-- PRODUCT.MoreInfoImage1 --]</div>
[-- END_IF --]
(Be careful to close each [-- IF ... --] with a corresponding [-- END_IF --], or you will have unpredictable results when the page is generated)
Modifiers
Modifiers are special commands that can be added to template tags in ShopSite to generate alternate output.
SS_SIZE[0-3] - Specify the image size to use in the Template:
If you need to specify the image size to use in the image source in your template, you can use the following modifiers:
- SS_SIZE0 - the original image
- SS_SIZE1 - the first resized image
- SS_SIZE2 - the second resized image
- SS_SIZE3 - the third resized image
In your template, these would look like:
Original Image: [-- PRODUCT.Graphic SS_SIZE0 --]
http://www.mystore.com/media/product_image.png
Image Size 1: [-- PRODUCT.Graphic SS_SIZE1 --]
http://www.mystore.com/media/ss_size1/product_image.png
Image Size 2: [-- PRODUCT.Graphic SS_SIZE2 --]
http://www.mystore.com/media/ss_size2/product_image.png
Image Size 3: [-- PRODUCT.Graphic SS_SIZE3 --]
http://www.mystore.com/media/ss_size3/product_image.png
REMOVE_HTML - Omit the HTML <img> tag and only output the image attributes:
[-- PRODUCT.Graphic REMOVE_HTML --]
This modifier might output the following:
src="http://www.mystore.com/media/ss_size2/product_image.png" alt="product_image.png" width="300" height="187" vspace="3" hspace="3" border="0"
ONLY_ALT_TAG - Output only image source and alt tag, and omit other image attributes:
[-- PRODUCT.Graphic ONLY_ALT_TAG --]
<img src="http://www.mystore.com/media/ss_size2/product_image.png" alt="product_image.png">
SRC_ONLY - Output only the image source in the HTML:
[-- PRODUCT.Graphic SRC_ONLY --]
<img src="http://www.mystore.com/media/ss_size2/product_image.png">
URL_ONLY - output only the full image URL -- no HTML:
[-- PRODUCT.Graphic URL_ONLY --]
http://www.mystore.com/media/ss_size2/product_image.png
URL_ENCODE / JS_ENCODE - Not as useful for image tags, but used with other template tags in ShopSite to prevent output from breaking javascript or HTML content
Combining Modifiers
Modifiers may be combined, for example:
[-- PRODUCT.Graphic SRC_ONLY SS_SIZE2 --]
which would return only the image source for the second resized image for a product. If modifiers conflict, they will be overridden from left to right:
[-- PRODUCT.Graphic SS_SIZE2 SS_SIZE0 --]
This will return the original size image (SS_SIZE0 overrides SS_SIZE2).
[-- PRODUCT.Graphic SRC_ONLY SS_SIZE2 URL_ONLY --]
This will return only the URL of the second resized product graphic for this product (URL_ONLY overrides SRC_ONLY).