Contactez-nous

1

Plugin « Créer Sprites CSS »

27 septembre 2011
par ARNO*

Il n’est pas rare d’utiliser de nombreuses petites vignettes disséminées sur une page. Un menu de navigation dont les titres seraient des images (générées automatiquement par SPIP, tant qu’à faire) contient une floppée de petites images.

Chacune de ces images provoque un appel individuel au serveur Web, ce qui ralentit leur chargement (il vaut mieux charger une « grosse » image que la somme des « petites » images qui la composent) et augmente le travail du serveur.

Ce plugin permet, de manière aussi simple que possible, de regrouper plusieurs vignettes en une seule « grande » image (qui les contient toutes), que l’on affiche à la place de chaque petite vignette. Un style intégré au code permet d’afficher la bonne partie de la grande image (celle qui correspond exactement à la vignette).

Plugin « Créer Sprites CSS »

Par exemple, je réalise un menu de navigation sur mon site en transformant chaque titre de rubrique en image (image typographique) ; chaque titre est réalisé en deux versions : le texte en noir, et le texte en blanc (pour la rubrique active et pour le survol de toutes les rubriques). J’ai 9 rubriques principales, plus le lien « Accueil du site » ; je génère donc 20 petites images typographiques. Un visiteur charge donc 20 petits fichiers différents.

En utilisant le plugin « Créer Sprites CSS », je regroupe automatiquement ces 20 vignettes dans un seul « gros » fichier, et c’est lui que j’affiche à la place de chaque image initiale, avec un astuce CSS qui permet d’afficher exactement la partie de l’image dont j’ai besoin. Le visiteur charge désormais un unique fichier au lieu de 20.

Pour regrouper différentes images en un unique fichier, il faut les faire passer par le filtre |filtre{nomsprite.png}. nomsprite.png est choisi par le webmestre :
— en utilisant plusieurs noms, on peut ainsi fabriquer différents sprites, soit dans le corps d’une même page, soit entre pages différentes (par exemple un sprite qui changerait pour chaque article),
— la terminaison choisie pour le fichier (ici .png) détermine le format final du sprite.

