-2

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.com/639x504" alt="" />
             </div>
             <div class="image">
                <!--Post Iamge Will  Show Herre According To The Posts-->
                <img class="lazy" data-src="https://via.placeholder.com/639x510" alt="" />
             </div>
          </div>
       </div>
       ';
       </div>
       </div>
    </section>
  • 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. – dboris Oct 17 '18 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. – dboris Oct 17 '18 at 14:49
  • @dboris any jquery example? – edgematrix Oct 17 '18 at 14:52
  • @dboris i have added jquery kindly check the issue – edgematrix Oct 17 '18 at 14:55
  • jQuery-related is not WordPress-related. – Max Yudin Oct 17 '18 at 15:18
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.

  • any example of it? – edgematrix Oct 17 '18 at 13:19
  • I added code examples to give you a better idea what I mean. Hope these help! – Antti Koskinen Oct 17 '18 at 13:35
  • post thumb is not showing according to the post? – edgematrix Oct 17 '18 at 13:47
  • I'm sorry, but I'm not quite sure what you mean. Are you saying that there is wrong images or are they in different order than the posts? And which method did you try, 1 or 2? – Antti Koskinen Oct 17 '18 at 14:10
  • can you add jquery when each accordion click function should addclass on the <div class="image active"> ?? it will work like this? – edgematrix Oct 17 '18 at 14:13
-1

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>
  • but outside the loop will it work? – edgematrix Oct 17 '18 at 13:10
  • yes, because if you have the $post_id, you can pass it and get the image url – ManzoorWani Oct 17 '18 at 13:11
  • not working outside the loop? links are showing in the while loop? – edgematrix Oct 17 '18 at 13:12
  • Do you have the post ID? – ManzoorWani Oct 17 '18 at 13:14
  • yes i have the post id image URL showing only in the while loop not outside the while loop – edgematrix Oct 17 '18 at 13:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.