Plugin adaptiveImages 0.5 pour Dotclear

Attention : Une version plus récente du plugin a été publiée.

Extrait de l’article sur les images adaptatives et de la solution proposée par Cédric Morin (Nursit) :

Une solution prête à l’emploi pour résoudre le casse-tête des Adaptive Images, adaptée aux sites dynamiques (une de plus, oui)

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.

Adapter les images vise avant tout à améliorer l’expérience utilisateur, en délivrant l’image qui convient le mieux : inutile d’envoyer une image trop grande et trop lourde si l’utilisateur consulte la page sur un smartphone avec un petit écran et une mauvaise connexion internet !

Cédric Morin (Nursit), Adaptive Images et Responsive Web Design

De cette réflexion est issue une librairie PHP utilisable par les sites web pour offrir ce système automagiquement.

Un plugin SPIP a été développé qui la met en œuvre et j’ai songé qu’une adaptation pouvait être faite pour Dotclear, surtout que des appels pressants en ce sens s’étaient manifestés sur Twitter.

Alors voilà.

Il aura fallu de nombreux aller-retours pendant ces derniers jours entre Cédric et moi pour adapter sa librairie, qui avait été conçue à l’origine pour servir avec Spip, car Dotclear permet des schémas d’installation qui divergent un peu, essentiellement parce qu’il est multi-blog et que le dossier des médias de chacun des blogs peut-être déporté de l’application Dotclear elle-même[1].

Cédric s’est converti à Dotclear avec brio pour tester, modifier et corriger le plugin que j’avais codé et finalement voilà le résultat qui viendra s’ajouter à la liste des mises en œuvre de sa librairie.

Configuration

Le plugin s’installe comme tous les autres et se configure dans les Paramètres du blog.

Deux 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 seconde 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.

Si vous activez la seconde 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.

Roadmap

Il reste encore pas mal de travail pour produire un plugin finalisé, entre autre parce que d’autres réglages plus avancés sont offerts par la librairie, et que des cas d’usage n’ont pas encore été testés et éventuellement pris en compte. Je pense entre autres aux images présentes dans les bandeaux de certains thèmes.

À suivre donc…

Remerciements

Je tiens à remercier Cédric qui a passé beaucoup de temps à répondre à mes questions, à adapter son code en fonction des spécificités de Dotclear et même à mettre les mains dans le cambouis de mon plugin pour effectuer tests et corrections.


Ce billet servira de support pour cette version du plugin.

Note

[1] J’en explique les réglages nécessaires dans ce tuto

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/10174

Haut de page