Nouvelle version du plugin qui intègre la version 1.4.0 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 dub -
Bonjour et merci pour ce plugin qui me semblait intéressant, seulement dès que j'active le plugin dans les paramètres du blog (Dotclear 2.6.3), j'obtiens un jolie erreur :
Fatal error: Call to undefined method AdaptiveImages::realPath2relativePath() in /home/XXX/www/dotclear/plugins/adaptiveImages/_public.php on line 163
Des idées ?
2 De Franck -
Bonjour,
Quelle est votre version de PHP ?
3 De dub -
PHP Version 4.4.9 d'après le phpinfo()
à noter la ligne suivante dans mon .htaccess :
SetEnv PHP_VER 5
4 De Franck -
Alors je pense que ça doit venir de ça. La version mini pour faire tourner Dotclear est la 5.2 (voir cette page pour les détails).
La version 4 posera potentiellement d'autres problèmes.
5 De Arfy -
Salut,
J’ai trouvé un problème qui d’après le forum dotclear serait lié à ton plugin si une image a comme extension .JPG (en majuscule)
Lien/explications: mon post sur le forum dotclear
6 De Franck -
Il faut que je mette à jour la ibrairie de Nursit et que je vérifie si les extensions en majuscule sont bien gérées par celle-ci, sinon on ouvrira un ticket chez eux.
Nouvelle version du plugin à suivre dans les jours qui viennent…
7 De Arfy -
Thanks/Danke/Merci ;)
8 De Arfy -
Ok merci ;)
9 De Arfy -
Salut,
Tu as pu voir avec “Nursit” ?
Arfy
10 De Franck -
Arf, non, complètement oublié de m’en occuper.
11 De Arfy -
Pour info, avec in fichier en .jepg même problème ;)
12 De Arfy -
J’ai aussi remarqué un truc, dans la fonction
processImgTag
la fonction file_exists fait des erreurs dans la console apache si l’image est une image externe (commence par http: ou https:).
il suffirait de rajouter un truc avant genre
et idem pour https
il suffirait de rajouter un truc avant genre
13 De Franck -
Je vais publier aujourd’hui une version avec la librairie 1.7.2 de Nursit. Tu pourras refaire tes tests (extension en majuscule et images externes) et me rapporter les éventuels problèmes ?
On ouvrira les tickets idoines là-bas.
14 De Arfy -
Mise à jour du plugin et Ok avec
.JPG
.jpeg
sur mon blog merci !
15 De Franck -
Cool !