Capture d’écran 2019 04 06 à 11.51.48

Comment activer la prévisualisation des svg dans la bibliothèque média de WordPress

Temps de lecture estimé : 4 minutes

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.

Capture d’écran 2019 04 06 à 11.23.34

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.

Capture d’écran 2019 04 06 à 11.30.37
Structure mise en place

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 :

Capture d’écran 2019 04 06 à 11.51.48
Et voilà ! vos svg apparaissent bien dans l’admin

Si vous n’y arrivez pas, dites)le moi dans les commentaires et on y arrivera ensemble !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.