Rendre les images de WordPress responsive

Pour qu’un design soit responsive, il faut que ses éléments s’adaptent à chaque dimension d’écran possible. Les images sont généralement le plus compliqué à gérer : il faut prévoir plusieurs tailles, ou du moins leur permettre d’être plus ou moins zoomées selon le device.

Le souci avec WordPress, c’est que chaque image insérée avec le WYSIWYG génère aussi des attributs HTML height et width qui fixent les dimensions de l’image.

Pour rendre les images responsive, il faut supprimer ces attributs.

function bbx_images( $html ) {
  $html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
  return $html;
}
add_filter( 'post_thumbnail_html', 'bbx_images', 10 );
add_filter( 'image_send_to_editor', 'bbx_images', 10 );
add_filter( 'wp_get_attachment_link', 'bbx_images', 10 );