web-dev-qa-db-fra.com

Problème avec wp_get_attachment_image () et le type de fichier SVG

J'essaie d'utiliser une image SVG avec wp_get_attachment_image() mais elle génère une sortie très étrange à l'avant du site.

Pour prendre en charge le type de fichier SVG, j'ai d'abord ajouté la fonction suivante dans le fichier functions.php de mon thème.

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

Ensuite, dans mon fichier de thème, j'essaie d'utiliser les images SVG comme ceci:

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

Donc, il est supposé générer un code HTML comme celui-ci:

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

Mais au lieu de cela, il génère du HTML comme ceci:

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

Comme vous pouvez le constater en raison de width="1" et height="1", cette image ne s'affiche pas. Mais ce que je ne comprends pas, c’est d’où vient cette valeur 1, car je ne la passe pas.

Est-ce que quelqu'un connaît une solution à ce problème?

5
iSaumya

WordPress a des problèmes avec les attributs width et height pour les SVG. Les attributs de largeur et de hauteur peuvent être supprimés pour les SVG en utilisant ce code adapté du ticket trac n ° 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