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

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.

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 :

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 !

mike

mike

Chef de projet web, Mike assure la réussite de projets digitaux depuis 2011. Son but est d'aider les webmasters et les freelances à tirer le meilleur des outils comme WordPress, WooCommerce et Elementor. Sur ce blog il partage son expérience, ses astuces et les pépites dénichées sur le web. Côté pro, Mike adore apprendre de nouveaux trucs et faire progresser les autres, et côté perso les afters, faire des shoots de baskets et les films d'horreur. La légende raconte qu'avec un mojito il vous accordera +4xp de confiance

Laisser un commentaire

Votre adresse e-mail 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.

Thématiques

Vous recherchez des astuces dans un secteur donné ? Vous pouvez accéder directement à la catégorie qui vous intéresse !