Section: html : image
| ^ Médias | intégrer un swf avec jelix » |
− Table des matières
Si vous avez besoin d’afficher une image, une balise image suffit amplement.
Mais si vous devez afficher la même image à plusieurs reprises, dans des formats différents, avec des effets spéciaux hollywoodiens ou presque, le plugin image et là pour vous.
Utilisation du plugin dans un template ¶
Il faut noter que pour la version 1.1+ le plugin image cherche les images dans le dossier "myapp/www/".
Le plugin image est un plugin function. L'utilisation la plus simple se présente ainsi : {image 'toupie.png'}
Ceci crée le code html ci-dessous
<img src="./toupie.png" />Des attributs ¶
On peut ajouter une classe : {image 'toupie.png', array('class'=>'right cadre')}
On peut également ajouter un id : {image 'toupie.png', array('id'=>'image')}
Ainsi qu'un texte alternatif : {image 'toupie.png', array('alt'=>'ici l\'image d\'une toupie')}
Les modifications disponibles ¶
On peut si l'on veut ajouter des arguments pour modifier l'image d'origine. {image 'toupie.png', array('width'=>100)}
Cela va générer une image sauvegardéé dans "myapp/www/cache/images/"
Si gd n'est pas présent sur le serveur, le plugin ajoute la largeur/hauteur a l'image d'origine sous forme de style.
{image 'toupie.png', array('width'=>100)}
<img src="toupie.png" style="width:100px;height:100px;"/>
Changer la taille ¶
On peut spécifier la largeur, la hauteur s'adaptera automatiquement, même chose pour la hauteur. {image 'toupie.png', array('height'=>50)} {image 'toupie.png', array('width'=>100)}
On peut bien sur utiliser les deux ce qui va déformer l'image. {image 'toupie.png', array('width'=>150, 'height'=>50)}
Pour changer la taille de l'image sans la déformer il suffit de demander. {image 'toupie.png', array('width'=>150, 'height'=>50, 'omo'=>true)}
On peut également limiter la taille d'une image en conservant son aspect/ratio, il suffit d'utiliser conjointement les paramètres maxheight et maxwidth. {image 'toupie.png', array('maxwidth'=>100, 'maxheight'=>90,'background'=>'#0000ff')} {image 'logo_1.png', array('maxwidth'=>100, 'maxheight'=>90)} {image 'logo_2.png', array('maxwidth'=>100, 'maxheight'=>90,'background'=>'#ff0000')}
Faire un zoom ¶
Changer la taille de l'image de manière homothétique permet de recadrer l'image. Une autre façon de recadrer est de faire un zoom.
- 100 affiche 100% de l'image
- 10 affiche 10% de l'image
{image 'toupie.png', array('width'=>100, 'zoom'=>50)}
Aligner et déplacer ¶
Une fois que l'on a recadré notre image, on peut la déplacer, pour visualiser la zone de l'image que l'on veut.
On peut aligner l'image à gauche, {image 'toupie.png', array('width'=>100, 'zoom'=>60, 'alignh'=>'left')}
ou à droite, {image 'toupie.png', array('width'=>100, 'zoom'=>60, 'alignh'=>'right')}
en haut, {image 'toupie.png', array('width'=>100, 'zoom'=>60, 'alignh'=>'top')}*
ou en bas. {image 'toupie.png', array('width'=>100, 'zoom'=>60, 'alignh'=>'bottom')}
Changer l'extension et la qualité ¶
On peut également changer l'extension pour par exemple transformer un png en jpeg et ainsi alléger l'image.
{image 'toupie.png', array('width'=>100, 'ext'=>'jpg')}
Le jpeg ne prend pas en charge la transparence.
{image 'toupie.png', array('width'=>100, 'ext'=>'jpg', 'quality'=>5)}
C'est léger !
Changer la couleur du fond ¶
On peut donner une couleur de fond aux images en png transparent. {image 'toupie.png', array('width'=>100, 'background'=>'#ff5533')}
Ex: sur cette image convertie en jpeg. {image 'toupie.png', array('width'=>100, 'ext'=>'jpg', 'background'=>'#ff5533')}
Ajouter une ombre portée ¶
On peut très simplement ajouter une ombre portée. {image 'toupie.png', array('width'=>100, 'shadow'=>true)}
Une fois l'ombre affichée on peut la déplacer, en modifiant la distance et l'angle. {image 'toupie.png', array('width'=>100, 'shadow'=>true, 'soffset'=>20)}
{image 'toupie.png', array('width'=>100, 'shadow'=>true, 'sangle'=>0)}
On peut modifier la netteté de l'ombre (maximum 11), {image 'toupie.png', array('width'=>100, 'shadow'=>true, 'sblur'=>0)}
l'opacité de l'ombre en % {image 'toupie.png', array('width'=>100, 'shadow'=>true, 'sopacity'=>100)}
et même la couleur. {image 'toupie.png', array('width'=>100, 'shadow'=>true, 'scolor'=>'#ffff00')}
