How To Loop Through <li> list with Custom Post Types

Question

Please excuse me for being ignorant. I am currently trying to learn more about PHP and WordPress. This is my first time to post a question on StackExchange.

I found a jQuery plugin for a simple Bootstrap gallery, and I like it. I am trying to make it dynamic so that I can add photos to it using Custom Post Types. I have read the 'The Loop' and 'The Loop In Action' documentation on WordPress.org, as well as scoured the web looking for my answer.

When I press 'next' on my gallery, it skips every other photo. It worked fine before I tried to make it dynamic. A regular <li> of photos works fine.

I am trying to use the_post_thumbnail(); as the photo for the gallery.

What am I doing wrong here:

  <ul class="row no-gutters">
  <?php $loop = new WP_Query( array( 'post_type' => 'photography', 'orderby' => 'post_id', 'order' => 'ASC' ) ); ?>
  <?php while( $loop->have_posts() ) : $loop->the_post(); ?>
    <li id="changeJS" class="col-lg-3 col-md-3 col-sm-4 col-xs-6 gal-list thumbnail">
      <?php the_post_thumbnail(); ?>
    </li>
  <?php endwhile; wp_reset_query(); ?>
  </ul>

If it would help to see my site, it's at: techpresswebdesign.com. If I can't get this to work, I will need to make it a regular static list of photos soon. For what I know, I may be approaching this simple problem completely wrong.

I appreciate your time.

Answer 1

Maybe this could be useful.

I used it on my own site to display a list of thumbnails.

 <?php  
    // check if there's a thumbnail
   if ( has_post_thumbnail($post->ID)) {

     //show thumbnail
     echo 'get_the_post_thumbnail($post->ID, 'thumbnail' , array('class' => "img-responsive yourClass"));

   } else { 
     //show another image if there's not a thumb 
     echo '<img class="img-responsive" src="'.get_template_directory_uri().'/MISSING-PHOTOS.jpg">';

    }

   ?>

Hope can help you.