developer.jelix.org n'est plus utilisée, et existe uniquement pour son historique. Postez les nouveaux tickets sur le compte github.
Version 13 (modified by Lipki, 13 years ago) (diff) |
---|
Proposition pour jImage2 le plugin
{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(border.png) 5px ; // [▲►▼◄] || [▲▼] [►◄] || [▲] [►◄] [▼] || [▲] [►] [▼] [◄] border : 5° 2px #f00; // ° et px requis ; ordre aléatoire ; n'intègre pas 8share 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] 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
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.
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]
- 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é.
- border : l'ordre des paramètres n'importe pas, mais il faut penser a mettre les unités. [défaut : 5° 2px #fff]
border-8share n'est pas intégrer.
ex de code :
{image 'toupie.png', 'border: 3° 3px #fff;' } {image 'toupie.png', 'border-8share: url(border.png) 5px 3px;' }
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.
par défaut square est a "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
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'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.
- 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 : 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]
ex de code :
{image 'toupie.png', 'shadow: on;' } {image 'toupie.png', 'shadow: 20px 0° 0 1@ #ff0;' }