¿Por qué WordPress recorta automáticamente todas mis imágenes?

21 nov 2013, 15:26:15
Vistas: 42.7K
Votos: 7

Soy nuevo en WordPress, cuando subo cualquier imagen, WordPress la recorta automáticamente en sus propios tamaños que no he especificado en la sección de medios (Ajustes » Medios).

La configuración que guardé en medios es:
Configuración guardada en la sección de medios de WordPress

Y cuando reviso en el directorio, se recorta automáticamente en estos tamaños:
Diferentes tamaños de imagen generados automáticamente por WordPress

¿Cómo está sucediendo esto?

1
Comentarios

Una cosa a tener en cuenta @Abhishek360, es que incluso si desactivas todos los plugins/temas, todas las fotos que fueron recortadas/creadas previamente permanecerán allí, a menos que uses el plugin Regenerate Thumbnails. Usar este plugin debería eliminar/añadir cualquier tamaño de imagen para todas las imágenes. :) Enlace aquí: http://wordpress.org/plugins/regenerate-thumbnails/

Eric Holmes Eric Holmes
21 nov 2013 16:06:45
Todas las respuestas a la pregunta 5
2

WordPress por defecto está diseñado para generar 3 tipos de recorte para cualquier imagen subida (Medios):

  • Miniatura (normalmente 150px × 150px)
  • Mediano (normalmente 300px × 300px)
  • Grande (normalmente 1024px × 1024px)

Esto es para garantizar la velocidad del sitio con diferentes tamaños donde sea necesario. Entonces, al subir la imagen Original habría al menos 4 archivos:

  1. El Archivo Original (sin recortar),
  2. Grande,
  3. Mediano, y
  4. Miniatura.

Como ya sabrás, desde /wp-admin/options-media.php, también puedes cambiar las dimensiones predeterminadas de los tamaños. Así que aún puedes usar los tamaños predeterminados para tu propósito personalizado. Pero si aún necesitas un nuevo tamaño además de los tres, WordPress también te permite agregar nuevos tamaños de imagen.

Usando la función add_image_size() con tus parámetros deseados, puedes agregar un nuevo tamaño para tu sitio. Usa la función en tu functions.php para agregar el tamaño de imagen que desees:

add_image_size( $name, $width, $height, $crop );

Donde —
$name : string escribe el nombre entre comillas simples, ej. 'portfolio'
$width: integer escribe el ancho que deseas, ej. 500 (en px)
$height: integer escribe el alto que deseas, ej. 300 (en px)
$crop: boolean escribe true si deseas un recorte fijo de la imagen, de lo contrario usa false

Normalmente podemos llamar diferentes Imágenes Destacadas en cualquier lugar de nuestro tema usando:

the_post_thumbnail( 'medium' ); //mostrará solo el tamaño mediano de la imagen original

Si deseas usar tu nuevo tamaño, usa:

the_post_thumbnail( 'portfolio' ); //como nombré mi tamaño como 'portfolio'

ADVERTENCIA: Como, por defecto WordPress genera 3 tamaños de imagen personalizables, está creando 4 archivos por cada imagen. Usar más tamaños nuevos aumentará el número de archivos en tu alojamiento del sitio. Por lo tanto, usar más tamaños de imagen puede ser un problema para el espacio de alojamiento de tu sitio— consumirá más espacio.

EDITAR

Y después de agregar cada nuevo tamaño de imagen, un plugin muy importante es:

» Regenerate Thumbnail — Plugin de WordPress

En realidad, el nuevo tamaño de imagen asignado solo estará disponible para las imágenes recién subidas. Entonces, para obtener el nuevo tamaño para todas las imágenes subidas anteriormente, necesitarás instalar el plugin y regenerar todas las miniaturas nuevamente. Sería una medida única que duraría para siempre*.

Y tu respuesta principal debería ser:
Velocidad del Sitio: WordPress recorta imágenes para aumentar la velocidad del sitio. Si usas Google PageSpeed, sabrás que sugiere:

Servir imágenes escaladas
Dimensionar correctamente las imágenes puede ahorrar muchos bytes de datos.
Aprende Más

EDITAR 2

Como ya te han sugerido, si tu plugin usa una función similar add_image_size(), puede crear un nuevo tamaño de imagen. Entonces, después de desactivar tus plugins, si usas el plugin Regenerate Thumbnails para regenerar las miniaturas, obtendrás los tamaños reales. Si eso no ayuda, revisa el archivo functions.php de tu tema o cualquier archivo de funciones agregado en busca de dicha función add_image_size(), y ahora sabes qué hacer.

21 nov 2013 16:55:25
Comentarios

Respuesta detallada y buena +1

kaiser kaiser
22 nov 2013 08:19:15

¡Me ahorraste mucho tiempo, muchas gracias por esta explicación detallada!

Julien Julien
29 sept 2014 15:31:24
5

