Wrapping text around images in product descriptions

[NickD]

Layout - does anyone know of a quick and easy way to wrap text around images in brochure pages and on product? As an example, look on my site

http://www.nickdobsonwines.co.uk/acatalog/index.html

and go to "Our range of wines"->Beaujolais Wines->Beaujolais. The idea on each of the product pages is that there is a pretty picture of the town/zone concerned, with some descriptive text, (the "overview part") and then the products are listed below. The overview part is in fact created as a product which may not be ordered online. On the Beaujolais page you can see that the text down the right hand side of the 1st picture continues in a narrow column below, whereas either wrapping around the picture, or done as a single block of text the full width of the screen, located below the image, would be better. Unfortunately there doesn't seem to be an option to allow this. Also I noticed that the layout of the other products is affected by the width of the picture in the overview part - the text block on the LHS is the same width as the overview picture.

[Landgreen]

hi nick.

first you need to select the layout "no image, laid out in rows" (to remove the picture placeholder)

Then create the page like you want it in a html-editor, and copy/paste the code into the "full description" field. Remember to use the embedding thingies <!-- html stuff here --!> -then you can make it look exactly the way you want.

not sure if this will get the job done, but try it out.

rasmus landgreen, dk

[NormanRouxel]

Here's an alternative ProductLine template attached (it's a textfile as the Forum won't allow .html attachments - rename it to end ".html") that does what you want.

The trick is to have the text full width and wrap the NETQUOTEVAR:PRODUCTIMAGE inside a table that has align=left text wrapping set.

Norman

[NickD]

Thanks to both of you for your input on this one. I tried Norman's attached template first because it was quick and easy to do so - and it did exactly what I wanted in the overview section..... except that the formats for other products lower down the page became upset. If you look at the site now, and go to the same place as before, and scroll down to the 2nd wine, "La Doyenne", you'll see that the text has become very narrow and tall. I applied the same template to the first wine, Cuvée Terroir, as to the overview section, amd that behaved in the same way as the overview, which is fine except that the image is on the left and I want product images on the right. So you can probably guess my next question - Norman, do you have a similar template with the image on the Right hand side?

Thanks again

Nick

[NormanRouxel]

Only use my template for those products that you want to have the text flowing on. Save it with a name like the attached file had as the filename tells you what it does.

