Vous vous retrouvez constamment à passer de WordPress à un éditeur de photos juste pour désaturer les images avant de les télécharger ? C'est un processus fastidieux et inefficace d'éditer chaque photo individuellement au préalable.
Heureusement, grâce à des années d'expérimentation WordPress, nous avons découvert un moyen simple de désaturer automatiquement les images lors du téléchargement, vous faisant gagner un temps précieux.
Dans cet article, nous vous montrerons comment désaturer les images dans WordPress lors de leur téléchargement sur votre site, étape par étape.
Quand utiliser des images en niveaux de gris dans WordPress ?
Les images en niveaux de gris suppriment toutes les informations de couleur, laissant les couleurs de l'image pour n'afficher que des nuances de gris, variant entre le noir et le blanc.
Dans certaines situations, l'utilisation d'images en niveaux de gris peut être bénéfique pour votre site Web WordPress. Par exemple, vous pouvez l'utiliser pour améliorer la lisibilité des objets représentés dans l'image.
Ou, vous pouvez simplement vouloir utiliser des images en niveaux de gris pour créer un look intemporel et classique pour votre site Web.
D'autre part, les images en niveaux de gris sont également couramment utilisées pour le traitement d'images en raison de leur petite taille. Cela permet aux développeurs d'exécuter des opérations complexes en moins de temps.
Cela dit, voyons comment vous pouvez transformer vos images en niveaux de gris dans WordPress lors de leur téléchargement.
Désaturation des images lors du téléchargement dans WordPress
Pour ajouter des images dans WordPress, vous devriez les modifier avant de les téléverser en utilisant un logiciel de retouche photo comme Photoshop et convertir les images en couleur en niveaux de gris.
Si vous avez des centaines ou des milliers d'images à téléverser, cela peut prendre beaucoup de temps pour modifier chaque image manuellement.
Cependant, vous pouvez automatiquement les convertir en images en niveaux de gris lors du téléversement. Pour commencer, il vous suffit d'ajouter le code suivant au fichier functions.php de votre thème :
add_filter('wp_generate_attachment_metadata','rb_bw_filter');
function rb_bw_filter($meta) {
$path = wp_upload_dir(); // get upload directory
$file = $path['basedir'].'/'.$meta['file']; // Get full size image
$files[] = $file; // Set up an array of image size urls
foreach ($meta['sizes'] as $size) {
$files[] = $path['path'].'/'.$size['file'];
}
foreach ($files as $file) { // iterate through each image size
// Convert image to grayscale credit to http://ottopress.com/2011/customizing-wordpress-images/
list($orig_w, $orig_h, $orig_type) = @getimagesize($file);
$image = wp_load_image($file);
imagefilter($image, IMG_FILTER_GRAYSCALE);
switch ($orig_type) {
case IMAGETYPE_GIF:
imagegif( $image, $file );
break;
case IMAGETYPE_PNG:
imagepng( $image, $file );
break;
case IMAGETYPE_JPEG:
imagejpeg( $image, $file );
break;
}
}
return $meta;
}
Une façon simple d'ajouter du code aux fichiers de thème est d'utiliser le plugin WPCode pour WordPress.
C'est le meilleur plugin d'extraits de code qui vous aide à exécuter des extraits de code sans avoir à modifier manuellement le fichier functions.php de votre thème. Ainsi, vous n'avez pas à vous soucier de casser votre site.
Tout d'abord, vous devrez télécharger et installer le plugin gratuit WPCode sur votre site. Si vous avez besoin d'aide, suivez notre guide sur comment installer un plugin WordPress.
Remarque : La version gratuite de WPCode offre tout ce dont vous avez besoin pour ajouter facilement du code personnalisé dans WordPress. Pour des fonctionnalités plus avancées comme une bibliothèque de snippets cloud privée, des snippets planifiés, des pixels de conversion, et plus encore, vous pouvez passer à WPCode Pro.
Après l'activation, vous pouvez aller dans Snippets de code » + Ajouter nouveau depuis votre tableau de bord WordPress.
Ensuite, naviguez vers l'option « Ajouter votre code personnalisé (Nouveau snippet) » et cliquez sur le bouton « + Ajouter un snippet personnalisé ».
Ensuite, vous devez sélectionner « Snippet PHP » comme type de code parmi les options qui apparaissent.
Maintenant, sur la page Créer un snippet personnalisé, entrez un nom pour votre snippet. Cela peut être n'importe quoi pour vous aider à vous souvenir de l'utilité du code.
Ensuite, collez le code ci-dessus dans la zone « Aperçu du code ».
Après avoir entré le code, vous pouvez faire défiler vers la section « Insertion ».
Ici, vous pouvez laisser l'option « Insertion automatique » sélectionnée. Cela insérera et exécutera automatiquement le code pour vous.
Enfin, retournez en haut de l'écran et basculez le commutateur de « Inactif » à « Actif » et cliquez sur le bouton « Enregistrer le snippet ».
Ensuite, vous pouvez tester le code en modifiant ou en ajoutant une nouvelle page. Lorsque vous êtes dans l'éditeur WordPress, cliquez sur le bouton « + » et ajoutez un bloc d'image.
Vous pouvez maintenant télécharger n'importe quelle image sur votre blog WordPress, et elle sera automatiquement convertie en image en niveaux de gris.
Nous espérons que cet article vous a aidé à apprendre comment mettre des images en niveaux de gris dans WordPress. Vous pouvez également consulter notre guide sur comment ajouter le mode sombre à votre site WordPress et nos sélections d'experts des meilleurs logiciels de conception web.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Tomas Kapler
Super astuce, j'aimerais juste mentionner que pour de nombreuses utilisations, il serait peut-être préférable de le faire simplement via le filtre CSS, par exemple.
img.bw {
filter: grayscale(1);
}
vous pouvez même, par exemple, afficher en noir et blanc par défaut et en couleur au survol, ou vous pouvez faire une animation du niveau de gris à la couleur complète et vice versa, par exemple.
img.bw {
filter: grayscale(0);
}
img.bw.grey {
filter: grayscale(1);
transition-property: filter;
transition-duration: 1s;
}
je ne pense pas non plus que le filtre wp_generate_attachment_metadata soit le bon, car il est appelé lors de la création de métadonnées et pas seulement lors de la création d'images, et il effectue une deuxième manipulation d'image. La solution appropriée serait beaucoup plus longue, donc je comprends pourquoi c'est fait ainsi.
rok
Cela fonctionne bien mais lors du téléchargement, WP 4.3 génère une erreur dans la médiathèque.
Je pense avoir appliqué toutes les corrections écrites dans les commentaires, mais toujours une erreur.
mon code ressemble à ceci :
add_filter(‘wp_generate_attachment_metadata’,’themename_bw_filter’);
function themename_bw_filter($meta) {
$time = substr( $meta[‘file’], 0, 7); // <- obtient l’heure correcte du téléchargement
$file = wp_upload_dir( $time ); // <- localise le répertoire de téléchargement correct
$file = trailingslashit($file[‘path’]).$meta['sizes']['slide-pic']['file'];
if( $file ) {
list($orig_w, $orig_h, $orig_type) = @getimagesize($file);
}
$image = wp_load_image($file);
imagefilter($image, IMG_FILTER_GRAYSCALE);
switch ($orig_type) {
case IMAGETYPE_GIF:
imagegif( $image, $file );
break;
case IMAGETYPE_PNG:
imagepng( $image, $file );
break;
case IMAGETYPE_JPEG:
imagejpeg( $image, $file );
break;
}
return $meta;
}
Kim
Est-ce que cela mettra toutes les images de WordPress en niveaux de gris ou seulement celles qui viennent d'être mises à jour ?
Tomaž Zaman
Je sais que je suis un peu en retard dans la discussion, mais j'ai eu le même problème avec une erreur (que d'autres signalent) :
imagefilter() attend le paramètre 1 comme ressource, chaîne donnéeCela se produit lorsque vous essayez de télécharger une image via la modale média lors de la modification d'un article, plus ancien que le mois en cours, ce qui confond apparemment WordPress quant au répertoire où se trouve l'image d'origine et dans quel répertoire il doit enregistrer l'image en niveaux de gris.
Voici la solution :
<?php
add_filter('wp_generate_attachment_metadata','themename_bw_filter');
function themename_bw_filter($meta) {
$time = substr( $meta['file'], 0, 7); // <- obtenir l'heure correcte du téléchargement
$file = wp_upload_dir( $time ); // <- localise le répertoire de téléchargement correct
$file = trailingslashit($file['path']).$meta['sizes']['themename-bw-image']['file'];
list($orig_w, $orig_h, $orig_type) = @getimagesize($file);
$image = wp_load_image($file);
imagefilter($image, IMG_FILTER_GRAYSCALE);
switch ($orig_type) {
case IMAGETYPE_GIF:
imagegif( $image, $file );
break;
case IMAGETYPE_PNG:
imagepng( $image, $file );
break;
case IMAGETYPE_JPEG:
imagejpeg( $image, $file );
break;
}
return $meta;
}
endul
comment changer, filtre de résultat image vers un dossier/répertoire spécifique
geertvdheide
Une addition : j'ai ajouté quelques lignes pour contourner le problème de deux images portant le même nom de fichier, causé par deux appels à add_image_size avec la même taille. Le code supplémentaire a été trouvé ici :
http://bavotasan.com/2011/create-black-white-thumbnail-wordpress/
mklemme
@geertvdheide
Si vous vouliez ajouter la prise en charge de plusieurs tailles, essayez ce que j'utilise :
if ( function_exists( ‘add_theme_support’ ) ){
add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size( 50, 50, true );
add_image_size( ‘medium-thumb’, 660, ”, true );
add_image_size( ‘large-thumb’, 960, ”, true );
add_image_size( ‘small-thumb’, 100, ”, true );
}
(La hauteur n'est pas définie, seulement la largeur.)
vous devriez ajouter les différents noms pour que la fonction s'applique à tous :
[‘medium-thumb’ , ‘large-thumb’ , ‘small-thumb’] dans le code du filtre.
Appeler la miniature dans votre thème est la même chose que ce qui est indiqué dans l'article :
Mike Logan
Excellente idée, près de 10 ans plus tard, c'est toujours utile.
geertvdheide
Merci pour ce partage de code ! Sauf que je rencontre un problème étrange en essayant de l'implémenter. Il est lié à la taille de l'image téléchargée (taille en pixels, c'est-à-dire ses dimensions). J'ai copié le code littéralement dans le functions.php de mon thème, et cela fonctionne à merveille avec les images plus grandes que la taille spécifiée dans l'appel add_image_size. Mais lorsque j'utilise une image plus petite ou égale à la taille spécifiée, l'outil de téléchargement de WordPress me donne des erreurs et ne traite pas la taille de l'image (que ce soit depuis la section média de l'environnement d'administration, ou depuis un article ou une page spécifique). L'erreur :
Warning: imagefilter() expects parameter 1 to be resource, string given.
Squelques autres éléments dans l'erreur, mais cela semble être la cause principale. Les données de l'image transmises à la fonction imagefilter ne sont pas valides ou n'existent pas ?
Une idée de ce qui cause cela ? La seule vraie différence entre ma situation et une installation propre est que j'ai également ajouté quelques autres appels add_image_size à d'autres fins sur mon site. J'ajoute également la même taille deux fois (une en noir et blanc, une normale), mais cela ne semble pas poser de problème avec les images plus grandes.
Ed Nailor
@GEERTVDHEIDE
et pour les autres qui en ont besoin :
Lorsque le script convertit l'image en niveaux de gris et que le fichier téléchargé ne correspond pas à la taille du fichier, cela fait planter le script. Pour éviter cela, ajoutez simplement une condition if() rapide pour vous assurer que vous avez le $file.
$file = trailingslashit($file[‘path’]).$meta[‘sizes’][‘themename-bw-image’][‘file’];
si( $file ) {
list($orig_w, $orig_h, $orig_type) = @getimagesize($file);
——– reste du code jusqu’à ——–
return $meta;
}
Ceci vérifiera que la taille de fichier que vous avez demandée existe avant d'essayer de la convertir.
J'espère que cela vous aide !
frankiegershwin
@Otto42 Merci de proposer. Je le ferai.
Otto42
@frankiegershwin dommage ! N'hésitez pas à m'envoyer un e-mail directement pour obtenir de l'aide sur le code. otto@wordpress.org
frankiegershwin
@Otto42 thank you! I had a bit of a hard time, actually and had to undoe it
will pick it up tomorrow. It’s a good way to mix it up onsite
Otto42
@frankiegershwin Faites-moi savoir si vous avez besoin d'aide. J'ai également ajouté un moyen de faire des tons sépia dans mes commentaires sur le post original : http://t.co/avDNNEX
rodhk
@rodriguezhernan vaya idiotez de truco…. madremua tocar el codigo para eso
wpbeginner
@Otto Thanks for the comment Otto. Updated the post as well
Otto
Notez que les gens devraient remplacer « themename » par le nom de leur thème.