Nouvelle version du plugin qui intègre la version 1.7.2 de la librairie AdaptiveImages développée par Nursit. Cette version implémente la prise en charge des images adaptatives avant impression.
Présentation
Adaptive Images, que l’on pourrait traduire par Images adaptatives, désigne la pratique qui vise à adapter les taille, résolution et qualité des images utilisées dans le contenu éditorial d’une page web en fonction de l’utilisateur.
Les images adaptatives sont nécessaires pour les sites Responsive qui vont adapter leur affichage au périphérique de consultation : sur un site Responsive la même page est rendue de manière différente selon la taille de l’écran.
Configuration
Le plugin s’installe comme tous les autres et se configure dans les Paramètres du blog.
Options
Trois options sont disponibles :
- La première permet d’indiquer la largeur maximale des images qui seront affichées sur votre blog. Par défaut celle-ci est positionnée à 640 pixels. Sur un photo-blog il est probable qu’il faille augmenter cette valeur à 800 voire 1024 pixels ou plus.
- La deuxième permet d’indiquer la largeur minimale des images qui devront être adaptées. Par défaut celle-ci est positionnée à 320 pixels. Les images de tailles inférieures resteront inchangées.
- La troisième permet de préciser la couleur de fond à utiliser lorsque le plugin génèrera des images JPG à partir d’images possédant un fond transparent. Par défaut la couleur de fond est blanche (
#ffffff
).
Qualités de compression JPEG
Quatre qualités sont paramétrables (de 0, plus forte compression et plus basse qualité, à 100 pour la meilleure qualité au détriment de la taille de l’image générée) :
- Celle utilisée pour les images de prévisualisation, affichées pendant le chargement des images complètes. Il vaut mieux utiliser une valeur faible afin de limiter autant que possible la taille de ces images. La valeur par défaut est 10.
- Celle utilisée pour les images standards. La valeur par défaut est 75.
- Celle utilisée pour les images 1,5 fois plus denses. La valeur par défaut est 65.
- Celle utilisée pour les images 2 fois plus denses (utilisées sur les écrans rétina par exemple). La valeur par défaut est 45.
Options avancées
- La première permet d’activer le chargement
à la volée
des images. Ce mode permet de ne créer les images requises qu’au moment où elles sont réellement requises. Dans le cas contraire, toutes les variantes nécessaires sont créées au chargement de la page, si les images n’existent pas déjà, évidemment. - La seconde permet de préciser les seuils de génération des images. Ces seuils sont un compromis entre les seuils utilisés par les
mediaqueries
du thème de votre blog et les résolutions et densités des écrans utilisés pour le visualiser. Par défaut ces seuils sont paramétrés à 160, 320, 480, 640, 960 et 1440 pixels.
Si vous activez la première option vous devrez alors configurer un fichier .htaccess
contenant, pour une installation standard de Dotclear (installée dans un répertoire nommé dotclear à la racine de votre hébergement), ceci :
RewriteEngine On RewriteBase /dotclear/ # If file or directory exists deliver it and ignore others rewrite rules RewriteCond %{REQUEST_FILENAME} -f RewriteRule "." - [skip=100] RewriteCond %{REQUEST_FILENAME} -d RewriteRule "." - [skip=100] # On demand adaptive image RewriteRule public/.adapt-img/(.+)$ index.php?adapt-img/$1 [QSA,L]
Cela permettra au plugin de générer les images nécessaires à la volée, lors de leur premier affichage.
Divers
Si vous modifiez un ou plusieurs paramètres de ce plugin il sera peut-être utile de vider le cache existant. Une tâche d’entretien est disponible à cet effet et accessible avec l’option Maintenance (menu Plugins), elle est intitulée « Vider le cache des images adaptatives ».
Personnalisation
Plusieurs classes sont utilisées par ce plugin :
Les images adaptées ont une classe adapt-img
et sont encapsulées dans un wrapper avec la classe adapt-img-wrapper
. Si par exemple vous voulez mettre des coins arrondis sur vos images, il faudra aussi les appliquer sur .adapt-img-wrapper :
img,.adapt-img-wrapper { border-radius:5px; }
Notez que le wrapper est un <span>
ou une <div>
. La seconde forme est utilisée dès lors que l’image est flottante ou centrée.
Les images fournies à Internet Explorer < 10 ont aussi une classe spécifique adapt-img-ie
.
Pour empêcher le plugin d’adapter certaines images que vous voulez conserver intactes, il suffit de leur ajouter une classe no-adapt-img
.
Ce billet servira de support pour cette version du plugin.
1 De Arfy -
Salut,
J’avais ouvert un ticket chez eux (https://github.com/nursit/AdaptiveI…) mais vu que je n’avais pas de réponses, j’ai rajouté moi même ce dont je te parlais dans la version précédente: et depuis, plus d’erreurs apache sur les images http(s)://… genre les images Youtube
Dans le fichier AdaptiveImages.php j’ai rajouté à la ligne 1464
@@
@@
A+ Arfy
2 De Franck -
Salut,
Faut que je teste pour les URLs (ou plutôt les src avec URLs externes), mais quoi qu’il en soit le patch est beaucoup trop restrictifs :des images locales peuvent être indiquées avec des URLs absolues ; il ne faut pas empêcher leur gestion par le plugin.
Va plutôt falloir regarder comment ignorer les images externes au domaine.