Gallery3x — Gallery3x

The [[!Gallery3x]] snippet outputs gallery images. It does not create thumbnails — it uses the ready URLs, so it is fast.

Parameters

Parameter	Default	Description
&resource	`current resource`	ID of the resource whose images to output. Used if `&resources` and `&parents` are not set.
&resources	—	Resource IDs, comma-separated; an ID with a minus excludes the resource (`5,10,-3`). Takes precedence over `&parents`.
&parents	—	Parent IDs, comma-separated: images of these resources and their descendants (up to 10 levels). `0` — the whole site.
&ids	—	IDs of specific images, comma-separated. Then `&resource`/`&resources`/`&parents` are ignored and the order follows the list (unless `&sortby` is set).
&group	—	Only images from these groups (several — comma-separated).
&where	—	Additional xPDO conditions in JSON: `{"special":1}`, `{"extra_num:>":2000}`.
&showInactive	`0`	`1` — include disabled images.
&sortby	`position`	Sort field: `position`, `createdon`, `name`, `id`, `extra_num`, `extra_date`, etc.
&sortdir	`ASC`	`ASC` or `DESC`.
&limit	`0`	How many images to output, `0` — all.
&offset	`0`	How many to skip from the start.
&tplOuter	`tpl.Gallery3x.Fancybox.outer`	Wrapper chunk.
&tplThumb	`tpl.Gallery3x.Fancybox.thumbItem`	Chunk of one image. Not used with &fenom=`1`.
&fenom	`0`	`1` — process `&tplOuter` with pdoTools (Fenom) and pass it the `{$files}` array.
&source	—	Media source for the URLs (ID or name). Empty — the source the image is stored in.
&return	—	`data` or `json` — data instead of HTML (from a MODX tag the array comes as a JSON string); `ids` — a comma-separated ID list.
&toPlaceholder	—	Put the data into a placeholder with this name; the snippet outputs nothing.
&debug	`0`	`1` — show the parameters, query conditions and found data instead of the gallery.

Image placeholders (&tplThumb)

Placeholder	Value
`[[+id]]`	Image ID
`[[+resource_id]]`	Resource ID
`[[+name]]`	Title
`[[+alt]]`	Alternative text
`[[+description]]`	Description (HTML)
`[[+original_url]]`	Original URL
`[[+small_url]]`, `[[+medium_url]]`, `[[+big_url]]`	Thumbnail URLs — one per source size (`[[+name_url]]`)
`[[+file]]`, `[[+path]]`	File name and folder inside the source
`[[+type]]`, `[[+size]]`	MIME type and size in bytes
`[[+group]]`	Groups separated by `\|\|`
`[[+special]]`, `[[+active]]`, `[[+position]]`	“Special”, active, position
`[[+extra_text]]`, `[[+extra_text2]]`, `[[+extra_num]]`, `[[+extra_date]]`	Extra fields
`[[+createdon]]`, `[[+updatedon]]`	Dates (Y-m-d H:i:s)
`[[+caption_json]]`	Caption (title + description) as a ready JS literal — for lightGallery

Wrapper placeholders (&tplOuter)

[[+thumbs]] — all images rendered with the &tplThumb chunk.
[[+first.medium_url]], [[+first.name]], etc. — fields of the first image (for a large image above the strip).
In Fenom: {$files} — an array of all images, {$first} — the first one.

Examples

A Fancybox grid:

[[!Gallery3x?
    &tplOuter=`tpl.Gallery3x.Fancybox.GridOuter`
    &tplThumb=`tpl.Gallery3x.Fancybox.GridItem`
]]

Only “special” images of the “Interior” group, newest first:

[[!Gallery3x?
    &group=`Interior`
    &where=`{"special":1}`
    &sortby=`createdon`
    &sortdir=`DESC`
    &tplOuter=`tpl.Gallery3x.Fancybox.GridOuter`
    &tplThumb=`tpl.Gallery3x.Fancybox.GridItem`
]]

Your own Fenom wrapper chunk:

{* chunk tpl.mysite.gallery *}
<div class="gallery">
    {foreach $files as $f}
        <a href="{$f.big_url}"><img src="{$f.small_url}" alt="{$f.alt}" loading="lazy"></a>
    {/foreach}
</div>

[[!Gallery3x? &fenom=`1` &tplOuter=`tpl.mysite.gallery`]]

Data into a placeholder — and markup in a Fenom template:

[[!Gallery3x? &toPlaceholder=`photos`]]

{foreach $_modx->getPlaceholder('photos') as $f}
    <img src="{$f.medium_url}" alt="{$f.alt}">
{/foreach}

A date from an extra field: [[+extra_date:strtotime:date=`%d.%m.%Y`]].

Helper snippets

g3xGetImage — a thumbnail URL by image ID: [[g3xGetImage? &input=`17` &options=`medium`]] or as a modifier {$id | g3xGetImage : 'small'}. The size is a name from the source or original; medium by default. See pdoResources.
g3xCollectionsThumbnail — a thumbnail in the Collections grid. See Collections integration.