Creating an Image Gallery with Advanced Custom Fields

In this tutorial, we will create a custom gallery WordPress template which will use the Advanced Custom Fields plugin + the repeater field to populate a NivoSlider image gallery.

Alternatively, you could substitute the NivoSlider for any other javascript image slider as the logic will be the same.

1. Create the Template File

Firstly, we need to create a blank template file which we can then add our Advanced Custom Fields to. Create a new file (or duplicate your page.php file) in your theme called page-gallery.php and enter this code into it.

 2. Create the Fields

Now that we have a template file ready for our custom fields, we need to create our gallery custom field group. All we need is 1 repeater field with 2 sub fields:

  • Image – an image field that saves it’s value as the attachment ID (so we can get different sized images from it)
  • Title – a text field or text area to enter a title which could be used in the gallery as an alt tag or caption

Once you have created the fields, add some rules to target the edit page we desire: this will be when the post type == page, and when the page template == “Gallery Page”

Take a look at the image bellow to see the complete ACF.

 

3. Create a Page and add some Images

Our last step is to create a new page and select the Gallery template. After you publish the page, you will see the gallery image fields we created in step 2. Below is a screenshot of my edit screen.

 

4. That’s it!

Expecting more code? Sorry to disappoint, but creating an image gallery is actually quite simple with the Advanced Custom Fields Plugin! Here’s a look at my Gallery Slider after some basic CSS.

 

Thank you for reading

Join in the discussion bellow by tweeting about this post.

jamblo

8 Aug 2011

Do you have a demo available?

Following your instructions to the letter ends up without thumbnails, just pager numbers.

Shae

8 Aug 2011

Great Tutorial Elliot! Thanks for taking the time to write it.

Ivo

9 Sep 2011

Hi Elliot, How are you?
Im interested in buying this addon (repeater) for ACF but i dont know where to register so that i can make the last step in checkout in your site.

Best Regards,
IvoPereira

Dom

9 Sep 2011

Is there a way to re-order the fields on the edit page? Drag and drop?
This is function that is needed especially if we use this plugin for a slider.

Exemple :
I have 3 pictures on the slider, then I want to swop the picture 2 with the picture 1.. Is that possible?

Thanks

MAC

9 Sep 2011

It would be wise to include a single tutorial that does not require purchasing unlock codes to follow it.

Tracy

9 Sep 2011

Bought the repeater addon – and followed your tutorial – but I am just getting page numbers – this is very frustrating – looked on your support forum and I can not find a solution to this problem.

Julian

9 Sep 2011

Great tutorial and a mind-bending plugin. I’ve used the Repeater to create an image gallery for a client that works inline, that is, can be part of a post. Using WP generated thumbnails of each master image is easy but this client wanted to specify their own thumbnails (so they could use an icon that, when hovered, loaded and displayed a more detailed image).

The basic idea I’ve used is to have two repeaters — one for thumbs and one for masters. I’ve left it up to the admin to make sure they get the ordering correct: masters[0] is paired with thumbs[0] etc.

I got it to work pretty easily thanks to some clean code on your part, but it uses undocumented parts of the API (namely $repeater_row_count):


//we use a simple convention for pairing up master images with their thumbs:
// 2 repeaters, one for thumbs and one for masters. They need to be in
// corresponding order, because thumbs[0] will be paired with masters[0] etc
global $repeater_row_count;
$masters_js = ' var image_gallery_masters = [';
while (the_repeater_field('image_gallery_masters')){
$master_attachment_id = get_sub_field('image_master');
$master_title = get_sub_field('title');
$master_alt = get_sub_field('alt');
$master = wp_get_attachment_image_src($master_attachment_id, 'full');

$thumbs = get_field('image_gallery_thumbs');
if (!isset($thumbs[$repeater_row_count - 1])) {
//just use thumbsize version of $master
$thumb = wp_get_attachment_image_src($master_attachment_id, 'thumbnail');
} else {
//repeater_row_count is incremented by calling the_repeater_field(), so
//we use repeater_row_count - 1 here to get the corresponding master image
$thumb_attachment_id = get_sub_field('image_thumb', $thumbs[$repeater_row_count - 1]);
$thumb = wp_get_attachment_image_src($thumb_attachment_id, 'full');
}

$thumbs_html .= "";
if ($repeater_row_count > 1) {
$masters_js .= ',';
}

$masters_js .= "{url: '$master[0]', title: '$master_title', alt: '$master_alt'}";
}

