<?php
/**
 *  The default template for displaying portfolio content in the loop
 *
 *
 * @package Felicityhealth
 * @since Felicityhealth 1.0
 */
?>

<?php //$category_detail=get_the_category($post->ID);  echo '<pre>'; print_r($category_detail)?>



<?php 
global $post;
$terms = wp_get_post_terms($post->ID, 'portfolio_category');
if ($terms) {
    $output = array();
    foreach ($terms as $term) {
        // $output[] = '<a>slug." href="'.get_term_link( $term->slug, 'portfolio_category') .'">' .$term->name .'</a>';
        $output[] = $term->slug;
    }
   $match_classes =  join( ' ', $output );
}
?>

<div class="col-12 col-md-6 col-lg-3 col-md mb-5  grid-item <?= $match_classes ?>">
    <a href="<?= esc_url( get_permalink() )?>">
        <div class="card border-0">
            <?php if ( has_post_thumbnail() ): // check if the post has a Post Thumbnail assigned to it.?>
            <?php 
            /* <div class="zulu-post-thumbnail">
                <a href="<?= esc_url( get_permalink() )?>">
            <?php 
                                  echo get_the_post_thumbnail($post->ID, '', array('title' => the_title_attribute( array( 'echo' => 0 ) ), 'alt' => the_title_attribute( array( 'echo' => 0 ) )));
                                  ?>
            <div class="zulu-image-overlay"></div>
    </a>
</div>
*/?>
<a href="<?= esc_url( get_permalink() )?>">
    <div class="zulu-post-thumbnail"
        style="background-image:url('<?= $featured_img_url = get_the_post_thumbnail_url($post->ID, 'full'); ?>')">
        <div class="zulu-image-overlay"></div>
    </div>
</a>

<div class="card-body pl-0 pt-0">
    <a href="<?= esc_url( get_permalink() )?>">
        <h5 class="font-weight-bold media-titles"><?php the_title(); ?></h5>
    </a>
</div>
<?php else:?>
<div class="zulu-post-thumbnail mb-0">
    <a href="<?= esc_url( get_permalink() )?>">
        <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg"
            role="img" aria-label="Placeholder: <?php the_title(); ?>">
            <title><?php the_title(); ?></title>
            <rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef"
                dy=".3em"><?php the_title(); ?></text>
        </svg>
        <div class="zulu-image-overlay"></div>
    </a>
</div>
<div class="card-body py-3 pl-0 pt-0">
    <a href="<?= esc_url( get_permalink() )?>">
        <h5 class="font-weight-bold media-titles"><?php the_title(); ?></h5>
    </a>

</div>
<?php endif?>


</div>
</a>
</div>