Get Post Thumbnail Outside of Loop

I am trying to get the post thumbnail image for each accordion or show accordion post thumbnail outside of the loop.

Currently, it's setup with image empty but I need each thumb to represent the currently on click accordion.

can you add jquery when each accordion click function should add a class on the <div class=" image active"> according to post id on the accordion?

Problem Now is that jquery function is not add active class to the <div class="image"> after cick on each accordion?

Jquery

     $('.heading-accordion  .top').on('click', function () {

        var $question = $(this).closest('.heading-accordion ');

        $('.heading-accordion.open').not($question).each(function () {
            var $this = $(this);
            $this.removeClass('open');
            $this.find('.bottom').slideUp();
        });

        if ($question.hasClass('open')) {
            $question.removeClass('open');
            $question.find('.bottom').slideUp();
        } else {
            $question.find('.bottom').slideDown(function () {
                $question.addClass('open');
            });
        }

    });


    $('.change-image').on('click', function () {

        var targetImage = parseInt($(this).attr('data-image'));

        $('.image-wrapper .image.active').removeClass('active');
        $($('.image-wrapper .image').get(targetImage)).addClass('active');
    });

    $('.accordion-steps .change-image').on('click', function () {

        var targetImage = parseInt($(this).attr('data-image'));


        $('.accordion-steps .image-wrapper .image.active').removeClass('active');
        $($('.accordion-steps .image-wrapper .image').get(targetImage)).addClass('active');
    });

