web-dev-qa-db-ja.com

Wp_get_attachment_image（）とSVGファイルタイプの問題

SVG画像をwp_get_attachment_image()で使用しようとしていますが、Webサイトのフロントエンドで非常に奇妙な出力を生成しています。

SVGファイルタイプをサポートするために、私は最初に私のテーマのfunctions.phpファイルに以下の関数を追加しました

/*** enable svg support ***/
function cc_mime_types($mimes) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

それから私のテーマファイルの中で私はこのようなSVG画像を使用しようとしています：

$image_id = 3679;
echo wp_get_attachment_image( $image_id, array( 57, 58 ), false, array( "class" => "icon" ) );

だから、それはこのようなHTMLを生成することになっています：

<img width="57" height="58" src="http://example.com/wp-content/uploads/2016/09/something.svg" class="icon">

しかし代わりに、これは次のようなHTMLを生成しています。

<img width="1" height="1" src="http://example.com/wp-content/uploads/2016/09/something.svg" class="icon" alt="briefcase">

width="1"とheight="1"のせいでわかるように、その画像は表示されていません。しかし、私が理解していないのは、この1つの値が私がそれを渡していないのでどこから来ているのかということです。

誰もがこの問題の修正を知っていますか？

functionsimageswp-get-attachment-imagesvg
5
iSaumya

WordPressはSVGのwidth属性とheight属性に問題があります。 SVGのwidth属性とheight属性は、 tracチケット＃26256 から適応されたこのコードを使用して削除できます。

/**
 * Removes the width and height attributes of <img> tags for SVG
 * 
 * Without this filter, the width and height are set to "1" since
 * WordPress core can't seem to figure out an SVG file's dimensions.
 * 
 * For SVG:s, returns an array with file url, width and height set 
 * to null, and false for 'is_intermediate'.
 * 
 * @wp-hook image_downsize
 * @param mixed $out Value to be filtered
 * @param int $id Attachment ID for image.
 * @return bool|array False if not in admin or not SVG. Array otherwise.
 */
function wpse240579_fix_svg_size_attributes( $out, $id ) {
    $image_url  = wp_get_attachment_url( $id );
    $file_ext   = pathinfo( $image_url, PATHINFO_EXTENSION );

    if ( is_admin() || 'svg' !== $file_ext ) {
        return false;
    }

    return array( $image_url, null, null, false );
}
add_filter( 'image_downsize', 'wpse240579_fix_svg_size_attributes', 10, 2 );
6
Dave Romsey