//the empty div #gallery-masters will hold lazy-loaded master images
$thumbs_html = ''. $thumbs_html .'';
$masters_js .= '];';
echo ''. $thumbs_html .'';
echo $masters_js;

Then there’s some jQuery glue to bind a hover event to each thumb and lazy-load the corresponding master.

Just thought this might be helpful to someone out there. I also wondered if you have any plans afoot for the Repeater that might be incompatible with what I’ve done so far (since as I mentioned, I’m relying on how your code works internally).

Anyway, cheers for a great WordPress enhancement.

Jules

Julian

9 Sep 2011

Darn, indentation fail.

Julian

9 Sep 2011

Oh, and loss of generated html inside those PHP blocks.

For nice version, see here http://codetidy.com/1201/

Andrew

10 Oct 2011

I can’t figure out how to get the thumbnails working either?

Andrew

10 Oct 2011

Now.. How would I do this with http://jacklmoore.com/colorbox/ jQuery ColorBox?

I’d love to make a gallery, with a lightbox? I’m also using a custom post type to display a thumbnail, when the thumbnail is clicked it will display all the photos that were loaded for this post type..

thoughts?

I’m using the repeater field for the photos, and fix single image upload field for the thumbnail button which triggers the lightbox…

Roham G

11 Nov 2011

I also have this issue, I want to create a lightbox-based gallery using this method.. Willing to pay for implementation.

Kelly Packer

11 Nov 2011

Is there any way to grab the height and width of the image? Thanks.

Kelly Packer

11 Nov 2011

Nevermind I found figured it out:

$image = get_field(‘big_image’);
list($width, $height, $type, $attr) = getimagesize($image);
<img src="” width=”” height=”” alt=”” />

Babs

11 Nov 2011

I’m trying to combine this tutorial:

http://wp.tutsplus.com/tutorials/create-a-responsive-slider-plugin-with-flexslider/

with this one in creating the flex slider plugin but I can’t seem to get it to work seeing how I’m really horrible at coding. Here is my code that I put into a plugin –


function efs_get_slider(){

global $post;
$thePostID = $post->ID;

$slider= '
';

$efs_query= "post_type=slider-image";
query_posts($efs_query);

//if (have_posts()) : while (have_posts()) : the_post();
if(get_field('images')): while(the_repeater_field('images')):

$img= wp_get_attachment_image_src(get_sub_field('image'), $thePostID, 'large' );

$slider.='';

endwhile; endif; wp_reset_query();

$slider.= '
';

return $slider;
}

Any Help at all would be greatly appreciated.

Mark

11 Nov 2011

Hi There.

Is there any way that this plugin can enable clients to bulk upload images to fields instead of one by one. My client would like to be able to add maybe more than 30 images at one time.

Is this out of the realms of ACF?

Thanks,
Mark

Jeroen Opsteyn

11 Nov 2011

Hey,

Thanks for the great tutorial. But I have a problem with uploading the images. I get the popup like when you make a gallery for a page but I can’t figure out how to get my uploaded image in the repeater field.

Thanks in advance

Jeroen

dbomb

12 Dec 2011

Make sure you have you subfield set to ‘Attachment ID’ format (‘images’ in this example), I had mine set to ‘Image’ and was scratching my head for a while about how this was meant to work with wp_get_attachment_image_src()

Derp.

andrew

12 Dec 2011

can i create a download area instead the image gallery?
i need to create a custom field where i can upload more than one file…is it possible???

thanks great plug in

Py

12 Dec 2011

Thanks for this tut!

Is it possible to upload several images in one time?

Jens Törnell

4 Apr 2012

Great plugin! However it’s not that great (yet) to build galleries.

Let’s say I only want to build a very simple gallery by adding images with “Repeater field” or “Flexible Content”. The images ids are enough for me to get the information I need (with the id I can get the image titile, description and so on).

THE PROBLEM: If I have 66 images, every image uses one row, even where there are space to fit 4 in a row.

THE FEATURE REQUEST: Add a choice to only use the space it field needs, not the whole row. Might not be as easy as it seems but would be great for building galleries.

I made 2 companies bought your software and are probably going to do it myself soon. Make us happy!

Thanks again

Join in the discussion by tweeting about this post.