Announcement

**peblaco** · 22-Sep-2010, 10:14 AM

It might be easier to use Drillpine Multi Product Images plugin to show thumbnails so people know there are different images and then put a link around the main product image to the extended information page.

**Elaborate** · 22-Sep-2010, 10:49 AM

Originally posted by peblaco View Post

It might be easier to use Drillpine Multi Product Images plugin to show thumbnails so people know there are different images and then put a link around the main product image to the extended information page.

Hi Peblaco, thanks allot for you advice

Sorry if I was a little unclear, it is the image on our product listing pages that needs to change, the extended information page is fine. Management also has decided that they will not pay for plugins, (it would have been nice to be able to contact drillpine and ask them about customisation) so I need to code it in.

From the stuff in the thread I mentioned, I think I can get it to work if I can figure out where the second bit of code goes in version 10 of actinic, unfortunately I have no idea where that is.

**DaveH** · 22-Sep-2010, 11:12 AM

The link you gave is still relevant in v10.

But, to begin, you need to 'design' your 'Standard Layout Using CSS' (or whatever layout you use) and look for the code that currently displays the image. Something like...

Code:

block if
	<img src="ProductThumbnailImageFileName" alt="ProductName" title="ProductName" align="left" />
/block

and change it to something like...

Code:

block if
	<img src="ProductThumbnailImageFileName" alt="ProductName" title="ProductName" align="left" />
/block
block if
	<img src="ProductThumbnailImageFileName2" alt="ProductName" title="ProductName" align="left" />
/block

You'll have to create a new variable called ProductThumbnailImageFileName2 and put the second thumbnail url into it for the product, but that code should then show the second thumbnail below the first one. Also remember to change the block-if check to check against ProductThumbnailImageFileName2.

In the same area, you should also put a similar check in to display the larger product image. Once you've got all 3 images showing in your design, you can do the next bit and get the rollovers working.

**NormanRouxel** · 22-Sep-2010, 11:26 AM

Add this to your Standard Product Image layout's <img ...> tag:

Code:

	<actinic:block if="%3cactinic%3avariable%20name%3d%22SecondImage%22%20%2f%3e%20%21%3d%20%22%22">
		onmouseover="pimg=this.src;this.src='<actinic:block php="true">echo str_replace ( '\\', '/', '<actinic:variable name="SecondImage" encoding="perl" selectable="false" />');</actinic:block>'"
		onmouseout="this.src=pimg"
	</actinic:block>

Assumes a user variable SecondImage of type filename for this image.

**Elaborate** · 22-Sep-2010, 11:52 AM

Okay, figured this out ^^ not uploaded yet but its shiney in preview. Method as best as i can explain it is below for anyone who needs help with this in future.

-In the layout code for the standard product image find a chunk of code, possibly somewhere near the middle, that reads something like this:

Code:

<img src="<actinic:variable name="ProductImageFileName" />"
      border="0"
      width="<actinic:variable name="ProductImageWidth" />"
      height="<actinic:variable name="ProductImageHeight" />"
      alt="<actinic:variable name="ProductName" encoding="strip"/>"/>

Thats the code we need to change. first however we need to make a custom variable to put the rollover image in.

-Go to design>library>variables> then right click on product and then new variable. Name it LargeImage. Enter some text in the Prompt box that will remind you that this is the rollover image. Check "product" in the place of setting list. Next there should be a drop down box called "Type:", you need to select "filename". Also make sure that "allow empty value" is checked.

-Now you will find an option under "properties" in the product details panel where you can add your rollover images. this of course needs to be done for each product.

So we have the variable telling actinic we want rollover images, and we have told it the images we want. now we need to tell it how it works. be careful of the variable names in the code below, they may be different in different designs.

this will be our new code in a moment:

Code:

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e" >
<a href="<actinic:variable name="ExtendedInfoPageName" />" onMouseOver="SwapImage('<actinic:variable name="ProductImageFileName" />','<actinic:variable name="LargeImage" />')"
	onMouseOut="RestoreImage()">
<img src="<actinic:variable name="ProductImageFileName" />"
      border="0"
      width="<actinic:variable name="ProductImageWidth" />"
      height="<actinic:variable name="ProductImageHeight" />"
      alt="<actinic:variable name="ProductName" encoding="strip"/>"
		name="<actinic:variable name="ProductImageFileName" />"/>
		</a>
</actinic:block>

-In the second last line there, we have added a name to the image we want to swap out, which should be the same variable as the image file name... so we used the "ProductImageFileName" variable in this case.

-Also see how we have added an anchor tag around the original bit of code? The tag firstly tells the rollover image to link to the extended info page, then to swap the image that we just named, with the variable that we created earlier, and then to swap it back to the image we have named above after.

Be careful that all of these variables match those that you are using and in the correct order, and it should work fine.

EDIT: Thanks norman, didn't get your message till after I had posted this. I think I read something similar in the previous thread and still don't understand quite where that goes. The method above seems to work fine though, even if it is a little more long winded.

**NormanRouxel** · 22-Sep-2010, 11:58 AM

My way (post #6) is much cleaner. I've also added in some tweaks that make it safe when your extra images are outside the Site folder. And a blockif so no code is generated if the extra image doesn't exist.

**NormanRouxel** · 22-Sep-2010, 12:06 PM

Allen,

Your method isn't general purpose (others may try to use it and have errors).

1) It will always try to load an extended info page, even if it doesn't exist.

2) It will always try to swap images, even if you don't have an additional one defined.

3) It will fail if you have images in certain sub/folders beginning with certain letters. E.g. \new Images\newfile
(Actinic will put backslashes into your filenames as the folder delimiters and this may look like JavaScript escaped characters in your code - the \n becoming newline in the example).

My way leaves the product image code exactly as standard unless the extra image is defined. Only then is the mouseover code generated. Extended info code works as usual.

**Elaborate** · 22-Sep-2010, 01:13 PM

Due to our site design we shouldn't have any of those problems.
Would I be correct in saying that the steps are the same but the code you have given is slighty different?

**NormanRouxel** · 22-Sep-2010, 02:02 PM

My code enhances the Standard Product Image layout to give it the functionality you asked for in your first post. It works without needing to wrap an extra anchor tag around the image and is thus a bit smaller and more efficient.

As I mentioned, it allows the Extended Info to be optional, allows the extra image to be optional and won't suffer from the sub-folder first letter sensitivity bug that your code does.

**Elaborate** · 23-Sep-2010, 08:34 AM

Was asking so I could make sure it went in the right way, not debating that yours is better, so I'll take that as a mostly yes.

Thanks for pointing out bugs and your help!

Announcement

Product List Rollover Variable?

Product List Rollover Variable?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment