it-swarm.com.de

Problem mit wp_get_attachment_image () und SVG-Dateityp

Ich versuche, SVG-Bild mit wp_get_attachment_image() zu verwenden, aber es erzeugt eine sehr seltsame Ausgabe am vorderen Ende der Website.

Zur Unterstützung des SVG-Dateityps habe ich der functions.php-Datei meines Themas zunächst die folgende Funktion hinzugefügt

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

Dann versuche ich in meiner Themendatei, die SVG-Bilder wie folgt zu verwenden:

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

Es soll also so ein HTML erzeugen:

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

Stattdessen generiert es HTML wie folgt:

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

Wie Sie aufgrund des width="1" und height="1" sehen können, wird dieses Bild nicht angezeigt. Aber was ich nicht verstehe, ist, woher dieser Wert kommt, da ich das nicht übergebe.

Kennt jemand eine Lösung für dieses Problem?

5
iSaumya

WordPress hat Probleme mit den Breiten- und Höhenattributen für SVGs. Die Attribute width und height können für SVGs mit diesem Code entfernt werden, der von trac ticket # 26256 angepasst wurde.

/**
 * 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