1

Pope of the spip-art !

24 mars 2006
par ARNO*

[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 :

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.