Word wrap pictures left or right?

[leehack]

Geez i'd admire your patience, but you are a right royal pain in the ass lol.

This part:

<td> NETQUOTEVAR:TEMPLATEBEGINXML <div class="ImageLeft">NETQUOTEVAR:PRODUCTIMAGE</div>
<colspan="2">

is wrong, where on earth did you get that from? Jonty and his bloody tables again i expect .

The above should be reading:

<td colspan="2"> NETQUOTEVAR:TEMPLATEBEGINXML <div class="ImageLeft">NETQUOTEVAR:PRODUCTIMAGE</div>

NOTE: I have no idea if the colspan of 2 is the correct number, that is the only thing where there could be a problem now. The CSS file looks fine, DO NOT touch that area now!

Finished code:

<!-- ProductLine HTML begin -->
<!-- Insert HTML for the top of the individual product -->
NETQUOTEVAR:INCLUDE Act_ProductSeparator.html
NETQUOTEVAR:ENDSEPARATOR
NETQUOTEVAR:PRODUCTFORMBEGIN
  <tr>
    <td colspan="2"> NETQUOTEVAR:TEMPLATEBEGINXML
<div class="ImageLeft">NETQUOTEVAR:PRODUCTIMAGE</div> 
<a name="NETQUOTEVAR:PRODUCTANCHOR">
<span class="actregular"><strong>NETQUOTEVAR:PRODUCTNAME</strong></span></a>
<span class="actxsmall">NETQUOTEVAR:PRODUCTREF <br/>
NETQUOTEVAR:PRODUCTDESCRIPTION&nbsp;NETQUOTEVAR:EXTINFOLINK</span>NETQUOTEVAR:EXTINFOBUTTON<br/>
<span class="actxsmall">NETQUOTEVAR:PRODUCTBEGINLINKNETQUOTEVAR:PRODUCTLINKTEXTNETQUOTEVAR:PRODUCTENDLINKNETQUOTEVAR:PRICEEXPLANATION </span><br/>
<strong>NETQUOTEVAR:PRODUCTPRICE</strong><br/>
<span class="actxsmall">NETQUOTEVAR:DISCOUNTINFO </span>
<span class="actxsmall">NETQUOTEVAR:OTHERINFOPROMPT </span>
<span class="actxsmall">NETQUOTEVAR:DATEPROMPT </span>
NETQUOTEVAR:CARTERRORXMLNETQUOTEVAR:PRODUCTQUANTITY<br/>
<Actinic:ACTIONS>NETQUOTEVAR:ADDTOCARTBUTTON</Actinic:ACTIONS></span>
NETQUOTEVAR:TEMPLATEENDXML
</td>
</tr>
NETQUOTEVAR:PRODUCTFORMEND
NETQUOTEVAR:NEXT
<!-- Insert HTML for the bottom of the individual product -->
<!-- ProductLine HTML end -->

[gtekser]

Well….. It worked! BUT not immediately.
I had altered the Picure size to 290-width jpg. I don’t quite know how this affects it but I guessed that it might be also something to do with the column width. So, on the ProductLine HTML, I increased the size to “3” from “2” and Bingo …It worked !
I now have the picture to the left and the wrap words starting from the right hand column, continuing underneath.

Obviously the artist balance of the picture size and the text need to be addressed in composition but we are there …arrived …Hurray!

Picking up on what you said before …… the code is case sensitive ……so I would like the picture option on the right. If Actinc css has been altered to .ImageLeft{float: left;} Do I add another line for ImageRight or decide on just the one option? i.e. Picture Right.

--oOo—

One thing I don’t understand is the logic of the templates.
I have the option of “One product per row, image on left” gives me ProductLine HTML but not ProductLineLeft HTML which is also in Site 1 Folder.

When I select “One product per row, image on right” gives me ProductLineRight HTML Template but the code in the first line is ProductLine HTML ? I would have thought ProductLineLeft HTML = left & ProductLineRight HTML = right. As long as its ok/normal I’m a happy bunny.

