11496 sujets

JavaScript, DOM et API Web HTML5

Bonjour à toute la communauté !

Par défaut, Wordpress ne permet pas l'import de SVG dans les articles (question de sécurité sûrement).
Qu'à cela ne tienne, j'ai ajouté ces 2 lignes à functions.php :
function cc_mime_types( $mimes ){
	$mimes['svg'] = 'image/svg+xml';
	return $mimes;
}


(je souhaite passer par l'uploader de média de Wordpress pour importer mon SVG, pas par plugin et shortcode)

L'import et l'affichage de SVG fonctionne bien Smiley smile
Sauf que mon site doit fonctionner sur IE8, qui ne lit pas le SVG. Smiley decu

Le résultat idéal serait que :
- pour tout le monde : urldemonsite.com/image.svg
- pour ie8 : urldemonsite.com/image.png
Je détecte en JS le user agent et je remplace le ".svg" par ".png".

Or Wordpress ne génère pas de JPG (ou PNG) à partir d'un SVG.
Est-ce que vous avez déjà été confronté à ce souci ?

Faut-il améliorer l'outil de traitement d'image de Wordpress pour qu'il transforme le SVG en PNG ?
Vous avez des retours d'expérience ?

Merci à tous !!
Alecsi
Je m'auto-réponds ;
après de nombreuses heures, j'ai peut-être un début de piste.

J'utilise le formidable plugin ACF pour gérer mes custom fields.
Grâce à ce plugin, j'ai créé un champ personnalisé qui s'affiche dans chaque média de Wordpress. Ce champ me permet d'uploader une image.

J'appelle ensuite cette image dans l'image grâce à cette fonction de mon cru :

Dans functions.php :
function svg_fallback( $image_svg, $taille_svg ) {
	$svg_fallback = get_field('svg_fallback', $image_svg['id']);
	if ($svg_fallback){
		echo '<div class="fallback">'.$svg_fallback['sizes'][$taille_svg].'</div>';
	}
}


Et dans ma template :
svg_fallback( $la_variable_de_mon_image, 'thumbnail');


Je récupère ainsi l'url de l'image fallback.
Il me reste simplement à faire le JS qui remplacera l'URL de mon image SVG par l'URL de fallback.

J'espère que ça va marcher et que ma réflexion pourra en aider d'autres Smiley smile
Solution qui marche pour ceux que ça intéresse
Voici ce que j'ai fait pour mettre en place une image bitmap en remplacement de SVG.
Ma configuration :
- Wordpress 3.8
- Plugin : ACF

1/ Dans ACF, j'ai créé un champ personnalisé de type "image", que j'assigne à tous les "attachements"

2/ Dans functions.php, j'ai ajouté le code suivant pour avoir la possibilité d'uploader un SCG depuis l'ajout de médias natif
function cc_mime_types( $mimes ){
	$mimes['svg'] = 'image/svg+xml';
	return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );


3/ Dans ma page Wordpress, j'upload mon image SVG

4/ Une fois le SVG uploader, je peux envoyer mon PNG de remplacement

5/ Pour récupérer le fallback, j'ai mis en place
dans functions.php
function svg_fallback( $image_svg, $taille_svg ) {
	$svg_fallback = get_field('svg_fallback', $image_svg['id']);
	if ($svg_fallback){
		echo 'data-fallback="'.$svg_fallback['sizes'][$taille_svg].'"';
	}
}


dans ma template
<img src="<?php echo $mon_image['sizes'][$taille_image]; ?>" alt="<?php echo $mon_image['title']; ?>" <?php svg_fallback( $mon_image, $taille_image ); ?> />


6/ Ensuite, j'ai installé Modernizr.js qui vérifie si le navigateur supporte le SVG. Puis le code jQuery suivant (récupéré sur Alsacréations). Je l'ai légèrement modifié pour qu'il puisse s'exécuter sur toutes les images SVG de la page :
if(!Modernizr.svg) {
	$('img[data-fallback]').each(function() {
		$(this).attr('src', $(this).data('fallback'));
	});
}



Le résultat fonctionne très bien ! Smiley biggrin
Grâce à ces fonctions, je ne fais appel à aucun plugin supplémentaire.

J'espère que ça sera utile à d'autres... n'hésitez pas à laisser un petit message Smiley smile