¿Te encuentras cambiando constantemente entre WordPress y un editor de fotos solo para poner las imágenes en escala de grises antes de subirlas? Es un proceso tedioso e ineficiente editar cada foto individualmente de antemano.
Afortunadamente, a través de años de experimentación con WordPress, hemos descubierto una forma sencilla de poner automáticamente las imágenes en escala de grises durante la carga, ahorrándote un tiempo valioso.
En este artículo, te mostraremos cómo poner imágenes en escala de grises en WordPress mientras las subes a tu sitio, paso a paso.
¿Cuándo deberías usar imágenes en escala de grises en WordPress?
Las imágenes en escala de grises eliminan toda la información de color, dejando que los colores de la imagen muestren solo tonos de gris, variando entre blanco y negro.
Bajo ciertas situaciones, usar imágenes en escala de grises puede ser beneficioso para tu sitio web de WordPress. Por ejemplo, puedes usarlo para mejorar la legibilidad de los objetos que se muestran en la imagen.
O, simplemente puedes querer usar imágenes en escala de grises para crear un look clásico y atemporal para tu sitio web.
Por otro lado, las imágenes en escala de grises también se usan comúnmente para el procesamiento de imágenes debido a su pequeño tamaño. Esto permite a los desarrolladores ejecutar operaciones complejas en un tiempo menor.
Dicho esto, veamos cómo puedes convertir tus imágenes a escala de grises en WordPress al subirlas.
Poner imágenes en escala de grises al subirlas en WordPress
Cuando se trata de agregar imágenes en WordPress, tendrías que editarlas antes de subirlas usando un software de edición de fotos como Photoshop y convertir imágenes a color a escala de grises.
Si tienes cientos o miles de imágenes para subir, entonces puede llevar mucho tiempo editar cada imagen manualmente.
Sin embargo, puedes convertirlas automáticamente en imágenes en escala de grises al subirlas. Para empezar, todo lo que tienes que hacer es agregar el siguiente código al archivo functions.php de tu tema:
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;
}
Una forma sencilla de agregar código a los archivos del tema es usando el plugin WPCode para WordPress.
Es el mejor plugin de fragmentos de código que te ayuda a ejecutar fragmentos de código sin necesidad de editar manualmente el archivo functions.php de tu tema. De esa manera, no tienes que preocuparte por romper tu sitio.
Primero, necesitarás descargar e instalar el plugin gratuito WPCode en tu sitio. Si necesitas ayuda, sigue nuestra guía sobre cómo instalar un plugin de WordPress.
Nota: La versión gratuita de WPCode ofrece todo lo que necesitas para agregar fácilmente código personalizado en WordPress. Para funciones más avanzadas como una biblioteca de fragmentos en la nube privada, fragmentos programados, píxeles de conversión y más, puedes actualizar a WPCode Pro.
Tras la activación, puedes dirigirte a Fragmentos de Código » + Agregar Nuevo desde tu panel de WordPress.
Luego, navega a la opción ‘Agregar tu código personalizado (Nuevo fragmento)’ y haz clic en el botón ‘+ Agregar fragmento personalizado’.
A continuación, debes seleccionar ‘Fragmento de PHP’ como tipo de código de las opciones que aparecen.
Ahora, en la página Crear fragmento personalizado, procede a ingresar un nombre para tu fragmento. Puede ser cualquier cosa que te ayude a recordar para qué es el código.
Luego, pega el código anterior en el área de ‘Vista previa del código’.
Después de ingresar el código, puedes desplazarte hacia abajo hasta la sección ‘Inserción’.
Aquí, puedes dejar seleccionada la opción ‘Inserción automática’. Esto insertará y ejecutará el código automáticamente por ti.
Por último, regresa a la parte superior de la pantalla y cambia el interruptor de ‘Inactivo’ a ‘Activo’ y haz clic en el botón ‘Guardar fragmento’.
A continuación, puedes probar el código editando o agregando una nueva página. Cuando estés en el editor de WordPress, haz clic en el botón ‘+’ y agrega un bloque de Imagen.
Ahora puedes subir cualquier imagen a tu blog de WordPress, y se convertirá automáticamente en una imagen en escala de grises.
Esperamos que este artículo te haya ayudado a aprender cómo poner imágenes en escala de grises en WordPress. También puedes consultar nuestra guía sobre cómo agregar modo oscuro a tu sitio de WordPress y nuestras selecciones expertas del mejor software de diseño web.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Tomas Kapler
Gran consejo, solo me gustaría mencionar que para muchos usos podría ser mejor hacerlo simplemente a través del filtro CSS, por ejemplo:
img.bw {
filter: grayscale(1);
}
Incluso puedes, por ejemplo, mostrar en blanco y negro por defecto y a color al pasar el ratón por encima, o puedes hacer una animación de escala de grises a color completo y de vuelta, por ejemplo:
img.bw {
filter: grayscale(0);
}
img.bw.grey { filter: grayscale(1); transition-property: filter; transition-duration: 1s; }
Yo tampoco creo que el filtro wp_generate_attachment_metadata sea el adecuado, ya que se llama en la creación de metadatos y no solo en la creación de imágenes, y realiza una segunda manipulación de imágenes, pero la solución adecuada sería mucho más larga, así que entiendo por qué se hace de esta manera
rok
Funciona bien, pero al subir, WP 4.3 arroja un error en la biblioteca de medios.
Creo que he aplicado todas las correcciones escritas en los comentarios, pero todavía hay un error.
mi código se ve así:
add_filter(‘wp_generate_attachment_metadata’,’themename_bw_filter’);
function themename_bw_filter($meta) {
$time = substr( $meta[‘file’], 0, 7); // <- obtener la hora correcta de la carga
$file = wp_upload_dir( $time ); // <- ubica el directorio de carga correcto
$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
¿Cambiará esto todas las imágenes en WordPress a escala de grises o solo las recién actualizadas?
Tomaž Zaman
Sé que llego un poco tarde a la discusión, pero acabo de tener el mismo problema con un error (que otros reportan):
imagefilter() espera que el parámetro 1 sea un recurso, se recibió una cadenaEsto sucede cuando intentas subir una imagen a través de la ventana modal de medios mientras editas una publicación, anterior al mes actual, lo que aparentemente confunde a WordPress sobre en qué directorio está la imagen original y en qué directorio debe guardar la imagen en escala de grises.
Esta es la solución:
<?php
add_filter('wp_generate_attachment_metadata','themename_bw_filter');
function themename_bw_filter($meta) {
$time = substr( $meta['file'], 0, 7); // <- obtener la hora correcta de la carga
$file = wp_upload_dir( $time ); // <- localiza el directorio de carga correcto
$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
cómo cambiar el filtro de resultados de imagen a una carpeta/directorio específico
geertvdheide
Una adición: He agregado algunas líneas para solucionar el problema de tener dos imágenes con el mismo nombre de archivo, causado por tener dos llamadas a add_image_size con el mismo tamaño. El código adicional se encontró aquí:
http://bavotasan.com/2011/create-black-white-thumbnail-wordpress/
mklemme
@geertvdheide
Si quisieras agregar soporte para múltiples tamaños, prueba lo que yo uso:
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 altura no está definida, solo el ancho.)
tendrías que agregar los diferentes nombres para que la función se aplique a todos:
[‘medium-thumb’ , ‘large-thumb’ , ‘small-thumb’] en el código del filtro.
Llamar a la miniatura en tu tema es lo mismo que se indica en el artículo:
Mike Logan
Excelente idea, casi 10 años después esto sigue siendo útil.
geertvdheide
¡Gracias por compartir este código! Excepto que me encuentro con un problema extraño al intentar implementarlo. Está relacionado con el tamaño de la imagen subida (tamaño en píxeles, es decir, sus dimensiones). Copié el código literalmente en el functions.php de mi tema, y funciona de maravilla con imágenes más grandes que el tamaño especificado en la llamada a add_image_size. Pero al usar una imagen más pequeña o igual al tamaño especificado, el cargador de WordPress me da errores y no procesa el tamaño de la imagen (ya sea desde la sección de medios del entorno de administración, o desde una publicación o página específica). El error:
Warning: imagefilter() expects parameter 1 to be resource, string given.
Salgo de otra cosa en el error también, pero esta parece ser la causa principal. ¿Los datos de la imagen proporcionados a la función imagefilter no son válidos o no existen?
¿Alguna idea de qué está causando esto? La única diferencia real entre mi situación y una instalación limpia es que también he agregado algunas otras llamadas a add_image_size para otros propósitos en mi sitio. También estoy agregando el mismo tamaño dos veces (uno en blanco y negro, uno normal), pero eso no parece ser un problema con las imágenes más grandes.
Ed Nailor
@GEERTVDHEIDE
y para otros que necesiten esto:
Cuando el script está convirtiendo la imagen a escala de grises y el archivo subido no cumple con el tamaño de archivo, esto causa que el script falle. Para evitar esto, simplemente agregue una condición if() rápida para asegurarse de que tiene el $file.
$file = trailingslashit($file[‘path’]).$meta[‘sizes’][‘themename-bw-image’][‘file’];
if( $file ) {
list($orig_w, $orig_h, $orig_type) = @getimagesize($file);
——– remainder of code until ——–
return $meta;
}
Esto verificará para asegurarse de que el tamaño de archivo que ha solicitado exista antes de que intente convertirlo.
¡Espero que eso ayude!
frankiegershwin
@Otto42 Gracias por ofrecer. Lo haré.
Otto42
@frankiegershwin ¡qué lástima! Siéntete libre de enviarme un correo electrónico directamente para obtener ayuda con el código. 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 Hazme saber si necesitas ayuda. Agregué una forma de hacer tonos sepia también en mis comentarios en la publicación 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
Ten en cuenta que la gente debería cambiar "themename" por el nombre de su tema en su lugar.