Would you like to create beautiful responsive photo galleries for your Joomla site? Are you looking for a Joomla Gallery Custom Field plugin that will enable you to add image galleries to your Joomla Articles?
ACF Gallery is a Joomla gallery plugin with a drag & drop builder and lightbox functionality that integrates perfectly with Joomla Custom Fields. It comes with stunning pre-built gallery layouts and a focus on performance and SEO. It is also responsive, accessibility-ready, and supports lazy loading for lightning-fast photo galleries and automatic image resizing during upload.
Features overview
- Powerful and easy-to-use drag & drop gallery builder
- 2 beautiful gallery templates – Grid and Masonry (More are coming)
- Display images in a Lightbox popup
- Upload photos from your computer or from the Joomla Media Library
- Upload items to a custom folder or to dynamically generated folder with the use of Smart Tags
- Joomla Custom Fields integration
- Automatic image resizing during upload
- Automatic thumbnails creation
- 3 image resizing methods: Crop, Stretch, Fit
- Ability to resize large images.
- Drag & Drop reordering of the gallery items
- Gallery items caption (HTML support)
- Option for rendering a module in the lightbox captions
- Lazy loading of images
- Responsive & Mobile Ready
- Keyboard and touch navigation
- Zoomable images
- Retina ready
- Works on all modern browsers
- Joomla 3 and Joomla 4 support
- No dependencies - no jQuery
Field Options
Below you can find all options available in the Field settings page.
| Upload Settings | |
|---|---|
| Upload Destination |
Select whether to store the uploaded files in our default folder or in your own custom folder. Auto: The images will be uploaded to the following directory: /media/acfgallery/COMPONENT/ITEM_ID/FIELD_ID/. The COMPONENT represents the name of the component where this field got populated from (eg: content, users, or contacts). The ITEM_ID represents the ID of the item this field was populated from, (eg. The ID of the Joomla Article). The FIELD_ID represents the ID of this custom field. Custom: Upload the images to a custom folder relative to your site’s root directory. |
| Upload Folder |
Set the custom folder to upload images. Make sure the path entered is writable, otherwise the file upload will fail. This option accepts Smart Tags to create dynamic folders. |
| Files Limit | Limit how many files can be uploaded per gallery. |
| File Size Limit | Configure the maximum allowed size for each uploaded file. |
| Theme | |
| Style |
Select the layout of your gallery on the front end. Grid: Display the thumbnails of your images in square boxes. Masonry: It’s essentially a grid layout but unlike grid, the thumbnails do not have a fixed height. |
| Columns | Set how many items to show per row. |
| Gap | Set the space in pixels between the gallery items. |
| Item Ordering |
Select how the gallery items will be ordered. Default: Display the gallery items in the same order as uploaded in the Gallery Manager. Drag and drop an image to change its order. Alphabetical: Displays the gallery items in alphabetical order based on the file name. Reverse alphabetical: Displays the gallery items in reverse alphabetical order based on the file name. Random: Displays the gallery items in random order. |
| Lightbox Popup | |
| Enabled |
When enabled, you can click on a thumbnail and display the full image in a lightbox popup. ACF Gallery is based on Glightbox. A lightweight and dependency-free (no jQuery) lightbox script (only 11kb gzipped). |
| Module as Caption | Choose a module to be displayed below the image’s caption in the lightbox popup. |
| Optimize Original Image | |
| Enabled | Optimize the original image uploaded by the user to increase loading speed and free up storage space. This is the fullscreen image your users see in the lightbox popup. |
| Width | Resize all images to a specified width in pixels. The height of the image will be automatically adjusted respecting its aspect ratio. Images with a width less than the specified will be ignored. |
| Quality | Adjust the quality for the resized original image. The quality is a value that ranges between 1 and 100. The higher the quality is, the higher the image size will be. |
| Thumbnails | |
| Resize Method |
Select the method that will be used to resize the thumbnails in the gallery. This option is available only in the Grid style. Crop: Some parts of the image might be removed in order to fit the given Width and Height. Stretch: The image will be stretched and squeezed as needed in order to fit the given Width and Height. Fit: Keep the original aspect ratio and fit the dimensions defined by the given Width and Height. This could make the thumbnails have empty space in either top and bottom or left and right parts of the image. |
| Width | Set the width of the thumbnails in pixels. |
| Height | Set the height for your thumbnails in pixels. If set to 0 (or empty), then the thumbnail will be generated by also keeping the aspect ratio. This option is available only in the Grid style. |
| Quality | Adjust the quality for the thumbnail image. The quality is a value that ranges between 1 and 100. The higher the quality is, the higher the image size will be. |
How to add a Gallery Field to Joomla Articles
The Gallery Field can be used with any component that supports the Joomla! Fields such as the Articles (com_content), User (com_user) and the Contact (com_contact) component. Let's see a real-world example of how content authors can add a photo gallery to a Joomla article and let the website visitors preview the same photo gallery with lightbox functionality on the front-end.
Step 1: Add a new Gallery Field to Joomla Articles
Go to Content -> Fields, click New to create a new field. From the Type dropdown, select the ACF - Gallery option.
Click to save the field and return back to the same page where now, you can see the3 field customization options.
Step 2: Set the gallery upload folder
In the 1st group of options called “Upload Settings”, we can set where we would like to store our uploaded photos as well as the rules and restrictions on the files that are allowed to be uploaded by our field. In our case, we are going to use the default options.
Step 3: Configure the photo gallery to be displayed in a Grid layout
In the 2nd group of options called “Theme”, we can define what layout to use for our photo gallery on the front end. In our case, we are going to use the well-known and typical Grid layout.
Step 4: Enable the Lightbox option
In the 3rd group of options called “Lightbox Popup”, we can allow the user to click on a thumbnail and display the full image in a lightbox popup. In our case, click to enable this option.
Step 5: Optimize the original image (Optional)
In the next group of settings, we can set whether to optimize the original photos uploaded by the user to increase loading speed and free up storage space. This is the fullscreen image your users see in the lightbox popup. In our case, we are going to enable it and resize all the images down to 1500px width.
Step 6: Set the size of the thumbnail images
Lastly, in the Thumbnails section, we need to configure the size and the quality of the gallery thumbnail photos. In our case, we would like all thumbnails to have the exact same size.
- Select Crop in the Resize Method
- Set the Width option to 300px
- Set the Height option to 200px
Step 7: Upload your photos in the Joomla Article
Now, that we have our Gallery field properly configured, we should be able to see it on the article's editing page. Head over Joomla Content and click to edit the article you would like to attach to the photo gallery. In most cases, the Gallery Field should be able in the Fields tab. Once there, click Add Images to select photos from your computer.
Below each uploaded image there’s a Caption text field where you can write a small description for the image. This caption is used as the alt text of the image itself and is also displayed below the preview image in the lightbox popup.
In case the field is displayed disabled in the form and you're not allowed to upload files, you're probably don't have the right permissions to edit the content of the field. To fix it, you must set the Edit Custom Field Value option to Allowed in the Permissions tab in the Field settings as well as in the Content component configuration page.
You’re now done! Once you’ve finished uploading your photos, save the article and go to your front-end to enjoy your photo gallery.
Features & Development Roadmap
We are really excited about the ACF Gallery plugin and we have big plans for it. Below you can find our roadmap
- Justified Layout
- Protect photos with a watermark
- Protect galleries with a password
- Image preview in the backend
- WebP support
- Video support
- Standalone Mode
- Items pagination
- Deeplinking
Are you missing a feature? Do you have any idea how to improve this plugin? Don’t hesitate to share it here and we will try to implement it in future versions.
Frequently Asked Questions
Who should use ACF Gallery?
ACF Gallery is a perfect solution for photographers, designers, bloggers, and small businesses. Basically, if you want to create a beautiful Joomla gallery, then you need the ACF Gallery plugin.
What’s required to use ACF Gallery?
ACF Gallery is part of the Advanced Custom Fields extension. In order to use ACF Gallery, you must have a Joomla 3.7 version or later site and the Advanced Custom Fields extension installed. That’s all.
Will ACF Gallery slow down my website?
Absolutely not. ACF Gallery is carefully built with performance in mind. We have tested it on extremely high-traffic websites to ensure that it scales without having any performance issues.
How can I override the Gallery layout?
To override the gallery layout, you will need to copy the field layout from /plugins/system/nrframework/layouts/widgets/gallery/ into /templates/TEMPLATE/html/tassos/widgets/gallery/.
