displaying multiple images per product

[sametch]

I would like to be able to add a row of pictorial icons representing product features for each product in my catalog. I have a total of 16 icons and each product can have any combination of these (typically each product would have 5-8 icons)

I would like to be able to add these from the Actinic user interface without having to resort to HTML entry.

Is anyone aware of a way of doing this?

[NormanRouxel]

If these chouices are associated with Components or Choices with Radio Buttons as the selector then you can include the image in the HTML for name field of the choice. See http://www.theprostore.co.uk/the_pro...nglasses.shtml for an example (try clicking one of the choices and see what happens).

Of course you have to enter something like "<img src=myimage.jpg>" into the HTML for name field and this is a bit error prone.

If you replace Act_VariantRadioButton.html with the following

<!-- VariantRadioButton HTML begin -->
<!-- This template is used for a product variant radio button. -->

<SPAN CLASS="actxsmall">
<INPUT TYPE=RADIO NAME="NETQUOTEVAR:ATTRIBUTEREF" VALUE="NETQUOTEVAR:CHOICESELVALUE" NETQUOTEVAR:RADIOCHECKED>
<script language=JavaScript>
<!--
document.write('NETQUOTEVAR:CHOICENAME'.replace(/\{(.*)\}/,'<img src="$1">'));
// -->
</script>
<noscript>NETQUOTEVAR:CHOICENAME</noscript>
</SPAN>

<!-- This template is used for a product variant radio button. -->
<!-- VariantRadioButton HTML end -->

Then all you need to do is to place the image name in curly brackets into the HTML for Name field and the "<img...>" tag will be automatically generated.

E.g.

HTML for name {myimage.jpg}

will automatically create the code <img src="myimage.jpg">

Note that you'll have to put an additional copy of these images into PreviewHTML if you want them to appear on page previews and also you'll probably have toi upload them via Advanced / Additional files.

Norman

[sametch]

Sadly Norman they are not associated with choices. If ever you look at brochures for electonic equipment (car radios, cameras etc.) They have a tendency to display little icons to depict what features a particular product has for example an icon for suround sound, another for RDS and so on.

I would like to do something similar.

I could create a single image made up of all the individual icons for each product. But because each product will have a different set of features, this will slow down the page (and make maintenance for feature changes require image editing).

My preffered method would be to call each image individually, then once each small image is in cache there would be negligable speed penalty.

If Actinic could handle decision making based on the value of CUSTOMVARS I could create 16 Boolean CUSTOMVARS and then display the image if the CUSTOMVAR value was set to yes and not if NO. But I asked about this once before and I recall Actinic could not handle code alternatives based on the value of CUSTOMVARS! SADLY.

I can't see an easy way to acheive this one.

[NormanRouxel]

You CAN make decisions based on Customvars. Just use some JavaScript in your Product Template

<script language=JavaScript>
<!--
if ( 'CUSTOMVAR:FEATURE1' ) document.write('<img src="feature1.jpg" width=80 height=40>');
if ( 'CUSTOMVAR:FEATURE2' ) document.write('<img src="feature2.jpg" width=80 height=40>');
.
.
.
// -->
</script>


Now what will happen is if FEATURE1 has anything in it e.g. "Yes" then the appropriate image will be generated. If it's not used nothing will appear. Code in your width and height values as this makes the page display faster.

Norman

p.s.

You may want to enhance this by using a single Customvar called FEATURES into which you simply put one letter for each feature you want to display. The code will be much smaller as it would only have to loop through the list generating an image if it was needed.

e.g. FEATURES has "ABE" and the code will automatically display the images for Features A B and E. If you'd rather use that then let me know and I'll post the code.

[sametch]

Brilliant, thanks Norman!

That opens up a whole host of new and interesting oportunities!

I am sure I asked this question once and was told it couldn't be done, but i can't find the post so maybe I didn't.

Can I be cheeky and ask: Do you now if its possible to detect is an account holder is logged in or not? See posting:

http://community.actinic.com/showthr...&threadid=3711

If you would like to know more!

[NormanRouxel]

Not my area. Look in Help or the Knowledge base for <Actinic::NOTINB2B> (or something like that).


Norman

[NormanRouxel]

Here's the readme for the best way of automating what you want.

Displaying a list of Icons depending on Product features
Features will be held in CUSTOMVAR:FEATURES one character per feature
like "abe" (product has features a, b and e)

INSTALLATION

In Advanced / Custom Properties create a Customvar called FEATURES

For each feature create an graphic icon, all the same size (50 wide, 40 high in this example).
e.g. create icons called feature-a.jpg, feature-b.jpg, etc.  
Save them in Site1\PreviewHTML (this will mean they appear on page previews).
Add all these images (from Site1\PreviewHTML) to the Additional Files list in Advanced / Additional Files.


In Act_Primary.html (just above the </HEAD> tag put the following:-




<script language=JavaScript>
<!-- Display feature list
function showfeatures(features){
if ( features )
  {
  for ( var I = 0; I < features.length; I++ ) 
    {
    document.write('<img src="feature-' + features.charAt(I).toLowerCase() + '.jpg" width=50 height=40> ');
    }
  }
}
// -->
</script>



Note that the width=50 and height=40 above should be changed to whatever your icons use.


In Act_ProductLine.html (and any other Product Templates), where you want
the list of feature icons to be displayed put:-


<script language=JavaScript>
<!-- 
showfeatures('CUSTOMVAR:FEATURES');
// -->
</script>



That's Installation finished.


OPERATION


When a product needs some features displayed just set the Customvar FEATURES to contain 
a list of the feature letters.  Like "abe" (case insensitive).
(If using Business uncheck Searchable and check Use as Customvar)   
The appropriate icons feature-a.jpg, feature-b.jpg, feature-e.jpg will be displayed.

Norman

[sametch]

Norman

Thanks again!

[NormanRouxel]

Better re-read the above post. I was editing it when you replied.

Norman

[deelunn]

norman the link you have to the sunglasses store, how do they change the larger image when clicking on the radio buttons? id be very grateful if you could give me a hand!

[NormanRouxel]

You've not mentioned where that link is so I can't comment. However the readme's on http://community.actinic.com/showthr...&threadid=5161

Norman

[deelunn]

the link was at the top of this thread sorry! http://www.theprostore.co.uk/the_pr...unglasses.shtml, i just want more than one image per product really with the ability to enlarge that image in another window (if possible). im doing a catalog which needs several images as there is quite a lot of detail on the products, and will need to be viewed from all angles. as the customer will be updating their catalog then it needs to be as simple as possible for her to understand! thankyou and sorry again!

[cdicken]

There are several options for having alternative images per product.

The first (and simplest) is to use the product 'Extended Information' tab to create a pop-up window that contains a larger, more detailed, image. This can even be launched by clicking on the product window.

You can also use custom properties. For example, create a custom property called 'Second Image' (or something) in 'Advanced | Custom Properties' and then include code such as the following in your product layout template:

<img src="CUSTOMVAR:SECOND_IMAGE">

All the customer has to do then is supply a filename in the 'Properties' tab of the product.

[deelunn]

the second one sounds better, as she will want three of four images per product, and then she would like those four images to open up in a larger window! what a pain thanks for all your help!

[NormanRouxel]

There's another recent thread that shows how to replace the main product image with alternative images when a choice is selected. So you could have choices marked View1, View2.

Search the forum for dynamic display of product images and you should find it.

Norman