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 中刪除維度