I just need the applied logic of Picture Right and text wrap left. Is that a simple tweak?

Many thanks for going the extra mile on this – I am sure it must help others too,

[leehack]

To be able to have either the image left or the image right, you will need 2 product layouts and you will have to select whichever one you want to use on each product, better still select one as the site standard and then just change the choice on the ones you want the other way.

You will need to create a product right layout which will almost identically match your left one, it will just use this class instead:

.ImageRight{float: right;} <<<<< ADD THIS TO THE CSS ALSO, SAME AS BEFORE

and

<div class="ImageLeft">NETQUOTEVAR:PRODUCTIMAGE</div>

in your product layout, will need to become:

<div class="ImageRight">NETQUOTEVAR:PRODUCTIMAGE</div>

<!-- ProductLine HTML begin -->
<!-- Insert HTML for the top of the individual product -->
NETQUOTEVAR:INCLUDE Act_ProductSeparator.html
NETQUOTEVAR:ENDSEPARATOR
NETQUOTEVAR:PRODUCTFORMBEGIN
  <tr>
    <td colspan="3"> NETQUOTEVAR:TEMPLATEBEGINXML
<div class="ImageRight">NETQUOTEVAR:PRODUCTIMAGE</div> 
<a name="NETQUOTEVAR:PRODUCTANCHOR">
<span class="actregular"><strong>NETQUOTEVAR:PRODUCTNAME</strong></span></a>
<span class="actxsmall">NETQUOTEVAR:PRODUCTREF <br/>
NETQUOTEVAR:PRODUCTDESCRIPTION&nbsp;NETQUOTEVAR:EXTINFOLINK</span>NETQUOTEVAR:EXTINFOBUTTON<br/>
<span class="actxsmall">NETQUOTEVAR:PRODUCTBEGINLINKNETQUOTEVAR:PRODUCTLINKTEXTNETQUOTEVAR:PRODUCTENDLINKNETQUOTEVAR:PRICEEXPLANATION </span><br/>
<strong>NETQUOTEVAR:PRODUCTPRICE</strong><br/>
<span class="actxsmall">NETQUOTEVAR:DISCOUNTINFO </span>
<span class="actxsmall">NETQUOTEVAR:OTHERINFOPROMPT </span>
<span class="actxsmall">NETQUOTEVAR:DATEPROMPT </span>
NETQUOTEVAR:CARTERRORXMLNETQUOTEVAR:PRODUCTQUANTITY<br/>
<Actinic:ACTIONS>NETQUOTEVAR:ADDTOCARTBUTTON</Actinic:ACTIONS></span>
NETQUOTEVAR:TEMPLATEENDXML
</td>
</tr>
NETQUOTEVAR:PRODUCTFORMEND
NETQUOTEVAR:NEXT
<!-- Insert HTML for the bottom of the individual product -->
<!-- ProductLine HTML end -->

That should be it then, .

[leehack]

A slight improvement is to have this as your css styles instead:

.ImageRight{float: right; margin: 0px 0px 10px 10px;}

.ImageLeft{float: left; margin: 0px 10px 10px 0px;}

These are a direct replacement for those styles in your CSS, they will have the text move away slightly from the images, so it looks better.

[gtekser]

Hi

Thanks to both of you for getting me there - Frustration turned to jubilation -
and for explaining the picture to the right - guess that 'wraps' it.


Never expected it to go 4 pages on the forum.

Regards

Right Royal Novice

[jont]

where on earth did you get that from? Jonty and his bloody tables again i expect .

You cheeky sod. True I hate tables with a passion BUT i did provide the correct code in my post.

[jont]

Thanks to both of you for getting me there - Frustration turned to jubilation

Woohoo. Glad you finally got it sorted.

Don't come back soon

[leehack]

You cheeky sod. True I hate tables with a passion BUT i did provide the correct code in my post.

colspan="2"

LOL, ru sure.