Word wrap pictures left or right?

[gtekser]

Hi All

I have searched through the forum for a solution to my problem using ‘word wrap’ but cannot see an appropriate answer in the past problems/answers.

The problem I have is that format with the ‘picture left’ or ‘right of text’ has. I wasn’t going to publish this as it looks ridiculous but does illustrate the point. In the
Link here http://www.guitartechnicalservices.c..._for_Sale.html
You can see the problem with the last item for sale with the words forced into a narrow column size and not wrapped around the picture. So the simple question, is there a code to add to the HTML that will wrap the text around the picture either to the left or the right? Or is this too simplistic.
I find the changing templates and design too daunting to create something special.
Alternatively if this cant be done, why is there not a picture at top and text below option.

Any help will be appreciated.

Thanks

Peter

[leehack]

A quick fix is to give your product layout more width in site options, this will spread it out more and give more words per line. You can get the text to wrap around the image using CSS. Layouts in V8 and V9 do this for you automatically. Given the nature of your post, i'd suggest an upgrade to v8 or v9 would be a very good idea as things like become infinitely easier.

Failing that you are going to need to learn how to float an image to the left, apply a right and bottom margin to it and have all of this within one container, the text will wrap around for you then. Maybe downloading a 30 day trial of the new versions and taking a peek inside will help you.

I'd go for the increase on width though, you have masses of space and this will all be done for you in about 15 seconds with no paniccing or cockups. It's probably a happy compromise for the time being.

[jont]

I did a step by step guide to this http://community.actinic.com/showthread.php?t=16945

[gtekser]

HI

Thanks for the input. I need to sit down and go through this - on the face of it, it is what I am looking for and never ceases to be amazed at the English language when using search. I would never have found this posting under word wrap!

Every time I alter this html it feels like I have a headcold.

Thanks again.

PS: I would be worried in upgrading to V8 or V9 as past upgraded products bring disadvantages as well as the good stuff. Jury is out on this so I will try the bit-by-bit solution or any other 'quick fix'. Where is the overall line width altered?

Thanks Pete

[jont]

I would never have found this posting under word wrap!

I only found it as I could remember who posted the original thread and did a "posts started by" search and found it that way! Who needs advanced searching when you can remember posts from 30 months ago

[gtekser]

Hi Jont

Well done on the good memory! From what I see before me …….is this correct? There are two Files that need to be to altered. a) & b)

a) Act_ProductLine.html template

I am not sure on this ……………If you are inputting this

<tr>
  <td>
    <div><img src="image.jpg" style="float:right" />text goes here</div>
  </td>
</tr> 

where is it being put into the “Act_ProductLine.html template” text to have effect?

b) Act_ProductImage.html template

As there are many ‘Image’ templates such as “Act_LeftImageAndTitle.html” etc do I just apply changes to the Act_ProductImage.html only and all the others will fall into place?......... Or, is it only necessary to affect this Act_ProductImage.html template. ?

The change from ...............

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

<IMG SRC="NETQUOTEVAR:IMAGEFILE"
      ALT="NETQUOTEVAR:ALTERNATETEXT"
      BORDER=0
      NETQUOTEVAR:IMAGEHEIGHT
      NETQUOTEVAR:IMAGEWIDTH
      NETQUOTEVAR:OTHERIMAGEMARKUP>

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

.............To This ……seems straight forwards

<IMG SRC="NETQUOTEVAR:IMAGEFILE"
      style="float:right"
      ALT="NETQUOTEVAR:ALTERNATETEXT"
      BORDER=0
      NETQUOTEVAR:IMAGEHEIGHT
      NETQUOTEVAR:IMAGEWIDTH
      NETQUOTEVAR:OTHERIMAGEMARKUP> 

I just need to be clear before making changes.
I am aware of saving the original templates because I might cock it up and need to restore but would like the peace of mind to know I have understood what you say.

Thanks Pete

[jont]

Hi Pete,

you are mixing the posts from myself and Graham into one.

In the Act_ProductLine.html template you need to merge the table cells holding the image and the text .... at the moment they are in 2 cells sitting side by side. This gets everything into one cell but with the text sitting directly beneath the image... it will be something like ;

<tr>
<td>
image template
code for text, quantity, buy etc
</td>
</tr>

You then add the float:right (or float:left) to the Act_ProductImage.html .... this will then allow the text to flow around the image.

That will float all product images.... if you are using different product layouts you will need to merge the cells in all of them to get the effect otherwise the table cells around the image and the text will constrain the wrapping effect.

[gtekser]

Hi Jont

This is where I show my self up on how green I am.

I altered the Act_ProductImage.html just as you said . Its not easy for me to clearly see/understand what's going on with the Act_ProductLine.html template. I took out the section to try to merge the two tables as indicated in this 'altered' .jpg but must have not got the correct place.

So it still doesnt seem to wrap around the image but just under the picture and is centre justified narrow column. I have also included .jpg for 'results' view. This is probably due to poor understanding of the tables.
I tried to load up a version of 'hot metal pro' to help out with this but it didnt load/view and caused more questions that threw me off the job in hand.

sorry

Pete

[gtekser]

Well, I have tried a few attempts at merging the tables and hope that its correct. see here

<!-- ProductLine HTML begin -->
<!-- Insert HTML for the top of the individual product -->
NETQUOTEVAR:INCLUDE Act_ProductSeparator.html
NETQUOTEVAR:ENDSEPARATOR
NETQUOTEVAR:PRODUCTFORMBEGIN
  <tr>
    <td rowspan="4" valign="TOP" align="LEFT"> NETQUOTEVAR:TEMPLATEBEGINXML NETQUOTEVAR:PRODUCTIMAGE 
