我怎樣才能得到一個Wordpress循環中的圖像src

Question

我正在做一個響應式的WordPress folio網站（www.jasongilmour.co.uk），而且我對WP主題開發知之甚少，所以我真的被困在一些PHP。我期待通過爲不同的設備加載不同的圖像來實現我的網站的真正響應，但無法獲得正確的代碼...

我現在擁有的是從一個maximage2幻燈片的帖子中獲取全尺寸圖像。

<div id="maximage"> 
     <?php if (have_posts()) : while (have_posts()) : the_post();  

      $args = array(
       'post_type' => 'attachment', 
       'numberposts' => -1, 
       'post_status' => null, 
       'post_parent' => $post->ID 
      ); 

      $attachments = get_posts($args); 
       if ($attachments) { 
       foreach ($attachments as $attachment) { 
       echo wp_get_attachment_image($attachment->ID, 'full'); 
       } 
      } 

     endwhile; endif; ?> 
    </div> 

我試着將它嵌入在<picture>標籤和回聲出只有SRC但是當我使用它wp_get_attachment_image_src返回HTML「ArrayArrayArrayArray」。我也試過把echo wp_get_attachment_image($attachment->ID, 'full', 'src'，但沒有改變返回的HTML。

我真的不明白WP文檔足以使其工作在...循環或數組我認爲這被稱爲？所以這對我來說並不好。

這是我網站的一個非常重要的部分，因爲我使用大量圖片來保持我的設計理念，並且它在緩存之前使網站非常緩慢。

PS

雖然我已經學到了很多在過去的幾個星期做這個的，我還是真的不明白我用PHP做什麼......我只是一個平面設計學生。

我也可能使主題開源，所以如果任何人有興趣獲得副本讓我知道。

我還需要在平板設備上對鼠標懸停菜單進行排序，然後纔開心使用它，但我不明白我在那裏做了什麼。

在此先感謝！

Answer 1

那麼它不是乾淨，因爲我希望但可以肯定的作品，該網站是快一百萬倍了。 Javascript只是在特定的屏幕尺寸下評論不需要的HTML，所以我可以得到我需要的所有圖像大小，這意味着PHP沒有改變。

<script> 
document.write("<!--"); 
if (screen.width <= '400') {document.write(" good -->");} 
</script> 
<div id="maximage"> 
     <?php if (have_posts()) : while (have_posts()) : the_post();  

     $args = array(
      'post_type' => 'attachment', 
      'numberposts' => -1, 
      'post_status' => null, 
      'post_parent' => $post->ID 
     ); 

     $attachments = get_posts($args); 
      if ($attachments) { 
      foreach ($attachments as $attachment) { 
      echo wp_get_attachment_image($attachment->ID, 'full'); 
      } 
     } 

    endwhile; endif; ?> 
</div> 
<script> 
if (screen.width <= '400') {document.write("<!-- good ");} 
</script> 
--> 

<script> 
document.write("<!--"); 
if ((screen.width >= '401') && (screen.width <= '800')) {document.write(" good -->");} 
</script> 
<div id="maximage"> 
     <?php if (have_posts()) : while (have_posts()) : the_post();  

     $args = array(
      'post_type' => 'attachment', 
      'numberposts' => -1, 
      'post_status' => null, 
      'post_parent' => $post->ID 
     ); 

     $attachments = get_posts($args); 
      if ($attachments) { 
      foreach ($attachments as $attachment) { 
      echo wp_get_attachment_image($attachment->ID, 'full'); 
      } 
     } 

    endwhile; endif; ?> 
</div> 
<script> 
if ((screen.width >= '401') && (screen.width <= '800')) {document.write("<!-- good ");} 
</script> 
--> 

<script> 
document.write("<!--"); 
if ((screen.width >= '801') && (screen.width <= '1280')) {document.write(" good -->");} 
</script> 
<div id="maximage"> 
     <?php if (have_posts()) : while (have_posts()) : the_post();  

     $args = array(
      'post_type' => 'attachment', 
      'numberposts' => -1, 
      'post_status' => null, 
      'post_parent' => $post->ID 
     ); 

     $attachments = get_posts($args); 
      if ($attachments) { 
      foreach ($attachments as $attachment) { 
      echo wp_get_attachment_image($attachment->ID, 'large'); 
      } 
     } 

     endwhile; endif; ?> 
</div> 
<script> 
if ((screen.width >= '801') && (screen.width <= '1280')) {document.write("<!-- good ");} 
</script> 
--> 

<script> 
document.write("<!--"); 
if (screen.width >= '1281'){document.write(" good -->");} 
</script> 
<div id="maximage"> 
     <?php if (have_posts()) : while (have_posts()) : the_post();  

     $args = array(
      'post_type' => 'attachment', 
      'numberposts' => -1, 
      'post_status' => null, 
      'post_parent' => $post->ID 
     ); 

     $attachments = get_posts($args); 
      if ($attachments) { 
      foreach ($attachments as $attachment) { 
      echo wp_get_attachment_image($attachment->ID, 'full'); 
      } 
     } 

     endwhile; endif; ?> 
</div> 
<script> 
if (screen.width >= '1281') {document.write("<!-- good ");} 
</script> 
--> 

Answer 2

但是當我使用wp_get_attachment_image_src它返回HTML

這東陽該函數根據the source返回一個數組，包含圖像URL，寬度和高度。

所以：

list($url, $width, $height) = wp_get_attachment_image_src($attachment->ID, 'full'); 
printf('<img src="%s" width="%d" heigt="%d"', $url, $width, $height); 

// or vprintf and directly pass the function call...