repeater field within repeater field

[niklaus]

Hi everybody

I'm having big problems writing the php code to implement a fancy box gallery with a repeater field within a repeater field.

The html code looks like this:

<h2 id="klosterlink">Kloster Einsiedeln</h2><br/>
   <ul class="gallery">     
         <li class="gallery-list">
                 <a class="fancybox" data-fancybox-group="thumb" href="Bilder.png.Einsiedeln/Cecilia/Cecilia.Einsiedeln.4.A6.png">
             <div class="hovereffect"> 
                    <img src="Bilder.png.Einsiedeln/Cecilia.Einsiedeln.282x200.png" alt="Hl.Cedilia" />
                <div class="overlay"><h3>Heilige Cecilia</h3></div>        
            </div></a>
         </li>
         <li class="gallery-list">
                 <a class="fancybox" data-fancybox-group="thumb" href="Bilder.png.Einsiedeln/Engel/Engel.3.600x846.png">
             <div class="hovereffect"> 
                    <img src="Bilder.png.Einsiedeln/Engel/Engel.Einsiedeln.282x200.png" alt="Engel" />
                <div class="overlay"><h3>Engel</h3></div>
            </div></a>
         </li>
         <li class="gallery-list">
                 <a class="fancybox" data-fancybox-group="thumb" href="Bilder.png.Einsiedeln/Bauer/Bauer.600x846.A6.png">    
             <div class="hovereffect"> 
                    <img src="Bilder.png.Einsiedeln/Bauer/Bauer.Einsiedeln.282x200.png" alt="Bauer" />
                <div class="overlay"><h3>Bauer</h3></div>
             </div></a>
         </li> 
         <li class="gallery-list">
                 <a class="fancybox" data-fancybox-group="thumb" href="Bilder.png.Einsiedeln/Baeurin/Baeurin.600x846.A6.png"> 
             <div class="hovereffect">
                    <img src="Bilder.png.Einsiedeln/Baeurin/Baeurin.Einsiedeln.282x200.png" alt="Baeurin" />
                <div class="overlay"><h3>Bäurin</h3></div>
             </div></a>
         </li>
         <li class="gallery-list">
                 <a class="fancybox" data-fancybox-group="thumb" href="Bilder.png.Einsiedeln/Betender/Betender.600x846.A6.png">
             <div class="hovereffect">
                    <img src="Bilder.png.Einsiedeln/Betender/Betender.Einsiedeln.282x200.png" alt="Edelmann im Gebet" />
                <div class="overlay"><h3>Betender Edelmann</h3></div>
             </div></a>
         </li>      
         <li class="gallery-list">
         <a class="fancybox" data-fancybox-group="thumb" href="Bilder.png.Einsiedeln/Borromaeus/Barromeus.600x846.png">
             <div class="hovereffect">
                    <img src="Bilder.png.Einsiedeln/Borromaeus/Barromeus4.Einsiedeln.282x200.png" alt="Kirchendiener" />
                <div class="overlay"><h3>Carl Borromäus</h3></div>
             </div></a>
         </li>
         <li class="gallery-list">
             <div class="hovereffect">
                    <img src="Bilder.png.Einsiedeln/Heilung.Einsiedeln.282x200.png" alt="" />
                <div class="overlay"><h3>Titel</h3></div>
             </div>
         </li>
    </ul>
    
<br class="clr"><br />

 

I want to be able to upload multiple galleries wich contain multiple pictures each with a "overlay title".

I've created this fields so far:

 

I hope anybody can help me, my php skills are very weak...

[adrian]

What version of PW? You need 3.0.5+ for nested repeaters to work properly.

https://processwire.com/blog/posts/more-repeaters-repeater-matrix-and-new-field-rendering/ (read the "New support for nested repeaters" section).

You might also want to consider the repeater matrix option which is only mentioned in that post.

[szabesz]

If I were you, I would take a different approach. Instead of nesting repeaters (wich have know performance issues, though this has been inpoved recently in 3.0.4 and 3.0.5).

It is normally recommended to create a (e.g.) Galleries as parent ProcessWire Page, and under it you can create as many Gallery pages as you want. A short tutorial on this:

This approach is quite common, you can read about it here, for example (same approach as blog/blog-item or tags/tag-item in this example): 

 

Tips on how to set thing up in the admin: 

 

 

[Robin S]

I don't think you need nested repeaters, just a single repeater that has a title field (title of the gallery) and an images field. The images field can contain multiple images. Use the description field for each image for the overlay text.