A cool plugin that extends the Advanced Custom Fields (ACF) functionality to add ‘Photo Gallery’ to any post/pages of your choice.
| Author: | Navneil Naicker (profile at wordpress.org) |
| WordPress version required: | 5.8 |
| WordPress version tested: | 6.4.4 |
| Plugin version: | 2.9 |
| Added to WordPress repository: | 02-07-2016 |
| Last updated: | 19-04-2024 |
| Rating, %: | 80 |
| Rated by: | 27 |
| Plugin URI: | http://www.navz.me/ |
| Total downloads: | 477 405 |
| Active installs: | 50 000+ |
 Click to start download |
|
A lightweight extension of Advanced Custom Field (ACF) that adds Photo Gallery field to any post/pages on your WordPress website.
- Visually create your Fields
- Add multiple photos and you can also modify title, caption and link to anything
- Assign your fields to multiple edit pages (via custom location rules)
- Easily load data through a simple and friendly API
- Uses the native WordPress custom post type for ease of use and fast processing
- Uses the native WordPress metadata for ease of use and fast processing
- Supports WordPress classic and Gutenberg editor
- Supports Elementor (support for bricks builder coming soon)
- RESTFul API
Note
This plugin is a better alternative to ACF Gallery Pro. You need to have knowledge of coding because editing your WordPress theme source code is required. If you’re looking for prebuilt galleries and shortcodes, then this plugin is NOT for you. This plugin will give you a PHP array of images, and you’ll need to create the gallery layout yourself.
Donation
Navneil Naicker is the sole developer working on this free WordPress Plugin in his leisure time. He would like to integrate it with premium plugins like Elementor Pro and Advanced Custom Fields Pro. Please donate to support Navneil in continuing further development of this plugin. Click on the link “https://www.buymeacoffee.com/navzme” to donate.
Usage
acf_photo_gallery is a helper function that takes in ACF_FIELD_NAME and POST_ID will query the database and compile the images for you. The output of this function will be an array.
acf_photo_gallery(ACF_FIELD_NAME, POST_ID);
Example
The following example is using Twitter Bootstrap framework to layout. You can use any framework of your choice.
<?php
//Get the images ids from the post_metadata
$images = acf_photo_gallery('vacation_photos', $post->ID);
//Check if return array has anything in it
if( count($images) ):
//Cool, we got some data so now let's loop over it
foreach($images as $image):
$id = $image['id']; // The attachment id of the media
$title = $image['title']; //The title
$caption= $image['caption']; //The caption
$full_image_url= $image['full_image_url']; //Full size image url
$full_image_url = acf_photo_gallery_resize_image($full_image_url, 262, 160); //Resized size to 262px width by 160px height image url
$thumbnail_image_url= $image['thumbnail_image_url']; //Get the thumbnail size image url 150px by 150px
$url= $image['url']; //Goto any link when clicked
$target= $image['target']; //Open normal or new tab
$alt = get_field('photo_gallery_alt', $id); //Get the alt which is a extra field (See below how to add extra fields)
$class = get_field('photo_gallery_class', $id); //Get the class which is a extra field (See below how to add extra fields)
?>
<div class="col-xs-6 col-md-3">
<div class="thumbnail">
<?php if( !empty($url) ){ ?><a href="<?php echo $url; ?>" <?php echo ($target == 'true' )? 'target="_blank"': ''; ?>><?php } ?>
<img src="<?php echo $full_image_url; ?>" alt="<?php echo $title; ?>" title="<?php echo $title; ?>">
<?php if( !empty($url) ){ ?></a><?php } ?>
</div>
</div>
<?php endforeach; endif; ?>
Add Extra Fields
To add extra fields add the following to your themes functions.php file.
//Create extra fields called Altnative Text and Status
function my_extra_gallery_fields( $args, $attachment_id, $acf_key ){
$args['alt'] = array(
'type' => 'text',
'label' => 'Altnative Text',
'name' => 'alt',
'value' => get_field($field . '_alt', $attachment_id)
);
$args['status'] = array(
'type' => 'select',
'label' => 'Status',
'name' => 'status',
'value' => array(
array(
'1' => 'Active',
'2' => 'Inactive'
),
get_field($field . '_status', $attachment_id)
)
);
return $args;
}
add_filter( 'acf_photo_gallery_image_fields', 'my_extra_gallery_fields', 10, 3 );
Supported field types:
* text, date, color, datetime-local, email, number, tel, time, url, week, range, checkbox, radio, textarea, select
How to get values of extra fields
You can use ACF helper function get_field
get_field('photo_gallery_alt', $id);
get_field('photo_gallery_class', $id);
Pull caption from attachment caption field
By default the caption is being pulled from description field. Add the following filter to your function.php to pull the caption from attachment caption field.
add_filter( 'acf_photo_gallery_caption_from_attachment', '__return_true' );
REST API
Send HTTP Request to URL to get JSON response of all posts
http://{domain}/wp-json/wp/v2/{POST_TYPE}/
Send HTTP Request to URL to get JSON response of specific post
http://{domain}/wp-json/wp/v2/{POST_TYPE}/{POST_ID}/
When you receive the response, see the ACF item which contains ACF photo gallery name and array of images.
Installation and basic usage tutorial
ACF Photo Gallery Field on WordPress Custom Post Type tutorial
How to use Elementor dynamic tags with ACF Photo Gallery Field plugin tutorial
Compatibility
This ACF field type is compatible with: ACF 4, 5 and 6
Issues
Just like any other WordPress plugin, this plugin can also cause issues with other themes and plugins. If you are facing issues making this plugin work on your WordPress site, please do ask for help in the support forum. This way we can help you out and prevent this issue from happening to someone else. If you want to talk to me directly, you can contact me via my website http://www.navz.me/
ChangeLog