SVG Dateien hochladen ohne Plugin

SVG Dateien zu nutzen hat schon so seine Vorteile.

Wenn ihr wie ich, gerne SVG Dateien in euren Seiten nutzt oder einsetzt, dann kennt ihr bestimmt schon das Problem. WordPress erlaubt standardmässig das Hochladen von SVG Dateien nicht. Da bleibt einem eigentlich nichts anderes übrig als auf Plugins zurück zu greifen. Mittlerweile kennt man mich ja ein wenig und weiss, dass ich nicht so auf sinnlose Plugins stehe. Aber eins nach dem anderen…

In diesem Blogpost «SVG Dateien unter WordPress 5 hochladen geht nicht mehr» gehe ich auf zwei drei Probleme beim Hochladen ein und warum es trotz Code nicht so ganz funktioniert. Also lest ihn Euch mal durch, denn es liegt nicht am Code, sondern an der SVG Datei selbst. Das nur mal als Einstieg. Dort findet ihr auch die Funktion welche in die functions.php Datei gehört, damit ihr SVG Dateien hochladen könnt. Keine Sorge ich werde auch hier den gesamten Code zum Copy & Paste zur Verfügung stellen. 

Eine Sache hatte mich bei dieser Art der Einbindung immer schon gestört. Ich konnte zwar nun meine SVG Dateien problemlos hochladen und nutzen, aber ich konnte nie eine Vorschau der SVG Dateien in der Mediathek sehen. Somit musste ich immer schaue, dass ich einen passenden Namen bei der Benennung der SVG Datei wähle. Nach einer Zeit findet man sich ab, denn schliesslich hat man dadurch ein Plugin gespart… «huurrraaaa» !!

Nun ja, was soll ich jetzt schreiben, ausser, dass man nach einer gewissen Zeit trotzdem die Finger vom Code nicht lassen kann. Falls ihr jetzt noch nicht ganz verstehen könnt was ich genau meine, zeige ich Euch das an zwei Beispielbildern. Mir ging es einfach nicht in den Kopf, warum ein Plugin das schafft und ich nicht. Ich hab mich dann an die Arbeit gemacht und das Resultat möchte ich mit Euch teilen, da ich der Meinung bin, dass der Eine oder Andere bestimmt auch Freude daran haben könnte.

Meine Mediathek, wenn ich nur „SVG Dateien hochladen“ erlaube per Code

Meine Mediathek, wenn ich „SVG Dateien hochladen“ erlaube per erweiterten Code

Code für die functions.php

Falls Ihr für meinen Codeschnipsel etwas spenden wollt, dürft ihr das gerne HIER tun.

Falls Ihr das Divi Mastermind-Child-Theme nutzt, ist bereits ein SVG Code drin, den bitte rauslöschen und durch diesen ersetzen. Für alle Anderen, einfach den Code kopieren und in die functions.php eures Child-Themes einfügen.

// Function add Custom // ERLAUBE SVG UPLOADS 
// ========================================================================== //
function bh_svgimg_types($file_types){

   $new_filetypes = array();
   $new_filetypes['svg'] = 'image/svg+xml';
   $file_types = array_merge($file_types, $new_filetypes );

   return $file_types;
}
add_action('upload_mimes', 'bh_svgimg_types');

// Zeigt SVG's in der Mediathek als Vorschau an // 
function bh_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 Gallerie
                $response['image'] = compact( 'src', 'width', 'height' );
                $response['thumb'] = compact( 'src', 'width', 'height' );

                //Media Einzelbild
                $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', 'bh_svg_media_thumbnails', 10, 3);

Was macht der Code?

Die erste Funktion, ist lediglich die Anweisung WordPress mitzuteilen, dass er nun SVG Dateien erlauben soll. Die zweite etwas längere Anweisung teilt WordPress mit, dass er die Bilder in der Mediathek auch bitte anzeigen soll. 

—-

Ich hoffe, dass ihr nun Eure Plugins in die Tonne kloppt 😀

In diesem Sinne, viel Spass beim SVG Dateien nutzen.
Gruss Benny

Seit Jahren arbeite ich mit Divi, schreibe Tutorials und teile mein Wissen über CSS, jQuery, PHP und sonstige Tipps & Tricks. Supporte mich und meine freien Arbeiten, damit ich auch künftig meine Freizeit so gut es geht finanzieren kann und so weiterhin tolle und hilfreiche Tipps geben darf !! – VIELEN DANK –.