ACF Gallery with Media Categories - how do display categories and sort

Question

I would like to use something to filter images within an ACF Gallery. I have added the Enhanced Media Gallery Plugin which will allow me to assign a category to each image, but am not not clear on how to echo out that category list so it can be clicked and filter/display images in the category chosen.

Additionally, how would I echo the category assigned to the image in the div surrounding the image

My loop currently looks like this to output my gallery.

I would be grateful for any advice on the best way to assign categories to each image in my gallery (is a plugin best here?) and also how to grab those categories and sort. Thanks in Advance!

<div class="wrapper-gallery" itemscope itemtype="http://schema.org/ImageGallery">
    <?php 

    $images = get_field('images');

    if( $images ): ?>

        <?php foreach( $images as $image ): ?>

            <div class="gallery-image" id="imageGallery">

                <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">

                    <a href="<?php echo $image['url']; ?>" itemprop="contentUrl" data-size="<?php echo $image['width'] . 'x' . $image['height']; ?>">
                        <img src="<?php echo $image['sizes']['large']; ?>" itemprop="thumbnail" alt="<?php echo $image['alt']; ?>" />
                    </a>
                    <figcaption itemprop="caption description"><?php echo $image['caption']; ?></figcaption>

              </figure>
        </div>  

        <?php endforeach; ?>

    <?php endif; ?>

Answer 1

If you know the taxonomy name the plugin uses, you should be able to use the_terms pretty easily. You could basically plop this in between <?php foreach( $images as $image ): ?> and <?php endforeach; ?> where you want the terms to be displayed:

<?php the_terms($image->ID, 'YOUR_TAXONOMY_NAME'); ?>

If you want to get fancy, you could use get_the_terms which offers you a bit more control over how things are displayed.

Answer 2

Half solved:

I opted to make my own custom taxonomy following this tutorial. http://code.tutsplus.com/articles/applying-categories-tags-and-custom-taxonomies-to-media-attachments--wp-32319 It allows the option to create a custom category to your uploaded media files. In my case I made a new one called "image_category"

Then those categories are echoed out using this:

<div class="gallery-filter">        
    <ul id="filters">
        <li><a href="#" data-filter="*" class="selected">All</a></li>
        <?php 
            $terms = get_terms('image_category' ); // get all categories, but you can use any taxonomy
            $count = count($terms); //How many are they?
            if ( $count > 0 ){  //If there are more than 0 terms
                foreach ( $terms as $term ) {  //for each term:
                    echo "<li><a href='#' data-filter='.".$term->slug."'>" . $term->name . "</a></li>\n";
                    //create a list item with the current term slug for sorting, and name for label
                }
            } 
        ?>
    </ul>
    </div>

I am still completely lost as to how to get those categories to echo out as a class.