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.
No Comments