POPE OF THE SPIP-ART!
POPE OF THE SPIP-ART!
Techniques SPIP

Vous trouverez ici des trucs et astuces destinés aux développeurs de sites sous SPIP.

La majorité de ces trucs est consacrée aux filtres graphiques introduits dans SPIP 1.9. Il y a là en effet un vaste champ d’expérimentation pour les webmestres et les graphistes.

Chaque truc est suivi d’un forum auquel nous vous invitons à participer.

N.B. La présence de ces trucs et astuces sur notre site professionnel est destinée à faire connaître notre activité de création de sites sous SPIP. Vous pouvez librement utiliser les morceaux de code fournis ici dans vos propres squelettes. Vous pouvez reprendre ces exemples sur votre site ou dans les forums d’un autre site ; dans ce cas, nous vous demandons simplement d’avoir la courtoisie de référencer la page d’où est tiré le code repris.

XML

[SPIP 1.9 et GD2] Vous voulez faire de l’e-art digitalo-conceptuel ? Vous voulez vous marier en direct-live de tous les modems 28,8 bauds de la planète ? Vous voulez requestionner des trucs dans l’optique du machin quelquepart ? Vous voulez toucher des droits d’auteur sans trop vous fouler ? Vous avez toujours rêvé de rencontrer André Santini ?

SPIP va vous aider à réaliser vos rêves (rien que ça).

Au niveau concept, je vous renvoie à mon petit filtre image_podpod ; grâce à lui, nous allons enfoncer les concepts du pop-art, revitaliser l’action-painting et tout cela sans aller faire pipi dans un urinoire.

Nous allons (tenez-vous bien) faire de l’art avec du SPIP. Oui, c’est ça : tout seul. Oui, je sais : « Ceci n’est pas une SPIP ».

