Cómo poner imágenes en escala de grises en WordPress

¿Te estás preguntando si había una forma de escalar automáticamente las imágenes en gris en WordPress cuando las subes?

Por lo general, necesita una herramienta de edición de fotos para cambiar sus imágenes a escala de grises. Sin embargo, esto puede llevar mucho tiempo, ya que deberá editar cada imagen individual antes de cargarla en su sitio web.

En este artículo, le mostraremos cómo escalar imágenes en escala de grises en WordPress mientras las carga en su sitio.

Imágenes en escala de grises en WordPress

¿Cuándo debería usar imágenes en escala de grises en WordPress?

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

En determinadas situaciones, el uso de imágenes en escala de grises puede ser beneficioso para su sitio web de WordPress. Por ejemplo, puede usarlo para mejorar la legibilidad de los objetos que se muestran en la imagen.

Por otro lado, las imágenes en escala de grises se utilizan comúnmente 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, veamos cómo puede convertir sus imágenes en escala de grises en WordPress cuando las cargue.

Imágenes de Graysabling al cargar en WordPress

Cuando se trata de agregar imágenes en el blog de WordPress, deberá editarlas antes de cargarlas utilizando un software de edición de fotos como Photoshop y convertir las imágenes en color a escala de grises.

Si tiene cientos o miles de imágenes para cargar, puede tomar mucho tiempo editar cada imagen manualmente.

Sin embargo, puede convertirlos automáticamente en imágenes en escala de grises al cargarlos. Para comenzar, todo lo que tiene que hacer es agregar el siguiente código al archivo functions.php de su 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 simple de agregar código a los archivos de temas es usando el Fragmentos de código Complemento para WordPress. Es un complemento gratuito que lo ayuda a ejecutar fragmentos de código sin la necesidad de editar manualmente el archivo function.php de su tema.

Primero, deberá descargar e instalar el complemento Code Snippets en su sitio. Si necesita ayuda, siga nuestra guía sobre cómo instalar un complemento de WordPress.

Tras la activación, puede dirigirse a la Fragmentos » Añadir nuevo desde tu panel de WordPress.

Agregar un nuevo fragmento de código

A continuación, ingrese un nombre para su fragmento y pegue el código anterior en el área del código.

Agregar fragmento de código para imágenes en escala de grises

Después de ingresar el código, simplemente haga clic en el botón ‘Activar’ y guarde los cambios.

A continuación, puede probar el código editando o agregando una nueva página. Cuando esté en el editor de WordPress, haga clic en el botón ‘+’ y agregue un bloque de imagen.

Ahora puede cargar cualquier imagen en su sitio web de WordPress y se convertirá automáticamente en una imagen en escala de grises.

Convertir imágenes a escala de grises al subirlas

Esperamos que este artículo le haya ayudado a aprender a escalar imágenes en escala de grises en WordPress. También puede consultar nuestra guía sobre cómo elegir la mejor plataforma de blogs y el mejor generador de nombres comerciales gratuito.

.

Deja un comentario