Integrate Advanced Custom Fields Gallery field into existing themes and slider plugins easily

If you are using ACF Gallery fields, there’s a quick trick to showing them to the end users by utilizing the existing [gallery] shortcode, which most themes have great support for.

If your field name is “gallery_field”, use this function in your theme where you want to display the gallery:

if(get_field('gallery_field') !== '')
{
    $gallery_items_string = '';
    foreach(get_field('gallery_field') as $gallery_item)
        $gallery_items_string .= $gallery_item['id'] . ',';

    echo do_shortcode('[gallery link="file" columns="4" ids="'. $gallery_items_string .'"]');
}

Bonus – Integration with slider plugins:

Now that we’ve integrated with the shortcode, let’s move on to sliders! Below we have an example of an Owl Carousel integration, provided by by Corbin from Commandbase!

$images = get_field('portfolio_gallery');

if( $images ): ?>
    <ul class="portfolio-slider">
        <?php foreach( $images as $image ): ?>
            <li>
                <img src="<?php echo $image['sizes']['large']; ?>" alt="<?php echo $image['alt']; ?>" />
            </li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>

5 thoughts on “Integrate Advanced Custom Fields Gallery field into existing themes and slider plugins easily

  1. Corbin

    I’ve been using the ACF gallery field quite a bit lately for little slider sections. I typically integrate it with Owl Carousel and use something like below:

    Code moved to post.

    It’s been a lifesaver for when clients are requesting things like business listings with images of the business, or for singular portfolio pages. Going to save your snippet though for when I need a standard gallery layout. I heard WordPress 4.0 has some updates to the default gallery.

    Reply
    1. Stanislav Khromov Post author

      Hey Corbin,

      Thanks, great snippet!

      Code in comments doesn’t seem to work properly right now but I’ll check on in asap.
      I pasted your original snippet into the main post, I hope that’s OK with you?

      Cheers! /Stanislav

      Reply
  2. Pingback: Display Advanced Custom FieldsGallery into Justified Image Grid - SIMPLESNIPS.COM

Leave a Reply

Your email address will not be published. Required fields are marked *

Markdown is allowed in comments.