Shopsite v10r7.4 - Multiple Images on More Info pages

[GregDilley]

Is there a way to get multiple thumbnails on my More Info pages, considering the fact that i'm on an older version of SS where this isn't built in?

Using custom templates.

Thanks,
Greg

[ShopSite Lauren]

Before the multi-image feature was added many designers would use the extra product fields. You could use each field for its own image, where you enter in the file name of the image, then in your template, you would link to the various resized images for that image.

Another option would be if the merchant always names the images in a uniform way, such as the sku.jpg, sku_02.jpg, sku_03.jpg. You could then setup a multi-image feature based on one extra field to note how many resized images there are, and the SKU.

[emd8787]

Hi, I'm interested in having multiple images on my more info pages and I'm working on shop site version 10, could you elaborate on your answer I couldn't really grasp what you explained

[ShopSite Lauren]

You would add something similar to the following to your custom product template in the DEFINE MORE_INFO_PAGE section. To use the code below, you would need to setup the resized image feature in ShopSite so that the smallest images (resized image 3) and the medium size images (resized image 1) are being used. I would suggest that the medium size images be around 300 or 350px by 300 or 350px. Then I would suggest having the resized image 3 be around 80px or 100px by 80px or 100px. Last, you would go to Products > Edit Product Info, and you would enter the image file names (must be in the media folder for this example) in the product field 1, 2 and 3 fields. The example below displays 3 additional images, using the extra product fields 1 2 and 3.

In your custom template, replace the code that is similar to:
[-- IF PRODUCT.DisplayGraphic --]
[-- IF PRODUCT.MoreInformationGraphic --]
[-- PRODUCT.MoreInformationGraphic --]
[-- END_IF --]
[-- END_IF --]

replace the above code (or similar code) with the following:

[-- IF PRODUCT.MoreInformationGraphic --]
<table cellpadding="0" cellspacing="0" border="0" width="350">
<tr>
<td align="center" valign="middle" colspan="4"><img src="[-- OUTPUT_DIRECTORY_URL --]/media/ss_size1/[-- IMAGE PRODUCT.MoreInformationGraphic --]" name="prod_img" border="0"></td>
</tr>
<tr>
[-- IF PRODUCT.Field1 --]
<td><a href="http:#" onmouseover="document.prod_img.src='[-- OUTPUT_DIRECTORY_URL --]/media/ss_size1/[-- IMAGE PRODUCT.MoreInformationGraphic --]';" onClick="window.open('[-- OUTPUT_DIRECTORY_URL --]/media/[-- IMAGE PRODUCT.MoreInformationGraphic --]', 'image_window', 'width=600px,height=600px,resizable=yes,scrollbars=yes'); return false;"><img src="[-- OUTPUT_DIRECTORY_URL --]/media/ss_size3/[-- IMAGE PRODUCT.MoreInformationGraphic --]" border=0></a></td>
<td><a href="http:#" onmouseover="document.prod_img.src='[-- OUTPUT_DIRECTORY_URL --]/media/ss_size1/[-- PRODUCT.Field1 --]';" onClick="window.open('[-- OUTPUT_DIRECTORY_URL --]/media/[-- PRODUCT.Field1 --]', 'image_window', 'width=600px,height=600px,resizable=yes,scrollbars=yes'); return false;"><img src="[-- OUTPUT_DIRECTORY_URL --]/media/ss_size3/[-- PRODUCT.Field1 --]" border=0></a></td>

[-- IF PRODUCT.Field2 --]
<td><a href="http:#" onmouseover="document.prod_img.src='[-- OUTPUT_DIRECTORY_URL --]/media/ss_size1/[-- PRODUCT.Field2 --]';" onClick="window.open('[-- OUTPUT_DIRECTORY_URL --]/media/[-- PRODUCT.Field2 --]', 'image_window', 'width=600px,height=600px,resizable=yes,scrollbars=yes'); return false;"><img src="[-- OUTPUT_DIRECTORY_URL --]/media/ss_size3/[-- PRODUCT.Field2 --]" border=0></a></td>
[-- END_IF --]
[-- IF PRODUCT.Field3 --]
<td><a href="http:#" onmouseover="document.prod_img.src='[-- OUTPUT_DIRECTORY_URL --]/media/ss_size1/[-- PRODUCT.Field3 --]';" onClick="window.open('[-- OUTPUT_DIRECTORY_URL --]/media/[-- PRODUCT.Field3 --]', 'image_window', 'width=600px,height=600px,resizable=yes,scrollbars=yes'); return false;"><img src="[-- OUTPUT_DIRECTORY_URL --]/media/ss_size3/[-- PRODUCT.Field3 --]" border=0></a></td>
[-- END_IF --]
[-- END_IF --]
</tr>
</table>
[-- END_IF --]

