Interchange est l’une des fonctionnalités JavaScript les plus intéressantes de Foundation. Elle permet, grâce à des media queries, d’utiliser des images différentes en fonction de la largeur du navigateur. Cela vous permettra de réduire de manière significative le temps de chargement de vos pages sur mobile.
Pourquoi utiliser Interchange ?
Sur un site responsive, la même image est chargée quelque soit la largeur de l’écran lorsqu’on utilise la balise <img>. Pour un bon affichage sur les grands écrans, on utilise donc la plupart du temps de grandes images, beaucoup plus larges qu’un écran de smartphone. Nativement, les media queries ne sont utilisables qu’avec les backgrounds. C’est ici qu’Interchange frappe fort, car ce script est capable de changer dynamiquement la source des images selon la largeur du navigateur, et donc d’afficher des images beaucoup plus petites et plus légères sur les petits écrans.
Au préalable, il est important d’optimiser la taille de vos images destinées au web afin de gagner en performance et en temps de chargement. Le fluidité d’un site est un élément très important pour le confort de navigation des internautes : un site optimisé permettra aux utilisateurs d’accéder plus rapidement à ce qu’ils cherchent.
Interchange et WordPress
Avant de continuer, il est nécessaire pour votre compréhension d’avoir lu cet article : « Les tailles d’images personnalisées sur WordPress ». Nous allons par la suite utiliser différentes tailles d’images personnalisées avec Interchange de Foundation. La création des tailles personnalisées doit être maîtrisée pour pouvoir utiliser Interchange dans les différents templates de votre thème WordPress.
Il existe plusieurs méthodes pour utiliser Interchange sur WordPress. La première est d’appliquer un filtre post_thumbnail_html. Cette méthode permet d’appliquer un filtre de sortie pour toutes les images à la une de vos pages ou articles. En d’autres termes, dès de nous allons utiliser la fonction <?php the_post_thumbnail(); ?> de WordPress, nos images seront automatiquement adaptées avec la taille définie dans notre fonction. Pour qu’Interchange soit effectif, nous devons créer une fonction dans le fichier functions.php de notre thème WordPress comme ceci :
// Interchange thumbnails
add_filter('post_thumbnail_html', 'interchange_responsive_img', 5, 5);
//Image sizes for Interchange
add_image_size( 'foundation-interchange-large', 900, 500, true);
add_image_size( 'foundation-interchange-medium', 700, 400,true );
add_image_size( 'foundation-interchange-small', 500, 500);
add_image_size( 'default', 300, 300);
function interchange_responsive_img($html, $post_id, $post_thumbnail_id, $size, $attr) {
$attachment_id = $post_thumbnail_id;
$default = wp_get_attachment_image_src($attachment_id);
$size = 'foundation-interchange-small';
$small = wp_get_attachment_image_src($attachment_id, $size);
$size = 'foundation-interchange-medium';
$med = wp_get_attachment_image_src($attachment_id, $size);
$size = 'foundation-interchange-large';
$lrg = wp_get_attachment_image_src($attachment_id, $size);
//Média queries
$html = '<img src="'.$default[0].'"';
$html .= 'data-interchange="['.$default[0].', default],';
$html .= '['.$small[0].', only screen and (min-width: 320px)],';
$html .= '['.$med[0].', only screen and (min-width: 767px)],';
$html .= '['.$lrg[0].', only screen and (min-width: 1024px)],';
$html .='">';
return $html;
}
Dans cet exemple, nous avons créé quatre tailles d’images personnalisées qui seront effectives en fonction de la largeur de la fenêtre du navigateur. Ici, de 320px à 767px, la taille « small » va être utilisée et ainsi de suite.
Il existe une autre méthode que je trouve plus flexible. Plutôt que d’appliquer un filtre sur les images à la une, il est possible d’utiliser la fonctionnalité data-interchange directement dans vos templates.
Dans l’exemple suivant, je vais seulement utiliser deux tailles d’images. Jusqu’à 1024px, mon image aura comme taille 300 x 300. Puis, à partir de 1024px, sa taille sera de 900 x 500. Vous pouvez ajouter autant d’étapes que vous le souhaitez :
<?php $default = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'default' ); $largesrc = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'foundation-interchange-large'); ?> <img src="<?php echo $default[0]; ?>" data-interchange="[<?php echo $default[0]; ?>, default], [<?php echo $largesrc[0]; ?>, only screen and (min-width: 1024px)]" />
Utiliser Interchange dans vos pages
Cela fonctionne de la même façon, il suffit de renseigner l’attribut src de l’image en fonction de la largeur du navigateur. Comme ceci :
<img src="chemin de l'image" data-interchange="
[chemin de l'image, only screen and (min-width: 767px)],
[chemin de l'image, only screen and (min-width: 1024px)],
[chemin de l'image, only screen and (min-width: 1500px)]">
Dans cet exemple, j’ai utilisé trois images de différentes tailles. Vous pouvez faire le test en redimensionnant la fenêtre de votre navigateur : vous verrez l’image changer selon la largeur de la fenêtre.
Pour cela, j’utilise seulement la librairie JavaScript Interchange et Foundation. Vous ne devez pas forcement utiliser la totalité des librairies JavaScript de Foundation pour utiliser Interchange, il suffit de déclarer le fichier JavaScript foundation.interchange.js et foundation.js avec un enqueue_script dans votre fichier functions.php. Comme ceci par exemple :
function init_foundation() {
wp_enqueue_script('foundation', get_template_directory_uri().'/js/foundation.min.js', array('jquery'));
wp_enqueue_script('foundation-interchange', get_template_directory_uri().'/js/foundation.interchange.js', array('jquery', 'foundation'));
wp_enqueue_script('init-foundation', get_template_directory_uri().'/js/init_foundation.js', array('jquery', 'foundation'));
wp_enqueue_style( 'foundation-stylesheet', get_stylesheet_directory_uri() . '/css/foundation.css' );
}
add_action('wp_enqueue_scripts', 'init_foundation');
Il faut ensuite initialiser Foundation dans un fichier JavaScript (ici dans le script init_foundation.js) :
$(document).foundation();
Si vous souhaitez utiliser uniquement Interchange et non pas le système entier de Foundation, vous devez inclure trois fichiers JavaScript : jQuery, foundation.js et foundation.interchange.js, ainsi le fichier CSS de Foundation. Attention : vous devrez supprimer les styles inutiles du fichier CSS, car ceux-ci vont très probablement perturber l’affichage de votre site.