Use the standard Act_ProductLine.html (or whichever template you'd previously been using) for the other products.

Your funny looking product used Act_ProductLineRight.html. Are you sure you've not edited Act_ProductLineRight.html and broken it.


To get the image on the right just open my template and change

<table align="left"><tr><td>NETQUOTEVAR:PRODUCTIMAGE</td></tr></table>

to:-

<table align="right"><tr><td>NETQUOTEVAR:PRODUCTIMAGE</td></tr></table>

And save that to a new filename.

Norman

[NormanRouxel]

If the above post doesn't fix the layout, then try this.

Edit Act_ProductBody.html and look for the line starting <TABLE....> (there will only be 1 occurence)

Add the following below it

<tr><td width="33%"></td><td width="34%"></td><td width="33%"></td></tr>

Norman

[NickD]

Hi again Norman

I tried what you suggested and still have some problems.

I had observed, even before trying out the wrapping templates, that the width of the image in the overview section (the first product in the list, which cannot be ordered) influences the format of products further down the list. It's as if everything on the page is contained in a table with 2 columns, and where each product is on its own row, and where doing something somewhere which forces a column to widen (such as putting in a larger picture) causes this widening to be equally applied to other rows in the table. So in fact the products are not independent elements and cannot each be formatted they way you want, independently of the others.

I have done the following:-

1. Checked as you suggested that I had not made any mods to Act_ProductLineRight.html - I had not.

2. tried using the same template for the first real product (i.e. the 2nd row) as for the overview section, except tweaked for image on the right - this worked fine for row 2, but the format of row 3 then became corrupted with narrow text again.

3. repeated (2) for the 2nd product (3rd row) - hoping that everything would now fall into line and be OK - this did work fine, but only for the products on rows 2 and 3 - the overview row at the top has now narrowed, with a very narrow column of text wrapped to the right of the image.

4. Made the change in Act_ProductBody.html
(<tr><td width="33%"></td><td width="34%"></td><td width="33%"></td></tr> ) - had no effect.

Output from the above is currently live on the site.

All the above reinforces my feeling that the formats on individual rows are not independent, and that presumably to get such independence would mean having a seperate table (2 cols x 1 row) for each product.

Am I right?

All input gratefully received.

[NickD]

Just noticed something else - the mod to Act_ProductBody.html
((4) in last post) has other effects - the Actinic link symbol and the navigation stuff (Onlione catalogue -> section name) and the "Buy Online - the best way to buy" message have all relocated themselves from the bottom of the page (below the products) to the top (above the products) - removing the mod puts things back the way they were before.

Nick

[NormanRouxel]

I can duplicate your problem here and that extra line in Act_ProductBody.html fixes it for sure. It shouldn't break anything else.

Could you post your Act_ProductBody.html and I'll see if there's an error in it?

Norman

[NickD]

Here's the file, renamed to .txt so it can be posted.
This is the one currently in use, which has had the mod removed.
Maybe I broke something else during the editing process, but it's not obvious to me if I did.

Nick

[NormanRouxel]

Your Act_ProductBody.html seemed to be OK. Below is a copy with the extra line patched in.

<!-- ProductBody HTML begin -->
<!-- Insert HTML for the top of the product body -->

<A NAME="sectiontop">
<DIV ALIGN="CENTER">
NETQUOTEVAR:PARENTSECTIONSTOP
</DIV>
<!-- NETQUOTEVAR:TOPLEVELSECTIONSTOP -->
NETQUOTEVAR:SECTIONLISTTOP
NETQUOTEVAR:TOPSECTIONSEPARATOR
NETQUOTEVAR:CARTERRORLISTXML
</A>
NETQUOTEVAR:HIDDENINPUT

<BR>

<TABLE WIDTH="500" COLS="3" BORDER="0" CELLPADDING="10" CELLSPACING="0" ALIGN="CENTER">
<tr><td width="33%"></td><td width="34%"></td><td width="33%"></td></tr>

	NETQUOTEVAR:PRODUCTBULK

</TABLE>

<A NAME="sectionbottom">
<DIV ALIGN="RIGHT">
NETQUOTEVAR:SINGLEADD
</DIV>
NETQUOTEVAR:BOTTOMSECTIONSEPARATOR
NETQUOTEVAR:SECTIONLISTBOTTOM
<!-- NETQUOTEVAR:TOPLEVELSECTIONSBOTTOM -->
<DIV ALIGN="CENTER">
NETQUOTEVAR:PARENTSECTIONSBOTTOM
</DIV>
</A>
<!-- Insert HTML for the bottom of the product body -->
<!-- ProductBody HTML end -->

You may want to change the WIDTH="500" above to WIDTH="620" as that will fit better to 800 x 600 screens, which is pretty much the minimum spec these days. You could also change the percentage values for the actual number of pixels needed.

The way that the products are laid out means that all the products on a page are fitted into the same table. So one weird sized image or text box will force the cell it's in to be wider than designed. Thus everything else on that page will be moved to suit. It is possible to end the table on a custom product line template (with a </table> tag, do what you want for that template, and restart the usual table it at the end of that template (using the code you see in Act_Product_Body.html).

Finally, there's no way I can see why adding / removing the <tr><td width="33%"></td><td width="34%"></td><td width="33%"></td></tr> line can effect anything at the top or bottom of the pages.

Norman

[cdicken]

Finally, there's no way I can see why adding / removing the <tr><td width="33%"></td><td width="34%"></td><td width="33%"></td></tr> line can effect anything at the top or bottom of the pages.

My only thought on this is any incorrect HTML within any product layout templates that does not fit within the table structure (defined in Act_ProductBody.html) will be squeezed out by IE and appear as if it is above the table.

[NickD]

Hi

Am making some progress on this one but we're still not quite there yet. I've tried things suggested by both Norman and Rasmus. I'll talk about Norman's advice first.

I went back and retried the mod to Act_ProductBody.html exactly as suggested by Norman, and the behaviour this time is OK - the problems I had last time involving repositioning of the Actinic link and navigation stuff have disappeared, and I can only assume I did something wrong before. However, there remains some influence on the remaining product formats, which I'd still like to get to the bottom of.

Take a look on the site and I'll show you what I mean. Go to www.nickdobsonwines.co.uk/acatalog, click on WINES in the bottom LHS, select Beaujolais->Beaujolais, and there you can see the text wrapped around the first image. Look further down at the two wines on this page (Chatelus and Devay) and note the width of the text description and the image location. Now go down to the bottom of the screen and click on Beaujolais Wines; you are taken to a new screen, and here please scroll down and click on "Chiroubles". This page does not use text wrapping in the overview section; scroll down and look at the products, and you will see that the text block is wider, and that the image is further over to the right than before. On both pages, the products are set to have layout "One product per row, image on right".

I then tried Rasmus's idea of embedding entire html code in the text field for the overview part (which I did as a cut & paste of a 1-cell table from my old site). To do this I created a new subsection called "beaujolais2" and tried this on the beaujolais page. It seems to work, but again there are formatting problems lower down. I haven't got the image to be displayed, but I haven't tried to debug that yet - the issue is that the text part of the products below is the same width as my entire embedded table, and the images disappear off the screen to the right.

Is there any way we can break the link between the format of the overview part and the following products? Whilst everything appears to be in a single table I fear problems will remain.

Determinedly,

Nick

[NormanRouxel]

Yes you can divorce the each product from the Act_ProductBody.html template. Just start your ProductLine template with a </TABLE> statement, put into it a complete new table with whatever parameters that does the job for you, and end it with the <table....> code that was in Act_ProductBody.html.

I'm not at a system with Actinic on it at the moment so I can't demonstrate this but it's not difficult. Have a go yourself and let me know if your stuck.

Norman