Sí, WordPress redimensiona y recorta todas las imágenes dependiendo de lo que tu tema haya definido, como @Gerard ya explicó en su respuesta. Así que el último argumento booleano en add_image_size() es para recortar o no. Ten en cuenta que esto no define la posición del recorte. Para modificar ese comportamiento, mira esta respuesta como ejemplo.

¿Qué pasa dentro del núcleo?

Como ya has visto en el código fuente de add_image_size(), WP usa la global $_wp_additiona_image_sizes para almacenar y manejar los ajustes para la generación de tus imágenes. Ahora, cuando subes una imagen, entra en juego la clase WP_Image_Editor y - dependiendo de las extensiones de PHP habilitadas en tu servidor - llama a WP_Image_Editor_GD o a WP_Image_Editor_Imagick. Ambas clases Singleton tienen un método resize() que llama a image_resize_dimensions(). Al final, image_resize_dimensions() no redimensiona ni recorta la imagen. Solo calcula los valores.

Esto se hace mediante el método crop() en la clase Imagick y usando la función nativa de PHP imagecopyresampled() dentro de la clase GD.

¿Cómo deshabilitar el recorte?

Primero, tenemos muchas posibilidades:

  • Detectar qué clase está en uso (qué extensión de PHP es soportada) y luego interceptar lo que sea que se use para recortar (ver arriba).
  • Cortocircuitar todo el proceso y dejar que image_resize_dimensions() haga su trabajo.

Usaremos el segundo método aquí. Siéntete libre de añadir tu propia solución como una respuesta separada. Esto es lo que el núcleo nos ofrece: Un filtro que contiene todos los parámetros.

$output = apply_filters( 'image_resize_dimensions', null, $orig_w, $orig_h, $dest_w, $dest_h, $crop ); 

El primer argumento es null, lo que le indica al núcleo en la siguiente línea si queremos sobrescribir lo que esta función hace internamente - y reemplazarlo con nuestro propio comportamiento - o no. Así que si devolvemos cualquier cosa aparte de null, entonces esto es lo que el núcleo usará. Ten en cuenta que puedes poner cualquier cosa allí, pero aún así el núcleo esperará el mismo valor de retorno que image_resize_dimensions() usa por defecto. De los comentarios en el código:

El array de retorno coincide con los parámetros de imagecopyresampled():

int dst_x, int dst_y,

int src_x, int src_y,

int dst_w, int dst_h,

int src_w, int src_h

Ahora, para simplemente deshabilitar el recorte tendríamos que reemplazar (en otras palabras: clonar) todo el funcionamiento interno - algo que queremos evitar. Por lo tanto, usamos un "filtro de una sola vez" que se deshabilita a sí mismo. Hacemos esto para usar el funcionamiento interno, pero simplemente deshacernos de lo que no necesitamos.

<?php
defined( 'ABSPATH' ) or exit;
/* Plugin Name: (#124009) Deshabilitar recorte de imágenes */

add_filter( 'image_resize_dimensions', 'wpse124009DisableCrop', 10, 6 );
function wpse124009DisableCrop( $enable, $orig_w, $orig_h, $dest_w, $dest_h, $crop )
{
    // Deshabilita instantáneamente este filtro después de la primera ejecución
    remove_filter( current_filter(), __FUNCTION__ );

    return image_resize_dimensions( $orig_w, $orig_h, $dest_w, $dest_h, false );
}

Ahora el recorte está deshabilitado en todas partes. Si estás ejecutando multisitio o no quieres pensar si este plugin está activado, simplemente úsalo como un mu-plugin.

Por favor ten en cuenta que lo anterior no está probado, sino escrito de memoria después de leer el código fuente del núcleo.

Información adicional

Más información sobre las clases de manejo de imágenes en las diapositivas de Marko de WordCamp Europe y el video de la presentación se puede encontrar en WordPress.tv.

21 nov 2013 17:13:33
Comentarios

Kaiser, ¿quién te enseñó estas cosas? ¿Quién es tu tutor? Quiero convertirme en tu estudiante devoto. :)

abhishek360 abhishek360
22 nov 2013 07:35:51

@abhishek360 Ya lo soy. :)

Mayeenul Islam Mayeenul Islam
22 nov 2013 08:47:32

@MayeenulIslam ¿en serio eres uno de sus estudiantes? Yo también quiero convertirme en un ninja de WP. Si Kaiser (gran maestro) está ocupado, ¿me aceptarías como estudiante?

abhishek360 abhishek360
22 nov 2013 08:57:34

@abhishek360 ¡Ups! ;) Aquí en esta plataforma, todos somos estudiantes o maestros de todos. Todos estamos tratando de aprender algo desde dentro. Nadie puede enseñar, pero el aprendizaje viene desde dentro. Quédate en esta plataforma, sirve a los demás, practica más, hay muchos como Kaiser, que son nuestros maestros. Yo todavía soy un bebé en WP - y ellos son mis mentores. ;)