[GregDilley]

This almost works for me....

http://littlechoux.com/blueairplanelunchbox.html

BUT

the file structure of my images are:
store > media > images > ss_size1
store > media > images > ss_size2
store > media > images > ss_size3

But when I use
[-- IMAGE PRODUCT.MoreInformationGraphic --]

I get:
images/filename.jpg

I want ONLY the filename, but can't find that tag. That way I could just put the entire path manually.

HELP!



[-- IF PRODUCT.MoreInformationGraphic --]
<table cellpadding="0" cellspacing="0" border="0" width="150">
<tr>
<td align="center" valign="middle" colspan="4"><div id="prodImageLg"><img src="[-- IMAGE PRODUCT.MoreInformationGraphic --]" name="prod_img" border="0"></div></td>
</tr>
<tr>
[-- IF PRODUCT.Field1 --]
<td><div id="prodImageSm"><a href="http:#" onmouseover="document.prod_img.src='[-- IMAGE PRODUCT.MoreInformationGraphic --]';" onClick="window.open('[-- IMAGE PRODUCT.MoreInformationGraphic --]', 'image_window', 'width=600px,height=600px,resizable=yes,scrollbars=yes'); return false;"><img src="/media/images/ss_size3/[-- IMAGE PRODUCT.MoreInformationGraphic --]" border=0></a></div></td>
<td><div id="prodImageSm"><a href="http:#" onmouseover="document.prod_img.src='/media/images/ss_size1/[-- PRODUCT.Field1 --]';" onClick="window.open('/media/images/[-- PRODUCT.Field1 --]', 'image_window', 'width=600px,height=600px,resizable=yes,scrollbars=yes'); return false;"><img src="/media/images/ss_size3/[-- PRODUCT.Field1 --]" border=0></a></div></td>

[-- IF PRODUCT.Field2 --]
<td><div id="prodImageSm"><a href="http:#" onmouseover="document.prod_img.src='/media/images/ss_size1/[-- PRODUCT.Field2 --]';" onClick="window.open('/media/images/[-- PRODUCT.Field2 --]', 'image_window', 'width=600px,height=600px,resizable=yes,scrollbars=yes'); return false;"><img src="/media/images/ss_size3/[-- PRODUCT.Field2 --]" border=0></a></div></td>
[-- END_IF --]
[-- IF PRODUCT.Field3 --]
<td><div id="prodImageSm"><a href="http:#" onmouseover="document.prod_img.src='/media/images/ss_size1/[-- PRODUCT.Field3 --]';" onClick="window.open('[/media/images/[-- PRODUCT.Field3 --]', 'image_window', 'width=600px,height=600px,resizable=yes,scrollbars=yes'); return false;"><img src="/media/images/ss_size3/[-- PRODUCT.Field3 --]" border=0></a><</div>/td>
[-- END_IF --]
[-- END_IF --]
</tr>
</table>
[-- END_IF --]

[ShopSite Lauren]

If ALL of your product images are in the /images folder, then you could still just enter the image file name into the extra product fields 1 2 and 3. You would modify the code I provided to be something similar to:

