Taxonomy Images

<?php
/**
 * The template for displaying archive pages.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package studio-pi
 */

get_header(); ?>
    <div class="container-fluid">
        <div class="row">
            <div id="primary" class="content-area">
                <main id="main" class="site-main row" role="main">
                    <header class="archive-header">
                        <h1 class="archive-title">Products <?php single_cat_title(); ?> </h1>
                    </header>

                    <?php if ( have_posts() ) :  while ( have_posts() ) : the_post(); ?>
                        <div class="col-sm-12 col-md-3">
                            <?php
                                $terms = get_the_terms( get_the_ID(), 'department' );
                                foreach ( $terms as $term ) {
                                    $file = get_term_meta( $term->term_id, '_cmb2_term_dept_img', true );

                                        echo '<a href="/department/' . $term->slug . '">' . $term->name . '</a>';
                                        echo '<div style="border:1px solid blue;">';
                                            echo '<img src="';
                                                echo esc_attr($file);
                                            echo '" class="dept-img">';
                                        echo '</div>';
                                }
                                    echo "</div>";// closes .col-sm-12 and .col-md-3 div

                            ?>
                    <?php endwhile; else : ?>
                            <p><?php _e( 'Sorry, no posts in this department.' ); ?></p>
                    <?php endif; ?>

                </main><!-- #main -->
            </div><!-- #primary -->
        </div>
    </div>
<?php get_footer(); ?>