wiki:fr/drafts/jimage2
developer.jelix.org is not used any more and exists only for history. Post new tickets on the Github account.
developer.jelix.org n'est plus utilisée, et existe uniquement pour son historique. Postez les nouveaux tickets sur le compte github.

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.

{image 'data/fichiers/toupie.png', '

    border-radius    : 5° ;                              // avec ou sans le °
    border-width     : 2px ;                             // avec ou sans le px
    border-color     : #f00 || #ff0000 ;                 // 3 ou 6
    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
	
    shadow-offset    : 10px ;                            // avec ou sans le px
    shadow-angle     : 45° ;                             // avec ou sans le ° ; [0-360]
    shadow-alpha     : 0.5@ ;                            // avec ou sans le @ ; [0-1]
    shadow-blur      : 5 ;                               // [1-10]
    shadow-color     : #f00 || #ff0000 ;                 // 3 ou 6
    shadow           : on ;                              // on ou off ; inutile si un autre paramêtre et spécifier
    shadow           : 10px 45° 5 #f00 ;                 // ° et px requis ; ordre aléatoire
	
    rotate           : 20° ;                             // avec ou sans le ° ; [0-360]
    zoom             : 50% ;                             // avec ou sans le % ; [0-∞]
	
    link             : url(http://jelix.org) ;
	
    vertical-align   : top   || -20px ;                  // avec ou sans le px ; [top |middle|bottom|:int]
    horizontal-align : right ||  20px ;                  // avec ou sans le px ; [left|center|right |:int]
    align            : top 20px ;                        // avec ou sans le px ; vertical horizontal
	
    extension        : jpg ;                             // [png|jpg|gif]
    quality          : 0.8 ;                             // [0-1]
	
    background-color : #f00 || #ff0000 ;                 // 3 ou 6
    background-image : url(border.png) ;
    background       : #f00 url(border.png) ;

    defaut           : url(border.png) || hide ;         // [hide|hidden|url(x)]

    width            : 90px || 20% ;                     // % et px requis ; % de la taille d'origine
    height           : 90px || 20% ;                     // % et px requis ; % de la taille d'origine
    enlarge          : on ;                              // [on|off]
    ratio            : inner ;                           // [inner|outer|inner-cap|outer-cut]
    size             : 90px 20% on inner ;               // % et px requis ; width height

    class            : bob ;                             // n'importe quel attributs html

'}

{image 'data/fichiers/toupie.png', ' border : 5° 2px #f00; shadow : 10px 45° 5 #f00; rotate : 20°; zoom : 50%; link : url(http://jelix.org); align : top 20px; extension : jpg; quality : 0.8; background : #f00 url(border.png); defaut : url(border.png); width : 90px; height : 20%; enlarge : on; ratio : inner; class : bob;'}

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;' }

 av : {image 'toupie.png', array('width'=>150, 'height'=>50, 'omo'=>true) }[[BR]]
 ap : {image 'toupie.png', 'width: 150; height: 50; ratio: outer-cut;' }

 av : {image 'toupie.png', array('width'=>100, 'zoom'=>60, 'alignh'=>'right', 'alignv'=>-20) }[[BR]]
 ap : {image 'toupie.png', 'width: 100; zoom: 140; align: -20 right;' }

 av : {image 'toupie.png', array('width'=>100, 'shadow'=>true, 'soffset'=>20, 'sangle'=>0, 'sblur'=>0, 'sopacity'=>100, 'scolor'=>'#ffff00') }[[BR]]
 ap : {image 'toupie.png', 'width: 100; shadow: 20px 0° 0 1@ #ff0;' }

 av : {image 'toupie2.png', array('width'=>100, 'notexists'=>'pastoupie.png') }[[BR]]
 ap : {image 'toupie2.png', 'width: 100; defaut: url(pastoupie.png);' }

Utilisation de :

Border

Il est possible d'ajouter une bordure a l'image.
Une bordure de type 8share est en fait une image divisée en 9, dons 8 morceaux servent à créer une bordure.

exemple :

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".

  • border-radius : Ajoute des coins arrondi a l'image. [défaut : 5]
  • border-width : Épaisseur de la bordure. [défaut : 2]
  • 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 : ...]
    Les chiffres représente la taille de la bordure en haut, en bas et sur les coté.

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

Ordre des Coins : [┏ ┓ ┛ ┗] ou [┏ ┛] [┗ ┓] ou [┏] [┗ ┓] [┛] ou [┏] [┓] [┛] [┗]

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

   {image 'toupie.png', 'border: 3° 3px #fff;' }
   {image 'toupie.png', 'border-8share: url(border.png) 5px 3px;' }

Square

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

ex de code :

   {image 'toupie.png', 'square: on;' }

Shadow

Shadow permet d'appliquer une ombre portée a l'image.

note : l'utilisation de l'un de ces attributs force "shadow: on;".
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]
  • shadow-angle : angle de l'ombre [défaut : 45]
  • shadow-alpha : niveau de transparence [défaut : 0.5]
  • shadow-blur : niveau de flou [défaut : 3]
  • shadow-color : couleur de l'ombre [défaut : #000]
  • shadow : Affiche l'ombre [défaut : off]

  • shadow : il faut penser à mettre les unités. [défaut : 10px 45° 0.5@ 3 #000 on]

exemple :

   {image 'toupie.png', 'shadow: on;' }
   {image 'toupie.png', 'shadow: 20px 0° 0 1@ #ff0;' }

Rotate

a suivre

Last modified 11 years ago Last modified on Oct 5, 2009, 7:31:12 PM