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

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

WordPress 3.9 salió con mucha 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: ¡es realmente elegante!

Antes de continuar, muchas gracias a Brad Touesnard ¡Quién hizo 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 función, sino también para recorrer y comprender bien todo el alcance de esta función.

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

De forma predeterminada, WordPress genera 3 veces más versiones de su imagen. Una versión en miniatura, mediana y grande. El tamaño de la imagen cargada original se conoce como la versión “completa”.

Personalización de valores predeterminados

Puede anular los valores predeterminados para 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 );

Cultura dura normal

Consejo: 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 Códice de WordPress.

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

El parámetro $ crop anteriormente era solo un valor booleano, verdadero o falso. Entonces, una cosecha proporcional suave o una cosecha dura si se establece en verdadero (siga leyendo a continuación para ver la diferencia entre una cosecha dura y una 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 del centro, así 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 siempre acepta valores verdaderos / falsos y, según Brad, es totalmente compatible con versiones anteriores. La sintaxis es la misma que la propiedad de posición de fondo de CSS, por lo que es familiar para los diseñadores y desarrolladores, pero aquí están de todos modos para mayor claridad.

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

Así que lo recorté, ¿ahora cómo lo uso?

La buena noticia… ¡¡es exactamente lo mismo !! Para obtener un desglose completo, como siempre, mire el Códice de WordPress. De todos modos, aquí hay un recordatorio. Para llamar a esta imagen personalizada en su tema o complemento. En el ejemplo que usamos, 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 iteran y generan a medida que realiza la descarga. Esto ahora significa que después de usar 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 descarga y ninguna de estas nuevas versiones de imagen no está disponible ¡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 regenerar el complemento de miniaturas. Este complemento ha existido durante mucho tiempo, ¡es fantástico! Pasará por todas las imágenes cargadas existentes y regenerará cualquier tamaño de imagen nuevo que haya agregado o personalizado. Woohooo problema resuelto 🙂

Duro contra. Cultivo suave: lo has decidido

Cultura dura

Cultura dura normal
La imagen se escalará y luego se recortará a las dimensiones exactas que especificó. Dependiendo de la proporción de la imagen al tamaño del recorte, existe una buena posibilidad de que la imagen aún se recorte.

Cultura apacible

Cultura apacible
Un recorte suave nunca cortará ninguna parte de la imagen, cambiará el tamaño de la imagen hasta que se ajuste a las dimensiones especificadas, manteniendo su relación de aspecto original.

Algo para saber …

En el caso de que una dimensión de la imagen cargada (ancho o alto) sea menor que la del tamaño de recorte definido, se ignorará y no se creará una versión para ese tamaño. WordPress recorrerá todos los tamaños de imagen definidos y solo creará versiones de esas imágenes que sean más grandes que la versión que está tratando de generar. En tal caso, cuando se busca una imagen en su tema o complemento y no existe, se utilizará de forma predeterminada en la imagen original, “ Completo ” como respaldo.

Aproveche la implementación de esta nueva función en sus temas y complementos. Es hora de patear traseros y recortar algunas fotos 🙂

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba