single-galleries.php

/*
- I have a CPT named Galleries and within this CPT there are 6 individual galleries, all using the same format.
- I have used the Enhanced Media Library plugin to allow a category(ies) to be added each image uploaded.
- single-galleries.php - is a template used for displaying each of these individual galleries.
- Each individual gallery has aprox 4 categories in use that are assigned to the different images.
- There are aprox 24 categories for all of the images across the 6 individual galleries(1-2 per image)

Problem: code for "gallery-filter" below is currently echoing out ALL(~24) media categores.

Solution needed: for only those categories acutally used on the page (rememeber 6 diff galleries)
to be echoed out in the gallery-filter for each individual gallery page.

*/

<?php

/*
    Template Name: (Single)Galleries Page
*/

 ?>

<?php get_header(); ?>


<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

    <h1 class = "page-title"><?php the_title(); ?></h1>

        <!--add introduction from the content editor on each post-->
        <div class="gallery-intro">

                <?php the_content(); ?>

        </div> <!-- /gallery-intro -->

<!--output categories assigned to each photo via Enhanced Media Categories plugin. -->
<!--Problem: showing all galleries for all images, not just those for individual gallery-->
    <div class="gallery-filter">
        <ul id="filters">
            <li><a href="#" data-filter="*" class="active">All</a></li>
            <?php
                $images = get_field('images');
                $image_terms = array();
                $all_used_terms = array();
                foreach( $images as $image ) {
                    $image_terms = wp_get_object_terms($image['ID'], 'media_category');
                    $all_used_terms = array_unique( array_merge( $all_used_terms, $image_terms ) );
                }
                foreach ( $all_used_terms as $term ) {
                    echo "<li><a href='#' $term->term_id class = '' data-filter='.".$term->slug."'>" . $term->name . "</a></li>\n";
                }
            ?>
        </ul>
    </div><!-- /gallery-filter -->


    <!--loop over all images available for post -->
    <!--Images are part of an ACF Gallery-->
    <div class="wrapper-gallery" itemscope itemtype="http://schema.org/ImageGallery">
        <?php
        // $images = get_field('images'); don't need this anymore as you already defined it above

        if( $images ) : ?>
            <?php foreach( $images as $image ) :
                $terms = wp_get_object_terms($image['ID'], 'media_category');
              ?>

            <!--echo out the tagged category as a class-->
                <div class="gallery-image <?php if($terms) { foreach ($terms as $term) { echo $term->slug . ' ';}}?>"
                data-catagory="<?php if($terms) { foreach ($terms as $term) { echo $term->slug . ' ';}} ?>">

                  <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 class="" 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; ?>


    <?php next_post_link('%link', '<i class="fa fa-long-arrow-left"></i>'); ?>

    <a href="<?php bloginfo('url'); ?>/?p=44"><i class="fa fa-th-large"></i></a>

    <?php previous_post_link ('%link', '<i class="fa fa-long-arrow-right"></i>'); ?>


</div> <!-- gallery-wrapper -->
<?php endwhile; ?>

<?php get_footer(); ?>