-1

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

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.

  • Thanks @Stephen S. I created a custom taxonomy instead and called it image_category. I have managed to get those to echo out in a list but now need to get them to echo as a class for each image div. Any thoughts here would be greatly appreciated. – Ernie Oct 23 '15 at 2:12
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.