Magnific Popup issue with mixitup dynamic images

Question

i just setup isotope manually into my website after that i dynamic it with the help of get_terms and get_ther_terms condition here is the full code

     <div class="main_page">

<div class="portfolio_section">

          <div class="controls">
       <button type="button" class="control" data-filter="all">All</button>

        <?php

          $cat_list = get_terms('filters');

          foreach ($cat_list as $cat) :
          ?>
    <button type="button" class="control" data-filter=".<?php echo $cat->slug;?>"><?php echo $cat->name; ?></button>


      <?php endforeach; ?>


     </div>

   <div class="container pasresnt">

     <?php
         $mixitup = new WP_Query(array(
             'post_type' => 'portfolio',
             'posts_per_page' => -1,
         ));

     ?>
   
        <?php while ($mixitup->have_posts()) : $mixitup->the_post() ; ?>

<div class="mix <?php

           $cat_slug = get_the_terms($post->ID, 'filters');
           foreach ($cat_slug as $cat_sl) {
            echo $cat_sl->slug;
           }

           ?>">



            <a href="<?php the_post_thumbnail('portfolio-small'); ?>" target="_blank"><?php the_post_thumbnail('portfolio-small'); ?> </a>


         </div>

 <?php endwhile; ?>
         <div class="mix green">

      <a href="<?php echo get_template_directory_uri(); ?>/img/mahi.jpg"><img src="<?php echo get_template_directory_uri(); ?>/img/mahi.jpg"

alt=""></a>

</div>

</div>
 </div>

 </div>

Here is the highlights in normal static image popup come correctly with this code

 <a href="<?php echo get_template_directory_uri(); ?>/img/mahi.jpg"><img src="<?php echo get_template_directory_uri(); ?>/img/mahi.jpg"

alt=""></a>

but in dynamic this images popup doesn't work for me .the last static one is as example which is work perfectly but this line code which is the images come from portfolio custom post options this pop up not working

<a href="<?php echo $for_img; ?>" target="_blank"><?php the_post_thumbnail('portfolio-small'); ?> </a>

`

Answer 1

You are using the_post_thumbnail for the href. That outputs the html to display the image, but you only want the URL to put into the href attribute of your link, so use get_the_post_thumbnail_url() instead.

So instead of this:

<a href="<?php the_post_thumbnail('portfolio-small'); ?>" target="_blank"><?php the_post_thumbnail('portfolio-small'); ?> </a>

You should use this:

<a href="<?php echo get_the_post_thumbnail_url(get_the_ID(), 'portfolio-small'); ?>" target="_blank">
    <?php the_post_thumbnail('portfolio-small'); ?>
</a>