Hi,
I've made a mess with my isotope gallery and I need help.
I don't know how to display repeatable in frontend, backend works fine or at least I think so.
Website is "One page", so it has sections and it's not set to cloned
Here is my isotope section:

Code: Select all

<!-- THIS IS MY GROUP NAME -->
<cms:editable name='portfolio_group' label='Portfolio' type='group' desc='Gallery' />

 <section id="work" class="portfolio full-screen">
      <div class="container-fluid">
            <h1 class="portfolio-section-title text-center">Portfolio</h1>
            <nav class="portfolio-filtering">

                <ul>
                    <li><a href="#" class="active " data-filter="1 2 3 4 5 6">Svi</a></li>
                    <li><a href="#" data-filter="1">Tilte 1</a></li>
                    <li><a href="#" data-filter="2">Tilte 2</a></li>
                    <li><a href="#" data-filter="3">Tilte 3</a></li>
                    <li><a href="#" data-filter="4">Tilte 4</a></li>
                    <li><a href="#" data-filter="5">Tilte 5</a></li>
                    <li><a href="#" data-filter="6">Tilte 6</a></li>
                </ul>
            </nav>

            <!-- THIS IS MY REPEATABLE BELONGING TO ABOVE GROUP -->
            <cms:repeatable name='portfolio_repeatable' group='portfolio_group' >
            <div class="portfolio-container" data-animation="fadeIn">
                
                <!-- THIS IS MY DROPDOWN USED FOR ASSIGNING CLASS FOR ISOTOPE FILTER -->
                <a href="#" class="snip1190 portfolio-item <cms:editable name="port_cat_1" group='portfolio_group' label="Portfolio Category" desc="Select" opt_values='1 | 2 | 3 | 4 | 5 | 6' order='-1' type='dropdown' />" data-toggle="modal" data-target="#myModal">
                 <!-- THIS IS MY ISOTOPE THUMB - CREATED FROM BELOW PLACED MAIN IMAGE -->
                 <img src="<cms:editable name='port_01_thumb' label='Image Thumbnail' group='portfolio_group' desc='Thumbnail of main image' width='400' show_preview='0' assoc_field='port_01' type='thumbnail' />" alt="" class="img-responsive" />
                  <figcaption>
                    <div class="square">
                     <div></div>
                    </div>
                    <h2>Spektar</h2>
                    <p>Print</p>
                  </figcaption>                     
                </a>                                           
            </div>

            
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <button type="button" class="close portfolio-modal-close" data-dismiss="modal" aria-label="myModalLabel" aria-hidden="true"><i class="fa fa-times"></i></button>
                <div class="hz-divider medium"></div>
                <div class="container ">

                    <!-- THIS IS MY MAIN IMAGE SHOWN IN MODAL -->
                    <img class="img-responsive portfolio-description-imge" src="<cms:editable name='port_01' label='Fotografija' group='portfolio_group' desc='Upload Slike' show_preview='1'  preview_width='150' type='image' />" alt="" />
                    <div class="hz-divider"></div>                     
                               
                </div>
            </div>  
            </cms:repeatable>  
            <!-- THIS IS MY CLOSING REPEATABLE TAG AND I DONT KNOW WHY IT'S LOCATED HERE -->  
      </div>

    </section>

I got no errors, but my images are not shown, isotope filters are shown and I have both dropdown and image upload fields in backend.
It all worked when used without repeatable (<cms:editable> only), but in that case I have to input all manually and can't add more items in gallery from backend, but manually in html.

I'm kinda stuck and still don't get how repeatable works and how new items are added to gallery.
If someone has a working sample that would be fantastic for me.

Thanks for any help you can provide

Please anyone, I've tried everything here and don't know what else to do.

[KK]

Hi,

As explained in the docs (http://docs.couchcms.com/concepts/repea ... gions.html), the <cms:repeatable> block is used only for *defining* child editable regions. It is another tag named <cms:show_repeatable> that is used to actually output the contents of those regions on the front-end.

A very simple example of a gallery created using repeatable is this -
viewtopic.php?f=2&t=7463#p11040

Two points to note:
1. It is a recommended practice to define editable regions within <cms:template> block (http://docs.couchcms.com/tags-reference/template.html) placed at the very beginning of the template (this block will, in any case, mandatorily be there in case of clonable templates).

2. Type 'thumbnail' region is not supported as repeatable. You may either use the main images as the thumbnail or use the following tag to create thumbnails within repeatable - http://docs.couchcms.com/tags-reference/thumbnail.html

Ok, coming to your code, we can modify it to make it as follows -
1. Define the regions

Code: Select all

<cms:template>
    <cms:editable name='portfolio_group' label='Portfolio' type='group' desc='Gallery' />
    
    <cms:repeatable name='portfolio_repeatable' group='portfolio_group' >
        <cms:editable name="port_cat_1" label="Portfolio Category" desc="Select" opt_values='1 | 2 | 3 | 4 | 5 | 6' order='-1' type='dropdown' />
        
        <cms:editable name='port_01' label='Fotografija' desc='Upload Slike' show_preview='1'  preview_width='150' type='image' />
    </cms:repeatable>  
</cms:template>

2. Show the regions -

Code: Select all

<section id="work" class="portfolio full-screen">
      <div class="container-fluid">
            <h1 class="portfolio-section-title text-center">Portfolio</h1>
            <nav class="portfolio-filtering">

                <ul>
                    <li><a href="#" class="active " data-filter="1 2 3 4 5 6">Svi</a></li>
                    <li><a href="#" data-filter="1">Tilte 1</a></li>
                    <li><a href="#" data-filter="2">Tilte 2</a></li>
                    <li><a href="#" data-filter="3">Tilte 3</a></li>
                    <li><a href="#" data-filter="4">Tilte 4</a></li>
                    <li><a href="#" data-filter="5">Tilte 5</a></li>
                    <li><a href="#" data-filter="6">Tilte 6</a></li>
                </ul>
            </nav>

            <cms:show_repeatable 'portfolio_repeatable' >
                <div class="portfolio-container" data-animation="fadeIn">
                    
                    <!-- THIS IS MY DROPDOWN USED FOR ASSIGNING CLASS FOR ISOTOPE FILTER -->
                    <a href="#" class="snip1190 portfolio-item <cms:show port_cat_1 />" data-toggle="modal" data-target="#myModal">
                     <!-- THIS IS MY ISOTOPE THUMB  -->
                     <img src="<cms:show port_01 />" alt="" class="img-responsive" />
                      <figcaption>
                        <div class="square">
                         <div></div>
                        </div>
                        <h2>Spektar</h2>
                        <p>Print</p>
                      </figcaption>                     
                    </a>                                           
                </div>

                
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <button type="button" class="close portfolio-modal-close" data-dismiss="modal" aria-label="myModalLabel" aria-hidden="true"><i class="fa fa-times"></i></button>
                    <div class="hz-divider medium"></div>
                    <div class="container ">

                        <!-- THIS IS MY MAIN IMAGE SHOWN IN MODAL -->
                        <img class="img-responsive portfolio-description-imge" src="<cms:show port_01 />" alt="" />
                        <div class="hz-divider"></div>                     
                                   
                    </div>
                </div>  
            </cms:show_repeatable>  
      </div>

</section>

Haven't actually tested it out but you should get the gist of how to proceed.

Hope it helps.