Gallery

Last updated Mar 6th, 2021 | Page history | Improve this page | Report an issue

Support the team building MODX with a monthly donation.

The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.

Backers

Budget

$311 per month—let's make that $500!

Learn more

Gallery Snippet¶

This snippet displays a "gallery" of images from either an album, a tag, or both.

Properties¶

Name	Description	Default Value
album	Will load only items from this album. Can be either the name or ID of the Album.
tag	Will load only items with this tag.
plugin	The name of a plugin to use for front-end displaying. See "Plugins" section below.
thumbTpl	The Chunk to use as a tpl for each thumbnail.	galItemThumb
containerTpl	An optional chunk to wrap the output in.
toPlaceholder	If set, will set the output to a placeholder of this value, and the snippet call will output nothing.
placeholderPrefix	If no placeholder is set, will prefix properties of the name/id/description/total of the current Album with this prefix.	gallery.
thumbWidth	The width of the generated thumbnail, in pixels.	100
thumbHeight	The height of the generated thumbnail, in pixels.	100
thumbZoomCrop	Whether or not to use zoom crop on the thumbnail.	1
thumbFar	The aspect ratio for phpThumb with the thumbnail. The image is created at size specified by "w" and "h" (which must both be set). Values are the alignment: L=left,R=right,T=top,B=bottom,C=center. Set to BL,BR,TL,TR to specify for landscape or portrait images.	C
thumbQuality	The quality of the generated thumbnail, from 0-100.	90
thumbProperties	A JSON object of parameters to pass to phpThumb as properties for the thumbnail.
imageWidth	If being used by a plugin, the max width of the currently on-display image.	500
imageHeight	If being used by a plugin, the max height of the currently on-display image.	500
imageZoomCrop	Whether or not to use zoom crop on the image.
imageFar	The aspect ratio for phpThumb with the image.
imageQuality	If being used by a plugin, the quality of the image, from 0-100.	90
imageProperties	A JSON object of parameters to pass to phpThumb as properties for the image.
sort	The field to sort images by. You can use "rand" to make a random sort.	rank
dir	The direction to sort images by.	ASC
limit	If set to non-zero, will only show X number of items.	0
start	The index to start grabbing from when limiting the number of items. Similar to an SQL order by start clause.	0
showInactive	If true, will also display inactive images.	false
albumRequestVar	Can be used to define which REQUEST var to look out for to filter on album, used in conjunction with checkForRequestAlbumVar=`true`. This can be used filtered on a gallery name or ID.	galAlbum
checkForRequestAlbumVar	If true, if a REQUEST var with the value of the albumRequestVar (defaults to galAlbum) property is found, will use that as the album property for the snippet.	false
tagRequestVar	Can be used to define which REQUEST var to look out for to filter on tag, used on conjunction with checkForRequestTagVar=`true`.	galTag
checkForRequestTagVar	If true, if a REQUEST var with the value of the tagRequestVar (defaults to galTag) is found is found, will use that as the tag property for the snippet.	false
useCss	If true, will use the CSS provided by the Gallery snippet. Set to '0' to not load any Gallery-provided CSS.	1 (true)
itemCls	The CSS class to use for each item.	gal-item
activeCls	The CSS class to add if the item is the "active" item.	gal-item-active
linkToImage	Whether or not to link directly to the image for each thumbnail, or to the GalleryItem-customized URL.	0
linkAttributes	HTML attributes for the A tag in the item tpl.
imageAttributes	HTML attributes for the img tag in the item tpl.

Gallery Chunks¶

There are 2 chunks that are processed in Gallery. Their corresponding Gallery parameters are:

thumbTpl - The Chunk to use for each Item displayed.
containerTpl - Optional. If set, will wrap the contents with this chunk.

Plugins¶

Gallery allows you to display your galleries either straight as thumbnail images in the front-end, or using jQuery plugins. You can pass a plugin name through the Gallery snippet property &plugin.

Note that Galleriffic changes the thumbTpl property to gallerifficThumbTpl, and the containerTpl property to gallerifficContainerTpl.

Examples¶

Display a gallery of photos in the 'My Album' album:

[[!Gallery?
    &album=`My Album`
]]

Display a gallery of photos in the 'Trucks' album, but use a custom Chunk called 'truckThumb' for the thumbnails:

[[!Gallery?
    &album=`Trucks`
    &thumbTpl=`truckThumb`
]]

Display a gallery of photos with the tag 'Cool' and use the Galleriffic plugin:

[[!Gallery?
    &tag=`Cool`
    &plugin=`Galleriffic`
]]

Grab only 3 photos from the 'Cars' album, and set it to the "gallery" placeholder.:

[[!Gallery?
    &limit=`3`
    &album=`Cars`
    &toPlaceholder=`gallery`
]]
<div class="my-gallery">
[[+gallery]]
</div>

Using &thumbProperties to set the output of the thumbnails to 90% quality jpg instead of png:

[[!Gallery?
    &album=`My Album`
    &thumbProperties=`{"f":"jpg","q":"90%"}`
]]