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.
add_image_size
para 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.Respuestas:
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:
... y en tus plantillas algo como:
... 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
src
y los tamaños más grandes en elsrcset
atributo, 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
300x200
creará una200x200
versió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
src
y nosrcset
.fuente
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.
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.
fuente