Documentation

On this page

  • Category: Field Types
  • Written: July 11, 2012
  • Updated: July 11, 2012

« Back to docs

Gallery

The Gallery field creates a simple and intuitive interface for managing a collection of images. The interface features 2 views:

  1. Grid: a tiled view of all images – easy to reorder and scan large quantities
  2. List: a table like view showing the image’s data – easy to find / edit titles, captions, etc

Creating a Gallery field

The Gallery field contains options to customize your field:

  • Preview size: Select the image size that the grid view will use to display images. (the list view has a maximum width applied to all images). Please use a cropped image size such as thumbnail, otherwise your grid may look broken due to floating different sized images.

Edit screen

The gallery field will load all images into the grid view

The gird view provides a fast way to reorder, edit and remove your images

You can launch the image editor popup by clicking on the edit (pencil) button.

Changing the view to “List” shows more data for each image (Title, Alternate Text, Caption & Description). This view is useful to find any images missing data or for scanning over all the image’s data.

When in either the List or Grid view, all functionality remains ( Edit, Remove, Add, Reorder )

Template usage

The API will return a multi-dimentional array containing all the images and all the images data + all size urls. For each image, here is the format of data it holds.

Array
(
    [id] => 540
    [alt] => A Movie
    [title] => Movie Poster: UP
    [caption] => sweet image
    [description] => a man and a baloon
    [url] => http://localhost:8888/acf/wp-content/uploads/2012/05/up.jpg
    [sizes] => Array
        (
            [thumbnail] => http://localhost:8888/acf/wp-content/uploads/2012/05/up-150x150.jpg
            [medium] => http://localhost:8888/acf/wp-content/uploads/2012/05/up-300x119.jpg
            [large] => http://localhost:8888/acf/wp-content/uploads/2012/05/up.jpg
            [post-thumbnail] => http://localhost:8888/acf/wp-content/uploads/2012/05/up.jpg
            [large-feature] => http://localhost:8888/acf/wp-content/uploads/2012/05/up.jpg
            [small-feature] => http://localhost:8888/acf/wp-content/uploads/2012/05/up-500x199.jpg
        )
 
)

Bellow are some code examples for using the gallery field

<?php
 
/*
*  View array data (for debugging)
*/
 
var_dump( get_field('gallery') );
 
/*
*  Create the Markup for a slider
*  This example will create the Markup for Flexslider (http://www.woothemes.com/flexslider/)
*/
 
$images = get_field('gallery');
 
if( $images ): ?>
    <div id="slider" class="flexslider">
        <ul class="slides">
            <?php foreach( $images as $image ): ?>
                <li>
                    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
                    <p class="flex-caption"><?php echo $image['caption']; ?></p>
                </li>
            <?php endforeach; ?>
        </ul>
    </div>
    <?php
 
    /*
    *  The following code creates the thumbnail navigation
    */
 
    ?>
    <div id="carousel" class="flexslider">
        <ul class="slides">
            <?php foreach( $images as $image ): ?>
                <li>
                    <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
                </li>
            <?php endforeach; ?>
        </ul>
    </div>
<?php endif; 
 
?>

Related Docs

get_field()

Returns the value of the specified field

Learn More »