Möglichkeiten zum Umgang mit SVG-Rendering in WordPress?

Mit der Weiterentwicklung der Internetbrowser finde ich es immer komfortabler, SVGS beim Codieren von Websites zu verwenden ... insbesondere für Symbole und einfache Grafiken, die im laufenden Betrieb durch PNGs ersetzt werden können.

Es sieht so aus, als ob WordPress SVGS fast unterstützt. Ich sage fast weil:

1. Es ist nicht standardmäßig ein zulässiger Dateityp in WordPress. Sie müssen dies also hinzufügen, bevor Sie SVGs hochladen

2. In der Mediengalerie wird kein SVG-Miniaturbild angezeigt. (siehe Bild unten)

3. Manchmal, wenn Sie es dem Editor hinzufügen (über die Schaltfläche Medien hinzufügen), kennt der Editor die SVG-Größe nicht. Obwohl er das SVG als Bild hinzufügt, hat er eine Breite und Höhe von Null.

4. Wenn Sie im Popup zum Hochladen von Medien auf "Bild bearbeiten" klicken, wird die Meldung "Bild existiert nicht" angezeigt. Siehe Bild unten.

Ich bin mit Punkt 1 in dieser Liste einverstanden, aber hat jemand herausgefunden, wie ein Punkt 2 3 und 4 behoben werden?

Update zu Punkt 1:

Um einen neuen MIME-Typ (z. B. SVG) zuzulassen, können Sie einfach einen Hook in die Datei functions.php einfügen

function allow_new_mime_type($mimes) {

    $mimes['svg'] = 'image/svg+xml';

    return $mimes;
}
add_filter( 'mime_types', 'allow_new_mime_type' );

Jetzt sollten Sie SVGs hochladen können. Weitere Informationen finden Sie in diesem Tutorial . Dies löst nur Punkt 1, der, wie ich bereits erwähnt habe, für mich kein Problem darstellt (obwohl ich denke, dass dies standardmäßig zulässig sein sollte).

Update zu Punkt 2:

Ich habe ein bisschen gegraben und die Funktion aufgespürt, die entscheidet, ob ein Anhang ein Bild ist oder nicht. Es scheint, dass alles auf diese Funktion in wp-includes / post.php hinausläuft

/**
 * Check if the attachment is an image.
 *
 * @since 2.1.0
 *
 * @param int $post_id Attachment ID
 * @return bool
 */
function wp_attachment_is_image( $post_id = 0 ) {
    $post_id = (int) $post_id;
    if ( !$post = get_post( $post_id ) )
        return false;

    if ( !$file = get_attached_file( $post->ID ) )
        return false;

    $ext = preg_match('/\.([^.]+)$/', $file, $matches) ? strtolower($matches[1]) : false;

    $image_exts = array( 'jpg', 'jpeg', 'jpe', 'gif', 'png' );

    if ( 'image/' == substr($post->post_mime_type, 0, 6) || $ext && 'import' == $post->post_mime_type && in_array($ext, $image_exts) )
        return true;
    return false;
}

Wie Sie sehen, ist in dieser Funktion eine Reihe gültiger Bilderweiterungen definiert. Ich sehe keine Filter, mit denen dieses Array geändert werden könnte. Aber das ist ein Anfang ...

Ich bin mir nicht sicher, warum die letzte if-Anweisung für svgs false zurückgibt. Selbst wenn ich die Erweiterung svg nicht zum Array $ image_exts hinzufüge, sollte die erste Bedingung true zurückgeben, nicht wahr?

