admin管理员组

文章数量:1130349

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 51 silver badge6 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

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>

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 51 silver badge6 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

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>

本文标签： Get Post Thumbnail Outside of Loop

版权声明：本文标题：Get Post Thumbnail Outside of Loop 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://it.en369.cn/questions/1749254257a2340210.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。