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

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; ?

Topic filters media categories gallery Wordpress

Category Web


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.


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.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.