Display several photos in several rows AND columns with a repeat - xpages

Question

I would like display photos in a window on several rows and 3 columns.
image1 image2 image3
image4 image5 image6
image7 image8 image9
image10 image11 image12
Actually I find to put photo1, 2 and 3 and the others are behind photo3 but not visible...
image1 image2 image3 [image4 image5 image6 image7 ....]
This is my code :
<xp:table>
<xp:tr>
<xp:repeat id="picturesRpt" value="#{dsvListePhoto}"
indexVar="i" var="picture" rows="3" >
<xp:panel>
<xp:this.data>
<xp:dominoDocument var="pictureDoc"
action="openDocument"
documentId="#{javascript:picture.getUniversalID()}"
ignoreRequestParams="true">
</xp:dominoDocument>
</xp:this.data>
<xp:div>
<xp:td>
<xp:div styleClass="listePhotos">
<xp:div>
<xp:image id="image1">
<xp:this.url><![CDATA[#{javascript: "http://monserveur/devpt/Xpages/xphoto/PhotoWeb.nsf/" + compositeData.vueUtilisee + "/" + pictureDoc.getDocument().getUniversalID() + "/$File/TIMBRE_image.jpg?OpenElement"}]]></xp:this.url>
</xp:image>
<xp:text
value="#{pictureDoc.Titre}" />
<xp:br></xp:br>
</xp:div>
<xp:div>
<xp:text
value="#{pictureDoc.IdNiveau1} / #{pictureDoc.IdNiveau2}" />
</xp:div>
</xp:div>
</xp:panel>
</xp:repeat>
</xp:tr>
</xp:table>
An idea ?
Thanks for your help !

Answer 1

As you decided to create a table with three columns finish and start a table row every three pictures. Add </tr><tr> to rendered HTML whenever a new table row shall start. That is the case when indexVar i is 3, 6, 9, and so on.
Add the </tr><tr> tags with a computed field of content type HTML and use the rendered condition
(i > 0) && (i%3 == 0)
Your code would look like this:
<xp:table>
<xp:tr>
<xp:repeat
id="picturesRpt"
value="#{dsvListePhoto}"
indexVar="i"
var="picture"
rows="1000">
<xp:text escape="false">
<xp:this.rendered><![CDATA[#{javascript:
(i > 0) && (i%3 == 0) }]]></xp:this.rendered>
<xp:this.value><![CDATA[#{javascript:
"</tr><tr>" }]]></xp:this.value>
</xp:text>
<xp:td>
... picture ...
</xp:td>
</xp:repeat>
</xp:tr>
</xp:table>

Answer 2

Use #Modulo or some other maths tool to work out the remainder of a division by 3. That will allow you to compute whether to add Computed Text that adds a "" or a "" tag.
I did a similar demo with two columns in the Repeats on Steroids page of my IBM Connect 2013 session with Mike McGarel. The link for the slides and demo database is on my blog, at the bottom of the article, below the youtube video http://www.intec.co.uk/session-slides-and-sample-database-from-ibm-connect/
It was also delivered as a TLCC webinar, though I can't find the link. From Niklas Heidloff's blog it looks like a video was taken http://heidloff.net/home.nsf/dx/16.04.2013093214NHEAUQ.htm