Creating an Image Gallery with Advanced Custom Fields { Elliot Condon

Written July 27, 2011.
Tagged #Advanced Custom Fields, #wordpress

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.

<?php

/**
 * Template Name: Gallery Page
 */

get_header(); ?>

<?php the_post(); ?>
	
	<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/inc/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
	<script src="<?php bloginfo('template_url'); ?>/inc/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
	<script type="text/javascript">
	(function($){
		$(window).load(function() {
		    $('#slider').nivoSlider();
		});
	})(jQuery);
	</script>

<?php if(get_field('images')): ?>
	<div id="slider">
		<?php while(the_repeater_field('images')): ?>
			<?php $image = wp_get_attachment_image_src(get_sub_field('image'), 'full'); ?>
			<?php $thumb = wp_get_attachment_image_src(get_sub_field('image'), 'thumbnail'); ?>
	    	<img src="<?php echo $image[0]; ?>" alt="<?php  the_sub_field('title');?>" rel="<?php echo $thumb[0]; ?>" />
	    <?php endwhile; ?>
	</div>
	<?php endif; ?>

<?php get_footer(); ?>

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.

Elliot Condon is a Melbourne based web developer, creator of the popular Advanced Custom Fields WordPress plugin and many other websites and web-apps.

Thank you for reading

Join in the discussion bellow by tweeting about this post. 21 comments

jamblo

Do you have a demo available?

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

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

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

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

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

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

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

Darn, indentation fail.
Julian

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

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

Andrew

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

Andrew

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

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

Kelly Packer

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

Nevermind I found figured it out:

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

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

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

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

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

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

Thanks for this tut!

Is it possible to upload several images in one time?
Jens Törnell

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!