Total : 90 résultats trouvés.
Page 2 sur 5
Enlever le type de post de l'url Wordpress
Pour simplifier la lecture de l'url, il est parfois bien pratique d'enlever le nom du type de post automatiquement ajouté à chaque article Wordpress.
Il suffit d'ajouter quelques lignes de code au fichier functions.php de votre thème et de paramétrer les permaliens à /%postname%/.
Il faut d'abord enregistrer un type de post custom de la manière habituelle :
$args = array(
'description' => 'Nouveau type de post',
'label' => __('Nouveau type de post'),
'public' => true,
'rewrite' => array( 'slug' => 'typedepost'),
);
register_post_type( 'photograph' , $args );
En changeant bien sûr Nouveau type de post et typedepost avec les noms désirés.
Puis on enlève le slug de l'url du type de post créé, avec un if statement pour ne pas impacter le reste du contenu.
function custom_remove_cpt_slug( $post_link, $post, $leavename ) {
if ( 'typedepost' != $post->post_type || 'publish' != $post->post_status ) {
return $post_link;
}
$post_link = str_replace( '/' . $post->post_type . '/', '/', $post_link );
return $post_link;
}
add_filter( 'post_type_link', 'custom_remove_cpt_slug', 10, 3 );
Cette première modification engendrera une erreur 404 quand vous essayerez de visualiser votre article, car Wordpress ne reconnaît plus le type de post, il faut donc ajouter à la suite :
function custom_parse_request_tricksy( $query ) {
if ( ! $query->is_main_query() )
return;
if ( 2 != count( $query->query ) || ! isset( $query->query['page'] ) ) {
return;
}
if ( ! empty( $query->query['name'] ) ) {
$query->set( 'post_type', array( 'post', 'typedepost', 'page' ) );
}
}
add_action( 'pre_get_posts', 'custom_parse_request_tricksy' );
Déterminer si un élément existe sur la page avec JavaScript
Un exemple précis, pour un site, un div était généré via l'interface d'administration pour certaines pages, donc pour les autres pages le contenu était décalé. Pour éviter de recaler en fonction des pages avec css, et un rendu plus cohérent, il m'a fallu trouver une solution pour afficher un div par défaut si celui-ci n'avait pas été créé dans l'administration.
Après m'être penché sur des fonctions php, DOMDocument, ou jQuery, j'ai trouvé une solution toute simple, nécessitant très peu de code, en JavaScript.
Dans mon exemple, il me fallait afficher une image sous le header.
Si cette image était bien "créée" dans l'administration du site, le code donnait :
<div id="imageHeader" class="image-header">
<img src="/lien-vers-mon-image.jpg" alt="mon image" />
</div>
Si cette image n'était pas créée dans l'administraion, #imageHeader était tout simplement absent du code.
J'ai donc ajouté le code suivant à la suite de #imageHeader :
<div id="defaultImageHeader" class="image-header" style="display:none;">
<img src="/lien-vers-mon-image-par-defaut.jpg" alt="mon image par défaut" />
</div>
<script>
if(document.getElementById("imageHeader") !== null) {
}
else {
document.getElementById('defaultImageHeader').style.display = "block";
}
</script>
Display none permet de ne pas afficher cet élément, pour vérifier au préalable s'il a déjà été créé. S'il n'a pas été créé, le script bascule de display none à display block, tout simplement.
Problème de page blanche pour la réinitialisation du mot de passe sous Magento après application du patch SUPEE 6788
Le patch SUPEE 6788 règle notamment la protection insuffisante du processus de réinitialisation de mot de passe en ajoutant form_key à l'enregistrement client.
L'url qui était /customer/account/resetpassword/ devient /customer/account/changeforgotten/ et certains sites on vu apparaitre une page blanche rendant donc la réinitialisation du mot de passe impossible. Il faut regarde du côté des overrides du template de Magento et plus précisément le fichier customer.xml qui devrait se trouver dans app/design/frontend/default/votre_theme/layout. Renommer ou supprimer ce fichier devrait régler le souci, mais il contient peut-être des changements importants pour votre thème, il suffit alors d'y modifier 3 lignes de code.
Il faut trouver les 2 lignes comportant :
customer_account_resetpassword
pour les changer par :
customer_account_changeforgotten
Il se peut également que vous ayez besoin de changer dans le bloc :
<block type="customer/account_resetpassword"
par :
<block type="account_changeforgotten"
Et le problème devrait être résolu.
Ecosia : Le moteur de recherche qui plante des arbres
"Ecosia est un moteur de recherche qui fait don d’au moins 80% de son excédent de chiffre d’affaires à un programme de reboisement dans le désert du Sahel au Burkina Faso. En utilisant Ecosia, tu peux agir pour l'environnement sans débourser un centime !"
Les écrans haute résolution retina et les éléments à prendre en compte pour le développement web
Je ne me suis pas vraiment rendu compte en demandant l'option retina à l'achat de mon dernier ordinateur des différences que cela allait engendrer, mais je n'ai pas tardé à comprendre ! C'est un très bel écran, mais je n'était pas prêt à ça, tout comme bon nombre de logiciels. Un grand retour dans le monde de la pixellisation !
J'ai évidemment dû passer aux dernières version de la suite de logiciels Adobe pour éviter de perdre un œil, et je rencontre souvent des images bien trop pixellisées à mon goût, sur des sites que j'ai créés, et bien d'autres.
Il y a donc quelques éléments (pas si) nouveaux à prendre en compte, pour que je puisse avoir un affichage correct, et ainsi anticiper le renouvellement du parc informatique chez chacun.
1 - le plus frappant, les images
La première solution serait de servir des images 2 fois plus grandes qu'avant, et de les resizer avec le CSS, cela fonctionne très bien, mais les chasseurs de performances serveur pourraient n'être pas d'accord avec cette utilisation pas forcément nécessaire de ressources, d'autant plus pour les utilisateurs mobiles qui verront leur utilisation de forfait grimper en flèche. Même si l'avantage de cette technique est de garder une seule version des éléments sur serveur, et qu'elle ne pose pas tant de problème que ça en prenant en compte la vitesse de nos connexions actuelles, l'utilisation du wifi par les mobiles, et les abonnements internet illimités.
Une deuxième solution consiste à servir 2 tailles d'images différentes, logo.png et Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser. par exemple (les développeurs iOS seront vite familiers avec ces dénominations).
On peut ensuite avec le CSS cibler les images à appeler :
.logo {
background-image: url(logo.png);
background-size: 11px 13px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.logo {
background-image: url(Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.);
background-size: 11px 13px;
}
}
On ne peut malheureusement gérer toutes les images ainsi avec le CSS, mais comme chaque problème (ou presque) a sa solution sur le web, on peut jeter un œil à retina.js développé par Imulus, un script open source qui va prendre en charge la sélection des images appropriées. Encore une fois sur la base de la prescription pour les images haute définition d'Apple, le script se chargera pour chaque image comme :
<img src="/images/mon_image.jpg" />
de vérifier sur le serveur si la version HD existe pour obtenir ainsi "/images/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.".
2 - On peut aussi cibler les résolutions d'écran avec CSS pour écrire les variables dont on peut avoir besoin.
@media only screen and (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {
/* Vous pouvez écrire ici vos règles CSS ciblées pour les écrans haute résolution */
}
3 - Utiliser un maximum CSS, @font-face, les fonts d'icones et SVG, au lieu des images basées sur les pixels.
Cela fera d'autant moins d'images à traiter, et les performances de chargement de pages pourront s'en ressentir.
4 - Un petit détail qui fera plaisir au barres de navigateurs, passez les favicon en 32x32 et non plus en 16x16.
J'avoue que je n'utilise pas encore ces techniques partout, mais il faut vraiment que je m'y mette !
Appeler une UIWebView uniquement si l'url existe
J'utilise une UIWebView au démarrage d'une application pour afficher un contenu que je peux mettre à jour si besoin sans passer par l'AppStore. En interstitiel, je peux ainsi afficher un message important, ou une publicité par exemple.
Mais si je n'ai aucun contenu à afficher, je n'ai pas besoin de déranger les utilisateurs avec cet affichage. Il faut donc une variable qui va tout d'abord vérifier si cette page existe sur le serveur avant de l'afficher. Comme cela, il me suffira de la supprimer ou de la renommer pour désactiver l'interstitiel.
J'appelais UIWebView de la manière suivante :
UIWebView *interstitiel=[[UIWebView alloc]initWithFrame:embedViewRect];
NSString *urlInterstitiel=@"http://www.mon-domaine.fr/ma-page.html";
NSURL *nsurlInterstitiel=[NSURL URLWithString:urlInterstitiel];
NSURLRequest *nsrequest=[NSURLRequest requestWithURL:nsurlInterstitiel];
[videoOverlay loadRequest:nsrequest];
[self.view addSubview:interstitiel];
Avec la variable, cela donne :
UIWebView *interstitiel=[[UIWebView alloc]initWithFrame:embedViewRect];
NSString *urlInterstitiel=@"http://www.mon-domaine.fr/ma-page.html";
NSURL *nsurlInterstitiel=[NSURL URLWithString:urlInterstitiel];
NSData *urlInterstitielData=[NSData dataWithContentsOfURL:nsurlInterstitiel];
NSURLRequest *nsrequest=[NSURLRequest requestWithURL:nsurlInterstitiel];
[videoOverlay loadRequest:nsrequest];
if (urlInterstitielData.length==0) {
NSLog(@"la page n'existe pas");
}
else {
[self.view addSubview:interstitiel];
}
Rediriger les visiteurs non enregistrés sous Wordpress
Il peut être bien pratique de rediriger des visiteurs curieux quand on travaille sur un site directement sur serveur. Wordpress propose bien sûr plusieurs plugins pour afficher une page de maintenance, mais quand 3 lignes de codes peuvent éviter l'installation d'un plugin tiers (ou tout simplement la fierté d'avoir fait ça "à la main") et rediriger les utilisateurs vers la page que l'on désire, cela peut être une solution encore meilleure. Pour cela il suffit d'ouvrir ou de créer functions.php dans votre thème ou votre child-theme et d'ajouter :
if(!is_user_logged_in()) {
wp_redirect( 'http://www.mon-domaine.fr/ma-page.html', 302 ); exit;
}
J'utilise le code 302 pour indiquer que la redirection est provisoire, car dans mon cas, je veux rediriger pendant le développement ou une maintenance.
Cette technique peut également être utilisée pour protéger certaines pages du site et ne les laisser accessibles qu'aux utilisateurs ayant un compte et étant connectés. Pour cela, il faut mettre la condition dans une fonction, et ajouter wp_reset_query(); avant la condition parce que functions.php est appelé avant même que l'on sache sur quelle page on est.
Ça va avoir son importance pour pouvoir tout de même accéder au panneau d'administration pour se connecter pour pouvoir ensuite accéder au reste du site (à moins que vous ayez opté pour l'option de rester connecté avec votre navigateur).
add_action("wp", "custom_redirect");
function custom_redirect(){
wp_reset_query();
if(is_page('')) {
if(!is_user_logged_in()) {
wp_redirect( 'http://www.mon-domaine.fr/ma-page.html', 302 ); exit;
}
}
}
On peut ainsi cibler la page voulue de différentes manières :
// N'importe quelle page.
is_page();
// Avec l'identifiant de la page.
is_page( 64 );
// Avec le titre de la page.
is_page( 'Titre' );
// When the Page with a post_name (slug) of "about-me" is being displayed.
is_page( 'about-me' );
// Ou en ciblant plusieurs pages.
is_page( array( 64, 'Titre' ) );
Ça va avoir son importance pour pouvoir tout de même accéder au panneau d'administration pour se connecter pour pouvoir ensuite accéder au reste du site (à moins que vous ayez opté pour l'option de rester connecté avec votre navigateur).
add_action("wp", "custom_redirect");
function custom_redirect(){
wp_reset_query();
if(!is_admin) {
}
elseif(is_page('')) {
if(!is_user_logged_in()) {
wp_redirect( 'http://www.mon-domaine.fr/ma-page.html', 302 ); exit;
}
}
}
Cacher la top bar / tool bar de Wordpress
Wordpress a la fâcheuse tendance à rajouter une vilaine barre tout en haut de page quand un utilisateur est connecté. Si l'administrateur peut facilement gérer ça dans chaque compte utilisateur dans le panneau d'administration (Utilisateurs > Utilisateur > décocher la case Afficher la barre d’outils lorsque vous visitez le site), on peut éviter ça plus largement et facilement en ajoutant une petite ligne de code au fichier functions.php de cotre thème :
( 'show_admin_bar', '__return_false' );
On peut être un peu plus précis si l'on veut cacher la barre pour tous les utilisateurs sauf l'administrateur :
add_action('after_setup_theme', 'remove_admin_bar');
function remove_admin_bar() {
if (!current_user_can('administrator') && !is_admin()) {
show_admin_bar(false);
}
}
Changer les identifiants de base de données pour Magento
Il se peut, pour des raisons de changement d'environnement serveur, ou de sécurité, que l'on doive changer les identifiants de la base de données d'un site Magento. Pour que la connexion se fasse bien, il faut ensuite éditer un fichier du site pour y inscrire les nouveaux identifiants. Ce fichier, local.xml, se situe dans /app/etc/.
Le code devrait être similaire à :
<connection>
<host><![CDATA[localhost]]></host>
<username><![CDATA[database_username]]></username>
<password><![CDATA[database_password]]></password>
<dbname><![CDATA[database_name]]></dbname>
<active>1</active>
</connection>
Il suffit de changer les informations avant de ré-uploader le fichier sur serveur. Attention aux droits attribués au fichier après upload, pour des raisons de sécurité, les droits doivent être paramétrés en 644.
Créer une position pour un bloc statique sous Magento
Pour customiser un thème, ajouter du contenu ou des fonctionnalités sur les pages Magento, gérables depuis l'administration, la solution est souvent l'ajout de positions pour blocs statiques. Une fois que l'on a créé l'appel dans les fichiers de layout en .xml, puis l'appel à la position désirée dans les fichiers .phtml, il suffit de créer le bloc statique dans l'administration.
La première étape consiste à créer l'appel du module par xml, le plus souvent dans apps/design/frontend/default/votre_theme/layout/page.xml, On peut créer ce fichier s'il n'existe pas encore. Encore une fois, travailler dans le dossier de votre thème permet de garder toutes les modifications core avec les mises à jour.
<reference name="root">
<block type="cms/block" name="mon_nouveau_bloc">
<action method="setBlockId"><block_id>mon_nouveau_bloc</block_id></action>
</block>
</reference>
La deuxième étape consiste à appeler le bloc à l'endroit désiré dans les fichiers de apps/design/frontend/default/template/page.
<?php echo $this->getChildHtml('mon_nouveau_bloc') ?>
Il est à notre que la modification de layout peut aussi se faire directement dans l'administration, aussi bien dans les pages statiques que les catégories grâce à la "Mise à jour XML" disponible sous l'onglet design. On pourra ainsi faire la modification en ciblant une page bien précise.
WhatsApp intègre l'envoi de fichier .pdf
WhatsApp qui a annoncé récemment plus d'un milliard d'utilisateurs essayerait-il de s'imposer également dans les échanges professionnels et commerciaux ?
Plusieurs idées d'échange C2B sont à l'étude, aucune annonce officiel ou déploiement d'envergure, mais certains utilisateurs auraient déjà pu voir apparaître la fonction d'envoi de documents .pdf.
Une info à prendre au conditionnel donc, mais qui peut sembler logique pour le développement de l'application.
Ajouter un suffuxe d'url aux articles WordPress
Je ne suis pas un grand spécialiste SEO pour pouvoir affirmer qu'il vaut mieux, ou non, avoir un suffixe aux urls, mais c'est une préférence personnelle, j'aime quand mes urls finissent par .html.
Sous Wordpress il suffit d'aller dans Réglages > Permaliens et d'opter pour une "Structure personnalisée", ce qui peut donner pour /%category%/%postname%/ :
/%category%/%postname%.html
Bug d'image manquante dans le back office Magento après une mise à jour vers 1.9.2.3
Suite à une mise à jour de Magento vers la version 1.9.2.3, les nouvelles images produits uploadées apparaissaient bien en front end, mais plus en back end.
Ce problème est lié aux droits d'accès attribués aux dossiers et fichiers lors de l'upload.
Pour régler cela, il faut ouvrir lib/Varien/File/Uploader.php.
Puis changer :
chmod($destinationFile, 0640);
par :
chmod($destinationFile, 0644);
et :
if (!(@is_dir($destinationFolder) || @mkdir($destinationFolder, 0750, true))) {
par :
if (!(@is_dir($destinationFolder) || @mkdir($destinationFolder, 0755, true))) {
Ces 2 petites corrections ont réglé mon problème.
Pour les images déjà uploadées, on peut changer les droits d'accès aux fichiers et dossiers via SSH ou Filezilla.
Edit : Le bug semble être fixé avec la version 1.9.2.4 ou en appliquant le patch supee-7405.
Détecter les pages panier, commande et compte utilisateur sous Magento
Il peut être très utile de cibler les pages panier, commandes, et les diverses pages du compte utilisateur de Magento pour les customiser. Il m'arrive aussi d'utiliser ces identifiants pour créer des variables quand je veux ajouter ou enlever des scripts appelés dans le head.phtml ou le footer.phtml. Pour un exemple précis, un script de slideshow jQuery custom que j'avais intégré entrait en conflit avec les fonctions jQuery de la page de checkout, il me fallait donc une variable dans le footer, où j'appelais le script du slideshow, pour ne pas l'appeler sur cette page.
Pour détecter la page :
<?php $fullActionName = Mage::app()->getFrontController()->getAction()->getFullActionName(); ?>
Voici une petite liste non exhaustive de pages que l'on pourrait avoir besoin de cibler sous Magento.
La page panier :
if ('checkout_cart_index' == $fullActionName) {
// Je suis sur la page panier
}
Le tunnel de commande :
if ('checkout_onepage_index' == $fullActionName) {
// Je suis sur la page "one page checkout"
}
La page de création de compte :
if ('customer_account_login' == $fullActionName) {
// Je suis sur la page de création de compte
}
La page de connexion :
if ('customer_account_login' == $fullActionName) {
// Je suis sur la page de connexion
}
Les autres pages compte utilisateur (il y en a peut-être d'autres) :
if (0 === strpos($fullActionName, 'customer_account_')
|| 0 === strpos($fullActionName, 'customer_address_')
|| 0 === strpos($fullActionName, 'wishlist_')
|| 0 === strpos($fullActionName, 'newsletter_manage_')
|| 0 === strpos($fullActionName, 'review_customer_')
|| 0 === strpos($fullActionName, 'sales_order_')
) {
// Je suis dans les pages "Mon compte"
}
La détection de la déconnexion utilisateur peut aussi être utile pour appeler une action ou alerte :
if ('customer_account_logoutSuccess' == $fullActionName) {
// L'utilisateur s'est déconnecté
}
Afficher un attribut produit dans la page panier de Magento
Pour customiser la page panier de Magento, afficher plus d'informations sur les produits, on peut avoir besoin d'appeler des attributs produits. Les attributs par défault sont généralement présents, mais pour les attributs que l'on a créé, on peut avoir besoin d'un petit peu de code.
Il faut modifier le fichier app/design/frontend/default/votre_theme/template/checkout/cart/item/default.phtml (ou le copier s'il ne s'y trouve pas déjà pour ne pas modifier un fichier core et conserver les modifications lors de vos mises à jour). Il suffit d'ajouter à l'endroit où vous voulez afficher l'attribut :
<?php $_item = $this->getItem()?>
<?php $_product= Mage::getSingleton('catalog/product')->load($_item->getProductId()) ?>
<?php echo $_product->getResource()->getAttribute('code_de_votre_attribut')->getFrontend()->getValue($_product); ?>
En changeant code_de_votre_attribut par le code de l'attribut que vous voulez appeler.
Testé sous la dernière version de Magento 1.9.2.3.
Text overflow css
La propriété text-overflow gère la coupe d'un texte qui dépasse d'une boite div et peut être très utile en cas de responsive design, ou pour des modules de digest en page d'accueil qui ne montreraient que l'introduction d'un contenu. Le texte peut être simplement rogné avec clip, ou on peut afficher ... à la fin avec ellipsis, ou encore ce que l'on veut.
Il faut avant d'utiliser la propriété text-overflow appliquer un overflow: hidden à la boite contenant le texte.
p {
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: clip;
}
p {
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
p {
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: "...";
}
Retrouver le nom de la catégorie sur la page détail produit de Magento
Pour afficher le nom de la catégorie sur la fiche produit Magento, il suffit d'ajouter dans app/design/frontend/default/mon_theme/template/catalog/product/view.phtml :
<?php $category = Mage::getModel('catalog/layer')->getCurrentCategory();?>
<?php echo $category->getName();?>
On peut ainsi aussi créer un lien de retour vers la catégorie :
<?php $category = Mage::getModel('catalog/layer')->getCurrentCategory();?>
<a href="/<?php echo $category->getUrl() ?><?php echo $category->getName();?></a>
Retrouver l'identifiant de la catégorie sur la page détail produit de Magento
Pour un projet Magento, il fallait que je puisse intégrer une variable qui ne devait s'appliquer qu'à une catégorie de produits pour afficher un attribut sur la fiche produit dans un ordre différent aux produits des autres catégories. Il fallait donc que j'appelle la catégorie sur la page de détail.
J'ai donc ajouté dans app/design/frontend/default/mon_theme/template/catalog/product/view.phtml
<?php $categorie = Mage::registry('current_category')->getId(); ?>
<?php if ($categorie == 1) { ?>
// J'écris la variable pour la catégorie 1
<?php } else { ?>
// J'écris la variable pour le reste des catégories, ou je laisse vide
<?php } ?>
Edit : on peut faire encore plus court avec :
<?php if (Mage::registry('current_category') == 1): ?>
Édition en ligne d'images avec Fotor
Pas de Photoshop ou autre sous la main ? Ou tout simplement pas envie d'apprendre à utiliser ces logiciels ? Fotor vous propose une interface intuitive pour éditer vos photos. Mise au format, rotation, découpage, luminosité, contraste... Tout ça très facilement et rapidement dans votre navigateur internet. Et ce n'est que le début de ce que propose Fotor, vous pouvez aussi faire du collage ou du design à partir de templates pré-créées telles que des photos de journal Facebook ou des couvertures YouTube ou Twitter... La plupart des services accessibles sont gratuits, certains disponibles avec un abonnement mensuel, une vraie alternative au manque de logiciels ou d'inspiration !
On peut failement y perdre plusieurs heures rien que pour découvrir l'éventail des possibilités offertes !
Le site propose également des applications Mac OS X, Windows, ou Windows 8, ou encore les versions iOS et Android pour exercer votre créativité directement depuis votre mobile et monétiser vos photos en participant au marketplace mis en place par Fotor.
Effet d'image en noir et blanc avec css
CSS permet de créer des effets de désaturation sur les images, ce qui peut-être très pratique pour créer des effets de survol souris. Aux débuts du web il fallait charger 2 images différentes pour obtenir le même résultat. La propriété filter peut s'appliquer tout simplement à votre image :
img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
Pour cibler un peu plus précisément, on peut appliquer cet effet à toutes les images d'un div :
#desaturation img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
Ou cibler les images directement en leur attribuant une classe spécifique :
img.desaturation {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
Cette propriété fonctionnera sous Chrome 18+, Safari 6+ (ordinateur et mobiles), Firefox 35+, Opera 15+, et les versions récentes de navigateurs Android et Blackberry (pour Internet Explorer c'est en cours de développement). Mais on peut néanmoins ajouter un peu de code et un fichier .svg pour plus de compatibilité.
Le fichier desaturation.svg à placer dans le même dossier que le fichier css est à créer :
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="noiretblanc">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0" />
</filter>
</svg>
On intègre ensuite le .svg au CSS :
#desaturation img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(desaturation.svg#noiretblanc);
}
Enfin, pour obtenir le support des anciennes versions d'Internet Explorer et de navigateurs utilisant webkit on peut aussi ajouter :
#desaturation img {
-webkit-filter: grayscale(1);
-webkit-filter: grayscale(100%);
filter: gray;
filter: grayscale(100%);
filter: url(desaturation.svg#noiretblanc);
}
on peut ensuite appliquer un effet de passage souris pour repasser les images en couleur :
#desaturation img:hover {
filter: none;
-webkit-filter: grayscale(0);
}
