Avoid pulling custom post type thumbnail to header image Wordpress

Question

I tried to google the solution and trying use PHP and JS with NO luck, so I need Wordpress expert help.

The question with one of the site work for a client, the problem I have is with custom post type.

One of the templates will grab the one of my last customs post type of thumbnail image to be the page header image.
If I remove my custom post type loop in the template, then feature image will be back to default WP page feature image. (<---This is what I want)

How can I avoid the header section pulling from my custom post type thumbnail?

Worpdress version: 4.8

————-Here’s the code how the header image shows up ———-

footer.php

</div>
    <?php 
    if(is_category()):
        $cat_id=get_cat_id(single_cat_title('',false));
        $img=get_option("taxonomy_".$cat_id);
        $url=$img['img'];
        else:
        global $post;
        $post_id = $post->ID; 
        if(has_post_thumbnail($post_id)):
            $url=wp_get_attachment_url(get_post_thumbnail_id($post_id));
        else:
            $url=get_template_directory_uri().'/img/banner.jpg';
        endif;
    endif;
        ?>

<script>
    $(function() {
      $.vegas({
        src:'<?php echo $url;?>' , fade:500, 
      });
      $.vegas('overlay', {
        src:'<?php bloginfo('template_directory');?>/img/06.png'
      });
      $('.carousel').carousel()
    });
    </script>

AND here's the template custom post type loop

if I remove this loop, then default page feature image for header will show.

template.php

  <div id=”test”>
  <?php
  $args=array(‘post_type’=>’services’,’meta_key’=>’level’,’orderby’=>’meta_value_num’,’order’=>’ASC’);
  $query=new WP_Query($args);
  while($query->have_posts()): $query->the_post();
  ?>
   <a href=”<?php the_permalink();?>”>
    <div class=”col-md-4 col our-services-page”>
     <?php $font=get_post_meta(get_the_ID(),’_font_image’,false);?>
     <span class=”icn <?php echo $font;?>”></span>
      <div id=”overly”>
         <?php the_post_thumbnail(‘medium’); ?>
         <?php echo get_field(‘excerpt’, get_the_ID());?>
     </div>
    <h3><?php the_title();?></h3>
   </div>
  </a>
  <?php
  endwhile;
  ?>
  </div>

Here's what I tried but not working

1. I use jquery to target that page id and img element to replace the image, I add it in end of template just try to test out first, not working, but working chrome console.

2. I change footer.php the if else statement, but all the header image won't show.

   if(is_category()):
   $cat_id=get_cat_id(single_cat_title('',false));
   $img=get_option("taxonomy_".$cat_id);
   $url=$img['img'];
   else:
   global $post;
   $post_id = $post->ID; 
   if(has_post_thumbnail($post_id)):        
   $url=wp_get_attachment_url(get_post_thumbnail_id($post_id));
   
   /*code I add target page id*/
   elseif(is_page(886)):
   $url=get_template_directory_uri().'/img/banner.jpg';
   /* end of code I add*/
   
   else:
   $url=get_template_directory_uri().'/img/banner.jpg';
   endif;
   endif;
   ?>
   

Thanks for the help.

Answer 1

Thanks for @Sally CJ helps, I added

<?php wp_reset_query(); ?>

after endwhile loop, and my issue is gone. Can check the documentation here.