Allez hop, foin d’explications, laissons parler l’inspiration :

  1. <BOUCLE_doc(DOCUMENTS){id_article}{par hasard}{0,1}>
  2. <div style="float: left; position:  relative; width: [(#FICHIER|reduire_image{600}|image_diviser_par{2}|largeur)]px; margin-right: 5px; margin-bottom: 5px; height: [(#FICHIER|reduire_image{300}|hauteur)]px;">
  3. <div style="position: absolute; background-color:#ea6c8f;">[(#FICHIER|reduire_image{600}|image_podpod{3770bd,0,80}|image_diviser_par{2})]</div>
  4. <div style="position: absolute; top: -6px; left: 1px;">[(#FICHIER|reduire_image{600}|image_podpod{c14f4f,120,190}|image_diviser_par{2})]</div>
  5. <div style="position: absolute;">[(#FICHIER|reduire_image{600}|image_podpod{f6d8ce,210,235}|image_diviser_par{2})]</div>
  6. <div style="position: absolute;">[(#FICHIER|reduire_image{600}|image_podpod{ffffff,240,255}|image_diviser_par{2})]</div>
  7. </div>
  8.  
  9. <div style="float: left; position:  relative; width: [(#FICHIER|reduire_image{600}|image_diviser_par{2}|largeur)]px; margin-right: 5px; margin-bottom: 5px; height: [(#FICHIER|reduire_image{300}|hauteur)]px;">
  10. <div style="position: absolute; background-color:#7cb5d2;">[(#FICHIER|reduire_image{600}|image_podpod{415f69,0,80}|image_diviser_par{2})]</div>
  11. <div style="position: absolute; top: 2px; left: 1px;">[(#FICHIER|reduire_image{600}|image_podpod{eeced9,80,190}|image_diviser_par{2})]</div>
  12. <div style="position: absolute;">[(#FICHIER|reduire_image{600}|image_podpod{ad4f4d,190,235}|image_diviser_par{2})]</div>
  13. <div style="position: absolute;">[(#FICHIER|reduire_image{600}|image_podpod{ffde5e,230,255}|image_diviser_par{2})]</div>
  14. </div>
  15.  
  16. <div style="float: left; position:  relative; width: [(#FICHIER|reduire_image{600}|image_diviser_par{2}|largeur)]px; margin-right: 5px; margin-bottom: 5px; height: [(#FICHIER|reduire_image{300}|hauteur)]px;">
  17. <div style="position: absolute; background-color:#809f66;">[(#FICHIER|reduire_image{600}|image_podpod{9c4140,0,80}|image_diviser_par{2})]</div>
  18. <div style="position: absolute; top: -2px; left: 1px;">[(#FICHIER|reduire_image{600}|image_podpod{4d6f5e,80,190}|image_diviser_par{2})]</div>
  19. <div style="position: absolute;">[(#FICHIER|reduire_image{600}|image_podpod{f7c155,150,255}|image_diviser_par{2})]</div>
  20. <div style="position: absolute; top: 1px; left: 6px;">[(#FICHIER|reduire_image{600}|image_podpod{9d423d,210,255}|image_alpha{60}|image_diviser_par{2})]</div>
  21. </div>
  22.  
  23. <div style="float: left; position:  relative; width: [(#FICHIER|reduire_image{600}|image_diviser_par{2}|largeur)]px; margin-right: 5px; margin-bottom: 5px; height: [(#FICHIER|reduire_image{300}|hauteur)]px;">
  24. <div style="position: absolute; background-color:#8aa3c4;">[(#FICHIER|reduire_image{600}|image_podpod{1b6bb4,0,100}|image_diviser_par{2})]</div>
  25. <div style="position: absolute; top: -2px; left: 1px;">[(#FICHIER|reduire_image{600}|image_podpod{719dcc,80,190}|image_diviser_par{2})]</div>
  26. <div style="position: absolute; top: 1px; left: 2px;">[(#FICHIER|reduire_image{600}|image_podpod{d5608d,210,255}|image_alpha{60}|image_diviser_par{2})]</div>
  27. </div>
  28.  
  29. <div style="float: left; position:  relative; width: [(#FICHIER|reduire_image{600}|image_diviser_par{2}|largeur)]px; margin-right: 5px; margin-bottom: 5px; height: [(#FICHIER|reduire_image{300}|hauteur)]px;">
  30. <div style="position: absolute; background-color:#e37a99;">[(#FICHIER|reduire_image{600}|image_podpod{16407c,0,60}|image_diviser_par{2})]</div>
  31. <div style="position: absolute; top: 1px; left: 2px;">[(#FICHIER|reduire_image{600}|image_podpod{d5608d,210,255}|image_diviser_par{2})]</div>
  32. <div style="position: absolute; top: 4px; left: -1px;">[(#FICHIER|reduire_image{600}|image_podpod{c6a361,40,220}|image_diviser_par{2}|image_alpha{60})]</div>
  33. </div>
  34.  
  35. <div style="float: left; position:  relative; width: [(#FICHIER|reduire_image{600}|image_diviser_par{2}|largeur)]px; margin-right: 5px; margin-bottom: 5px; height: [(#FICHIER|reduire_image{300}|hauteur)]px;">
  36. <div style="position: absolute; background-color:#efd3c7;">[(#FICHIER|reduire_image{600}|image_podpod{5c6b4c,0,120}|image_diviser_par{2})]</div>
  37. <div style="position: absolute; top: 1px; left: -1px;">[(#FICHIER|reduire_image{600}|image_podpod{86b5bb,40,220}|image_diviser_par{2}|image_alpha{60})]</div>
  38. <div style="position: absolute; top: 1px; left: 0px;">[(#FICHIER|reduire_image{600}|image_podpod{c65654,210,230}|image_diviser_par{2})]</div>
  39. <div style="position: absolute; top: 0px; left: 0px;">[(#FICHIER|reduire_image{600}|image_podpod{f2c254,230,255}|image_diviser_par{2})]</div>
  40. </div>
  41. </BOUCLE_doc>
Télécharger

Cliquez sur les vignettes ci-dessous pour voir ce que donne cette boucle, appliquée à différentes images :

JPEG - 46.3 ko
JPEG - 92.6 ko
JPEG - 87.9 ko

JPEG - 97.7 ko
JPEG - 79.5 ko
JPEG - 103.5 ko

JPEG - 73.8 ko

JPEG - 116.5 ko
JPEG - 54.6 ko
Mars 2007
Félicitation à toi et à ton équipe

Je suis épaté de ton travail et je t’en félicite pour la clarté. Une question : faire de la reconnaissance d’image : de visage ou silouhette possible ? rapide ? aussi efficace qu’en C# ? et comment ?

Votre message :
Un message, un commentaire ?

(Pour créer des paragraphes, laissez simplement des lignes vides.)

Qui êtes-vous ? (optionnel)