Mayeenul Islam Mayeenul Islam
22 nov 2013 10:14:59

@MayeenulIslam palabras increíbles... si tú eres un bebé en WP, entonces supongo que yo ni siquiera he nacido todavía. De cualquier forma, seguiré explorando... gracias.

abhishek360 abhishek360
22 nov 2013 11:33:01
5

Normalmente es porque un tema de Wordpress utiliza las miniaturas en su código: en bucles, galerías, etc. Se define en el archivo functions.php:

add_image_size( $name, $width, $height, $crop );

Por ejemplo, así:

add_theme_support('post-thumbnails');
add_image_size('custom-thumbnail', 80, 80, true );
add_image_size('medium-thumbnail', 180, 120, true );
add_image_size('large-thumbnail', 571, 300, true );

No te recomiendo eliminar el código si realmente quieres mantener el buen funcionamiento de tu tema. Si deseas eliminarlo, necesitarás borrar las llamadas en los otros archivos donde se utiliza; comúnmente en el archivo loop.php.

21 nov 2013 15:41:19
Comentarios

así que si elimino las llamadas de las páginas de loop y galerías, ¿usaría solo el tamaño que definí? ¿es posible hacer esto sin afectar mi tema?

abhishek360 abhishek360
21 nov 2013 15:51:43

Sí, es posible. El tamaño definido en tu primera captura de pantalla se usará cuando insertes una imagen en una publicación. Los otros tamaños definidos en functions.php se usan como miniaturas/imágenes para la estructura del tema, por lo que es muy probable que también necesites ajustar el CSS.

Unix Unix
21 nov 2013 15:58:10

ohh, no soy un tipo muy técnico que pueda editar donde quiera. ¿Puedes sugerirme qué debo hacer para lograrlo fácilmente? Y el código que has pegado arriba, no estaba en mi functions.php. He pegado todo eso y definí el tamaño. Espero que funcione.

abhishek360 abhishek360
21 nov 2013 16:09:44

Bueno, si no está en functions.php, es porque ese archivo tiene 'includes' o 'requires' de otros archivos, separando su contenido en varios archivos. Necesitas revisar los otros archivos para eliminar la función que contiene add_image_size. Si agregaste el código que pegué antes, tu tema generará más recortes que antes. PD: Por cierto, la mayoría de los temas generan recortes como este, y solo es un problema si necesitas optimizar la memoria del servidor. Si lo necesitas, las imágenes recortadas se guardan en el directorio 'Uploads'. ¿Podrías pegar el functions.php en Pastebin? Le echaré un vistazo :)

Unix Unix
21 nov 2013 16:48:32

gracias Gerard, Mayeenul Islam y kaiser resolvieron mi problema, solo quería un conjunto definido de imágenes recortadas de un tamaño definido y lo logré.

abhishek360 abhishek360
22 nov 2013 07:43:25
2

Los plugins y temas pueden definir sus propios tamaños de miniaturas. WordPress convertirá todas las imágenes recién subidas a todas las definiciones de tamaño registradas.

21 nov 2013 15:31:22
Comentarios

He desactivado todos los plugins excepto (akismet) y estoy usando el tema twenty thirteen. ¿Podrías ayudarme más? ¿Qué debo hacer para que solo recorte el tamaño que he definido?

abhishek360 abhishek360
21 nov 2013 15:35:06

@abhishek360 cuando dices que has desactivado todos los plugins y estás usando un tema base como 2013. ¿Podrías intentar subir una imagen nueva y ver si aún tienes imágenes diferentes?

Maruti Mohanty Maruti Mohanty
21 nov 2013 16:01:15
0

Para desactivar el recorte automático, inserta el siguiente código en el archivo disable-automatic-image-crop.php dentro de tu carpeta mu-plugins:

<?php
/*
Plugin Name: Desactivar Recorte Automático de Imágenes
Author: Comunidad de WordPress
Description: https://gist.github.com/czenzel/0f5888cbbfa4a857e56361dd3bc19b39
*/
add_action( 'init', 'czc_disable_extra_image_sizes' );
add_filter( 'image_resize_dimensions', 'czc_disable_crop', 10, 6 );
function czc_disable_crop( $enable, $orig_w, $orig_h, $dest_w, $dest_h, $crop )
{
    // Desactiva este filtro inmediatamente después de la primera ejecución
    // remove_filter( current_filter(), __FUNCTION__ );
    // return image_resize_dimensions( $orig_w, $orig_h, $dest_w, $dest_h, false );
    return false;
}
function czc_disable_extra_image_sizes() {
    foreach ( get_intermediate_image_sizes() as $size ) {
        remove_image_size( $size );
    }
}
?>
4 nov 2019 17:09:19