| 1 |
<h1>tests plugin image</h1> |
|---|
| 2 |
|
|---|
| 3 |
<h2>Image inexistante</h2> |
|---|
| 4 |
{literal}<p><code>{jimage 'does-not-exist.png', array('width'=>100)}</code></p>{/literal} |
|---|
| 5 |
<p class="result">{jimage 'does-not-exist.png', array('width'=>100)}</p> |
|---|
| 6 |
|
|---|
| 7 |
<h2>Pas une image</h2> |
|---|
| 8 |
{literal}<p><code>{jimage 'index.php', array('width'=>100)}</code></p>{/literal} |
|---|
| 9 |
<p class="result">{jimage 'index.php', array('width'=>100)}</p> |
|---|
| 10 |
|
|---|
| 11 |
<h2>Appel simple</h2> |
|---|
| 12 |
{literal}<p><code>{jimage 'jelix/design/images/logo_jelix_moyen.png'}</code></p>{/literal} |
|---|
| 13 |
<p class="result">{jimage 'jelix/design/images/logo_jelix_moyen.png'}</p> |
|---|
| 14 |
<p class="note">alt est présent car obligatoire pour la validation, mais vide. Les dimensions sont aussi indiquées dans la balise</p> |
|---|
| 15 |
|
|---|
| 16 |
<h2>Attributs id et class</h2> |
|---|
| 17 |
{literal}<p><code>{jimage 'jelix/design/images/logo_jelix_moyen.png', array('id'=>'logojelix', 'class'=>'image')}</code></p>{/literal} |
|---|
| 18 |
<p class="result">{jimage 'jelix/design/images/logo_jelix_moyen.png', array('id'=>'logojelix', 'class'=>'image')}</p> |
|---|
| 19 |
|
|---|
| 20 |
<h2>Attributs alt et title</h2> |
|---|
| 21 |
{literal}<p><code>{jimage 'jelix/design/images/logo_jelix_moyen.png', array('alt'=>'Jelix & compagnie', 'title'=>'Jelix > LE framework PHP5')}</code></p>{/literal} |
|---|
| 22 |
<p class="result">{jimage 'jelix/design/images/logo_jelix_moyen.png', array('alt'=>'Jelix & compagnie', 'title'=>'Jelix > LE framework PHP5')}</p> |
|---|
| 23 |
<p class="note">Les caractères spéciaux sont convertis.</p> |
|---|
| 24 |
|
|---|
| 25 |
<h2>Spécifier la largeur</h2> |
|---|
| 26 |
{literal}<p><code>{jimage 'jelix/design/images/logo_jelix_moyen.png', array('width'=>100)} {jimage 'jelix/design/images/logo_jelix_moyen.png', array('width'=>300)}</code></p>{/literal} |
|---|
| 27 |
<p class="result">{jimage 'jelix/design/images/logo_jelix_moyen.png', array('width'=>100)} {jimage 'jelix/design/images/logo_jelix_moyen.png', array('width'=>300)}</p> |
|---|
| 28 |
<p class="note">La hauteur est ajustée automatiquement.</p> |
|---|
| 29 |
|
|---|
| 30 |
<h2>Spécifier la hauteur</h2> |
|---|
| 31 |
{literal}<p><code>{jimage 'jelix/design/images/logo_jelix_moyen.png', array('height'=>100)} {jimage 'jelix/design/images/logo_jelix_moyen.png', array('height'=>20)}</code></p>{/literal} |
|---|
| 32 |
<p class="result">{jimage 'jelix/design/images/logo_jelix_moyen.png', array('height'=>100)} {jimage 'jelix/design/images/logo_jelix_moyen.png', array('height'=>20)}</p> |
|---|
| 33 |
<p class="note">La largeur est ajustée automatiquement.</p> |
|---|
| 34 |
|
|---|
| 35 |
<h2>Spécifier la largeur et la hauteur</h2> |
|---|
| 36 |
{literal}<p><code>{jimage 'jelix/design/images/logo_jelix_moyen.png', array('width'=>100,'height'=>80)} {jimage 'jelix/design/images/logo_jelix_moyen.png', array('width'=>300,'height'=>20)}</code></p>{/literal} |
|---|
| 37 |
<p class="result">{jimage 'jelix/design/images/logo_jelix_moyen.png', array('width'=>100,'height'=>80)} {jimage 'jelix/design/images/logo_jelix_moyen.png', array('width'=>300,'height'=>20)}</p> |
|---|
| 38 |
<p class="note">L'image est déformée.</p> |
|---|
| 39 |
|
|---|
| 40 |
<h2>Spécifier la largeur désactiver l'homothétie</h2> |
|---|
| 41 |
{literal}<p><code>{jimage 'jelix/design/images/logo_jelix_moyen.png', array('width'=>100,'preserve_aspect_ratio'=>false)}</code></p>{/literal} |
|---|
| 42 |
<p class="result">{jimage 'jelix/design/images/logo_jelix_moyen.png', array('width'=>100,'preserve_aspect_ratio'=>false)}</p> |
|---|
| 43 |
<p class="note">L'image est déformée.</p> |
|---|
| 44 |
|
|---|
| 45 |
<h2>Spécifier la hauteur et désactiver l'homothétie</h2> |
|---|
| 46 |
{literal}<p><code>{jimage 'jelix/design/images/logo_jelix_moyen.png', array('height'=>100,'preserve_aspect_ratio'=>false)}</code></p>{/literal} |
|---|
| 47 |
<p class="result">{jimage 'jelix/design/images/logo_jelix_moyen.png', array('height'=>100,'preserve_aspect_ratio'=>false)}</p> |
|---|
| 48 |
<p class="note">L'image est déformée.</p> |
|---|
| 49 |
|
|---|
| 50 |
<h2>Spécifier une largeur maximum</h2> |
|---|
| 51 |
{literal}<p><code>{jimage 'jelix/design/images/logo_jelix_moyen.png', array('maxwidth'=>30)} {jimage 'jelix/design/images/logo_jelix_moyen.png', array('maxwidth'=>300)}</code></p>{/literal} |
|---|
| 52 |
<p class="result">{jimage 'jelix/design/images/logo_jelix_moyen.png', array('maxwidth'=>30)} {jimage 'jelix/design/images/logo_jelix_moyen.png', array('maxwidth'=>300)}</p> |
|---|
| 53 |
<p class="note">L'image est réduite, jamais agrandie.</p> |
|---|
| 54 |
|
|---|
| 55 |
<h2>Spécifier une hauteur maximum</h2> |
|---|
| 56 |
{literal}<p><code>{jimage 'jelix/design/images/logo_jelix_moyen.png', array('maxheight'=>30)} {jimage 'jelix/design/images/logo_jelix_moyen.png', array('maxheight'=>300)}</code></p>{/literal} |
|---|
| 57 |
<p class="result">{jimage 'jelix/design/images/logo_jelix_moyen.png', array('maxheight'=>30)} {jimage 'jelix/design/images/logo_jelix_moyen.png', array('maxheight'=>300)}</p> |
|---|
| 58 |
<p class="note">L'image est réduite, jamais agrandie.</p> |
|---|
| 59 |
|
|---|
| 60 |
<h2>Spécifier la largeur et une hauteur maximum</h2> |
|---|
| 61 |
{literal}<p><code>{jimage 'jelix/design/images/logo_jelix_moyen.png', array('width'=>100,'maxheight'=>10)} {jimage 'jelix/design/images/logo_jelix_moyen.png', array('width'=>300,'maxheight'=>50)} {jimage 'jelix/design/images/logo_jelix_moyen.png', array('width'=>300,'maxheight'=>1000)}</code></p>{/literal} |
|---|
| 62 |
<p class="result">{jimage 'jelix/design/images/logo_jelix_moyen.png', array('width'=>100,'maxheight'=>10)} {jimage 'jelix/design/images/logo_jelix_moyen.png', array('width'=>300,'maxheight'=>50)} {jimage 'jelix/design/images/logo_jelix_moyen.png', array('width'=>300,'maxheight'=>1000)}</p> |
|---|
| 63 |
<p class="note">La hauteur maximum est prioritaire.</p> |
|---|
| 64 |
|
|---|
| 65 |
<h2>Spécifier la hauteur et une largeur maximum</h2> |
|---|
| 66 |
{literal}<p><code>{jimage 'jelix/design/images/logo_jelix_moyen.png', array('height'=>100,'maxwidth'=>20)} {jimage 'jelix/design/images/logo_jelix_moyen.png', array('height'=>20,'maxwidth'=>50)} {jimage 'jelix/design/images/logo_jelix_moyen.png', array('height'=>150,'maxwidth'=>1000)}</code></p>{/literal} |
|---|
| 67 |
<p class="result">{jimage 'jelix/design/images/logo_jelix_moyen.png', array('height'=>100,'maxwidth'=>20)} {jimage 'jelix/design/images/logo_jelix_moyen.png', array('height'=>20,'maxwidth'=>50)} {jimage 'jelix/design/images/logo_jelix_moyen.png', array('height'=>150,'maxwidth'=>1000)}</p> |
|---|
| 68 |
<p class="note">La largeur maximum est prioritaire.</p> |
|---|
| 69 |
|
|---|
| 70 |
<h2>Spécifier une largeur maximum et une hauteur maximum</h2> |
|---|
| 71 |
{literal}<p><code>{jimage 'jelix/design/images/logo_jelix_moyen.png', array('maxwidth'=>50,'maxheight'=>40)} {jimage 'jelix/design/images/logo_jelix_moyen.png', array('maxwidth'=>150,'maxheight'=>40)} {jimage 'jelix/design/images/logo_jelix_moyen.png', array('maxwidth'=>300,'maxheight'=>100)}</code></p>{/literal} |
|---|
| 72 |
<p class="result">{jimage 'jelix/design/images/logo_jelix_moyen.png', array('maxwidth'=>50,'maxheight'=>40)} {jimage 'jelix/design/images/logo_jelix_moyen.png', array('maxwidth'=>150,'maxheight'=>40)} {jimage 'jelix/design/images/logo_jelix_moyen.png', array('maxwidth'=>300,'maxheight'=>100)}</p> |
|---|
| 73 |
<p class="note">L'image est réduite selon la contrainte la plus forte, jamais agrandie.</p> |
|---|
| 74 |
|
|---|
| 75 |
<h2>Spécifier une couleur de fond</h2> |
|---|
| 76 |
{literal}<p><code>{jimage 'jelix/design/images/logo_jelix_moyen.png', array('background'=>'#cc5533')}</code></p>{/literal} |
|---|
| 77 |
<p class="result">{jimage 'jelix/design/images/logo_jelix_moyen.png', array('background'=>'#cc5533')}</p> |
|---|
| 78 |
<p class="note">La hauteur est ajustée automatiquement.</p> |
|---|
