Fico feliz que o WP 4.4. vem com um recurso de imagem responsivo integrado. Mas eu não estou tão feliz com isso.
Eu configurei alguns tamanhos de imagem personalizados no meu 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 percebi, as imagens que não são cortadas (corte definido como false ) são adicionadas ao srcset . Uma imagem é impressa no frontend como (quebra de linha adicionada para melhor legibilidade):
<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">
Mas agora meu problema: Na minha tela, apenas as imagens especificadas com largura de 1024 pixels são mostradas, embora tenha uma resolução de tela de 1600px. Então todas as imagens parecem borradas.
Como posso fazer com que o WP e / ou o meu navegador usem a imagem de 2kpx? Eu teria que adicionar novos tamanhos de imagem para, digamos, 1280px, 1440px, 1600px, 1968px? Ou existe uma maneira mais simples de dizer ao WP / o navegador para usar a imagem maior em vez de mostrar uma versão desfocada e muito pequena?
No que diz respeito à documentação, há esta postagem no blog Make Blog:
Imagens responsivas no WordPress 4.4
Para aumentar o limite de 1600px mencionado nos comentários, tente isto:
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 ('news-large', 1024, false);
precisa ser
add_image_size('news-large', 1024, 0, false);
Resolvi o mesmo problema adicionando um tamanho extra ao srcset com uma função de filtro que você pode adicionar em 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 );