<valign="TOP" align="LEFT" colspan="1">  
      <a name="NETQUOTEVAR:PRODUCTANCHOR"><span class="actregular"><b>NETQUOTEVAR:PRODUCTNAME</b></span></a>
      <span class="actxsmall">NETQUOTEVAR:PRODUCTREF <br>
      NETQUOTEVAR:PRODUCTDESCRIPTION&nbsp;NETQUOTEVAR:EXTINFOLINK</span>NETQUOTEVAR:EXTINFOBUTTON
      <br>
      <span class="actxsmall">NETQUOTEVAR:PRODUCTBEGINLINKNETQUOTEVAR:PRODUCTLINKTEXTNETQUOTEVAR:PRODUCTENDLINK
      NETQUOTEVAR:PRICEEXPLANATION </span><br>
      <b>NETQUOTEVAR:PRODUCTPRICE</b><br>
      <span class="actxsmall">NETQUOTEVAR:DISCOUNTINFO </span>
      <span class="actxsmall">NETQUOTEVAR:OTHERINFOPROMPT </span>
      <span class="actxsmall">NETQUOTEVAR:DATEPROMPT </span>
   <align="LEFT" colspan="1"><span class="actxsmall">
            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 --> 

The problem now is that when I change the other items on the page to the same layout, they drop down along-side instead of one above the other, seperated by a line.
I tried to alter the width of the text to make it spread across the page but I dont know if this is done somewhere else in actinic other than the code in Act_ProdLine ?

It now looks much harder to do than just knocking out a couple of td marks! but I guess to someone who does it all day its dead simple.

Any help appreciated,

Thanks Pete

[leehack]

Why the colspans of 1, they seem pointless code? And why a rowspan of 4 also when you only seem to need just one plain and simple <td> or does the table have 4 columns? Remove you redundant code first and clean that part up.

[gtekser]

HI

I short, I dont know what I am doing but try my best to understand. I got dragged into trying to adjust the html as Actinic is limited to some extent and not as user frendly from a novice point of view.
The "Why the colspans of 1, they seem pointless code?" so do I remove it completely? ...............and the "rowspan of 4" I did make as "1" and that seperated the 'side-by-side' issue out - by trial and error!

As for "the simple <td>? Remove you redundant code first and clean that part up." well, I thought that the <td> & </td> created the start and finish of the table. Do I remove these as well?

The other point made was to increase the width size but I just cant see how to do this. I looked on another posting and it said to find it under 'site' and 'options' but just dont see where ?

Sorry to be a pain - the only consolation is that someone else as dumb as me might find the answer to solving their problem too.

Pete

[leehack]

I short, I dont know what I am doing but try my best to understand. I got dragged into trying to adjust the html as Actinic is limited to some extent and not as user frendly from a novice point of view.
The "Why the colspans of 1, they seem pointless code?" so do I remove it completely? ...............and the "rowspan of 4" I did make as "1" and that seperated the 'side-by-side' issue out - by trial and error!

Every package in the world can be classed as limited if you do not understand html and want to change anything. A table is formed quite logically in html, with 3 main tags - <table><tr> & <td>. I'd suggest doing a quick 20-30 minute tutorial on this as it will help you tenfold. Actinic is tabletastic, so if there is one thing to learn and understand it is the table. As a pointer, you have no need to have rowspan or colspan if they are equal to "1" as it does "1" for you as standard anyway. Rowspan and colspan tell how many rows or columns of a table to join up in simple terms.

As for "the simple <td>? Remove you redundant code first and clean that part up." well, I thought that the <td> & </td> created the start and finish of the table. Do I remove these as well?

The <td> and </td> are not redundant code, they are serving a purpose, it's the attributes applied to them, rowspan, colspan etc. which are redundant.

The other point made was to increase the width size but I just cant see how to do this. I looked on another posting and it said to find it under 'site' and 'options' but just dont see where ?

SETTINGS | SITE OPTIONS - have a good look round if you do not know about this area. This is where a large part of your store should be managed from. Take ten minutes to explore each tab and each option within each tab, you will find some great things you didn't know about i expect.

Sorry to be a pain - the only consolation is that someone else as dumb as me might find the answer to solving their problem too.

You are not being a pain at all, you are trying to change the brake pads on your car, but you haven't been to Halfords and bought yourself a manual on how to do it yet. Winging it i think it's called.

[gtekser]

Hi

I take your points and thank you for being kind & patient.

I have looked around the ‘tabs’ and just cannot find SETTINGS | SITE OPTIONS.

I have ‘Business Settings’ & ‘Network Settings’ but don’t see Site Options leading from these. I have do have ‘Design Options’ though and under ‘Page Layout’ / ‘Extended Information’ there are width and height but think this is not the right place.

I did a search on Actinic Help for SETTINGS | SITE OPTIONS but that too doesn’t direct me to where I need to look ….Grrrrr! This is frustrating. Is it in a different place on V7 ?

I will address the other issues you explained, tonight when I can break from normal days work.

Thanks


PS: if it were like fitting brake pads - I could do that with eyes almost closed ! - I know what you mean.

Pete

[leehack]

I have looked around the ‘tabs’ and just cannot find SETTINGS | SITE OPTIONS.

Hi Pete, you should see it in the drop down menus at the top of the window, it's not on a tab. From memory it was pretty similar in V7, maybe called something a little different, but along the same lines. It's basically where you go to make global changes to settings, you should see business settings too where you define T&C's etc.

[gtekser]

Hi

Well, if aint there - it aint there!
I have searched for this 'settings and 'options' and just can find it!

I have taken snaps - see PDF attached - of the drop down menus at the top of the window and you can see what I see in the list along with 'business settings'.
Is it because of the the Curves' theme I am using that it doesnt show?

see enclosed


Thanks

Pete