Records per row

[wiredbydufy]

I'm trying to create a table of data but I need records to populate both rows and records. For example the results should bring back fields to a cell, then the next record populates the next column this continues to the first 3 records. Records 4 through 6 on the next row and so on.

The results on this page will only have a photo and a record name, where the record name falls under the photo. The next record should appear to the right of the previous, then after 3 records, record 4 record should wrap to the next line.

R1 R2 R3

R4 R5 R6

R7 R8 R9

and so on

I tried this many ways. Using photos alone I can achieve this as aligning the photo left will set the each photo in a row then wrap to the next line. It becomes challenging when adding the name field that aligns under the photo.

I also tried creating a table of with a row for the photo and a row for the record name, and aligning the table left. This puts each record in a new table to the right of the other but unlike the aligning just the photo the tables do not wrap but continue out to the right.

R1 R2 R3 R4 R5 R6 R7 R8 and so on

So my thought is possibly there is a creative way with CDML to set 3 record results per row

Any suggestions?

[Garry Claridge]

A couple of different methods exist for doing this. Try a search on "rows". I will have more time later today to help search for the solutions.

All the best.

Garry

[wiredbydufy]

Thanks, I appreciate the assistance. I'm still looking throught the site, but no luck yet.

For reference here's the page

For the moment I'm just using the photos, but need to add the names under each image.

[Garry Claridge]

Here is some Javascript which will distribute records across cells and then down rows:

<table><tr>

<script>i = 1 ; nCols = 3 ;

[FMP-Record]

if ((i % nCols) == 0)

{ document.write("<td>[FMP-Field:myimage]<br>[FMP-Field:imagename]</td></tr><tr>") ; }

else

{ document.write("<td>[FMP-Field:myimage]<br>[FMP-Field:imagename]</td>") ; } ;

i++ ;[/FMP-Record]

</script></tr></table>

---

Hopefully the "<br>" will place the Name under the image.

The site looks very good.

All the best.

Garry

[wiredbydufy]

THANKS!

Seems to work with text but not with an image. Possible my syntax is wrong in the script. My photos are referenced so I only store a path in the database and use that in an IMG tag rather than using [FMP-Image]..... I just found that easier.

Anyway this is your code with my fields inplace

<table><tr>

<script>i = 1 ; nCols = 3 ;[FMP-Record]if ((i % nCols) == 0) { document.write("<td>

<img src="[FMP-field:Photopath]" width="120" border="0" height="120">

<br>

[FMP-Field:handbag name]

</td></tr><tr>") ; }else { document.write("<td>

<img src="[FMP-field:Photopath]" width="120" border="0" height="120">

<br>

[FMP-Field:handbag name]

</td>") ; } ;i++ ;[/FMP-Record]</script>

</tr></table>

You can see the result here. Oddly the source from this looks like it writes the tables correctly but they do not show up.

If I remove the IMG tag and instead put in an standard text field it works.

Appreciate the help.

[Garry Claridge]

You will need to change your quotes; e.g.:

document.write("<td> <img src='[FMP-field:Photopath]' width='120' border='0' height='120'>

Otherwise should be OK.

All the best.

Garry

[wiredbydufy]

Ah, I thought you for sure your had it there....but still nothing Here's the code again.

<table><tr>

<script>i = 1 ; nCols = 3 ;[FMP-Record]if ((i % nCols) == 0) { document.write("<td>

<img src='[FMP-field:Photopath]' width='120' border='0' height='120'>

<br>

[FMP-Field:handbag name]

</td></tr><tr>") ; }else { document.write("<td>

<img src='[FMP-field:Photopath]' width='120' border='0' height='120'>

<br>

[FMP-Field:handbag name]

</td>") ; } ;i++ ;[/FMP-Record]</script>

</tr></table>

You can see result from previous link

[Garry Claridge]

Check the line formatting, some line breaks may have been missed when copying and pasting the code:

<table><tr>

<script>i = 1 ; nCols = 3 ;

[FMP-Record]

if ((i % nCols) == 0) {

document.write("<td><img src='[FMP-field:Photopath]' width='120' border='0' height='120'><br>[FMP-Field:handbag name]</td></tr><tr>") ;

}

else

{

document.write("<td><img src='[FMP-field:Photopath]' width='120' border='0' height='120'><br>[FMP-Field:handbag name]</td>") ;

} ;

i++ ;[/FMP-Record]

</script>

</tr></table>

---

Hope this looks better.

Garry

[wiredbydufy]

WORKS! I figured out what was wrong.

Thanks for the help.... this is a technique I will use often.

Glad you like the look of the site.... any site worth doing is worth making look good.

.....ah just got your reply....you saw what I saw.

Thanks again......next trick is building a shopping cart to work with PayPal.... know any and good references to build this?

[dannyg]

I used PayPal's cart tutorial from thier site. Once you are all set up with PayPal you customize a cart button and then place it on your item page.They have specific tags for item, description, price, shipping etc that get passed through from your FMP db.