WP 4.4. navegador de imagens responsivas escolhendo o “errado”

9

Fico feliz que o WP 4.4. é fornecido com um recurso de imagem responsiva embutido. Mas não estou tão feliz com isso.

Configurei alguns tamanhos de imagem personalizados em functions.php:

add_image_size ('pós-miniaturas', 600, 600, true);
add_image_size ('notícia grande', 1024, false);
add_image_size ('notícias pequenas', 500, false);
add_image_size ('3-col', 500, 375, verdadeiro);
add_image_size ('presscutting', 600, 850, verdadeiro);
add_image_size ('médio-grande', 768, falso); // acabou de ser adicionado hoje para suporte a dispositivos
add_image_size ('imagem de recurso completo', 2000, false);
add_image_size ('galeria-imagem', 800, 600, true);

Como imaginei, as imagens que não são cortadas (corte definido como false) são adicionadas ao srcset. Uma imagem é exibida no front-end (como quebras de linha adicionadas para melhor legibilidade):

<img width = "2000" height = "1335"
src = "http://mywebsite.com/cms/wp-content/uploads/2015/03/image-2000x1335.jpg" 
class = "imagem de anexo com recurso completo tamanho da imagem com recurso completo"
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 " 
tamanhos = "(largura máxima: 2000 px) 100 vw, 2000 px">

Mas agora o meu problema: na minha tela, apenas as imagens especificadas com 1024px de largura são mostradas, embora tenha uma resolução de tela de 1600px. Então, todas as imagens parecem embaçadas.

Como posso fazer com que o WP e / ou meu navegador usem a imagem 2kpx? Eu precisaria adicionar novos tamanhos de imagem para, digamos, 1280px, 1440px, 1600px, 1968px? Ou existe uma maneira mais simples de dizer ao WP / navegador para usar a imagem maior em vez de mostrar uma versão borrada e muito pequena?

images responsive features rob_st
fonte
Você pode tentar isso com a maneira correta de usar add_image_size? Você sempre define o widthargumento como false - este deve ser um número inteiro (terceiro argumento).
fischi
Ok, fiz isso e adicionei um valor de altura de 9999. Miniaturas redimensionadas. Não disponível.
rob_st
O padrão do max_srcset_image_widthfiltro é 1600.
birgire
É bom saber @birgire - mas isso não ajuda muito. Como faço para alterá-lo (parece não haver documentação ainda) - e uma alteração resolverá meu problema?
rob_st

Respostas:

9

Em relação à documentação, há esta postagem no blog Make Blog:

Imagens responsivas no WordPress 4.4

Para aumentar o limite de 1600 px mencionado nos comentários, tente o seguinte:

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

Por fim, como já mencionado, você deve corrigir suas chamadas para add_image_size

add_image_size ('notícia grande', 1024, false);

precisa ser

add_image_size('news-large', 1024, 0, false);
kraftner
fonte
Obrigado. Eu ajustei a altura para 9999 - isso faz alguma diferença? Vou testá-lo.
rob_st
Obrigado, isso fez funcionar. Embora seja basicamente a mesma resposta como este e realmente prefiro chamados funções - Eu aceito seu, porque você era primeiro :-)
rob_st
Acho que essa pode ser a resposta que preciso, mas não sei qual valor $size_arraydeve ter.
Telarian
1

Resolvi o mesmo problema adicionando um tamanho extra à função srcsetcom filtro que você pode adicionar no seu 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 );
user1895954
fonte