WP 4.4. navegador de imágenes receptivo que elige el "incorrecto"


9

Me alegro de que WP 4.4. se entrega con una función de imagen receptiva incorporada. Pero no estoy tan feliz con eso.

He configurado algunos tamaños de imagen personalizados en mi functions.php:

add_image_size ('post-thumbnails', 600, 600, verdadero);
add_image_size ('news-large', 1024, falso);
add_image_size ('news-small', 500, false);
add_image_size ('3-col', 500, 375, verdadero);
add_image_size ('presscutting', 600, 850, verdadero);
add_image_size ('mediano-grande', 768, falso); // recién agregado hoy para soporte de dispositivos
add_image_size ('full-feature-image', 2000, false);
add_image_size ('galería-imagen', 800, 600, verdadero);

Como supuse, imágenes que no se recortan (conjunto de cultivo false) se añade al srcset. Se muestra una imagen en la interfaz como (saltos de línea agregados para una mejor legibilidad)

<img width = "2000" height = "1335"
src = "http://mywebsite.com/cms/wp-content/uploads/2015/03/image-2000x1335.jpg" 
clase = "adjunto-imagen-característica-completa tamaño-imagen-característica-completa"
alt = "asdf"
srcset = "
http://mywebsite.com/cms/wp-content/uploads/2015/03/image-300x200.jpg 300w, 
http://mywebsite.com/cms/wp-content/uploads/2015/03/image-768x513.jpg 768w, 
http://mywebsite.com/cms/wp-content/uploads/2015/03/image-1024x683.jpg 1024w, 
http://mywebsite.com/cms/wp-content/uploads/2015/03/image-500x334.jpg 500w " 
tamaños = "(ancho máximo: 2000px) 100vw, 2000px">

Pero ahora mi problema: en mi pantalla, solo se muestran las imágenes especificadas con un ancho de 1024px, aunque tiene una resolución de pantalla de 1600px. Entonces todas las imágenes se ven borrosas.

¿Cómo puedo hacer que WP y / o mi navegador usen la imagen de 2kpx? ¿Tendría que agregar nuevos tamaños de imagen para, digamos 1280 px, 1440 px, 1600 px, 1968 px? ¿O hay una manera más simple de decirle a WP / al navegador que use la imagen más grande en lugar de mostrar una versión borrosa y demasiado pequeña?


¿Puedes probar esto con la forma correcta de usar add_image_size? Siempre establece el widthargumento en falso; este debería ser un número entero (tercer argumento).
fischi

Ok, hecho eso y agregado un valor de altura de 9999. Miniaturas redimensionadas. Sin resultado.
rob_st

El valor predeterminado del max_srcset_image_widthfiltro es 1600.
birgire

Es bueno saber @birgire, pero eso no ayuda mucho. ¿Cómo lo cambio (parece que todavía no hay documentación) y un cambio resolverá mi problema?
rob_st

Respuestas:


9

En cuanto a la documentación, hay esta publicación de blog en Make Blog:

Imágenes receptivas en WordPress 4.4

Para aumentar el límite de 1600px mencionado en los comentarios, intente esto:

add_filter('max_srcset_image_width', function($max_srcset_image_width, $size_array){
    return 2000;
}, 10, 2);

Finalmente, como ya se mencionó, debe corregir sus llamadas a add_image_size

add_image_size ('news-large', 1024, falso);

necesita ser

add_image_size('news-large', 1024, 0, false);

Gracias. He establecido la altura en 9999: ¿hace alguna diferencia? Voy a tratar de salir.
rob_st

Gracias, eso lo hizo funcionar. Aunque es básicamente la misma respuesta que esta y en realidad prefiero las funciones con nombre
Acepté la

Creo que esta podría ser la respuesta que necesito, pero no sé qué valor $size_arraydebería tener.
Telarian

1

Resolví el mismo problema agregando un tamaño adicional al srcsetcon una función de filtro que puedes agregar en tu functions.php:

function filter_max_srcset( $max_width, $size_array ) {
    if ( $size_array[0] === 1800 ) {
        $max_width = 1800;
    }
    return $max_width;
}
add_filter( 'max_srcset_image_width', 'filter_max_srcset', 10, 2 );
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.