Forum

Thread tagged as: Question, Problem

Include Bootstrap Carousel template into Perch blocks

I would like to include the carousel template into perch blocks to be able to reuse it several times into the same page. I built the carousel template as described here: https://forum.grabaperch.com/forum/11-18-2015-bootstrap-carousel-template-for-perch Because it is split into 3 content templates, I tried it with a layout. Here's my code:

Perch block:

<perch:block type="carousel" label="Carousel">
    <perch:layout path="refs.carousel"> 
</perch:block>

Perch layout (named refs.carousel.php):

<?php 
                        perch_content_create('Carousel', array(
                        'template' => 'carousel-main.html',
                        'multiple' => true,
                        )); 
                        ?>
                        <?php
                        perch_content_custom('Carousel', array(
                        'template' => 'carousel-indicators.html',
                        ));
                        ?>
                        <?php
                        perch_content_custom('Carousel', array(
                        'template' => 'carousel-slides.html',
                        )); 
                    ?>

Probably I am on the wrong way... Thanks a lot for your help!
Martin Stettler

Martin Stettler 0 points

  • 3 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

3 years ago

What are you expecting will happen?
Martin Stettler

Martin Stettler 0 points

3 years ago

I thought the carousel template would appear as it does when I include the code above directly into the page.
Drew McLellan

Drew McLellan 2638 points
Perch Support

3 years ago

That layout is including the result of the perch_content_custom() calls in your template. That won't involve any Perch template tags.
Martin Stettler

Martin Stettler 0 points

3 years ago

Ok, I see. But is it even possible to include a region that consists of three templates into Perch blocks? If yes, can you please guide me how to build this? I would like to give this option to the content manager.
Drew McLellan

Drew McLellan 2638 points
Perch Support

3 years ago

You can include another template with the <perch:template> tag.
Martin Stettler

Martin Stettler 0 points

3 years ago

I already tried this, I called it «carousel.html»

<perch:block type="carousel" label="Carousel">
<perch:template path="content/carousel.html" />
</perch:block>

But what I put into this template? How can I link these multiple templates? What I need is to get it work like the region that uses the three templates, right? Sorry, probably I miss something important!
Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

3 years ago

Hello Martin,

You are using a multi-item region here:

perch_content_create('Carousel', array(
'template' => 'carousel-main.html',
'multiple' => true,
));

Since you want to use blocks, you need to rework your solution with repeaters inside a block:

<perch:block type="carousel" label="Carousel">
<perch:repeater id="images" label="Images" max="5">
    <perch:before><ul></perch:before>
    <li>
        <img src="<perch:content type="image" id="image" label="Image">"
          alt="<perch:content type="text" id="alt" label="Description">">
    </li>
    <perch:after></ul></perch:after>
</perch:repeater>
</perch:block>

You can add your indicators inside perch:before or perch:after.
Martin Stettler

Martin Stettler 0 points

3 years ago

Many thanks, Hussein! That was the missing information, the carousel itself has to be within one single block. It's now working fine – except the indicators... If I add them inside perch:before or perch:after I just get an output for the first item:

<!-- Indicators -->
<ol class="carousel-indicators">
    <li data-target="#carousel" data-slide-to="<perch:content id="perch_item_zero_index" type="hidden" />" <perch:if id="perch_item_index" match="eq" value="1">class="active"</perch:if>></li>
</ol>

So, how can I include the amount of repeated items?

Output:

<!-- Indicators -->
<ol class="carousel-indicators">
   <li data-target="#carousel" data-slide-to="1" class="active"></li>
</ol>

Thanks again for your appreciated help!
Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

3 years ago

I see!

Perhaps something like this:

<perch:block type="carousel" label="Carousel">
<perch:repeater id="images" label="Images" max="5">
<!--* your carousel images *-->
</perch:repeater>

<perch:repeater id="images">
<!--* your carousel indicators *-->
</perch:repeater>
</perch:block>

The second repeater tags should loop through the items again.
Martin Stettler

Martin Stettler 0 points

3 years ago

Great, thanks a lot, Hussein!