if ( 'image/' == substr($post->post_mime_type, 0, 6)

Dies prüft, ob 'image /' den ersten sechs Zeichen im MIME-Typ entspricht, der für svg image / svg + xml ist (die ersten sechs sind "image /").

AKTUALISIEREN

Bei weiteren Untersuchungen scheint das Problem überhaupt nicht bei wp_attachment_is_image zu liegen, sondern weil die Bildgröße (Breite und Höhe) beim Hochladen der SVG nicht zu den Anhangsmetadaten hinzugefügt wird. Dies liegt daran, dass die Funktion zur Berechnung des verwendeten Bildes die PHP-Funktion getimagesize () ist, die keine Bildgröße für SVG zurückgibt. Ich habe auf stackoverflow eine Antwort auf die Funktion getimagesize und auf das Verhalten von svgs gefunden. Sehen Sie es hier.

Schauen Sie sich an wp_prepare_attachment_for_js(), welche Anhänge Metadaten für die Verwendung auf den Medienseiten sammeln. Mit dem gleichnamigen Filter können wir Metadaten hinzufügen oder ändern.

Das folgende Beispiel kann in functions.php abgelegt werden. Hinweis: Dies erfordert SimpleXML-Unterstützung in PHP.

function common_svg_media_thumbnails($response, $attachment, $meta){
    if($response['type'] === 'image' && $response['subtype'] === 'svg+xml' && class_exists('SimpleXMLElement'))
    {
        try {
            $path = get_attached_file($attachment->ID);
            if(@file_exists($path))
            {
                $svg = new SimpleXMLElement(@file_get_contents($path));
                $src = $response['url'];
                $width = (int) $svg['width'];
                $height = (int) $svg['height'];

                //media gallery
                $response['image'] = compact( 'src', 'width', 'height' );
                $response['thumb'] = compact( 'src', 'width', 'height' );

                //media single
                $response['sizes']['full'] = array(
                    'height'        => $height,
                    'width'         => $width,
                    'url'           => $src,
                    'orientation'   => $height > $width ? 'portrait' : 'landscape',
                );
            }
        }
        catch(Exception $e){}
    }

    return $response;
}
add_filter('wp_prepare_attachment_for_js', 'common_svg_media_thumbnails', 10, 3);

Dies ist nicht etwas, das Sie mit einem Plugin oder einem kleinen Satz Code leicht "einhacken" können.

Das kurze daran ist, dass SVGs im Großen und Ganzen keine "Bilder" im Sinne aller Bilder sind, die davor gekommen sind. SVGs sind vektorbasierte Bilder und die ersten, die im Web eine echte Traktion erzielen.

Alle Bilder zuvor waren Bitmap-basiert. Das Bildverarbeitungssystem von WordPress wurde speziell für diese Probleme entwickelt, und dieses inhärente Design befindet sich an jedem Punkt im System.

Es ist eine zugrunde liegende Annahme, dass Bilder beispielsweise Breiten und Höhen haben. SVGs haben keine, sie können jede Größe haben. Es gibt einen grundlegenden "Editor" für in WordPress integrierte Bilder, von denen keine Funktionalität wirklich für SVGs gelten kann.

Das Multimedia-System wird langsam neu entwickelt, wobei der Schwerpunkt hier auf "langsam" liegt. Es muss eine Menge Abwärtskompatibilität beibehalten und neue Designs implementiert werden. Darüber hinaus sind die meisten Menschen weitaus mehr daran interessiert, Video-, Audio- und Wiedergabelisten zu unterstützen. Wenn diese Neugestaltungsarbeiten abgeschlossen sind und Teile der Bibliothek abstrahierter werden, wird es im Laufe der Zeit einfacher, solche Dinge zu unterstützen. Aber es ist noch nicht da und wird es für eine Weile nicht sein. Aus diesem Grund wird der SVG-MIME-Typ nicht unterstützt, da das Hinzufügen dieses MIME-Typs, bis alle zugrunde liegenden Teile funktionieren, ein Weg zum Bruch wäre.

Bei SVGs sollte der Wert wp_attachment_is_imagefalse zurückgeben, da hiermit wp_attachment_is_imagefestgelegt wird, ob die Editor-Schaltfläche angezeigt werden soll oder nicht und ob image_downsizeversucht wird, die Größe des Bilds in den Miniaturansichten usw. zu ändern. Beides würde sowieso nicht für SVGs funktionieren. Um SVGs ordnungsgemäß zu unterstützen, müssten Sie ein neues System zum vollständigen Hinzufügen von Metadaten für diese Bilder schreiben und diese dann an allen Stellen unterstützen, an denen Metadaten möglicherweise verwendet werden. Wie Sie sich vorstellen können, ist das kein kleiner Job.

Schon beim Lesen der Quelle (nicht beim Testen) kann ich sehen, dass die Erweiterung übereinstimmen muss:

if ( 'image/' == substr($post->post_mime_type, 0, 6) || $ext && 'import' == $post->post_mime_type && in_array($ext, $image_exts) )

welches liest als (Pseudocode)

if image/sind die ersten 6 Zeichen in der Eigenschaft $ post object post_mime_type ODER es gibt eine Erweiterung ODER es importgibt die Eigenschaft $ post objects post_mime_type UND die aktuelle Dateierweiterung ist eine von (Array)

Und das bedeutet, dass die letzte Aussage immer entscheidet, ob ifsich das als wahr herausstellt oder nicht.

Nach allem, was ich einlesen kann get_attached_file(), gibt es einen Filter, mit dem die Erweiterung gefälscht werden kann :

return apply_filters( 'get_attached_file', $file, $attachment_id );

Mit anderen Worten, Sie könnten versuchen, dieselbe Datei mit einer anderen Erweiterung zurückzugeben. Es würde nicht mit anderen Teilen in Konflikt stehen, da der wp_attachment_is_image()Gerechte zurückkehrt bool.