Forum

Thread tagged as: Configuration, Showcase

Bootstrap carousel template for Perch

Hi,

I've created Perch-templates for the Bootstrap carousel (with help of Drew and Simon) and thought it would be nice to share so everyone can use it. Enjoy!

First create the region, which uses three templates:

<?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',
    )); 
?>

Then create carousel-main.html template:

<perch:template path="content/carousel-indicators.html" />
<perch:template path="content/carousel-slides.html" />

Then create carousel-indicators.html template:

<perch:before>
<!-- Start of the carousel -->
<div id="carousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators"></perch:before>
        <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>
    <perch:after></ol></perch:after>

And finally the carousel-slides.html template:

<perch:before>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox"></perch:before>
    <div class="item<perch:if id="perch_item_index" match="eq" value="1"> active</perch:if>">
        <img src="<perch:content id="slide" type="image" label="Slide photo" width="720px" height="350px" crop="true" />" alt="<perch:content id="slidephotoalt" type="text" label="Description" required="true" help="A description of the slide image. This field is required, it is also being used as ALT-text for a better Google ranking." />">
        <div class="carousel-caption">
            <p><perch:content id="slidephotoalt" type="text" /></p>
        </div>
    </div>
<perch:after></div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>
</div>
<!-- End of the carousel --></perch:after>

Edwin Venhorst 0 points

5 years ago

Jane Turnbull 0 points

5 years ago

Fantastic help. Just what I was looking for. Many thanks!

Jo Clarke 0 points

5 years ago

Hi Edwin,

Could you tell me where I would need to put the code for this section of your instructions? - "First create the region, which uses three templates:"

I already have pages set up but I need to add a carousel to some of the images in the banner. I tried putting it at the top of my index.php file, just under "<?php include('admin/runtime.php'); ?>" but that brings back an error.

Thanks, Kayleigh

Edwin Venhorst 0 points

5 years ago

Sure. You need to put this code where you want the carousel to appear. Then make sure the three templates are saved in perch > templates > content.

That's it, the carousel should work now.

Jo Clarke 0 points

5 years ago

Will this still work if it is being put into another template file?

I have multiple images in a banner block, see - www.parkfieldsstable.co.uk. which is being pulled in from a template file. I only want to rotate the small image above the 'Book Now' and 'Guest Comments' boxes.

Thanks

Edwin Venhorst 0 points

5 years ago

When you use a Perch template to pull in that images you can't use the region-code I provided inside that template as far as I know. Templates are saved as HTML and can't contain PHP tags. You have to create the region on a PHP-page (or in a Perch Layout block or masterpage for example).

But there is another problem, this is a Bootstrap Carousel-code and as far as I can see your site doesn't use Bootstrap. Or is it just an example and are you building with Bootstrap on a development domain?

Jo Clarke 0 points

5 years ago

Ah okay, the link that I sent is the site that I'm making the changes to. As I can't use this carousel, do you know of any that I could try? As I can't seem to find much on this subject.

I've tried a HTML/JS carousel, but I can't get the links in the header to display on the site so it won't pull in the relevant JS.

Thanks

Edwin Venhorst 0 points

5 years ago

You can use any carousel you want. That's the nice thing about Perch, it doesn't force you into any code or template. I personally have good experiences with Flexslider, an easy carousel to set up.

Jo Clarke 0 points

5 years ago

Thanks Edwin, you've been really helpful! Hopefully I can get this working now.

Eric Hudson 0 points

5 years ago

I Love you guys for this, highly appreciated.

Janel Stahr 0 points

5 years ago

THANK YOU! I have been doing galleries in the most convoluted, difficult way for the past year. This is SO easy. Much appreciated!