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 中删除维度