CODE

Simple File API Gallery with Lightbox

Simple image gallery referencing a folder of images with the File API along with a jQuery lightbox implementation.

v1.0.0
  1. Create a basic Custom Module which will be used to create new galleries as needed.
    For this demo, we'll call our Custom Module 'My Gallery'.

    You'll just need one custom property called 'Cover Image' for this demo, but you can of course extend your Custom Module with additional properties as needed.

  2. In the Detail layout of your Custom Module paste the following:

    <!--Treehouse CODE v1.0.0-->
    <!-- FancyBox files -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
    <!-- end FancyBox files -->
    {% assign pathArray = this.coverimage | split: '/' %}
    {% assign nPathArray = pathArray | size | minus: 1 %}
    
    {% capture galleryPath %}
    {% for p in pathArray %}
    {% unless forloop.last %}/{{p}}{% endunless %}
    {% endfor %}
    {% endcapture %}
    
    {% component type:"api", resource:"File System", folder:"{{galleryPath}}", collectionVariable:"galImages" %}
    {% for item in galImages.items %}
        <div style="width: 200px; float: left; margin-right: 10px; margin-bottom: 10px;">
            <a data-fancybox="gallery" href="{{item.url}}?width=800"><img src="{{item.url}}?width=200&height=140&mode=crop" alt="{{this.name}}"></a>
        </div>
    {% endfor %}
  3. In the List layout of your Custom Module paste the following:

    <!--Treehouse CODE v1.0.0-->
    <div style="width: 200px; float: left; margin-right: 10px; margin-bottom: 10px;">
        <a href="{{this.url}}"><img src="{{this.coverImage}}?width=200&height=140&mode=crop" alt="{{this.name}}"></a>
        <p><a href="{{this.url}}">{{this.name}}</a></p>
    </div>
  4. On the page where you want to display the galleries paste the following:

    NOTE: Change 'My Gallery' to the name of your Custom Module.

    <!--Treehouse CODE v1.0.0-->
    {% component source: "My Gallery", layout: "List", limit: "999", type: "module" %}
  5. Now, when creating a new 'My Gallery' item, by simply choosing the Cover Image from the desired folder of images, it will automatically use that same folder to source all the remaining images for the gallery.

Comments or questions? Head over to the Treepl CMS forum to discuss with the community.