A simple dynamic gallery with the Advanced Custom Fields plugin without the repeater add-on


UPDATE May 2013: Just bought the Repeater Field Add-On, it’s fantastic! Stop being cheap and buy the thing already.

I first want to say that you can save a lot of time by getting the Repeater Field Add-On and this guy deserves every penny that he makes. The Advanced Custom Fields WordPress plugin is fantastic.  This plugin could have saved tons of time on past products.

You don’t want to shell out the cash for the repeater plugin for whatever reason, but you want a gallery that is kinda dynamic with some simple upload fields. Try something like this:

This post requires knowledge of PHP, WordPress and the ACF plugin and is geared for developers. I’m not going to go into super detail.

Create some image fields and give them the names: image_1, image_2, image_3, etc. You can use something other than image, just remember it change it in the loop below.

In your template do a loop and grab the images based on the naming structure you gave it.

$images = array();
 for($x=1;$x<=25;$x++)
 {
   $img = get_field('image_' . $x);
   if($img)
   {
     $images[] = $img;
   }
   else
   {
     break;
   }
 }

Explanation of the code above

We create an array to hold our images. We loop 25 times, this can be adjusted to something higher if you like. Once we stop finding images we break the loop. If we find an image we add it to the array.
Now in your template where you want your gallery to be add the following code:

<div id="rotator">
<?php foreach($images as $image) { ?>
  <img src="<?php echo $image ?>">
<?php } ?>
</div>

If you want extra help adding the gallery. Grab the jQuery Cycle plugin and add it to the page. Use the following line to get your gallery rotating.

<script>jQuery(document).ready(function() { jQuery('#rotator').cycle({ fx: 'fade' }); });</script>

That’s it.