Tamaño / miniatura de imagen personalizada: recorte a relación de aspecto incluso cuando la imagen de origen es más pequeña que las dimensiones establecidas

11

Normalmente, cuando establece un tamaño de imagen personalizado con recorte duro, por ejemplo add_image_size( 'custom-size', 400, 400, true );, obtiene los siguientes resultados:

  • # 1 Imagen cargada: 600x500> Miniatura: 400x400.
  • # 2 Imagen cargada: 500x300> Miniatura: 400x300.
  • # 3 Imagen cargada: 300x200> Miniatura: 300x200.

Sin embargo, lo que me gustaría hacer es cuando la imagen cargada es más pequeña que el ancho establecido, o la altura, o ambos, del tamaño de imagen personalizado, por ejemplo, los ejemplos # 2 y # 3 anteriores, en lugar de que la imagen se recorte para ajustarse dentro de esas dimensiones, también se recorta para que coincida con su relación de aspecto (que en este caso es 1: 1) así:

  • # 1 Imagen cargada: 600x500> Miniatura: 400x400.
  • # 2 Imagen cargada: 500x300> Miniatura: 300x300 .
  • # 3 Imagen cargada: 300x200> Miniatura: 200x200 .

No creo que esto sea posible usando las opciones estándar add_image_size, pero ¿es posible usar una función diferente o un gancho que modifique la función add_image_size?

¿O hay un complemento que agrega esta funcionalidad?

Cualquier información que alguien pueda proporcionar sería muy apreciada.

Joey Joe Joe Junior Shabadoo
fuente
Para aclarar aún más mi pregunta. Me gustaría poder configurar add_image_sizepara hacer lo que he descrito anteriormente. Estoy bastante seguro de que esto no es posible usando los parámetros estándar, pero espero que sea posible usando un gancho, acción o filtro.
Joey Joe Joe Junior Shabadoo

Respuestas:

2

Tienes razón en que simplemente no funciona así.

Sin embargo, si está bien pensar su pregunta al revés, puede obtener el resultado correcto en los navegadores modernos utilizando una selección de tamaños de imagen e imágenes receptivas.

Si usa un código como este:

add_image_size( 'custom-size-small', 200, 200, true );
add_image_size( 'custom-size-medium', 300, 300, true );
add_image_size( 'custom-size-large', 400, 400, true );

... y en tus plantillas algo como:

wp_get_attachment_image( $image_ID, 'custom-size-small' )

... luego, de forma predeterminada (WP 4.4 y posterior), obtendrá una etiqueta de imagen con la versión más pequeña de su conjunto como srcy los tamaños más grandes en el srcsetatributo, que los navegadores más nuevos elegirán y mostrarán la versión apropiada más grande.

Entonces, si una imagen en particular no tiene una versión más grande, no importa. Se 300x200creará una 200x200versión de una imagen , esa versión será la única en el HTML y todos los navegadores la mostrarán.

Resolví esto mientras ajustaba imágenes receptivas para obtener un buen rendimiento en navegadores que solo son compatibles srcy no srcset.

Andy Macaulay-Brook
fuente
Gracias por la respuesta. Esta es una solución interesante, pero desafortunadamente no creo que funcione para mi situación. Las imágenes serían cargadas por el usuario final y podrían ser de cualquier tamaño. Esta solución, a menos que la entienda mal, solo funciona si las imágenes cargadas son un conjunto fijo de tamaños. Por ejemplo, el código anterior funcionaría para una imagen de 500x200, pero no para una imagen de 500x199.
Joey Joe Joe Junior Shabadoo
2

Esta no es una solución realmente buena ya que es una solución CSS más nueva y solo funciona en el 78.9% de los navegadores de los usuarios , pero hay algunos polyfills que pueden superar ese ajuste de imagen y ajuste de objeto.

img {
    display: block;
    overflow: hidden;
    width: 400px;
    height: 400px;
    -o-object-fit: cover;
       object-fit: cover;
}

Idealmente, sería mejor si las imágenes más pequeñas se escalaran proporcionalmente en la carga, pero no he podido encontrar una solución para eso.

Bryan Willis
fuente
Gracias por la respuesta. Ni siquiera estaba al tanto de esta propiedad, pero sí, como dijiste, la falta de compatibilidad con el navegador hace que sea imposible. Quizás en unos años a partir de ahora, tal vez.
Joey Joe Joe Junior Shabadoo
De hecho, recién comencé a usar polyfill "object-fit-images" y, aunque parece funcionar Joey, todavía no lo he probado en IE ya que solo tengo Mac. Aquí está en acción, si quieres echar un vistazo . Se está utilizando en las miniaturas de la cuadrícula en esa página. Sin embargo, sé que tiene que haber un complemento que resuelva este problema. Sin embargo, hasta ahora YoImages es un buen complemento para el ajuste de objetos, ya que le permite cambiar la posición de recorte a cualquier posición para cada imagen.
Bryan Willis