WP 4.4. Navegador de imágenes sensibles seleccionando el "incorrecto"

Navega tus respuestas
10

Me alegro de que WP 4.4. Se envía con una función de imagen receptiva incorporada. Pero no estoy tan contento con eso.

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

add_image_size('post-thumbnails', 600, 600, true);
add_image_size('news-large', 1024, false);
add_image_size('news-small', 500, false);
add_image_size('3-col', 500, 375, true);
add_image_size('presscutting', 600, 850, true);
add_image_size('medium-large', 768, false); // just added today for devices support
add_image_size('full-feature-image', 2000, false);
add_image_size('gallery-image', 800, 600, true);

Como pensé, las imágenes que no están recortadas (el recorte establecido en false ) se agregan al srcset . Se muestra una imagen en la interfaz como (se agregan saltos de línea para mejorar la legibilidad): 

<img width="2000" height="1335"
src="http://mywebsite.com/cms/wp-content/uploads/2015/03/image-2000x1335.jpg"class="attachment-full-feature-image size-full-feature-image"
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" 
sizes="(max-width: 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. Así que todas las imágenes se ven borrosas.

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

    
pregunta rob_st 10.12.2015 - 10:21

2 respuestas

9

En cuanto a la documentación, hay una 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ó, debes arreglar tus llamadas a add_image_size

  

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

necesita ser 

add_image_size('news-large', 1024, 0, false);
    
respondido por el kraftner 10.12.2015 - 16:04
1

Resolví el mismo problema agregando un tamaño adicional al srcset con una función de filtro que puedes agregar a 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 );
    
respondido por el user1895954 10.12.2015 - 21:49

Lea otras preguntas en las etiquetas

¿Ordenar por valor meta o fecha? ¿Cómo agregar el botón "Insertar / Editar enlace" en la ventana personalizada de ventanas emergentes?