Una guía para los tamaños de recorte de imágenes de WordPress

WordPress 3.9 ha salido con una gran cantidad de potencia adicional bajo el capó. Una nueva característica increíble entre muchas, es la capacidad adicional de controlar ahora la posición de recorte de las imágenes cargadas en WordPress, ¡esto es realmente hábil!

Antes de continuar, muchas gracias a Brad Touesnard, quien ha hecho esta increíble contribución que ahora se ha incluido en el núcleo de WordPress. Pensé que esta sería una gran oportunidad no solo para explicar cómo aprovechar esta nueva característica, sino también para ejecutar y controlar bien todo el alcance de esta función.

El comienzo mismo: agregar o personalizar tamaños de imagen

Por defecto, WordPress genera 3 veces más versiones de su imagen. Una versión en miniatura, mediana y grande. El tamaño de la imagen original cargada se conoce como la versión ‘completa’.

Personalización de los valores predeterminados

Puede sobrescribir los valores predeterminados de cada uno de estos tamaños de cultivo con bastante facilidad. Puedes ir a tu Tablero de WordPress, Configuración >> Medios y cambie los valores allí o puede hacerlo a través de su tema o archivo de funciones de complemento como este:

update_option('thumbnail_size_w', 250);
update_option('thumbnail_size_h', 250);
update_option('thumbnail_crop', 1);

Agregar tamaños adicionales

Puede colocar esta función rápida y fácilmente en su tema o archivo de funciones de complemento:

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

Terminaría luciendo algo como esto:

add_image_size( 'homepage-thumb', 250, 250, true );

Cultivo duro normal

Propina: Recuerde darle a cada tamaño de imagen adicional su propio nombre único ;-).

Todo lo que necesita saber se puede encontrar a través del Codex de WordPress.

Algunos WordPress 3.9+ Magic – Control de la posición del recorte

El parámetro $ crop anteriormente era solo un valor booleano, verdadero o falso. Entonces, ya sea un cultivo suave proporcional o un cultivo duro si se establece en verdadero (siga leyendo más abajo para ver la diferencia entre un cultivo duro y suave). Sin embargo, ahora puede usar una matriz para especificar la posición del área de recorte, (x_crop_position, y_crop_position). Me gustan las imágenes recortadas desde el centro, por lo que, por ejemplo, su función podría verse así ahora:

add_image_size( 'homepage-thumb', 250, 250, array( 'center', 'center' ) );

Cultivo duro seleccionado por el usuario

El parámetro $ crop todavía acepta valores verdaderos / falsos y, según Brad, es totalmente compatible con versiones anteriores. La sintaxis es idéntica a la de la propiedad de posición de fondo de CSS, por lo que es familiar tanto para los diseñadores como para los desarrolladores, pero aquí están en cualquier caso en aras de la claridad.

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

Así que lo tengo recortado, ¿cómo lo uso?

La gran noticia … ¡¡es exactamente lo mismo !! Para obtener un desglose completo, como siempre, consulte el Codex de WordPress. Aquí hay un recordatorio en cualquier caso. Para llamar a esta imagen personalizada en su tema o complemento. En el ejemplo que hemos estado usando, así es como:

the_post_thumbnail('homepage-thumb');

o…

wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'homepage-thumb') );

Pero, ¿qué pasa con todas mis imágenes existentes?

Como probablemente sepa, los tamaños de los cultivos se repiten y se generan en el momento de la carga. Esto ahora significa que después de hacer uso de esta nueva función agregando nuestra posición de recorte personalizada o cambiando / agregando un nuevo tamaño de recorte, ahora nos queda lo que se generó en el momento de la carga y ninguna de estas nuevas versiones de imagen está disponible para nosotros. no es genial!

Aaah, pero espera … Afortunadamente hay muchas personas inteligentes e increíbles en la comunidad de WordPress para salvar el día, aquí está el complemento de regeneración de miniaturas. Este complemento ha existido durante mucho tiempo, ¡es fantástico! Pasará por todas las imágenes cargadas existentes y regenerará todos los tamaños de imagen nuevos que haya agregado o personalizado. Woohooo problema resuelto 🙂

Duro vs. Cultivo suave: tú decidiste

Cultivo duro

Cultivo duro normal
La imagen se escalará y luego se recortará a las dimensiones exactas que haya especificado. Dependiendo de la proporción de la imagen en relación con el tamaño del recorte, es probable que la imagen siempre se corte.

Cultivo suave

Cultivo suave
Un recorte suave nunca cortará ninguna parte de la imagen, la reducirá hasta que se ajuste a las dimensiones especificadas, manteniendo su relación de aspecto original.

Algo que vale la pena saber …

En el caso de que alguna dimensión de la imagen cargada (ancho o alto) sea menor que la del tamaño de recorte establecido, se omitirá y no se creará una versión para ese tamaño. WordPress recorrerá todos los tamaños de imagen establecidos y solo creará las versiones de esas imágenes que sean más grandes que las de la versión que está tratando de generar. En tal caso, cuando se recupera una imagen dentro de su tema o complemento y no existe, se tomará de forma predeterminada la imagen ‘Completa’ original como respaldo.

Disfrute implementando esta gran característica nueva en sus temas y complementos. Es hora de patear traseros y recortar algunas imágenes 🙂

Publicaciones relacionadas

Botón volver arriba