Voici par exemple comment je réalise mon menu de navigation principal :

  1. <ul>
  2. <li>
  3. <a href="#URL_SITE_SPIP">
  4. <span class="normal"><:accueil_site|image_typo{police=mafonte.ttf}|sprite{navigation.png}:></span>
  5. <span class="actif"><:accueil_site|image_typo{police=mafonte.ttf}|sprite{navigation.png}:></span>
  6. </a>
  7. </li>
  8.  
  9. <BOUCLE_navigation(RUBRIQUES){id_parent=0}{par titre}>
  10. <li>
  11. <a href="#URL_RUBRIQUE">
  12. <span class="normal">[(#TITRE|image_typo{police=mafonte.ttf}|sprite{navigation.png})]</span>
  13. <span class="actif">[(#TITRE|image_typo{police=mafonte.ttf}|sprite{navigation.png})]</span>
  14. </a>
  15. </li>
  16. </BOUCLE_navigation>
  17. </ul>

Télécharger

Le principe est le même à chaque fois : je prends mon texte, je le transforme en image typographique, puis je le fais passer par |sprite{navigation.png}. Toutes ces images typographiques seront regroupées et remplacées par un seul « gros » fichier : navigation.png.

Ailleurs dans le corps de ma page, j’ai trois vignettes explicatives. Initialement, ce sont trois <img src="monfichier.png" alt="" /> insérés dans mes squelettes. Pour les regrouper sous forme d’un sprite, je transforme le code ainsi :

  1. [(#CHEMIN{images_site/fermer-addflip.png}|sprite{boutons.png})]
  2. ...
  3. <div>
  4. [(#CHEMIN{images_site/annonce-fullscreen-fr.png}|sprite{boutons.png})]
  5. </div>
  6. ...
  7. <div>
  8. [(#CHEMIN{images_site/fullscreen.png}|sprite{boutons.png})]
  9. </div>

Télécharger

Ces trois images sont désormais regroupées automatiquement dans un unique fichier, boutons.png.

J’effectue, enfin, la même opération pour réunir de petites vignettes de prévisualisation des documents joints de chaque article (mon site, très graphique, a souvent plus de 20 photographies associées à chaque article). De cette façon, au lieu de charger 20 (jusqu’à 100) petites vignettes, je n’en charge plus qu’une grande.

  1. [(#LOGO_DOCUMENT|image_reduire{0,90}|sprite{vignettes-#ID_ARTICLE.jpg})]

Notez bien :
— Ce plugin est relativement rudimentaire, mais il répond parfaitement à mes besoins, et je l’utilise en production.
— Son fonctionnement est assez particulier par rapport aux habitudes des sprites CSS : il prend des images insérées dans le document, et les transforme en images « vides » (transparentes) de mêmes dimensions, et applique le sprite global en background CSS. Il n’est pas destiné à traiter des images qui seraient déjà dans des background CSS. (Mon idée étant qu’il est avant tout destiné à traiter des images générées par SPIP, et de telles images sont assez rarement utilisées dans des feuilles de style.)
— Attention : le nom que vous choisissez détermine le fichier final. Si vous utilisez plusieurs fois le même nom pour des choses différentes (sur des pages différentes), vous écraserez le fichier d’une page par l’autre. Faites attention au nom que vous choississez.
— Les images PNG transparentes deviendront des fond de CSS, que MSIE 6 gère mal (alors qu’il gère bien les PNG transparents affichés en tant qu’images).
— La méthode retenue n’est pas vraiment adaptée pour gérer des images qui changent souvent (ne serait-ce que parce que le sprite conserve son nom, même si on change son contenu).

Attention

Une particularité de SPIP fait que le calcul de l’image ne se fait que dans le cas d’un squelette inclus, où dans le cas où un administrateur connecté calcule la page au moins une fois (les boutons d’administration provoquant la fonction nécessaire).

L’usage « simple » de cette fonctionnalité fait qu’en général, cela ne pose pas de gros problème, puisqu’une fois que l’image a été calculée, il n’est plus nécessaire de la recalculer.

La difficulté viendra du cas où :
- des « sprites » différents sont créés automatiquement pour chaque page du site, et qu’il n’est donc pas envisageable que l’administrateur recalcule toutes ces pages une par une ;
- ces « sprites » ne sont pas calculés dans des squelettes inclus.

Dans ce cas, il est possible d’insérer

  1. #FILTRE{creer_sprites}

dans le squelette pour provoquer correctement le calcul des sprites.

  • Michaël
    Mai 2012

    Merci pour ce fantastique plugin. C’est facile à mettre en œuvre et ça fonctionne bien.

    J’ai toutefois une erreur (undefined fonction image_aplatir) lorsque je veux avoir un sprinte jpg. Je ne sais pas d’où ça viens. Pas de problème en png (mis à part que le sprite est 2 fois plus lourd que la somme des mes images.

  • Septembre 2012

    J’ai le même problème pour mettre les images en JPG. Sinon, cela fonctionne simplement. Merci.

  • chon
    Décembre 2012

    Hello, à quand un version pour spip 3.1 ? Merci

  • JLuc
    Mars 2013

    Hello,

    Sur un SPIP 2.1.19, ça marche parfois mais pas ici : sans le filtre, ce squelette s’affiche parfaitement, mais quand j’ajoute le filtre sprite dans la boucle suivante, toutes les images deviennent identiques à la première :

    1. #SET{rubmere,#ID_RUBRIQUE}
    2. <ul><BOUCLE_dosg2(RUBRIQUES){id_parent}>
    3. <li><a href="#URL_RUBRIQUE">
    4. [(#INCLURE{fond=logo_rubrique, id_rubrique}|image_reduire{210,0}|image_recadre{195,65,center}|sprite{dossiers-#GET{rubmere}.jpg}|inserer_attribut{alt,#TITRE}|inserer_attribut{class,img_dosier})]
    5. </li>
    6. </BOUCLE_dosg2>
    7. </ul>

    Télécharger

    Il n’y a qu’une seule image dans le fichier dossiers-2 généré, et tous les offsets sont à "0px -0px".

    Par ailleurs, ce n’est pas un numéro qui apparaît en paramètre dans l’url du sprite. Celle ci est : url(local/cache-sprites/dossiers-2.jpg?m=spiprempdate[local/cache-sprites/dossiers-2.jpg]) Mais ceci pourrait être un autre bug car il me semble que ça le faisait aussi pour une autre noisette où par contre le fichier était correctement généré et s’affichait bien avec toute la variété des sprites le composant.

    Quel pourrait être l’origine et la solution de ce problème ?

  • JLuc
    Novembre 2014

    Super plugin quand il marche, mais parfois il ne marche pas et toutes les images deviennent identiques à la première.

    Point à préciser : il faut que toutes les images aient la même largeur sinon il apparaît des marges blanches disgracieuses sur les côté des images moins larges !

  • JLuc
    Novembre 2014

    La version sur flip-zone est la 1.2.1, visiblement compatible avec SPIP3, et corrige peut être des bugs...

    Serait il possible de releaser les sources svp ? D’avance, merci !

  • JLuc
    il y a 2 mois

    Je me sers de ce plugin pour les diaporamas (1 sprite par article) et les vignettes des articles quand elles apparaissent dans des listes d’une page rubrique (1 fichier sprite pour les logos des articles de la rubrique, 1 autre pour les logos des articles avec forum).

    Je vois qu’il serait utile de disposer d’une surcouche du plugin :
    - pour ne pas ajouter une image avec une nouvelle référence (nouvel offset) si elle a déjà été ajoutée
    - pour ne pas créer un sprite s’il n’y a qu’un seul élément ajouté comme sprite, mais utiliser l’image originale

Qui êtes-vous ?
Votre message

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