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
xxxxxxxxxx<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
xxxxxxxxxx<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