Icons & Image for a product

[Bogger]

I'm compiling a catalogue of e-learning content for the schools market. As well as an image of the content I want to add icons per titles to indicate if it is a Windows title, mac title, which Key Stage etc. In total each title will have 8 possible icons that could be added. How and where are these icons added?

[jont]

Hi Ewan,

if these are to change on a product by product basis (which I guess they would) you can use the CUSTOMVAR approach. Create a new CUSTOMVAR under Advanced | Custom Properties eg : PLATFORM and then in the Act_ProductLine.html in the root of the site1 folder simply add in the code CUSTOMVAR:PLATFORM

Against the product select the "properties" tab and click the "+" symbol and slelect PLATFORM from the drop down ... specify the image name eg: windows.gif and tick "use as customvar" and file name" ... Actinic will then replace the code with the image.

You will need to repeat for as many images you need. If a lot of the images are the same you may just want to mock-up the variations into one GIF file and add in the 1 image against the product.

[NormanRouxel]

Here's a way where you can use a single Custom Property to contain a list of features (one character per feature). This will be used to automatically display the appropriate icons.

Create a Custom Property called FEATURES

In each product use the Custom Property to hold a character, e.g. W, L, X to represent each feature.
Put in as many characters as required. E.g. WL or XA

Put the following into Act_Primary.html just above the </head> tag.

<script type="text/javascript">
<!--
var icons = new Array('windows.jpg', 'linux.jpg', 'osx.jpg', 'advanced.jpg', 'intermediate.jpg', 'novice.jpg');// extend this array to add new icons
var keys =  new Array('W',           'L',         'X',       'A',            'I',                'N');		// extend this array to add new characters
function showicons(cvar){
 cvar = cvar.toUpperCase();
 for ( i=0; i < keys.length; i++)
   {
   if ( cvar.indexOf(keys[i]) > -1 ) document.write('<img src="' + icons[i] + '"> ');
   }
}
// -->
</script>

For each image in the icons array, keep them in PreviewHTML and add it for upload via advanced / additional files.

and in the Product Template where you want the icons to be displayed put

<script type="text/javascript">
<!--
showicons('CUSTOMVAR:FEATURES');
// -->
</script>

Add new icons to the icons array and corresponding key letters to the Keys array.

[Bogger]

What a helpful lot you are.

It's always tough getting a new business up and running, especially when you have to master new skills. Thanks for your help so far, I'm sure I'll be posting new questions shortly.

Regards,

Ewan

[jont]

Nice one Norman

[Bogger]

I can't see the second image

I'm using the CUSTOMVAR approach until I have learn't more about HTML programming. I have created a CUSTOMVAR in the Advanced:Custom Properties called Apple Logo (APPLE_LOGO). In the properties fpr the product details I have given the path for the image under the value section C:\images\applelogo.gif and have edited the Act_Productline.html and clicked the apply button. The image doesn't show up. What have I done wrong?

[Duncan Rounding]

If you haven't already you will need to add this image to the Additional Files list in Actinic and also copy it into the PreveiwHTML folder.

[Bogger]

Additional Files List

I've found the Prewiew HTML folder and placed a copy of the gif there but can't find the Additional Files List. Where is it?

[Duncan Rounding]

In Actinic - Advanced|Additional Files

[Bogger]

Still not displaying

Thanks, I've added it as you suggest but it still doesn't show on the product page. Any other suggestions?

[wjcampbe]

Change the customvar to "APPLE_LOGO.gif" (this needs to be the same case as the actual filename) getting rid of the c:\images\ - your website does not have a c:\images\ folder (unless you are hosting on an unusual windows setup). All image files are normally uploaded straight into the /acatalog/ folder, which is the same place your web pages are.

[Bogger]

Partial Success

I've changed the file name to APPLE_LOGO.GIF in the Advanced|Custom Properties, in the Product Details and checked the searchable, Use as CUSTOMVAR, File Name and File Content boxes and edited the Act_Productline.html template with the entry CUSTOMVAR:APPLE_LOGO. I have now got something on the product page but not the logo. It is a line of text saying GIF89a with a small box next to it. I feel i'm close but I'm not picking up the image. Any further suggestions?

[wjcampbe]

Sorry, I just read your post #6 again.

The CUSTOMVAR name in Advanced | Custom Properties does not have to be the same as the image - APPLE_LOGO is fine for that - though you may want to call it MYPAGELOGO and reuse one CUSTOMVAR for all the pages. On the Product properties tab, in the first column, select the CUSTOMVAR name, in the second column should be the actual filename, in this case applelogo.gif - tick use as customvar, filename and use file contents.

[Bogger]

Just playing with HTML

Shooting in the dark a bit but I inserted the line
<p><img src="CUSTOMVAR:APPLE_LOGO"></p> and I niw get a box with a red cross in it. Is this the image but I can't see it or another red herring?

[wjcampbe]

Are you seeing this in preview or on a live site?

Check the spelling (and capital letters) in the filename and in the properties tab where you have added the customvar.