Des images en cache pour des diaporamas plus rapides

Ceci est une « contribution pédagogique », qui montre par l’exemple comment développer une nouvelle fonctionnalité pour SPIP.

Les appareils photos d’aujourd’hui ont la folie des pixels.

Lorsque l’on envoie massivement des photos (par ftp dans tmp/upload), il peut être agaçant de penser à les redimensionner pour qu’elle s’affiche rapidement chez l’internaute. Alors plutôt que de le faire soi-même, on va déléguer tout le boulot au serveur avec image_reduire...

C’est tout bête mais il faut y penser ! C’est en cherchant un plugin qui me redimensionnerait automatiquement toutes les images que je me suis rendu compte qu’il y avait bien plus simple avec spip et que mes images étaient très bien en haute def sur mon serveur.

Lorsque l’on a un #URL_DOCUMENT, il renvoi à l’image d’origine. Quand les images font de 1 à 2mo (au delà en général, sur des mutualisés c’est le serveur qui n’en peut plus ), afficher un portfolio avec mediabox par exemple, c’est très lent, à moins d’avoir un super débit. Alors plutôt que d’utiliser #URL_DOCUMENT, on va générer une image en cache de la définition de notre choix, suffisante pour un affichage à l’écran. Il suffisait d’y penser !

au lieu de

...  <a href="(#URL_DOCUMENT)" ...

il suffit de mettre (par exemple) :

... <a href="(#FICHIER|image_reduire{1920,1200}|extraire_attribut{src})" ...   

dans une boucle qui n’appelle que des documents images, soit dans inc-documents de la dist ou dans inclure/documents de zpip. Bien sûr, à vous de choisir quoi mettre pour les dimensions maximales d’image_reduire.

Avec une image d’origine à 2,4mo (4711 × 3140 pixels) j’obtiens une image réduite à 192ko (1801 x 1200 pixels) !

Rien ne vous empêche de proposer en plus un lien vers l’image en haute def’, mais c’est vrai que pour un diaporama, ça n’a que peu d’intérêt d’avoir des images aussi lourdes (et lentes à afficher).

Attention toutefois, pour être réduites et mises en cache il faut que le serveur travaille beaucoup. Il faut aussi veiller à ne pas avoir des images trop lourdes pour être traitées par spip sur ce serveur (cette information est indiquée dans configurations>fonctions avancées)

Discussion

Une discussion

  • 1
    Lire et Écrire

    Pour que le diaporama fonctionne, il faut ajouter rel="ce_que_vous_voulez" dans la balise <a>

    L’exemple ci-dessus deviendrait :

    … <a href="(#FICHIER|image_reduire{1920,1200}|extraire_attribut{src})" rel="diapo" …
    • Lire et Écrire

      Veuillez excuser mon intervention ci-dessus. J’avais testé sur un site de développement où j’avais justement désactivé la MediaBox pour le portfolio.

      Vous pouvez reprendre une activité normale…

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom