Quick start

Gallery3x2 min readPage 2 of 22
On this page 5

Installation, configuration and the first gallery on a page — in five minutes.

Step 1. Installation

  1. Download the Gallery3x package from MODX Extras or get it via the Package Manager in the MODX manager.
  2. Install the package. The component creates tables, system settings, plugins and the “Gallery3x Source” media source, and installs pdoTools if needed.

pdoTools is only needed for chunks in Fenom syntax (&fenom=`1`). Regular chunks work without it.

Step 2. Templates

  1. Open System Settings, namespace gallery3x.
  2. In gallery3x.templates list the IDs of the templates that need a gallery, comma-separated, for example 1,3,5.

If gallery3x.templates is empty, the gallery tab does not appear on any resource.

Videos, files and embeds are enabled separately: gallery3x.video_enable, gallery3x.files_enable, gallery3x.embed_enable.

Step 3. Uploading images

  1. Open a resource with one of these templates — the Gallery G3x tab appears.
  2. Drag images into the upload area. Thumbnails are generated right away.
  3. Drag thumbnails to set the order; right-click for image properties (title, alt, description, groups).

Step 4. Output on the site

The simplest option is a thumbnail grid with a Fancybox viewer. Include the library and call the snippet in the template or the resource content:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.0/dist/fancybox/fancybox.css">

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

<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.0/dist/fancybox/fancybox.umd.js"></script>
<script>
    Fancybox.bind('[data-fancybox="gallery"]', {});
</script>

Other ready-made views (a large image with a thumbnail strip, a lightGallery carousel, Fenom versions) are on the Fancybox and Lightgallery pages. All snippet parameters — Gallery3x.

Your own chunks

Do not edit the standard tpl.Gallery3x.* chunks: they are overwritten when the component is updated. Copy the chunk under your own name (for example tpl.mysite.gallery.item), change the copy and use it in the snippet call.