Wordpress自定义帖子类型 - data-thumb data-src图像

Question

I have an Html page in which There is a slider. here's the html code

<div data-thumb="images/slide1.jpg" data-src="images/slide1.jpg">

        </div>
        <div data-thumb="images/slide2.jpg" data-src="images/slide2.jpg">

        </div>
        <div data-thumb="images/slide3.jpg" data-src="images/slide3.jpg">

        </div>

I am trying to convert this page into wordpress. Here's how I am doing this in wordpress to load the images.

  <?php 

          $options = array(
        'post_type' => "slideshow",

         );  



      while ($my_query->have_posts()) : $my_query->the_post(); ?>  


         <div data-thumb="<?php if ( has_post_thumbnail() ) { the_post_thumbnail('full'); } ?>"  data-src="<?php if ( has_post_thumbnail() ) { the_post_thumbnail('full'); } ?>">

        </div>

        <?php endwhile; ?> 

But It is not working.My pictures are not showing in the slider. But When I check the page source It is correctly getting the image.

here's the source that generates

 <div data-thumb="<img width="1170" height="385" src="http://localhost/wordpress/wp-content/uploads/2014/09/slide1.jpg" class="attachment-full wp-post-image" alt="slide1" />"  
   data-src="<img width="1170" height="385" src="http://localhost/wordpress/wp-  content/uploads/2014/09/slide1.jpg" class="attachment-full wp-post-image" alt="slide1" />">

        </div>

Answer 1

Change this: In the first line of your "while" loop insert this:

if ( has_post_thumbnail() ) {
     $image = wp_get_attachment_image_src( get_post_thumbnail_id( the_ID()));
}
 // else {
 // you should see what to do if the post hasn't got a thumbnail
 // 

And then replace this:

<div data-thumb="<?php if ( has_post_thumbnail() ) { the_post_thumbnail('full'); } ?>"

for this:

<div data-thumb="<?php echo $image[0];?>"

Same thing in your second "if". it's not the prettiest code, but it should work.

Calling the_post_thumbnail() prints the whole <img> tag, and you need only the URL to populate the DATA-SRC and DATA-THUMB attributes of your existing IMGs.

So you get the post thumbnail ID with get_post_thumbnail_id(), and get the image url with wp_get_attachment_src().

Hope it helps.