Multiple Product Image Fields

[ashubert]

More and more, retailers are displaying multiple photos of the same product, ie different angles, closeups, larger views, etc. Right now, Shopsite has one product image field and one more info product field.

I also have run into an instance where I cannot control the naming convention used in images controlled by third parties, ie Doba for my custom templates.

It seems that having field such as productimage01, productimage02, productimage03, productimage04, can solve any of these problems and would be a great enhancement

[mjbrunelle]

I use [-- PRODUCT.Field4 --] for my image so I can control the vertical and horizontal spacing.

You've got 10 fields, plus the fixed Product Image field, seems you can store up to 11 images very easily.

[ashubert]

Interesting POV,

I already use all of my product fields for data and also use both of the product image fields for images. Point is that if the cart had multiple image fields, we could use the custom fields for other things.

In my business, there is a lot of information that really should have it's own field in a database, especially if you are dealing with hundreds of products like I am. Like manufacturers part number, UPC codes, etc. Therefore custom fields get used up very quickly.

Also, if a shopsite site owner uses one of the prepackaged templates, he isn't messing around with custom fields or custom programming. He would need these fields even more. So Shopsite can add multiple product views to prebuilt more info page templates as well for those users as well.

[BFChris]

You could use the extra fields, image by image. However, that would use up your extra fields pretty quickly.

An idea I had, but haven't tested, is to store a listing of all the images in ONE extra product field, separated by commas. Then, pass the product field to a Javascript variable array and use some javascript to arrange them onto the page.

[ashubert]

Interesting thought! Could do that.

Typically I used the same naming convention for all of my products using the sku i.e. sku_01.jpg, sku_01_xlg. Then add this into the custom template like

<img src="/Store/media/[-- Product.SKU --]_01.JPG">

which frees up the product image field.

My real problem is with DOBA. They don't use a naming convention for their images. Nor is their image location the same. So I need to use the image fields for their data.

[mjbrunelle]

The image address is for my store, you would have to use yours, and obviously your image files names

[SCRIPT FUNCTION]
function showImage(Image1,Image2,opt,id)
{
var imgDisplayImage = Image2;

if (opt==1)
{imgDisplayImage = Image1;}

document.getElementById(id).src = "http://dmindust.ipower.com/store/media/Labels/" + imgDisplayImage;
}

[PRODUCT TEMPLATE CODE]
<img id="imageID" width="120" height="255" src="" />
<script language="javascript">showImage([-- IMAGE PRODUCT.Graphic --],2,'imageID');</script>

[DATA IN PRODUCT IMAGE FIELD]

'dmi91001.png','dmi91002.png'

[ashubert]

Great post!! I will give this a shot. Much appreciated!!!

[ShopSite David]

FYI, in Service Pack 1 for ShopSite 10 support for multiple product images on the More Info page was added.

[Feydakin]

Thanks David.. When (where) can we find detailed information on how to use the new feature?? My guess is that there is something that we will need to add to our custom moreinfo include to get the images to show properly..

BTW, this is one of my favorite improvements once I get it working on my site..

[Jim]

Help is still be ing worked on for some of the new features.

Some of the new themes use this feature and looking at the source I found the tag [-- MoreInfoImageRow --] which I believe outputs a row of all the extra moreinfo images. I'm not sure if there is extra javascript that needs to be included to get them to switch the large image for the various small images as you click on them. Try looking at the BasicProduct-MoreImformationPage.sst in the includes directory for formatting.

[robm]

We actually just posted a blog entry about the new features and custom tags (most of which can be found in the ShopSite Cookbook):

V10 SP1 New Custom Template Tags

[Feydakin]

Thanks for the heads up Rob..

I'm always so torn when new features like this roll out.. Its cool that we get it, but it forces me to choose between the new multiple images and the, IMO, better way of present larger images with Lightbox..

Here is the new code working on my site..
http://animalcharms.net/butterflyjewelr ... QE5237.php

I love having the extra images..

This is the code that I 'used' to have though..

Code: Select all

 [-- IF PRODUCT.MoreInformationGraphic --]
<span style="font-size: 9px'"><i>Click picture to enlarge</i></span><br>
<a href="http://animalcharms.net/media/[-- IMAGE Product.MoreInformationGraphic --]" rel="lightbox">
  [-- PRODUCT.MoreInformationGraphic --]</a>
 [-- END_IF --]


I don't have that level of fine control for the popups in the new image code..

New Code:

Code: Select all

[-- IF PRODUCT.MoreInformationGraphic --][-- MoreInfoImageRow --][-- END_IF --]


It also doesn't seem to pull the 'original' sized image when you click on it, it grabs whatever is set as the main more info image size.. Again, very cool feature that I've been waiting for, but it seems to have locked certain fine level control away from where I can get my grubby little fingers on it..

Does what I'm trying to say make sense??

[robm]

Try the Advanced tip from the ShopSite Cookbook:

Advanced - If you would like to have even more control of the images and how they are displayed you can use the regular product more information graphic tag, as well as the tag below to directly access the additional product images.

[-- Product.MoreInfoImageN --] - where N is 1 to 20

Maybe that will help with fine tuning your custom lightbox images.

[Feydakin]

Still playing with this and thinking about it..

Those thumbnail images really need to be below the main image, not forcing all of the content and text further down the page..

The more I look at it the more I hate it.. It has cost me my ability to present 'huge' images in a nice lightbox and it shoves my content further down on the page (a bad thing IMO)..

Like I said I love the 'idea' behind this, but I think the execution is too black box without enough control on my end to bland it in to my template the way I want it..

[Feydakin]

Hope no one minds, I get on the stream of thought issues and OCD kicks in

I now have the images stacked like they should be, but the [-- Product.MoreInfoImageN --] is calling the full size image rather than the extra small image..

This advanced method also seems to kill the onmouseover javascript call.. As you can see on the page mousing over the large orange gem image does nothing, but the purple gem behaves like it used to with the old code.. Here is where I am with the code right now..

Code: Select all

<table border="0" align="left"><tr><td>
 [-- IF PRODUCT.MoreInformationGraphic --]
<span style="font-size: 9px'"><i>Click picture to enlarge</i></span><br>
<a href="http://animalcharms.net/media/[-- IMAGE Product.MoreInformationGraphic --]" rel="lightbox">
  [-- PRODUCT.MoreInformationGraphic --]</a>
 [-- END_IF --]
</td></tr><tr><td>

[-- Product.MoreInfoImage1 --][-- Product.MoreInfoImage2 --][-- Product.MoreInfoImage3 --]
</td></tr></table>


I wish I hadn't been so sick during the very short beta testing window..