Info
Content

Component 5: Image List Only

Use this if you wish to write your own Twig script for displaying your images, and only need a list of images (that can be found in a given folder) to be loaded into a page variable.

The image list component does not have any options other than the Shared Options.

Example Page 1

<div style="display: flex; flex-wrap: wrap; justify-content: center; align-items: center;">
{% for galleryitem in customGallery.galleryitems %}
    <div>
        <a href="{{ galleryitem.relativeMediaFilePath | media }}" target="_blank">
            <img src="{{ galleryitem.relativeMediaFilePath | media | resize(280, false,  { mode: 'portrait', quality: '90', extension: 'png' }) }}" alt="{{ galleryitem.fileName }}" style="margin: 20px;" />
        </a>
    </div>
{% endfor %}
</div>

This example assumes that your gallery component has the alias “customGallery”. Thumbnails are generated for the images using the Image Resizer Plugin and displayed in a flexbox, with each thumbnail providing a link to the full-resolution image.

Example Page 2

<div class="container-fluid">
{% for galleryitemchunk in customGallery.galleryitems.sortBy('relativeMediaFilePath').chunk(3) %}
    <div class="row">
        {% for galleryitem in galleryitemchunk %}
            <div class="col-xs-4" style="text-align: center;">
                <a href="{{ galleryitem.relativeMediaFilePath | media }}" target="_blank">
                    <img src="{{ galleryitem.relativeMediaFilePath | media | resize(280, false,  { mode: 'portrait', quality: '90', extension: 'png' }) }}" alt="{{ galleryitem.fileName }}" />
                </a>
            </div>
        {% endfor %}
    </div>
{% endfor %}
</div>

Again, we are assuming that your component has the alias “customGallery.” The images are sorted by filename and “chunked” into groups of 3 images, which are then displayed using the Bootstrap grid layout.

Check out the Demo Site for live examples of the above.

No Comments
Back to top