Word wrap pictures left or right?

[gabrielcrowe]

'comic sans' makes baby Jesus cry.

[jont]

Peter ... code attached:

Act_ProductImage.html

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

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

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

Act_ProductLine.html

<!-- ProductLine HTML begin -->
<!-- Insert HTML for the top of the individual product -->
NETQUOTEVAR:INCLUDE Act_ProductSeparator.html
NETQUOTEVAR:ENDSEPARATOR
NETQUOTEVAR:PRODUCTFORMBEGIN
  <tr>
    <td> NETQUOTEVAR:TEMPLATEBEGINXML NETQUOTEVAR:PRODUCTIMAGE 
     
      <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>
    
  

    
			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 -->

Please take copies of the originals before venturing with the above!

The productline template lumps everything into the same single cell ... the image is set to float:left for the image is on the left and everything flows around the right hand side of the image and then beneath.

HTH

[jont]

The main site width comes from Design | Design Options | Site Defaults | Properties .... ACTSTDWIDTH (I had to scout around for it..... amazing how you forget when now so used to working in v8)

[gtekser]

Hi Jont

Thank you for your time and effort. I copied the two lots of code and pasted (after I saved originals). The strange thing is that it was almost correct to how I wanted it when including my cock-ups, as you will see from the .jpg enclosed - not the best pic but you can see how close it was to being right.

After doing the code changes & up-loaded the files you can see the effect but its now a step backwards. http://guitartechnicalservices.co.uk..._for_Sale.html

It doesn’t seem to matter whether I put the image on the left or right of text.
I am wondering if there is a situation where I can only have it one way or another, hopefully the choice e.g. ProductLineRight won’t be affected?

Again many thanks for finding where the width is adjusted. I have tried this but although it affects the whole site but it doesn’t seem to widen the products only column. So I don’t know if there is somewhere else that effects this area only.

I will have to look at it again tomorrow night.

Pete

[gtekser]

Just an added note:
ref: http://guitartechnicalservices.co.uk..._for_Sale.html

All the products in this section except the bottom one are using the 'One product per row, image on right' formula.

The one I was experimenting with (ref .jpg) is the last one i.e. which is 'One product per row, image on left' ..... but it seems to sit underneath the picture.

Thanks

Pete

[gtekser]

Footnote:

Just looked at what I wrote and it seems contradictory so......... I also need to explain that only the bottom listed product uses the ‘Act_ProductLine’ code and the others are using the ‘Act_ProductLineRight’ code.

Pete

[jont]

The code I sent is based on the assumption (you know what they make) all the layouts on the page will be the same layout. On the page you link to the line pod 6 is sitting in a table cell a little wider than the image hence the text is not floating around. If you are going to mix and match the layout you need to add a colspan="" to ensure the table cells span the existing code.

If you want to have alternating left and right I would remove the "float:left" from the Act_ProductImage.html and wrap the NQV: PRODUCTIMAGE in the Act_ProductLine.html between a <div class=""> .... </div> .. duplicate this layout so one is for left and one is for right... you can then add in a class to each eg imageLeft and imageRight and declare the floats accordingly in the actinic.css. In actinic you need to declare the product left or right layout.

You could also do this with a CUSTOMVAR using "left" or "right" set against the product and inserting the CUSTOMVAR into the layout ... this would keep maintenance down to the one template.

Or ... you knew there was an or coming ..... you can build up an Act_productLine.html template with a left and right versions of itself into the single template. Products are then applied either a left or right position depending on where they are in the list (odd number go left and even numbers go right for example) ... start with a left layout and end with a right version and it will give the right effect for as many products you add to the page.

[gtekser]

Hi Jont

Thank you for the extra information. It really is another language and I barely speak any pigeon html …..so custom templates are something for the future when I don’t have too much on and have a few more words of html in my voculary.

For now your later suggestion …i.e the customising left and right seems to be the way to go …… so later tonight I will look at amending the words left of picture and wrapped around it, extending underneath.

I am sure that others will benefit from my bumping around in the dark because some threads I have seen and then looked at the related website have not used it ….me thinks they gave up as too difficult.

Thanks again

Pete

[gtekser]

Hi Jont

Ref. The page with the line pod 6: http://guitartechnicalservices.co.uk..._for_Sale.html
I had the pic at one point earlier in the week sat to the right with words to the left and wrapped around it. But cant get back to that and that was with table cell a little wider than the image.

I changed the Act_ProductLine.html adding a colspan="" as you said “to ensure the table cells span the existing code.” I also remove the "float:left" from the Act_ProductImage.html

Then I went on to the Act_ProductLine.html and “wrapped the NQV: PRODUCTIMAGE in the Act_ProductLine.html between a <div class=""> .... </div> and tried both the Image to the left & right alternatives of text but cannot get it to work.
I know you said to do one layout for Product Image left and right but decide to get just one correct first.

I passed on your suggestion for the time being …….. ref “You could also do this with a CUSTOMVAR using "left" or "right" set against the product and inserting the CUSTOMVAR into the layout ... this would keep maintenance down to the one template.”

Altering the two templates Act_ProductImage & Act_ProductLine this time has led me to loose the picture altogether! I uploaded it so you could see the result. http://guitartechnicalservices.co.uk..._for_Sale.html

I must say that “never give up” is my motto but this isn’t simple. Using the metaphor from before ….. I think I am on the wrong page of the Haynes car manual. I bet you wished you had not tried to help me out - cant blame you.

I have copied the codes here so I now wait for Teacher to give me “D” ….. Damn it!

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

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

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

<!-- ProductLine HTML begin -->
<!-- Insert HTML for the top of the individual product -->
NETQUOTEVAR:INCLUDE Act_ProductSeparator.html
NETQUOTEVAR:ENDSEPARATOR
NETQUOTEVAR:PRODUCTFORMBEGIN
  <tr>
    <td> NETQUOTEVAR:TEMPLATEBEGINXML NETQUOTEVAR:<div class="ImageLeft">PRODUCTIMAGE</div> <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>
    
  

    
            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 --> 

Sorry for trying your patience

Pete

[leehack]

The float needs to stay on the image as that enables the text to flow around it. And if you was removing it, you would also remove the style= part from the code.

[gtekser]

Still chipping away ...........Ref Act_ProductImage.html

I got rid of the "style= " and then tried it and still lost the picture therefore no wrap.
Then I re-installed the code with the "style="float:left"" and I have still lost the image!

2 steps back and no steps forwards - is there something else wrong ?

Pete

[leehack]

I think it's time to provide a URL where the problems can be seen live as it will be much quicker to provide help.

[jont]

The float needs to stay on the image as that enables the text to flow around it. And if you was removing it, you would also remove the style= part from the code.

The float was added to a <div> wrapping the image template to allow for left and right floats in alternate products down the list.

[jont]

You currently have 2 table cells in the list so you need to set colspan="2" so it spans the 2 columns to form a single cell

[jont]

I got rid of the "style= " and then tried it and still lost the picture therefore no wrap.
Then I re-installed the code with the "style="float:left"" and I have still lost the image!

class="ImageLeft">PRODUCTIMAGE</div>

Did you add

.ImageLeft {
float:left;
}

into actinic.css? Don't forget ImageLeft is also case sensitive.

It should also be NETQUOTEVAR:PRODUCTIMAGE and not just PRODUCTIMAGE