Une image vaut mille mots… mais encore faut-il la voir correctement ! Il est souvent difficile de faire parfaitement cadrer une image dans un conteneur HTML, pour l’afficher sur un site Web. Depuis quelques années, les tailles d’écran varient énormément, du minuscule iPhone 4 à l’écran panoramique 30 pouces. Twitter Boostrap offer une manière élégante de redimensionner une image en l’adaptant automatiquement au conteneur dans lequel elle se trouve.
La documentation est accessible ici : http://getbootstrap.com/components/#responsive-embed.
C’est cette méthode qui est utilisée dans la nouvelle page d’accueil de ce site. Mais avec une subtilité : un seul fichier doit être utilisé pour afficher l’image dans différentes tailles, sur la page d’accueil que la « boîte » qui la contient occupe une ou plusieurs colonnes, ou dans le corps des articles.
L’image est donc référencée dans le frontmatter de charque article, de cette manière :
thumbnail: /public/posts/2015-07-04-bootstrap-responsive-images/rainbow.jpg
Dans le code source de la page d’accueil, l’on trouve les instructions pour afficher l’image :
{% if post.thumbnail %}
<img class="img-responsive" src="{{ post.thumbnail }}" />
{% endif %}La classe img-responsive appartient à Bootstrap, c’est elle qui fait le boulot. Quant à l’image, elle peut être définie au moment de l’écrite de l’article, sans toucher au code source : elle trouvera automatiquement la bonne place.
À titre d’exemple, l’image utilisée dans cet article apparaît ci-dessous à la taille de la page (elle ne déborde pas). Il suffit de cliquer dessus pour l’afficher en pleine résolution.
