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?
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 );