WordPress Tipps #7 – SVG’s in Mediathek

SVG-Bilder werden im Zusammenhang mit Responsive Webdesign immer wichtiger. Leider erlaubt die Mediathek von WordPress den Upload solcher Dateien standardmässig nicht und kann diese im Backend auch nicht korrekt anzeigen.

In diesem Beitrag zeigen wir dir, wie man mit ein paar Zeilen Code den Upload von SVG-Dateien erlaubt und die Mediathek dazu bringen kann, diese auch korrekt anzuzeigen.

Die folgenden Code-Snippets können im functions.php des gewünschten Themes oder in einem eigenen Plugin hinterlegt werden.

Upload von SVG-Dateien erlauben

Mit dem folgenden kleinen Hook ermöglichen wir den Upload von SVG-Dateien in die Mediathek. Dieser Hook kann übrigens für alle Dateitypen verwendet werden, die man erlauben möchte:

function allow_svg_upload($mimes) {
    $mimes['svg'] = 'image/svg+xml';

    return $mimes;
}
add_filter('upload_mimes', 'allow_svg_upload');

SVG’s korrekt in Medien-Liste anzeigen

Jetzt können zwar SVG-Dateien hochgeladen werden, jedoch werden die Vorschaubilder in der Medien-Liste nicht korrekt angezeigt:

Falsch dargstelltes SVG-Bild in der Mediathek Liste

Das liegt daran, dass WordPress die Dimensionen eines SVG’s nicht erkennt und so das Vorschaubild mit einer Breite und Höhe von 1px darstellt. Wir wollen jedoch, dass das Vorschaubild korrekt angezeigt wird:

Richtig dargstelltes SVG-Bild in der Mediathek Liste

Um diese Darstellung zu erhalten, setzen wir mit dem folgenden Hook die Höhe und Breite des Vorschaubildes auf 100%:

function svg_media_list($attr, $attachment, $size) {
    if($attachment->post_mime_type == 'image/svg+xml') {
        $attr['style'] = 'width:100%;height:100%;';
    }

    return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'svg_media_list', 10, 3);

SVG’s korrekt im Medien-Raster anzeigen

Das selbe Problem besteht auch bei der Raster-Ansicht der Mediathek. Statt des Vorschaubildes erscheint lediglich das allgemeine Datei-Symbol:

Falsch dargstellte SVG-Bilder im Mediathek Raster

Die korrekte Darstellung wäre jedoch:

Richtig dargstellte SVG-Bilder im Mediathek Raster

Für diese Korrektur braucht es ein paar Code-Zeilen mehr, da das HTML-Template der Mediathek abgefangen und manipuliert werden muss. Das passiert in drei Schritten: Zuerst starten wir einen sogenannten Output-Buffer (svg_media_grid_init) um die Ausgabe abzufangen. Diese wird dann im zweiten Hook (svg_media_grid_parse_output) so manipuliert, dass das Template auch mit SVG-Dateien umgehen kann. Am Ende wird die manipulierte Ausgabe dann gesammelt und ausgegeben (svg_media_grid_get_output).

function svg_media_grid_get_output() {
    $output = '';

    // Sammelt die Ausgabe des Output-Buffers
    $ob_levels = count(ob_get_level());

    for($i = 0; $i < $ob_levels; $i++) {
        $output .= ob_get_clean();
    }

    // Wendet den Manipulations-Filter auf die Ausgabe an und gibt diese dann aus
    echo apply_filters('f4b_backend_svg_media_grid_output', $output);
}

function svg_media_grid_parse_output($content) {
    // Fügt die Unterstützung für SVG-Dateien in die Template-Ausgabe hinzu
    $content = str_replace(
        '<# } else if ( 'image' === data.type && data.sizes && data.sizes.full ) { #>',
        '<# } else if ( 'svg+xml' === data.subtype ) { #>
            <img class="details-image" src="{{ data.url }}" draggable="false" />
        <# } else if ( 'image' === data.type && data.sizes && data.sizes.full ) { #>',
        $content
    );

    $content = str_replace(
        '<# } else if ( 'image' === data.type && data.sizes ) { #>',
        '<# } else if ( 'svg+xml' === data.subtype ) { #>
            <div class="centered">
                <img src="{{ data.url }}" class="thumbnail" draggable="false" />
            </div>
        <# } else if ( 'image' === data.type && data.sizes ) { #>',
        $content
    );

    return $content;
}

function svg_media_grid_init($tabs) {
    // Output-Buffer starten
    ob_start();

    // Hooks für das Abfangen und Manipulieren der Ausgabe definieren
    add_action('shutdown', 'svg_media_grid_get_output', 0);
    add_filter('f4b_backend_svg_media_grid_output', 'svg_media_grid_parse_output');

    return $tabs;
}
add_filter('media_upload_tabs', 'svg_media_grid_init');

Man erkennt bei dem Code von oben, dass das eine eigentlich relativ unschöne Lösung ist, da man Hooks verwenden muss, die eigentlich gar nicht dafür gedacht sind.

media_upload_tabs ist eigentlich dazu da, die Tabs in der Medien-Auswahl zu manipulieren, gewährleistet in unserem Fall jedoch, dass unser Code an der richtigen Stelle ausgeführt wird, ohne dass wir uns darum kümmern müssen. Da dies ein Filter ist, reichen wir dessen Wert ($tabs) einfach durch ohne etwas damit zu machen.

Das wars!

Mit diesen Anpassungen ist WordPress nun fähig SVG-Dateien als Bilder zu akzeptieren und diese auch korrekt darzustellen. Viel Spass damit!

Noch mehr Tipps …

… folgen demnächst. Schau doch einfach wieder vorbei!

Andere WordPress Tipps

  • #CMS
  • #Entwicklung
  • #Tipps
  • #WordPress

Kommentare (2)

Update

von Stephan am 15.01.2018 | 14:12 Uhr

Danke Roman. Im Moment haben wir leider kein Update auf 4.9. Es wird aber sicher eins folgen in der nächsten Zeit.

Update

von Roman am 04.12.2017 | 16:53 Uhr

Hallo, schönes Tutorial. Gibt es hierfür ein Update auf WP 4.9?Vielen Dank, Roman

Kommentar schreiben

Ähnliche Beiträge

Zur Übersicht

Mit der Nutzung unserer Website erklären Sie sich mit der Verwendung von Cookies einverstanden. Weitere Informationen