Forçando uso de CDNs nas imagens responsivas em wordpress 4.4

Fotografia Diária com imagens responsivas quebradas
Fotografia Diária com imagens responsivas quebradas

Português

Desde a versão 4.4, o WordPress suporta imagens responsivas usando uma lista de arquivos diferentes no atributo srcset do elemento img. O browser compara esta lista com o tamanho da tela e escolhe a que melhor se adequa, invés do arquivo indicado no atributo src tradicional.

Mas quando você usa uma CDN para suas imagens e reescreve a referência das URLs no HTML usando a CDN automática na WPEngine ou plugins como o WP CDN Rewrite, as URLs das imagens não serão alteradas para o (sub)domínio de sua CDN.

Para resolver isto, a equipe de nossa Clínic2a utilizou uma função, que usa o novo filtro wp_calculate_image_srcset para forçar a reescrita das urls. Não estamos seguros de que esta é aforma mais correta e eficiente de fazê-lo, então, você é mais que bem-vindo para testar e contribuir com uma solução melhor: https://github.com/2aces/wordpress-srcset-cdn

function aafd_cdn_srcset($sources){
	foreach ( $sources as $source ) {
		$sources[ $source['value'] ][ 'url' ] = str_replace('http://www', 'https://static1', $sources[ $source['value'] ][ 'url' ]);
		// you MAY use external domains as well
		// $sources[ $source['value'] ][ 'url' ] = str_replace('http://www.example.com', 'https://static.examplecdnprovider.com', $sources[ $source['value'] ][ 'url' ]);
	}
	return $sources;
}

English

Since version 4.4, WordPress has support for responsive images using a list of different files on srcset attributes on img element. The browser checks this list against the UA width and UA type and chose the best fitting one, instead de the one on the common src attribute

But IF you you use a CDN to serve your images and rewrites URLs on source HTMLs using WPEngine’s CDN automatic rewrite or plugins like WP CDN Rewrite, those image URLs on srcset won’t be rewritten to use your CDN (sub)domain.

Our team solved this bus using a function with the new wp_calculate_image_srcset filter to force WordPress to use CDN subdomains on srcset list. We’re not sure this is the proper of most efficiente way of doing it, so, you are more than welcome to give a try, test it and contributing making pull request with a better solution on GitHub.

function aafd_cdn_srcset($sources){
	foreach ( $sources as $source ) {
		$sources[ $source['value'] ][ 'url' ] = str_replace('http://www', 'https://static1', $sources[ $source['value'] ][ 'url' ]);
		// you MAY use external domains as well
		// $sources[ $source['value'] ][ 'url' ] = str_replace('http://www.example.com', 'https://static.examplecdnprovider.com', $sources[ $source['value'] ][ 'url' ]);
	}
	return $sources;
}
Fotografia Diária com imagens responsivas quebradas
Fotografia Diária com imagens responsivas quebradas