Forum

Thread tagged as: Question, Problem

Links around images in repeater not outputting properly

Hi, there. I have a repeater to create a slideshow (using Bootstrap Carousel) on my site. Everything is working correctly, except that the links on each image are only outputting the link connected to the final slide in the repeater. Now, the really strange thing is that if you look at the source code on the page, it correctly shows the link that should be associated with each slide.

I have tried moving div carousel1 all around. If it is inside the repeater, but not within the perch:before tags, the links work properly, but all the slides display at once instead of showing one at a time as it should. The slideshow is live on the home page at www.woodlawnartsacademy.com, just to prove I'm not losing my mind.

Any help would be greatly appreciated!

Template grid.html:

       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                      <div class="adbutler" divider-before="Images for Slideshow">    


                      <perch:repeater id="Slideshow" label="Images for Slideshow" max="5">
            <perch:before>    <div id="carousel1" class="carousel-inner carousel fade" role="listbox" data-ride="carousel"> </perch:before>
<div id="item<perch:content id="perch_item_zero_index" type="hidden" />" class="item<perch:if exists="perch_item_first"> active</perch:if>">


    <a href="<perch:content id="url" type="text" label="link" />"> <img src="<perch:content id="slide" type="image" label="Slide photo" width="1900px" height="378px" crop="false" />"  alt="<perch:content id="slidephotoalt" type="text" label="Image Alt Description (for SEO)" />" /> </a>


<a class="left carousel-control" href="#carousel1" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel1" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
                </div> <perch:after></div></perch:after>


                        </perch:repeater>   

             </div></div>

Diagnostic Report:

Perch: 2.8.32, PHP: 5.6.29, MySQL: mysqlnd 5.0.11-dev - 20120503 - $Id: 76b08b24596e12d4553bd41fc93cccd5bac2fe7a $, with PDO
Server OS: Linux, cgi-fcgi
Installed apps: content (2.8.32), assets (2.8.32), categories (2.8.32), perch_events (1.9.3)
App runtimes: <?php $apps_list = array( 'content', 'categories', 'perch_events', );
PERCH_LOGINPATH: /perch
PERCH_PATH: /home/jansta22/woodlawnartsacademy.com/perch
PERCH_CORE: /home/jansta22/woodlawnartsacademy.com/perch/core
PERCH_RESFILEPATH: /home/jansta22/woodlawnartsacademy.com/perch/resources
Image manipulation: GD Imagick
PHP limits: Max upload 64M, Max POST 65M, Memory: 90M, Total max file upload: 64M
F1: 2edba60ed1f613d6dd804feb202456a2
Resource folder writeable: Yes
SCRIPT_NAME: /perch/core/settings/diagnostics/index.php
REQUEST_URI: /perch/core/settings/diagnostics/
DOCUMENT_ROOT: /home/jansta22/woodlawnartsacademy.com
HTTP_HOST: woodlawnartsacademy.com
Janel Stahr

Janel Stahr 0 points

  • 4 years ago
Rachel Andrew

Rachel Andrew 394 points
Perch Support

4 years ago

If your source is correct what leads you to believe this is a Perch issue? It sounds as if there is an issue perhaps with the JavaScript you are using.
Simon Clay

Simon Clay 127 points

4 years ago

Hi Janel,

The issue seems to be with the fade class in the surrounding div. If you remove fade the issue is resolved, so there must be some js or css issue connected to your fade class.
Janel Stahr

Janel Stahr 0 points

4 years ago

Oh, my gosh. Thank you so much! Rachel, I was seeing changes when I moved the div in and out of the perch regions, so that's why I assumed it had something to do with that. Thank you, Simon!
Simon Clay

Simon Clay 127 points

4 years ago

Great! You can also move the '< previous' and 'next >' links to <perch:after> as they don't need to be repeated.

From a bootstrap point of view, there's only need to declare the col width once, you don't need to do it for every breakpoint.

<div class="col-md-12">
    <div class="adbutler">
        <perch:repeater id="Slideshow" label="Images for Slideshow" max="5">

            <perch:before>
                <div id="carousel1" class="carousel-inner carousel fade" role="listbox" data-ride="carousel">
            </perch:before>

            <div id="item<perch:content id="perch_item_zero_index" type="hidden" />" class="item<perch:if exists="perch_item_first"> active</perch:if>">
                <a href="<perch:content id="url" type="text" label="link" />">
                    <img src="<perch:content id="slide" type="image" label="Slide photo" width="1900px" height="378px" />" alt="<perch:content id="slidephotoalt" type="text" label="Image Alt Description (for SEO)" />" />
                </a>
            </div>

        <perch:after>
        </div>
        <a class="left carousel-control" href="#carousel1" role="button" data-slide="prev">
            <span class="icon-prev" aria-hidden="true"></span> <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel1" role="button" data-slide="next">
            <span class="icon-next" aria-hidden="true"></span> <span class="sr-only">Next</span>
        </a>
        </perch:after>

    </perch:repeater>
    </div>
</div>