Html and Wordpress Code

 <section class="steps accordion-steps">
       <div class="row">
          <?php
             $posts_counter = 0;
             $dataimg = '';
             $open = 0;
             $args    = array(
              'post_type' => 'servicesaccordion',     
             'orderby' => 'id',
             'order' => 'DESC',        
              'post_status' => 'publish' 
             );
             $myposts = new WP_Query( $args );
             ?>
          <?php
             if ($myposts->have_posts() ) { 
             echo ' <div class="small-12 medium-7 large-5 column steps-wrapper e-in">';
                $i = 0;
                // Always start the list with a div.row 

                /* Start the Loop */
                while ($myposts ->have_posts() ) {
                    $myposts ->the_post();     
                $i++;   
             $dataimg++;
             $open++;
                ?>
          <div>
             <div class="heading-accordion <?php if($open == 1){echo 'open';} ?> delay-<?php echo $i ?> change-image" data-image="<?php echo $dataimg ?>" data-id="<?php echo get_the_ID();?>">
                <div class="top">
                   <div class="deco-wrapper">
                      <div class="inner-wrapper"></div>
                   </div>
                   <?php the_title();?>
                </div>
                <div class="bottom" <?php if($open == 1){echo 'style="display: block;"';} ?>
                <div class="inner-wrapper">
                   <p><?php the_content();?></p>
                </div>
             </div>
          </div>
          <?php
          $images_html_array[] = get_the_ID();
          } // end of the while() loop
          wp_reset_postdata();
          echo '
       </div>
       ';
       echo '
       <div class="small-12 medium-5 column">
          <div class="image-wrapper e-in">
             <div class="image active">
                <!--Post Iamge Will  Show Herre According To The Posts-->
                <img class="lazy" data-src="" alt="" />
             </div>
             <div class="image">
                <!--Post Iamge Will  Show Herre According To The Posts-->
                <img class="lazy" data-src="" alt="" />
             </div>
          </div>
       </div>
       ';
       </div>
       </div>
    </section>

I am trying to get the post thumbnail image for each accordion or show accordion post thumbnail outside of the loop.

Currently, it's setup with image empty but I need each thumb to represent the currently on click accordion.

can you add jquery when each accordion click function should add a class on the <div class=" image active"> according to post id on the accordion?

Problem Now is that jquery function is not add active class to the <div class="image"> after cick on each accordion?

Jquery

     $('.heading-accordion  .top').on('click', function () {

        var $question = $(this).closest('.heading-accordion ');

        $('.heading-accordion.open').not($question).each(function () {
            var $this = $(this);
            $this.removeClass('open');
            $this.find('.bottom').slideUp();
        });

        if ($question.hasClass('open')) {
            $question.removeClass('open');
            $question.find('.bottom').slideUp();
        } else {
            $question.find('.bottom').slideDown(function () {
                $question.addClass('open');
            });
        }

    });


    $('.change-image').on('click', function () {

        var targetImage = parseInt($(this).attr('data-image'));

        $('.image-wrapper .image.active').removeClass('active');
        $($('.image-wrapper .image').get(targetImage)).addClass('active');
    });

    $('.accordion-steps .change-image').on('click', function () {

        var targetImage = parseInt($(this).attr('data-image'));


        $('.accordion-steps .image-wrapper .image.active').removeClass('active');
        $($('.accordion-steps .image-wrapper .image').get(targetImage)).addClass('active');
    });

Html and Wordpress Code

 <section class="steps accordion-steps">
       <div class="row">
          <?php
             $posts_counter = 0;
             $dataimg = '';
             $open = 0;
             $args    = array(
              'post_type' => 'servicesaccordion',     
             'orderby' => 'id',
             'order' => 'DESC',        
              'post_status' => 'publish' 
             );
             $myposts = new WP_Query( $args );
             ?>
          <?php
             if ($myposts->have_posts() ) { 
             echo ' <div class="small-12 medium-7 large-5 column steps-wrapper e-in">';
                $i = 0;
                // Always start the list with a div.row 

                /* Start the Loop */
                while ($myposts ->have_posts() ) {
                    $myposts ->the_post();     
                $i++;   
             $dataimg++;
             $open++;
                ?>
          <div>
             <div class="heading-accordion <?php if($open == 1){echo 'open';} ?> delay-<?php echo $i ?> change-image" data-image="<?php echo $dataimg ?>" data-id="<?php echo get_the_ID();?>">
                <div class="top">
                   <div class="deco-wrapper">
                      <div class="inner-wrapper"></div>
                   </div>
                   <?php the_title();?>
                </div>
                <div class="bottom" <?php if($open == 1){echo 'style="display: block;"';} ?>
                <div class="inner-wrapper">
                   <p><?php the_content();?></p>
                </div>
             </div>
          </div>
          <?php
          $images_html_array[] = get_the_ID();
          } // end of the while() loop
          wp_reset_postdata();
          echo '
       </div>
       ';
       echo '
       <div class="small-12 medium-5 column">
          <div class="image-wrapper e-in">
             <div class="image active">
                <!--Post Iamge Will  Show Herre According To The Posts-->
                <img class="lazy" data-src="https://via.placeholder/639x504" alt="" />
             </div>
             <div class="image">
                <!--Post Iamge Will  Show Herre According To The Posts-->
                <img class="lazy" data-src="https://via.placeholder/639x510" alt="" />
             </div>
          </div>
       </div>
       ';
       </div>
       </div>
    </section>

• post-thumbnails

Share Improve this question edited Oct 17, 2018 at 14:54 edgematrix asked Oct 17, 2018 at 13:04 edgematrixedgematrix 511 silver badge66 bronze badges 6

• What you want is to dynamically change the DOM elements, and for that you will have to use JavaScript (jQuery). You can store the image URLs in some data attribute on accordion tabs or some other easily located elements, and set an event listener on the accordion tabs to switch URLs on click. – djboris Commented Oct 17, 2018 at 14:45
• Also, there is error in your code near the end, you are missing the closing PHP tag ?> before ending two divs and a section. – djboris Commented Oct 17, 2018 at 14:49
• @dboris any jquery example? – edgematrix Commented Oct 17, 2018 at 14:52
• @dboris i have added jquery kindly check the issue – edgematrix Commented Oct 17, 2018 at 14:55
• jQuery-related is not WordPress-related. – Max Yudin Commented Oct 17, 2018 at 15:18

 |  Show 1 more comment

2 Answers 2

Sorted by: Reset to default 0

Off top of my head here's two possible solution concepts.

1) Just run the custom loop (I meant to type, query) again and this time use it with only the_post_thumbnail.

<?php if ($myposts->have_posts() ) : ?>
<div class="image-wrapper e-in">
<?php while ($myposts ->have_posts() ) : $myposts ->the_post(); ?>
 <div class="image ">
 <!--Post Iamge Will  Show Herre According To The Posts-->
  <img class="lazy" data-src="<?php the_post_thumbnail_url(); ?>" alt="" />
 </div>
<?php endwhile; wp_reset_postdata(); ?>
</div>
<?php endif; ?>

2) Push get_the_post_thumbnail's to a helper array while doing the custom loop. After the custom loop is done, do a foreach for the helper array to echo thumbnail html outside the loop.

First

$myposts = new WP_Query( $args );
images_html_array  = array();

Then inside the loop

images_html_array[] = get_the_post_thumbnail_url();

Then

<div class="image-wrapper e-in">
    <?php foreach( $images_html_array as $img_url ) : ?>
     <div class="image ">
     <!--Post Iamge Will  Show Herre According To The Posts-->
      <img class="lazy" data-src="<?php echo esc_url( $img_url ); ?>" alt="" />
     </div>
    <?php endforeach; ?>
    </div>

Maybe?

These are just rough code examples and I didn't test these yet.

You can use this if you have the $post_id

$thumbnail_id = get_post_thumbnail_id( $post_id );
// featured image url
$thumbnail_url = wp_get_attachment_url( $thumbnail_id );

Then in the HTML, you can use

<div class="image ">
    <img class="lazy" src="<?php echo esc_attr( $thumbnail_url ); ?>" data-src="" alt="" />
</div>