Forum

Thread tagged as: Question, Problem

perch: repeater

I have a news block where I want to give the option to put images and videos (youtube and vimeo) as many as desired. My first problem is that Perch only shows 2 of the 3, the last item (vimeo) is nowhere. The second problem, drag&drop is not possible for the repeaters. Here's my code:

<perch:block type="news" label="newsentry">
        <div class="row voffset">
        <div class="col-sm-5 col-sm-offset-1">


            <perch:repeater id="images" label="Image">
              <div class="image">
                <img src="<perch:content type="image" id="image" label="image" />" alt="" />
              </div>
            </perch:repeater>

            <perch:repeater type="youtube" label="youtube">
                      <div class="video-lightbox">
                        <a href="https://www.youtube.com/watch?v=<perch:content id="youtube-link" type="url" label="URL" required="true" help="Nur ID eintragen (ohne https://youtu.be/)" />"><h5 class="movie" style="background-image: url(../../../graphics/movie-button.svg), url(<perch:content id="bgimage" type="image" label="Preview"  />);"></h5></a>
                      </div>
            </perch:repeater>

            <perch:repeater type="vimeo" label="vimeo">
                     <div class="video-lightbox">
                        <a href="https://vimeo.com/<perch:content id="vimeo-link" type="url" label="URL" required="true" help="Nur ID eintragen (ohne https://vimeo.com/)" />"><h5 class="movie" style="background-image: url(../../../graphics/movie-button.svg), url(<perch:content id="bgimage" type="image" label="Preview"  />);"></h5></a>
                      </div>
            </perch:repeater>


        </div>
        <div class="col-sm-5">
          <p class="quote"><perch:content id="date" type="text" label="Date" required="true"/></p>
          <h2 class="quote"><perch:content id="heading" type="text" label="Title"/></h2>
          <perch:content id="text" type="textarea" label="Text" textile="true" editor="markitup" html="true" size="m"/>
        </div>
      </div><!-- /.row -->
     </perch:block>

Many thanks!

Martin Stettler 0 points

6 years ago

Shane Lenzen 18 points

6 years ago

Repeaters 2 & 3 should have 'id' not 'type'

Martin Stettler 0 points

6 years ago

Ok, thanks for your quick reply! Can you help me the the second problem? How can I achieve that drap&drop is possible for the repeaters, not only within each other? Your help is much appreciated!

Shane Lenzen 18 points

6 years ago

You can't mix together separate repeaters unfortunately. If it were me, I would just make one repeater with the 3 fields inside it, and give the editor the option to use whichever one they want. Something like this:

<perch:repeater id="media" label="Media">

    <perch:if exists="image">
  <div class="image">
    <img src="<perch:content type="image" id="image" label="image" />" alt="" />
  </div>
  </perch:if>

    <perch:if exists="youtube-link">
  <div class="video-lightbox">
    <a href="https://www.youtube.com/watch?v=<perch:content id="youtube-link" type="url" label="URL" required="true" help="Nur ID eintragen (ohne https://youtu.be/)" />"><h5 class="movie" style="background-image: url(../../../graphics/movie-button.svg), url(<perch:content id="bgimage" type="image" label="Preview"  />);"></h5></a>
  </div>
  </perch:if>

    <perch:if exists="vimeo-link">
  <div class="video-lightbox">
     <a href="https://vimeo.com/<perch:content id="vimeo-link" type="url" label="URL" required="true" help="Nur ID eintragen (ohne https://vimeo.com/)" />"><h5 class="movie" style="background-image: url(../../../graphics/movie-button.svg), url(<perch:content id="bgimage" type="image" label="Preview"  />);"></h5></a>
   </div>
  </perch:if>

</perch:repeater>

You could also throw some perch:else in there if you don't want the editor to accidentally output more than one in each repeat.

Martin Stettler 0 points

6 years ago

Great, thanks a lot!