WordPress 從 wp_get_attachment_image 中刪除維度

問題描述

當使用 wp_get_attachment_image 時，我有一些問題從我的附件影像中移除寬度和高度。這是我用來顯示影像的

 <?php echo $image = wp_get_attachment_image( $entry['slide_image_id'], true, 'full'); ?>

它如何看起來原始碼

 <img width="150" height="108" src="http://website:8888/wp-content/uploads/2015/12/cupcakes-and-cosmetics-logo.png" class="attachment-1 size-1" alt="cupcakes-and-cosmetics-logo" />

我希望這樣顯示

 <img src="http://website:8888/wp-content/uploads/2015/12/cupcakes-and-cosmetics-logo.png" class="attachment-1 size-1" alt="cupcakes-and-cosmetics-logo" />

影像正在從具有 slide_image_id 的 ID 的條目的可重複檔案欄位中拉出。我一直在環顧四周，並注意到使用 wp_get_attachment_image_url，但是當我使用上面的程式碼，影像不顯示。有什麼我做錯了嗎？

 <?php echo $image = wp_get_attachment_image_url( $entry['slide_image_id'], true, 'full'); ?>

旁註：$ entry [‘slide_image_id’] 是用來呼叫我的可重複檔案欄位。

最佳解決方案

您對 wp_get_attachment_image_url()和 wp_get_attachment_image()的引數是錯誤的 – 檢查連結的檔案的詳細資訊。另外，wp_get_attachment_image_url()返回一個 URL – 而不是一個實際的影像元素。

Removing the width and height attributes from <img> elements is inadvisable: if the layout of the page is in any way influenced by the size of the image, the layout will “glitch” as soon as the CSS which specifies the image’s dimensions, or the image itself loads.

不幸的是，wp_get_attachment_image()功能目前 (截至 WordPress 4.4.1)hard-coded 輸出 width 和 height <img> 屬性 (見 ticket #14110)，因此您需要自己構建影像標記。這可以透過從 wp_get_attachment_image()的來源獲得：

<?php
  $attachment = get_post( $entry['slide_image_id'] );

  if( $attachment ) {
    $img_size_class = 'full';
    $img_atts = array(
      'src'   => wp_get_attachment_image_url( $entry['slide_image_id'], $img_size_class, false ),
      'class' => 'attachment-' . $img_size_class . ' size-' . $img_size_class,
      'alt'   => trim(strip_tags( get_post_meta( $entry['slide_image_id'], '_wp_attachment_image_alt', true) ) )
    );

    //If an 'alt' attribute was not specified, try to create one from attachment post data
    if( empty( $img_atts[ 'alt' ] ) )
      $img_atts[ 'alt' ] = trim(strip_tags( $attachment->post_excerpt ));
    if( empty( $img_atts[ 'alt' ] ) )
      $img_atts[ 'alt' ] = trim(strip_tags( $attachment->post_title ));

    $img_atts = apply_filters( 'wp_get_attachment_image_attributes', $img_atts, $attachment, $img_size_class );

    echo( '<img ' );
    foreach( $img_atts as $name => $value ) {
      echo( $name . '="' . $value . '" ';
    }
    echo( '/>' );
  }
?>

次佳解決方案

Workaround

我做了一些核心挖掘/測試，並透過 wp_constrain_dimensions 過濾器找到了解決方法：

// Add filter to empty the height/width array
add_filter( 'wp_constrain_dimensions', '__return_empty_array' );
// Display image html
echo wp_get_attachment_image( $entry['slide_image_id'], 'full', true );
// Remove filter again
remove_filter( 'wp_constrain_dimensions', '__return_empty_array' );

這似乎允許我們從 wp_get_attachment_image()的生成的影像 html 中刪除高度和寬度屬性，而不會出現 reg-ex 規範。我們也可以以類似的方式使用 wp_get_attachment_image_src 過濾器去除寬度/高度，但保留網址。

說明

此解決方法也將刪除 srcset 和 sizes 屬性。但是也可以透過第四個 $attr 輸入引數設定 srcset 和 sizes 屬性。

如 @bosco 所提到的，您已經將圖示和大小輸入引數轉換為：

echo wp_get_attachment_image( $entry['slide_image_id'], true, 'full' );

改用：

echo wp_get_attachment_image( $entry['slide_image_id'], 'full', true );

參考文獻

Remove Dimension from wp_get_attachment_image

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

WordPress 從 wp_get_attachment_image 中刪除維度