Qu’est ce que le svg ?
SVG est une image vectorielle basée sur XML qui est couramment utilisée par les sites Web et les marques pour afficher des logos et des icônes sur leurs sites Web. En effet, il est très léger et il ne pixelise pas lors du redimensionnement. De plus, ce format est supporté par les navigateurs récents, y compris les navigateurs mobiles.
Comment pouvoir uploader des svg dans WordPress ?
Ce format de ficher se basant sur du code XML, il hérite donc des failles possibles avec ce type de fichier, à savoir notamment l’insertion de code dangereux à l’intérieur du fichier.
Pour plus d’informations je vous invite à lire cet article très bien fait :
Que faire quand la preview des svg ne fonctionne pas dans l’admin :
Le code proposé ici a été le fruit d’une discussion ici : https://gist.github.com/benfrain/9422862
Merci à fadupla son auteur pour sa contribution
Voici ce qui se passe quand la prévisualisation ne fonctionne pas dans l’admin. Vous vous retrouvez avec plusieurs fichiers svg avec l’icône par défaut, mais si les noms des fichiers n’est pas assez explicite, impossible de déterminer de quel fichier il s’agit.
Pour pouvoir résoudre ce souci, vous aurez besoin de 3 fichiers à placer dans votre thème :
- le fichier functions.php (soit il existe déjà et il faudra y rajouter du code, sinon il faudra le créer à la racine de votre thème enfant)
- un fichier nommé svg.css pour gérer l’affichage
- un fichier nommé svg.js qui va gérer l’affichage dans l’admin
La structure utilisée sera la suivante, le fichier css sera stocké dans un répertoire/css à la racine du thème, et le fichier js sera stocké dans un répertoire /js situé à la racine du thème.
Le code php à mettre dans functions.php
/**
* Ajoute le type de fichier svg accepté par WP
*
* @param $mimes
*
* @author fadupla
* @return mixed
*/
function fadupla_mime_types( $mimes ) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'fadupla_mime_types' );
/**
* On ajoute le js et le css nécessaires dans l'admin
* @author fadupla
*/
function fadupla_svg_enqueue_scripts( $hook ) {
wp_enqueue_style( 'fadupla-svg-style', get_theme_file_uri( '/css/svg.css' ) );
wp_enqueue_script( 'fadupla-svg-script', get_theme_file_uri( '/js/svg.js' ), 'jquery' );
wp_localize_script( 'fadupla-svg-script', 'script_vars',
array( 'AJAXurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'admin_enqueue_scripts', 'fadupla_svg_enqueue_scripts' );
/**
* Ajax get_attachment_url_media_library
* @author fadupla
*/
function fadupla_get_attachment_url_media_library() {
$url = '';
$attachmentID = isset( $_REQUEST['attachmentID'] ) ? $_REQUEST['attachmentID'] : '';
if ( $attachmentID ) {
$url = wp_get_attachment_url( $attachmentID );
}
echo $url;
die();
}
add_action( 'wp_ajax_svg_get_attachment_url', 'fadupla_get_attachment_url_media_library' );Le fichier svg.css
img[src*='.svg'] {
width: 100%;
height: auto;
}Le fichier svg.js
/**
* Add svg MIME type support
*
* @param $mimes
*
* @author fadupla
* @return mixed
*/
function fadupla_mime_types( $mimes ) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'fadupla_mime_types' );
/**
* Enqueue SVG javascript and stylesheet in admin
* @author fadupla
*/
function fadupla_svg_enqueue_scripts( $hook ) {
wp_enqueue_style( 'fadupla-svg-style', get_theme_file_uri( '/assets/css/svg.css' ) );
wp_enqueue_script( 'fadupla-svg-script', get_theme_file_uri( '/assets/js/svg.js' ), 'jquery' );
wp_localize_script( 'fadupla-svg-script', 'script_vars',
array( 'AJAXurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'admin_enqueue_scripts', 'fadupla_svg_enqueue_scripts' );
/**
* Ajax get_attachment_url_media_library
* @author fadupla
*/
function fadupla_get_attachment_url_media_library() {
$url = '';
$attachmentID = isset( $_REQUEST['attachmentID'] ) ? $_REQUEST['attachmentID'] : '';
if ( $attachmentID ) {
$url = wp_get_attachment_url( $attachmentID );
}
echo $url;
die();
}
add_action( 'wp_ajax_svg_get_attachment_url', 'fadupla_get_attachment_url_media_library' );
the assets/js/svg.js file :
var mediaGridObserver = new MutationObserver(function (mutations) {
for (var i = 0; i < mutations.length; i++)
{
for (var j = 0; j < mutations[i].addedNodes.length; j++)
{
element = $(mutations[i].addedNodes[j]);
if (element.attr('class'))
{
elementClass = element.attr('class');
if (element.attr('class').indexOf('attachment') != -1)
{
attachmentPreview = element.children('.attachment-preview');
if (attachmentPreview.length != 0)
{
if (attachmentPreview.attr('class').indexOf('subtype-svg+xml') != -1)
{
var handler = function (element) {
jQuery.ajax({
url: script_vars.AJAXurl,
type: "POST",
dataType: 'html',
data: {
'action': 'svg_get_attachment_url',
'attachmentID': element.attr('data-id')
},
success: function (data) {
if (data)
{
element.find('img').attr('src', data);
element.find('.filename').text('SVG Image');
}
}
});
}(element);
}
}
}
}
}
}
});
var attachmentPreviewObserver = new MutationObserver(function (mutations) {
for (var i = 0; i < mutations.length; i++)
{
for (var j = 0; j < mutations[i].addedNodes.length; j++)
{
var element = $(mutations[i].addedNodes[j]);
var onAttachmentPage = false;
if ((element.hasClass('attachment-details')) || element.find('.attachment-details').length != 0)
{
onAttachmentPage = true;
}
if (onAttachmentPage == true)
{
var urlLabel = element.find('label[data-setting="url"]');
if (urlLabel.length != 0)
{
var value = urlLabel.find('input').val();
element.find('.details-image').attr('src', value);
}
}
}
}
});
$(document).ready(function () {
mediaGridObserver.observe(document.body, {
childList: true,
subtree: true
});
attachmentPreviewObserver.observe(document.body, {
childList: true,
subtree: true
});
});Pour les plus fainéants, voici les fichiers css et js dans un zip
Si tout s’est bien passé, vous devriez désormais voir vos svg directement dans votre bibliothèque média :
Si vous n’y arrivez pas, dites)le moi dans les commentaires et on y arrivera ensemble !
