Plugin adaptiveImages 0.8 pour Dotclear

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 :

  1. 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.
  2. 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.
  3. 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) :

  1. 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.
  2. Celle utilisée pour les images standards. La valeur par défaut est 75.
  3. Celle utilisée pour les images 1,5 fois plus denses. La valeur par défaut est 65.
  4. 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

  1. 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.
  2. 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.

Ajouter un commentaire

Les commentaires peuvent être formatés en utilisant une syntaxe wiki simplifiée.

Ajouter un rétrolien

URL de rétrolien : https://open-time.net/trackback/12553

Haut de page