[-- IF PRODUCT.MoreInformationGraphic --]
<table cellpadding="0" cellspacing="0" border="0" width="350">
<tr>
<td align="center" valign="middle" colspan="3"><img [-- PRODUCT.MoreInformationGraphic REMOVE_HTML --] name="prod_img"></td>
</tr>
<tr>
[-- IF PRODUCT.Field1 --]
<td><a href="http:#" onmouseover="document.prod_img.src='[-- OUTPUT_DIRECTORY_URL --]/media/images/ss_size1/[-- PRODUCT.Field1 --]';" onClick="window.open('[-- OUTPUT_DIRECTORY_URL --]/media/images/[-- PRODUCT.Field1 --]', 'image_window', 'width=600px,height=600px,resizable=yes,scrollbars=yes'); return false;"><img src="[-- OUTPUT_DIRECTORY_URL --]/media/images/ss_size3/[-- PRODUCT.Field1 --]" border=0></a></td>
[-- END_IF --]
[-- IF PRODUCT.Field2 --]
<td><a href="http:#" onmouseover="document.prod_img.src='[-- OUTPUT_DIRECTORY_URL --]/media/images/ss_size1/[-- PRODUCT.Field2 --]';" onClick="window.open('[-- OUTPUT_DIRECTORY_URL --]/media/images/[-- PRODUCT.Field2 --]', 'image_window', 'width=600px,height=600px,resizable=yes,scrollbars=yes'); return false;"><img src="[-- OUTPUT_DIRECTORY_URL --]/media/images/ss_size3/[-- PRODUCT.Field2 --]" border=0></a></td>
[-- END_IF --]
[-- IF PRODUCT.Field3 --]
<td><a href="http:#" onmouseover="document.prod_img.src='[-- OUTPUT_DIRECTORY_URL --]/media/images/ss_size1/[-- PRODUCT.Field3 --]';" onClick="window.open('[-- OUTPUT_DIRECTORY_URL --]/media/images/[-- PRODUCT.Field3 --]', 'image_window', 'width=600px,height=600px,resizable=yes,scrollbars=yes'); return false;"><img src="[-- OUTPUT_DIRECTORY_URL --]/media/images/ss_size3/[-- PRODUCT.Field3 --]" border=0></a></td>
[-- END_IF --]
</tr>
</table>
[-- END_IF --]

[GregDilley]

Getting close...

http://littlechoux.com/blueairplanelunchbox.html

Product Field 1, 2 and 3 are for additional images of the product. But i need a way to show the main image in there as well.
So truly we're only having 3 views of each product.

Main image
Field 1
Field 2

Main image load ok in the large (ss_size1) format. But I can't get it to load in the smaller format (ss_size3) since directly before the image filename there's an image/

I need it to be image/ss_size3/filename.jpg

[GregDilley]

Here's the code: (removed the popup function. And also have the first image just showing the Product.field1 for now. Need it to show the MoreInfo image)
Here's the link: http://littlechoux.com/blueairplanelunchbox.html

[-- IF PRODUCT.MoreInformationGraphic --]
<table cellpadding="0" cellspacing="0" border="0" width="350">
<tr>
<td align="center" valign="middle" colspan="3"><div id="prodImageLg"><img [-- PRODUCT.MoreInformationGraphic REMOVE_HTML --] name="prod_img"></div></td>
</tr>
<tr>
[-- IF PRODUCT.Field1 --]
<td><a href="http:#" onmouseover="document.prod_img.src='[-- OUTPUT_DIRECTORY_URL --]/media/images/ss_size1/[-- PRODUCT.Field1 --]';"><div id="prodImageSm"><img src="[-- OUTPUT_DIRECTORY_URL --]/media/images/ss_size3/[-- PRODUCT.Field1 --]" border=0></div></a></td>
<td><a href="http:#" onmouseover="document.prod_img.src='[-- OUTPUT_DIRECTORY_URL --]/media/images/ss_size1/[-- PRODUCT.Field1 --]';"><div id="prodImageSm"><img src="[-- OUTPUT_DIRECTORY_URL --]/media/images/ss_size3/[-- PRODUCT.Field1 --]" border=0></div></a></td>
[-- END_IF --]
[-- IF PRODUCT.Field2 --]
<td><a href="http:#" onmouseover="document.prod_img.src='[-- OUTPUT_DIRECTORY_URL --]/media/images/ss_size1/[-- PRODUCT.Field2 --]';"><div id="prodImageSm"><img src="[-- OUTPUT_DIRECTORY_URL --]/media/images/ss_size3/[-- PRODUCT.Field2 --]" border=0></div></a></td>
[-- END_IF --]
</tr>
</table>
[-- END_IF --]