Would you like to create beautiful responsive photo galleries for your Joomla site? Are you looking for a Joomla Gallery Custom Field plugin to 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
- 3 beautiful gallery templates – Grid, Masonry, and Justified (More are coming)
- Display images in a Lightbox popup
- Upload photos from your computer or the Joomla Media Library
- Upload items to a custom folder or a 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 on the Field settings page.
| Upload Settings | |
|---|---|
| Upload Destination |
Select store the uploaded files in the default or a custom folder. Auto: The images will be uploaded to the following directory: /media/acfgallery/COMPONENT/ITEM_ID/FIELD_ID/. The COMPONENT represents the component's name from which this field got populated (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. You can utilize the following Smart Tags to create dynamically generated folders. {field.field_id} - The ID of the field And any other global Smart Tags. |
| Upload Folder |
Set the custom folder to upload images. Ensure 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 how your gallery will look on the front end. Available styles: Grid: All items will have the same width and the same height as well. You can define the width and height of the items as well as the number of columns for this layout. Justified: This layout is the opposite of the Masonry layout. All items will have the same height but different widths. You can define the target row height. |
| Columns | Set how many items to show per row. This option is available in the Grid and Masonry styles. |
| Item Gap | Set the space in pixels between the gallery items. |
| Item Width | Set the width of the item in pixels. This option is applicable in the Grid and Masonry styles. |
| Item Height | Set the height of the item in pixels. If set to 0 (or empty), the item will be generated by keeping the aspect ratio. This option is available in the Grid style only. |
| Row Target Height | Set the height of each row in pixels. It's called a target because row height is the lever we use to fit everything nicely. The algorithm will get as close to the target row height as possible. This option is available in the Masonry style only. |
| Image Quality | Adjust the quality of 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. |
| Image 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 to fit the given Width and Height. Stretch: The image will be stretched and squeezed as needed 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 space in the image's top, bottom, or left and right parts. |
| Item Ordering |
Select how the gallery items will be ordered. Default: Display the gallery items in the same order uploaded in the Gallery Manager. Drag and drop an image to change its order. Alphabetical: Displays the gallery items alphabetically 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 |
You can click on a thumbnail and display the full image in a lightbox popup when enabled. 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. |
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 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, and click New to create a new field. From the Type dropdown, select the ACF - Gallery option.
Click to save the field and return to the same page where now, you can see the field customization options.
Step 2: Set the gallery upload folder
In the 1st group of options, called “Upload Settings”, we can set where to store our uploaded photos and the rules and restrictions on the files 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 the layout for our photo gallery on the front end. In our case, we will use the well-known and typical Grid layout.
Step 4: Set the size of the thumbnail images
Next, we need to configure the size and quality of the gallery thumbnail photos. In our case, we would like all thumbnails to have the same size.
- Select Crop in the Resize Method
- Set the Width option to 300px
- Set the Height option to 300px
Step 5: 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 6: 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 will enable it and resize all images to 1500px width.
Step 7: Upload your photos in the Joomla Article
Now that we have our Gallery field properly configured, we should see it on the article's editing page. Head over to Joomla Content and click to edit the article you want to attach to the photo gallery. In most cases, the Gallery Field should be 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 image's alt text and is 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 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 and 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 excited about the ACF Gallery plugin and have big plans for it. Below you can find our roadmap
- Protect photos with a watermark
- Protect galleries with a password
- Image preview in the backend
- Video support
- Standalone Mode
- Items pagination
- Deep linking
Are you missing a feature? Do you have any idea how to improve this plugin? Don’t hesitate to share it here; we will try implementing it in future versions.
Frequently Asked Questions
Who should use it?
ACF Gallery is a perfect solution for photographers, designers, bloggers, and small businesses. If you want to create a beautiful Joomla gallery, you need the ACF Gallery plugin.
What’s required to use it?
ACF Gallery is part of the Advanced Custom Fields extension. 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 it 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.
Is it responsive and mobile-ready?
Yes, ACF Gallery is both responsive and mobile-ready, which will adapt to the device it is being viewed, ensuring that the photo galleries look great on all devices.
What is the Lightbox Popup feature of ACF Gallery?
The Lightbox Popup feature of ACF Gallery allows you to click on a thumbnail and display the full image in a lightbox popup. This feature is enabled by default and is based on Glightbox, a lightweight and dependency-free (no jQuery) lightbox script that is only 11kb gzipped. Additionally, you can choose a module to be displayed below the image’s caption in the lightbox popup and enable the optimization of the original image uploaded by the user to increase loading speed and free up storage space.
How can I override the Gallery layout?
To override the "ACF - Gallery" custom field, read here: How to override the "ACF - Gallery" custom field.
Can I use it with YooTheme Pro Dynamic Content?
How does the justified layout work?
The justified layout expects images in different dimensions, such as portrait and landscape images. The logic behind the justified layout is that all images will be resized by a specific height (thus, all images will have different widths but the same height, as set in the Row Target Height setting), then the justified layout will automatically fit all images nicely together.
You may notice that not all justified gallery rows have the same height. The reason is that the height set under "Row Target Height" is the lever we use to fit everything nicely. The algorithm will get as close to the target row height as possible.
Also, images will not stretch to fit a single row when there is extra space due to missing images.
