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.

Demo #1

Budapest Is Beautiful

Gallery AttributeValueTwig Code
Name:Budapest Is Beautiful{{ customGallery.gallery.name }}
Slug:budapest_gallery{{ customGallery.gallery.slug }}
Description:Europe's most beautiful capital!{{ customGallery.gallery.description }}
Published At:2022-08-02 15:08:18{{ customGallery.gallery.publishedAt }}
Published?1{{ customGallery.gallery.published }}
Created At:2019-08-22 11:26:48{{ customGallery.gallery.createdAt }}
Updated At:2022-08-02 15:08:20{{ customGallery.gallery.updatedAt }}
Preview Image URL:https://novembergallery.zenware.hu/storage/app/uploads...{{ customGallery.gallery.previewImage.url }}
Preview Image Title:Erzsébet bridge{{ customGallery.gallery.previewImage.title }}
Preview Image Description:A view of Erzsébet bridge around dusk from Belgrád rakpart{{ customGallery.gallery.previewImage.description }}
Preview Image Width:900{{ customGallery.gallery.previewImage.width }}
Preview Image Height:562{{ customGallery.gallery.previewImage.height }}
Preview Image Type:2{{ customGallery.gallery.previewImage.type }}
Preview Image Orientation:horizontal{{ customGallery.gallery.previewImage.orientation }}
Preview Image Filename 1:5d5e7bebab0b6453042679{{ customGallery.gallery.previewImage.fileNameWithoutExtension }}
Preview Image Extension:jpg{{ customGallery.gallery.previewImage.fileExtension }}
Preview Image Filename 2:5d5e7bebab0b6453042679.jpg{{ customGallery.gallery.previewImage.fileName }}
Preview Image File Path:[redacted]{{ customGallery.gallery.previewImage.filePath }}
Preview Image Real Path:[redacted]{{ customGallery.gallery.previewImage.fileRealPath }}
Preview Image File Size:173238{{ customGallery.gallery.previewImage.fileSize }}
Preview Image Rel Path:/storage/app/uploads/public/5d5/e7b/eba/5d5e7bebab0b6453042679.jpg{{ customGallery.gallery.previewImage.relativeFilePath }}
Preview Image Uploaded:2019-08-22UTC11:26:35+0000{{ customGallery.gallery.previewImage.uploaded|date('Y-m-d\TH:i:sO') }}

  Settings used for this example:

Component Inspector

Media Folderplants-and-flowers
Max Images9

Page HTML

<table>
	<tr><td><b>Gallery Attribute</b></td><td><b>Value<b></td><td><b>Twig Code</b></td></tr>
	<tr><td>Name:</td><td>{{ customGallery.gallery.name }}</td></tr>
	<tr><td>Slug:</td><td>{{ customGallery.gallery.slug }}</td></tr>
	<tr><td>Description:</td><td>{{ customGallery.gallery.description }}</td></tr>
	<tr><td>Published At:</td><td>{{ customGallery.gallery.publishedAt }}</td></tr>
	<tr><td>Published?</td><td>{{ customGallery.gallery.published }}</td></tr>
	<tr><td>Created At:</td><td>{{ customGallery.gallery.createdAt }}</td></tr>
	<tr><td>Updated At:</td><td>{{ customGallery.gallery.updatedAt }}</td></tr>
	<tr><td>Preview Image URL:</td><td>https://novembergallery.zenware.hu/storage/app/uploads...</td></tr>
	<tr><td>Preview Image Title:</td><td>{{ customGallery.gallery.previewImage.title }}</td></tr>
	<tr><td>Preview Image Description:</td><td>{{ customGallery.gallery.previewImage.description }}</td></tr>
	<tr><td>Preview Image Width:</td><td>{{ customGallery.gallery.previewImage.width }}</td></tr>
	<tr><td>Preview Image Height:</td><td>{{ customGallery.gallery.previewImage.height }}</td></tr>
	<tr><td>Preview Image Type:</td><td>{{ customGallery.gallery.previewImage.type }}</td></tr>
	<tr><td>Preview Image Orientation:</td><td>{{ customGallery.gallery.previewImage.orientation }}</td></tr>
	<tr><td>Preview Image Filename 1:</td><td>{{ customGallery.gallery.previewImage.fileNameWithoutExtension }}</td></tr>
	<tr><td>Preview Image Extension:</td><td>{{ customGallery.gallery.previewImage.fileExtension }}</td></tr>
	<tr><td>Preview Image Filename 2:</td><td>{{ customGallery.gallery.previewImage.fileName }}</td></tr>
	<tr><td>Preview Image File Path:</td><td>[redacted]</td></tr>
	<tr><td>Preview Image Real Path:</td><td>[redacted]</td></tr>
	<tr><td>Preview Image File Size:</td><td>{{ customGallery.gallery.previewImage.fileSize }}</td></tr>
	<tr><td>Preview Image Rel Path:</td><td>{{ customGallery.gallery.previewImage.relativeFilePath }}</td></tr>
	<tr><td>Preview Image Uploaded:</td><td>{{ customGallery.gallery.previewImage.uploaded|date('Y-m-d\TH:i:sO') }}</td></tr>                
</table><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.


Demo #2

Gallery

1304D0003.jpg
WP1680x1050_0005_1012D057M.jpg
WP1680x1050_0006_1012D054M.jpg
WP1680x1050_0008_1012D041M.jpg
WP1680x1050_0013_0906D70.jpg
WP1680x1050_0037_0706D06.jpg
WP1680x1050_0049_0416P15.jpg
WP1680x1050_0071_0515D121.jpg
WP1680x1050_0088_1013D020M.jpg
WP1680x1050_0089_1102D188M.jpg
WP1680x1050_0091_1113D049M.jpg
WP1680x1050_0094_1117D0025M2.jpg

  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.


Additional Options


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

Continue to Customization