Forum

Thread tagged as: Configuration, Showcase

Bootstrap Lightbox photoalbum/gallery template for Perch

I've made a photoalbum/gallery template for Perch that uses Lightbox and Bootstrap and thought it would be nice to share. Follow these steps to get things going. It is possible to have multiple galleries on one page.

1-Download and install the Lightbox 2 script.

2-Create the region.

<?php perch_content('Photoalbum'); ?>

3-Create the photoalbum.html template.

<!-- Start of the photoalbum -->
<section class="<perch:content id="_id" type="hidden" />">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h3><perch:content id="albumtitle" type="text" label="Title of the photoalbum" required="true" title="true" /></h3>
            </div>
                  <perch:repeater id="Photos" label="Photos" scope-parent="true">
                  <div class="col-xs-6 col-sm-4 col-md-3">
                      <a class="" href="<perch:content id="mainphoto" type="image" label="Photo" width="400" height="280" crop="true" />" data-lightbox="album<perch:content id="parent._id" />" data-title="<perch:content id="description" type="text" label="Description" />">
                      <img class="thumbnail img-responsive" src="<perch:content id="mainphoto" type="image" label="Photo" width="250" height="175" crop="true" />" alt="<perch:content id="description" type="text" />" /></a>
                  </div>
                  </perch:repeater>
        </div>
    </div>
</section>
<!-- End of the photoalbum --> 

Don't forget to check 'allow multiple items' when assigning the template.

Edwin Venhorst

Edwin Venhorst 0 points

  • 5 years ago

Thanks! I look forward to trying it out.