Product Image Layout Question

[kathynewman]

Currently we have our product images on the right, and the product text floats underneath the image if there is sufficient text for it to do so.

What I would like to do is have this, but underneath the image have either text or another image which says something like "Click here to see bigger picture" which then goes to extended info pop up page (at the moment we do have "click here to see bigger picture" but it is at the end of the Product Description)

However no matter what I do I can't seem to get the Extended info link to go directly under the picture.

Does anyone know if this is possible when using "style: float" commands?

TIA

Kathy

[TraceyHand]

ok..I'll give this a shot!!

I'm assuming your product image layout contains something like

<img src="<actinic:variable name="FragmentImageFileName" />"
   alt="<actinic:variable name="FragmentTitle" encoding="strip" />"
   border="0"
   width="<actinic:variable name="FragmentImageWidth" />"
   height="<actinic:variable name="FragmentImageHeight" />"
   class="image_float_right" />

Is that right?

ok..remove the class="image_float_right" line from that
and wrap the whole image layout (I think!) in <div class="image_float_right"> <img etc /> </div>

BEFORE the closing </div>, try placing your extended info link

ermm...I think that should work

editted to add...might be an idea to copy your product layout into your post if it's not quite laid out like that...I guess it will depend somewhat on what layout you're using

[kathynewman]

Tracey - your a star - worked perfectly - thank you

Kathy

[kathynewman]

Em - spoke too soon. Works perfectly in that it puts the extended info link underneath the image - however what it has done is moved the ProductName in by about 5 characters like it's been tabbed.

Very odd - anyone any ideas why this might be?

Kathy

[kathynewman]

No - not online yet - code where extended info is underneath image but puts the ProductName out is:

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPopUpDisplayedByImage%22%20%2f%3e">
<actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInformationType%22%20%2f%3e%20%3d%3d%20%22Opens%20in%20a%20Pop%2dUp%20Window%22">
<a href="javascript:ShowPopUp('<actinic:variable name=ExtendedInfoPageEncoded />',<actinic:variable name="ExtInfoWindowWidth" />,<actinic:variable name="ExtInfoWindowHeight" />);">
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInformationType%22%20%2f%3e%20%3d%3d%20%22Opens%20in%20the%20Same%20Window%22" >
<a href="<actinic:variable name="ExtendedInfoPageName" />">
</actinic:block>
</actinic:block>
<div class="image_float_right"><IMG SRC="<actinic:variable name="ProductImageFileName"/>"
ALT="<actinic:variable name="ProductName"/>"
BORDER=0
<actinic:variable name="ProductImageHeight"/>
<actinic:variable name="ProductImageWidth"/>
><br /><actinic:variable name="ExtendedInfoLinkText" /></div>
<!-- This file is used to build the product image markup. -->
<!-- ProductImage HTML end -->
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPopUpDisplayedByImage%22%20%2f%3e">
</a>
</actinic:block>

Where extended info is NOT underneath image (it's in the product description) it is:

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPopUpDisplayedByImage%22%20%2f%3e">
<actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInformationType%22%20%2f%3e%20%3d%3d%20%22Opens%20in%20a%20Pop%2dUp%20Window%22">
<a href="javascript:ShowPopUp('<actinic:variable name=ExtendedInfoPageEncoded />',<actinic:variable name="ExtInfoWindowWidth" />,<actinic:variable name="ExtInfoWindowHeight" />);">
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInformationType%22%20%2f%3e%20%3d%3d%20%22Opens%20in%20the%20Same%20Window%22" >
<a href="<actinic:variable name="ExtendedInfoPageName" />">
</actinic:block>
</actinic:block><!-- ProductImage HTML begin -->
<!-- This file is used to build the product image markup. -->

<IMG SRC="<actinic:variable name="ProductImageFileName"/>"
style="float:right"
ALT="<actinic:variable name="ProductName"/>"
BORDER=0
<actinic:variable name="ProductImageHeight"/>
<actinic:variable name="ProductImageWidth"/>
>

<!-- This file is used to build the product image markup. -->
<!-- ProductImage HTML end -->


<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPopUpDisplayedByImage%22%20%2f%3e">
</a>
</actinic:block>


Kathy

[leehack]

After the code for your product image, you probably just need to tell it to start on a new line, by adding <br/> after the image tag closes. Keep it all within the <div> for the image, just needs to be told to start a new line.

<div>
<img blah blah> <br/>
extended info link gumf
</div>

Is the text for your extanded info links too long and forcing it out? Try reducing the length of it just to test (if it looks close).

[TraceyHand]

After the code for your product image, you probably just need to tell it to start on a new line, by adding <br/> after the image tag closes. Keep it all within the <div> for the image, just needs to be told to start a new line.

<div>
<img blah blah> <br/>
extended info link gumf
</div>

there is one there already, Lee.. although the img tag itself is missing the / before the closing >

[leehack]

Ah yes, code was posted while i was replying. The <br/> is all i have had to add, i did this recenty, example. Without seeing it live, i'd expect that the images are very narrow or the extended link is too long or maybe a mixture of both of those.

[peblaco]

You should have div around all code you're putting it between start of the link and image. Additionally you don't have width and height specifications before images variables.

[kathynewman]

Thanks Peblaco - had just thought about doing that when saw your post - all looks perfect now.

Kathy

[TraceyHand]

sorry, Kathy, that's my fault.
I got partway through a second edit suggesting to check the extended info link tags/code was within the div and then got distracted (one of those days )