Cómo cambiar la escala de grises de las imágenes en WordPress

¿Te preguntas si hay una forma de poner automáticamente en escala de grises las imágenes en WordPress cuando las subes?

Normalmente, necesitas una herramienta de edición de fotos para cambiar tus imágenes a escala de grises. Sin embargo, esto puede llevar mucho tiempo, ya que tendrás que editar cada imagen individual antes de subirla a tu sitio web.

En este artículo, te mostraremos cómo cambiar la escala de grises de las imágenes en WordPress al subirlas a tu sitio.

¿Cuándo debes utilizar imágenes en escala de grises en WordPress?

Las imágenes en escala de grises sólo contienen información sobre la cantidad de luz en la imagen. Los colores de las imágenes muestran diferentes tonos de gris, que varían entre el blanco y el negro.

En determinadas situaciones, utilizar imágenes en escala de grises puede ser beneficioso para tu sitio web de WordPress. Por ejemplo, puedes utilizarla para mejorar la legibilidad de los objetos mostrados en la imagen.

Por otra parte, las imágenes en escala de grises se utilizan habitualmente para el procesamiento de imágenes debido a su pequeño tamaño. Permite a los desarrolladores ejecutar operaciones complejas en menos tiempo.

Dicho esto, vamos a ver cómo puedes convertir tus imágenes en escala de grises en WordPress cuando las subas.

Convertir las imágenes en escala de grises al subirlas en WordPress

Cuando se trata de añadir imágenes en el blog de WordPress, tendrías que editarlas antes de subirlas utilizando un software de edición de fotos como Photoshop y convertir las imágenes de color a escala de grises.

Si tienes cientos o miles de imágenes que 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 añadir 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 añadir el código a los archivos del tema es utilizando el botón Fragmentos de código para WordPress. Es un plugin gratuito que te ayuda a ejecutar fragmentos de código sin necesidad de editar manualmente el archivo function.php de tu tema.

En primer lugar, tendrás que descargar e instalar el plugin Code Snippets en tu sitio. Si necesitas ayuda, sigue nuestra guía sobre cómo instalar un plugin de WordPress.

Tras la activación, puedes dirigirte a la página Recortes " Añadir nuevo desde tu panel de control de WordPress.

A continuación, introduce un nombre para tu fragmento y pega el código anterior en el área de código.

Después de introducir el código, simplemente haz clic en el botón "Activar" y guarda los cambios.

A continuación, puedes probar el código editando o añadiendo una nueva página. Cuando estés en el editor de WordPress, haz clic en el botón '+' y añade un bloque de imagen.

Ahora puedes subir cualquier imagen en tu sitio web 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 convertir imágenes en escala de grises en WordPress. También puedes consultar nuestra guía sobre cómo elegir la mejor plataforma de blogs y el mejor generador gratuito de nombres de empresas.

Si te ha gustado este artículo, suscríbete a nuestro Canal de YouTube para los videotutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.