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.
$292 per month—let's make that $500!Learn more
What is Gallery?¶
Gallery is a dynamic Gallery Extra for MODX Revolution. It allows you to quickly and easily put up galleries of images, sort them, tag them, and display them in a myriad of ways in the front-end of your site.
A tutorial has been made for Gallery by the community, and can be downloaded here: Tutorial - Gallery Component with Galleriffic.pdf
Another small tutorial about setting up an album with Gallery can be found here: https://www.sitsol.be/blog/modx-gallery
- MODX Revolution 2.0.0-rc-2 or later
- PHP5 or later
- php-mbstring Enabled
Gallery was written by Shaun McCormick (splittingred) as a dynamic Gallery component, and first released on February 5th, 2010.
Development and Bug Reporting¶
Gallery is stored and developed in GitHub, and can be found here: https://github.com/modxcms/Gallery
The Gallery snippets can be called using the tags:
[[Gallery? &album=`My Album`]] [[GalleryAlbums? &limit=`10`]]
Gallery comes packaged with 3 snippets - one called "Gallery", which displays a gallery from either an Album, a Tag, or both; a snippet called "GalleryAlbums", which displays a list of Albums; and a snippet called "GalleryItem", which displays a single Gallery Item.
You can change the place where you store your Gallery images by changing the following settings:
|gallery.files_path||The absolute path of a folder to store images in.|
||The web-accessible URL that you can reach gallery.files_path from.|
As of version 1.3.0 you can also enable and control a TinyMCE integration for Gallery item descriptions. These settings are included:
||Set to yes (true) to enable the TinyMCE integration. Note that you will need to have the TinyMCE Extra installed in order for this to work.|
||Width of the text editor in either pixels or a percentage.|
||Height of the text editor in either pixels or a percentage.|
||Buttons to display on the different rows (1 through 5). When empty this will inherit from the main TinyMCE settings.|
||A comma separated list of plugins to load. When empty this will inherit from the main TInyMCE settings.|
||Block formats to use in the drop down box. Inherits from main TinyMCE settings when empty.|
||CSS Selectors to choose from. Inherits from main TinyMCE settings when empty.|
Using the Custom TV¶
Gallery comes packaged with a custom TV input and output type for managing Gallery images in the backend. You can crop, resize, rotate, and more with it. Please see the following article for more usage:
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. Currently, the only available plugin is for Galleriffic.
Gallery manager page¶
Gallery ships with a custom manager page (can be found in the Components top menu) where you can manage your albums. You can create new ones, and use the name you give it in the Gallery snippet to retrieve that specific album. After you have created an album you can right click and update it to manage the photos associated with it.
You can use four different types of uploading. Either single item upload (optionally with a rich text description, see the system settings explained above), multi upload, bulk upload which searches a folder on the filesystem and imports the images found, or zip upload which unpacks a zip file.
Gallery Media Source¶
Gallery ships with a custom Media Source type that can be used to show your Albums and their items in the left-hand tree in the manager. Simply create a new Media Source with type "Gallery Albums", and Gallery will handle the rest.
A sample code line for a Galleriffic-powered gallery for the album "My Album".
[[!Gallery? &album=`My Album` &plugin=`galleriffic`]]
Grab the first 10 photos tagged "Fun":
Grab all photos in the album "My Album" with tag "Blue":
[[!Gallery? &album=`My Album` &tag=`blue`]]
- Gallery.Setting Up Your Gallery
- Gallery.Setting Up the GalleryItem TV