Section: html : image
| « Fonctions diverses | ^ Plugins de template | Meta » |
− Table des matières
Si vous avez besoin d’afficher une image, une balise <img> suffit amplement.
Mais si vous devez afficher la même image à plusieurs reprises, dans des formats différents, avec éventuellement des effets spéciaux, le plugin image et là pour vous.
Il peut redimenssionner et transformer l'image que vous lui donner, stocke l'image resultat dans un cache, et met le lien vers cette nouvelle image dans le html.
Utilisation du plugin dans un template ¶
Le plugin image est un plugin function. Il faut lui donner le chemin vers l'image. Le chemin
est relatif à votreapp/www/:
{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.
On peut changer par exemple sa largeur :
{image 'toupie.png', array('width'=>100)}
Cela va appeler la bibliothèque GD pour changer la largeur, et stockera la nouvelle image dans "myapp/www/cache/images/"
Le HTML généré contiendra un lien vers cette nouvelle image (ici le vrai lien peut-être différent) :
<img src="cache/images/toupie_XXXXXXXXXXXXXXX.png"/>
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, mais le navigateur chargera quand même l'image originale (si elle est beaucoup plus grande que la taille affichée, cela peut être pénalisant en terme de bande passante).
{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 probablement déformer l'image si le ratio hauteur/largeur est modifié.
{image 'toupie.png', array('width'=>150, 'height'=>50)}
Pour changer la taille de l'image sans la déformer il suffit de l'indiquer avec l'attribut
omo et le ratio sera respecté. Si la largeur ou hauteur resultante est supérieure
à celle attendu, l'image sera découpée aux dimensions indiquées :
{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 le format 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. Notez qu'il sera probablement préférable d'utiliser CSS pour ajouter des ombres à votre image plutôt que d'utiliser ce plugin. Cette fonctionnalité a été ajouté à une époque où les navigateurs ne prenaient pas en charge les ombres dans CSS.
{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')}
