< x x x x x x x x x >
>
>
ACCUEIL > TUTORIAUX SPIP

POPE OF THE SPIP-ART !

   

[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. <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;">
  9. <div style="position: absolute; background-color:#7cb5d2;">[(#FICHIER|reduire_image{600}|image_podpod{415f69,0,80}|image_diviser_par{2})]</div>
  10. <div style="position: absolute; top: 2px; left: 1px;">[(#FICHIER|reduire_image{600}|image_podpod{eeced9,80,190}|image_diviser_par{2})]</div>
  11. <div style="position: absolute;">[(#FICHIER|reduire_image{600}|image_podpod{ad4f4d,190,235}|image_diviser_par{2})]</div>
  12. <div style="position: absolute;">[(#FICHIER|reduire_image{600}|image_podpod{ffde5e,230,255}|image_diviser_par{2})]</div>
  13. </div>
  14. <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;">
  15. <div style="position: absolute; background-color:#809f66;">[(#FICHIER|reduire_image{600}|image_podpod{9c4140,0,80}|image_diviser_par{2})]</div>
  16. <div style="position: absolute; top: -2px; left: 1px;">[(#FICHIER|reduire_image{600}|image_podpod{4d6f5e,80,190}|image_diviser_par{2})]</div>
  17. <div style="position: absolute;">[(#FICHIER|reduire_image{600}|image_podpod{f7c155,150,255}|image_diviser_par{2})]</div>
  18. <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>
  19. </div>
  20. <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;">
  21. <div style="position: absolute; background-color:#8aa3c4;">[(#FICHIER|reduire_image{600}|image_podpod{1b6bb4,0,100}|image_diviser_par{2})]</div>
  22. <div style="position: absolute; top: -2px; left: 1px;">[(#FICHIER|reduire_image{600}|image_podpod{719dcc,80,190}|image_diviser_par{2})]</div>
  23. <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>
  24. </div>
  25. <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;">
  26. <div style="position: absolute; background-color:#e37a99;">[(#FICHIER|reduire_image{600}|image_podpod{16407c,0,60}|image_diviser_par{2})]</div>
  27. <div style="position: absolute; top: 1px; left: 2px;">[(#FICHIER|reduire_image{600}|image_podpod{d5608d,210,255}|image_diviser_par{2})]</div>
  28. <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>
  29. </div>
  30. <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;">
  31. <div style="position: absolute; background-color:#efd3c7;">[(#FICHIER|reduire_image{600}|image_podpod{5c6b4c,0,120}|image_diviser_par{2})]</div>
  32. <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>
  33. <div style="position: absolute; top: 1px; left: 0px;">[(#FICHIER|reduire_image{600}|image_podpod{c65654,210,230}|image_diviser_par{2})]</div>
  34. <div style="position: absolute; top: 0px; left: 0px;">[(#FICHIER|reduire_image{600}|image_podpod{f2c254,230,255}|image_diviser_par{2})]</div>
  35. </div>
  36. </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
Contactez-nous !

Un message, un commentaire ?

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

Qui êtes-vous ? (optionnel)