Changes between Version 14 and Version 15 of fr/drafts/jimage2

Timestamp:

Oct 5, 2009, 7:31:12 PM (11 years ago)

Author:

Lipki

Comment:

--

fr/drafts/jimage2

@@ -1 +1 @@
 == Proposition pour jImage2 le plugin ==
+
+Le plugin jImage actuel utilise un array pour passé les paramètres, on obtient quelque chose comme.
+
+{{{
+{image 'toupie.png', array('width'=>100, 'zoom'=>60, 'alignh'=>'right', 'alignv'=>-20) }
+}}}
+
+Qui peut rapidement devenir lourd et peut lisible dans un .tpl
+
+C'est pourquoi je propose l'utilisation d'une syntaxe css like, facile à comprendre et plus légère.
+{{{
+{image 'toupie.png', 'width: 100; zoom: 140; align: -20 right;' }
+}}}
+
+ci-dessous une description exhaustive des possibilités de jImage2. 
 
 
@@ -8 +23 @@
     border-width     : 2px ;                             // avec ou sans le px
     border-color     : #f00 || #ff0000 ;                 // 3 ou 6
-    border-8share    : url(border.png) 5px ;             // [▲►▼◄] || [▲▼] [►◄] || [▲] [►◄] [▼] || [▲] [►] [▼] [◄]
-    border           : 5° 2px #f00;                      // ° et px requis ; ordre aléatoire ; n'intègre pas 8share
+    border-8share    : url(8share_border.png) 5px ;      // avec ou sans le px
+    border           : 5° 2px #f00;                      // ° et px requis ; ordre aléatoire
         
-    square           : on ;                              // [on|off] ; force l'interprétation rectangulaire de l'image, pour les fonds transparent, activer par défaut pour le jpg
+    square           : on ;                              // [on|off] ; force l'interprétation rectangulaire de l'image,
+                                                         // pour les fonds transparent, activer par défaut pour le jpg
         
     shadow-offset    : 10px ;                            // avec ou sans le px
@@ -54 +70 @@
 === Comparaison ===
 
+Voici un comparatif qui montre l'avantage de la syntaxe css. 
+
 {{{
-
  av : {image 'toupie.png', array('width'=>100) }[[BR]]
  ap : {image 'toupie.png', 'width: 100;' }
@@ -78 +95 @@
 ==== Border ====
 
-Il est possible d'ajouter une bordure a l'image.
+Il est possible d'ajouter une bordure a l'image.[[BR]]
+Une bordure de type 8share est en fait une image divisée en 9, dons 8 morceaux servent à créer une bordure. 
 
+exemple :
+{{{
+#!html
+<img src="http://img527.imageshack.us/img527/6435/8share.png"/>
+}}}
+
+
+ note : si "square" est à "off", la bordure devra suivre la forme de l'image.
  note : l'utilisation de "border-8share" et de "border-radius" force "square" à "on".
- note : si "square" est à "off", la bordure devra suivra la forme de l'image.
 
  * border-radius : Ajoute des coins arrondi a l'image. [défaut : 5]
@@ -87 +112 @@
  * border-color  : Couleur de la bordure. [défaut : #fff]
  * border-8share : url de l'image utilisé pour créer la bordure, cette image est divisé en 8 part. [défaut : ...][[BR]]
-   Les chiffres représente la taille de la bordure en haut, en bas et sur les coté.
+   Les chiffres représente la taille de la bordure en haut, en bas et sur les coté.[[BR]]
+   [[BR]]
+Ordre des Bords : [▲►▼◄] ou [▲▼] [►◄] ou [▲] [►◄] [▼] ou [▲] [►] [▼] [◄]
+ * 5px             // haut = 5px, droite = 5px, bas = 5px, gauche = 5px
+ * 5px 3px         // haut = 5px, droite = 3px, bas = 5px, gauche = 3px
+ * 5px 3px 2px     // haut = 5px, droite = 3px, bas = 2px, gauche = 3px
+ * 5px 3px 2px 6px // haut = 5px, droite = 3px, bas = 2px, gauche = 6px
 
- * border : l'ordre des paramètres n'importe pas, mais il faut penser a mettre les unités. [défaut : 5° 2px #fff][[BR]]
-   border-8share n'est pas intégrer.
+Ordre des Coins : [┏ ┓ ┛ ┗] ou [┏ ┛] [┗ ┓] ou [┏] [┗ ┓] [┛] ou [┏] [┓] [┛] [┗]
+ * 5°              // haut-gauche = 5°, haut-droite = 5°, bas-droite = 5°, bas-gauche = 5°
+ * 5° 3°           // haut-gauche = 5°, haut-droite = 3°, bas-droite = 5°, bas-gauche = 3°
+ * 5° 3° 2°        // haut-gauche = 5°, haut-droite = 3°, bas-droite = 2°, bas-gauche = 3°
+ * 5° 3° 2° 6°     // haut-gauche = 5°, haut-droite = 3°, bas-droite = 2°, bas-gauche = 6°
+
+ * border : il faut penser a mettre les unités. [défaut : 5° 2px #fff]
 
 ex de code :
@@ -100 +136 @@
 ==== Square ====
 
-Lorsque square est a "on", l'image est traité comme un rectangle plein même si c'est une image png24, avec des zones transparentes.[[BR]]
-par défaut square est a "off", mais il est forcé a "on" lorsque l'on utilise :
+Lorsque square est à "on", l'image est traitée comme un rectangle plein même si c'est une image png24, avec des zones transparentes.[[BR]]
+par défaut square est à "off", mais il est forcé a "on" lorsque l'on utilise : 
  * border-radius
  * border-8share
  * dans le cas d'une image jpg en entrée et/ou en sortie
+
+exemple :
+{{{
+#!html
+<img src="http://img340.imageshack.us/img340/5047/square.png"/>
+}}}
 
 ex de code :
@@ -115 +157 @@
 Shadow permet d'appliquer une ombre portée a l'image.
 
- note : l'utilisation de l'une ou l'autre de c'est attributs force l'ombre a s'afficher, utiliser "shadow: on;" si tous les paramètres reste par défaut.
- note : l'image est redimensionner après la pose de l'ombre.
+note : l'utilisation de l'un de ces attributs force "shadow: on;".[[BR]]
+note : l'image est redimensionnée après la pose de l'ombre. 
 
  * shadow-offset : décalage de l'ombre avec l'image [défaut : 10]
@@ -125 +167 @@
  * shadow        : Affiche l'ombre [défaut : off]
         
- * shadow : l'ordre des paramètres n'importe pas, mais il faut penser a mettre les unités. [défaut : 10px 45° 0.5@ 3 #000 on][[BR]]
+ * shadow : il faut penser à mettre les unités. [défaut : 10px 45° 0.5@ 3 #000 on]
 
-ex de code :
+exemple :
 {{{
    {image 'toupie.png', 'shadow: on;' }
@@ -135 +177 @@
 ==== Rotate ====
 
+a suivre