Forum

Thread tagged as: Question, Problem

Checking condition of uploaded images to output images later in template.

I feel like this is getting a bit complicated now.

I am using a plugin for Swiper that creates a series of static thumbnails as buttons, below a Swiper image slider.

There's a bunch of upstream code in my template, followed by a repeater to generate the slides, followed by some downstream code, followed by the thumbnails... like this...

Template include (SliderItems.html):

<div class="swiper-slide" style="background-image:url(<perch:content id="ImageSlide1" type="image" label="Image 1" height="450" />); background-repeat:no-repeat;">
<perch:content id="text" type="text" label="Image Label" required="true" title="true" />
</div>

Portion of main template:

<div class="swiper-wrapper">
            <!-- Slides -->
            <perch:repeater id="images" label="Images">
                <perch:template path="content/SliderItems.html" />
            </perch:repeater>
        </div>

Output generated:

<!-- some upstream markup before here-->
<div class="swiper-container>

<div class="swiper-wrapper">
 <div class="swiper-slide" style="background-image:url(/perch/resources/1-h450.jpg); background-repeat:no-repeat;">label1</div>
 <div class="swiper-slide" style="background-image:url(/perch/resources/2-h450.jpg); background-repeat:no-repeat;">label2</div>
 <div class="swiper-slide" style="background-image:url(/perch/resources/3-h450.jpg); background-repeat:no-repeat;">label3</div>
</div>

<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>

</div>

<div class="swiper-thumbnails" style="text-align:center;">
 <button type="button">Any HTML Content</button>
 <button type="button">Any HTML Content</button>
 <button type="button">Any HTML Content</button>
</div>

Currently, the three buttons do as intended, function wise, in that they scroll the slider appropriately. However, they are hardcoded into the template. I need to be able to generate 1 button tag for each image uploaded via the repeater surrounding perch:content, and to output each image path to the to the buttons in the order in which they were uploaded/appear in the slider.

I know that If statements exist in Perch, but I don't know how Perch keeps track of each consecutive image uploaded from the repeater (and if knowing how they're handled results in a dead end, I'm not sure where to go from there.
Krissie Pearse

Krissie Pearse 0 points

  • 4 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

You can redisplay the same content using a different template (e.g. one that just outputs the buttons) using perch_content_custom(). That's what I'd do here.
Krissie Pearse

Krissie Pearse 0 points

4 years ago

Fantastic! Took a little bit of working out, but it works perfectly. I can settle for it, though it does cause a presentational issue in the admin panel. Unfortunately, because it requires php, it means that I have to split my content regions.

To simplify the situation a little, my page structure is somewhat like this:

<div="mainPageContent">

<div class="sliderContainer">

<div class="sliderWrapper">
<?php perch_content('SliderImages'); ?>
</div>

<?php perch_content_custom('Thumbs', [
'template' => '_SliderItemsThumbs.html'
]); ?>
</div>

<?php perch_content('basicContent'); ?>
<div>

Whereas previously I was able to use a single template to include the slider images followed by the basic content, I now have to split it up to use the perch_content_custom function between them, meaning that they now appear as two regions on the admin page instead of one.

Is there any way of including this all back into the same region, or do I just need to go with it as it is? It's not the worst thing in the world - it's just a little inconsistent across pages.
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

Instead of having two regions - SliderImages and Thumbs, just use one with a different template.