Image List Only

This component only loads the list of image files into a page variable, without rendering a gallery. Use this if you wish to write your own code for displaying the images.

  Settings used for this example:

Component Inspector

Media Folderplants-and-flowers
Max Images9

Page HTML

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

Explanation: We select the folder of images we wish to display in the component inspector and also limit the number of images to 9. We then write our own html/Twig markup to display these images as shown in the Page HTML box above.

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.


  Settings used for this example:

Component Inspector

Media Folderplants-and-flowers
Max Images12

Page HTML

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

Explanation: We select the folder of images we wish to display in the component inspector and also limit the number of images to 12. We then write our own html/Twig markup to display these images as shown in the Page HTML box above.

We are assuming that your component has the alias "customGallery2." The images are sorted by filename and "chunked" into groups of 3 images, which are then displayed using the Bootstrap grid layout.



  All Available Component Inspector Options for Image List Only Galleries

Code OctoberCMS Component Inspector Property Description
alias Alias Standard OctoberCMS stuff, you refer to the component in your page via this unique identifier, the default is “embeddedGallery” but you can change it to anything you want (don’t use spaces or special characters though!)
mediaFolder Media Folder Select the folder that you uploaded the images to in the OctoberCMS Media manager. Only folders under the “Base Media Folder” set on the November Gallery settings page are valid.
maxItems Max Images The maximum number of images to display
sortBy Order by Order to display the gallery items in; note: Image Title, Description, and Sort Order only work for images uploaded using the Galleries page! Options are: (1) title / Image Title (2) description / Image Description (3) sortOrder / Image Order in Gallery (4) width / Image Width (5) height / Image Height (6) orientation / Image Orientation (7) fileName / Filename (8) fileSize / File Size (9) uploaded / Date/Time Uploaded; and all options are also available in reverse order (append DESC onto the option code).