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.gallery.items %}

 <div>

 <a href="{{ galleryitem.url }}" target="_blank">

 <img src="{{ galleryitem.url | 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” and that you have the Image Resizer Plugin installed. Thumbnails are generated for the images 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.gallery.items.sortBy('fileName').chunk(3) %}

 <div class="row">

 {% for galleryitem in galleryitemchunk %}

 <div class="col-xs-4" style="text-align: center;">

 <a href="{{ galleryitem.url }}" target="_blank">

 <img src="{{ galleryitem.url | 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” and that you have the Image Resizer plugin installed. 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.