WordPress: Get Post Thumbnail Outside of Loop

3 Views

I am trying to get the post thumbnail image for my carousel thumbnail indicators which are outside of the loop.

Currently it’s setup with image placeholders but I need each thumb to represent the currently selected post.

 <?php 
    $items = new WP_Query(array(
            'post__in' => get_option('sticky_posts'),
            'caller_get_posts' => 1,
    'posts_per_page' => 10,
    'meta_key' => '_thumbnail_id'
    ));
    $count = $items->found_posts;
    ?>
              <div id="myCarousel" class="carousel slide" data-ride="carousel"> 

                <!-- Wrapper for slides -->
                <div class="carousel-inner">
                  <?php 
            $ctr = 0;
            while ( $items->have_posts() ) :
              $items->the_post();
              $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
              $custom = get_post_custom($post->ID);
              $link = $custom["more-link"][0];
              $class = $ctr == 0 ? ' active' : '';
            ?>
                  <div class="item<?php echo $class; ?>" id="<? the_ID(); ?>">
                    <?php the_post_thumbnail( 'full', array (
                    'class' => 'img-responsive'
                    )); ?>
                    <div class="carousel-caption">
                      <h3><a href="<?php the_permalink(); ?>">
                        <?php the_title(); ?>
                        </a></h3>
                    </div>
                  </div>
                  <!-- End Item -->

                  <?php $ctr++; 
            endwhile;  ?>
                </div>
                <!-- End Carousel Inner -->

                <div class="thumbs">
                  <div class="row">
                    <div class="col-md-2 active item" data-target="#myCarousel" data-slide-to="0"><a href="#"><img src="http://placehold.it/1200x440/999999/cccccc" class="img-responsive"></a></div>
                    <?php for($num = 1; $num < $count; $num++){ ?>
                    <div class="col-md-2 item" data-target="#myCarousel" data-slide-to="<?php echo $num; ?>"><a href="#"><img src="http://placehold.it/1200x440/999999/cccccc" class="img-responsive"></a></div>
                    <?php } ?>
                  </div>
                </div>
              </div>
              <!-- End Carousel -->
Post Views: 3

Related posts

Leave a Reply

1 comment

  1. Instead of:

    <?php for($num = 1; $num < $count; $num++){ ?>
    <div class="col-md-2 item" data-target="#myCarousel" data-slide-to="<?php echo $num; ?>">
        <a href="#">
            <img src="http://placehold.it/1200x440/999999/cccccc" class="img-responsive">
        </a>
    </div>
<?php } ?>

    try using:

    <?php $counter2 = 0; ?>
<?php while ( $items->have_posts() ) : $items->the_post(); ?>
    <?php $counter2++; ?>
    <div class="col-md-2 item <?php echo $counter2 == 1 ? 'active' : ''; ?>" data-target="#myCarousel" data-slide-to="<?php echo $counter2; ?>">
        <a href="#">
            <?php
            the_post_thumbnail('thumbnail', array(
                'class' => 'img-responsive'
            ));
            ?>
        </a>
    </div>
<?php endwhile; ?>

    This will display it with your markup, but with a thumbnail image instead of the placeholder.