Changeset 112349 in spip-zone
- Timestamp:
- Nov 7, 2018, 12:20:16 AM (2 years ago)
- Location:
- _plugins_/fonctions_images/trunk
- Files:
-
- 1 deleted
- 5 edited
Legend:
- Unmodified
- Added
- Removed
-
_plugins_/fonctions_images/trunk/demo/fonctions_images.html
r66809 r112349 1 1 <!DOCTYPE html> 2 <html lang=" fr">2 <html lang="#LANG"> 3 3 <head> 4 <title>Page de démonstration du plugin fonctions d'images</title> 5 #INSERT_HEAD 6 #INSERT_HEAD_CSS 7 <link rel="stylesheet" href="[(#CHEMIN{demo/bootstrap.min.css})]" type="text/css" /> 8 <link rel="stylesheet" href="[(#CHEMIN{demo/style_demo_fonctions_images.css})]" type="text/css" /> 4 <title>Page de démonstration du plugin fonctions d'images</title> 5 #INSERT_HEAD 6 #INSERT_HEAD_CSS 7 <link rel="stylesheet" href="[(#CHEMIN{demo/style_demo_fonctions_images.css})]" type="text/css" /> 9 8 </head> 10 9 <body> 11 10 12 <div class="container-fluid"> 13 <div class="row-fluid"> 11 <div class="page"> 14 12 15 <!-- menu à gauche --> 16 <div class="span3"> 17 <div class="well sidebar-nav affix"> 18 <ul class="nav nav-list"> 19 <li class="nav-header">Les filtres de couleur</li> 20 <BOUCLE_menu_couleurs(DATA){liste couleur_chroma,couleur_saturer,couleur_teinter,couleur_inverserluminosite,couleur_foncerluminosite,couleur_eclaircirluminosite,couleur_melanger}> 21 <li><a href="[(#ENV{filtres}|=={couleurs}|ou{#ENV{filtres}|=={''}}|?{##VALEUR,#SELF|parametre_url{filtres,couleurs}|ancre_url{#VALEUR}})]" class="ajax">#VALEUR</a></li> 22 </BOUCLE_menu_couleurs> 23 <li class="nav-header">Les filtres de traitement d'image</li> 24 <BOUCLE_menu_images(DATA){liste image_saturer,image_niveaux_gris_auto,image_courbe,image_float,image_contour_alpha,image_sincity,image_estampage_alpha,image_merge,image_negatif}> 25 <li><a href="[(#ENV{filtres}|=={images}|?{##VALEUR,#SELF|parametre_url{filtres,images}|ancre_url{#VALEUR}})]" class="ajax">#VALEUR</a></li> 26 </BOUCLE_menu_images> 27 </ul> 28 </div> 29 </div> 13 <!-- menu à gauche --> 14 <ul class="menu"> 15 <li class="menu__item menu__item_header">Traitement des couleurs</li> 16 <BOUCLE_menu_couleurs(DATA){liste couleur_chroma,couleur_saturer,couleur_teinter,couleur_inverserluminosite,couleur_foncerluminosite,couleur_eclaircirluminosite,couleur_melanger}> 17 <li class="menu__item"><a href="[(#ENV{filtres}|=={couleurs}|ou{#ENV{filtres}|=={''}}|?{##VALEUR,#SELF|parametre_url{filtres,couleurs}|ancre_url{#VALEUR}})]" class="ajax">#VALEUR</a></li> 18 </BOUCLE_menu_couleurs> 19 <li class="menu__item menu__item_header">Traitement des images</li> 20 <BOUCLE_menu_images(DATA){liste image_saturer,image_niveaux_gris_auto,image_courbe,image_float,image_contour_alpha,image_sincity,image_estampage_alpha,image_merge,image_negatif}> 21 <li class="menu__item"><a href="[(#ENV{filtres}|=={images}|?{##VALEUR,#SELF|parametre_url{filtres,images}|ancre_url{#VALEUR}})]" class="ajax">#VALEUR</a></li> 22 </BOUCLE_menu_images> 23 </ul> 30 24 31 <!-- contenu -->32 <div class="span9">33 <h1>Plugin fonctions d'images</h1>34 <p class="lead">35 Démonstration des filtres proposés par le plugin fonctions d'images.36 La plupart de ces filtres sont expliqués en détail sur le site <a href="http://www.paris-beyrouth.org/tutoriaux-spip/">Paris-Beyrouth</a>.37 </p>38 [(#ENV{filtres}|=={couleurs}|ou{#ENV{filtres}|=={''}}|oui)39 [(#INCLURE{fond=demo/inc-filtres_couleurs, env, ajax})]40 ]41 [(#ENV{filtres}|=={images}|oui)42 [(#INCLURE{fond=demo/inc-filtres_images, env, ajax})]43 ]44 </div><!-- fin span-9 -->25 <!-- contenu --> 26 <main class="main"> 27 <h1>Plugin fonctions d'images</h1> 28 <p class="lead"> 29 Démonstration des filtres proposés par le plugin fonctions d'images. 30 La plupart de ces filtres sont expliqués en détail sur le site <a href="http://www.paris-beyrouth.org/tutoriaux-spip/">Paris-Beyrouth</a>. 31 </p> 32 [(#ENV{filtres}|=={couleurs}|ou{#ENV{filtres}|=={''}}|oui) 33 <INCLURE{fond=demo/inc-filtres_couleurs}> 34 ] 35 [(#ENV{filtres}|=={images}|oui) 36 <INCLURE{fond=demo/inc-filtres_images}> 37 ] 38 </main> 45 39 46 </div><!-- fin row-fluid --> 47 </div><!-- fin container --> 40 </div> 48 41 </body> 49 42 </html> -
_plugins_/fonctions_images/trunk/demo/inc-filtres_couleurs.html
r81589 r112349 2 2 #SET{couleur2, ##GET{couleur1}|couleur_inverser} 3 3 4 5 <!-- filtre couleur_chroma --> 6 < a name="couleur_chroma"></a>7 <div class="boite" >8 <h2>couleur_chroma</h2>9 <p>10 Crée une palette de couleurs automatique d'après une couleur11 (<a href="http://www.paris-beyrouth.org/Une-nuance-de-couleurs">Paris-Beyrouth : Une nuance de couleurs</a>)12 </p>13 <dl class="dl-horizontal">14 <dt>syntaxe</dt>15 <dd><code>|couleur_chroma{3/6}</code></dd>16 <dt>argument</dt>17 <dd><code>x/y</code> numéro de la couleur / nombre de couleurs souhaitées</dd>18 <dt>exemple</dt>19 <dd><code class="exemple">#VAL{"#VAL{c5e41d}|couleur_chroma{1/6}"}</code></dd>20 </dl>21 <BOUCLE_chroma(DATA){liste #GET{couleur1},#GET{couleur2}}>22 <div class="apercu nuances">23 <div class="nuance on" style="background-color:[(#VALEUR)]; color:[#(#VALEUR|couleur_extreme|couleur_inverser)];"><p><strong>[(#VALEUR)]</strong></p></div>24 <BOUCLE_chromabis(DATA){liste 1/4,2/4,3/4,4/4}>25 #SET{couleur, ##_chroma:VALEUR|couleur_chroma{#VALEUR}}26 <div class="nuance" style="background-color:[(#GET{couleur})]; color:[#(#GET{couleur}|couleur_extreme|couleur_inverser)];"><p>#VALEUR</p></div>27 </BOUCLE_chromabis>28 <br style="clear:left" />4 <hr> 5 6 <!-- couleur_chroma --> 7 <div class="boite" id="couleur_chroma"> 8 <h2 class="boite__titre">couleur_chroma</h2> 9 <p> 10 Crée une palette de couleurs automatique d'après une couleur 11 (<a href="http://www.paris-beyrouth.org/Une-nuance-de-couleurs">Paris-Beyrouth : Une nuance de couleurs</a>) 12 </p> 13 <dl class="codeblock"> 14 <dt>Syntaxe</dt> 15 <dd><code>couleur_chroma{3/6}</code></dd> 16 <dt>Paramètre</dt> 17 <dd>Numéro de la couleur / nombre de couleurs souhaitées</dd> 18 <dt>Exemple</dt> 19 <dd><code class="Exemple">#VAL{"\[\(#VAL{c5e41d}|couleur_chroma{1/6}\)\]"}</code></dd> 20 </dl> 21 <BOUCLE_chroma(DATA){liste #GET{couleur1},#GET{couleur2}}> 22 <div class="apercu apercu_couleurs"> 23 <div class="apercu__item on" style="background-color:[(#VALEUR)]; color:[#(#VALEUR|couleur_extreme|couleur_inverser)];">[(#VALEUR)]</div> 24 <BOUCLE_chromabis(DATA){liste 1/4,2/4,3/4,4/4}> 25 #SET{couleur, ##_chroma:VALEUR|couleur_chroma{#VALEUR}} 26 <div class="apercu__item" style="background-color:[(#GET{couleur})]; color:[#(#GET{couleur}|couleur_extreme|couleur_inverser)];">#VALEUR</div> 27 </BOUCLE_chromabis> 28 <br style="clear:left" /> 29 29 </div> 30 30 </BOUCLE_chroma> 31 31 </div> 32 32 33 34 <!-- filtre couleur_saturer --> 35 <a name="couleur_saturer"></a> 36 <div class="boite"> 37 <h2>couleur_saturer</h2> 38 <p> 39 Modifie la saturation d'une couleur.<br> 40 [(#CHEMIN_IMAGE{warning-16.png}|balise_img{"",icone})] A ne pas confondre avec le filtre <code>|couleur_saturation</code> de SPIP qui agit sur l'intensité d'une couleur. 41 </p> 42 <dl class="dl-horizontal"> 43 <dt>syntaxe</dt> 44 <dd><code>|couleur_saturer{1.2}</code></dd> 45 <dt>argument</dt> 46 <dd><code>nombre entre 0 et 2</code> <small>(saturation d'origine = 1)</small></dd> 47 <dt>exemple</dt> 48 <dd><code class="exemple">#VAL{"#VAL{c5e41d}|couleur_saturer{0.75}"}</code></dd> 49 </dl> 50 <BOUCLE_saturer(DATA){liste ##GET{couleur1}|couleur_saturer{0.65},##GET{couleur2}|couleur_saturer{0.65}}> 51 <div class="apercu nuances"> 52 <BOUCLE_saturerbis(DATA){liste 0.0,0.2,0.4,0.6,0.8,1,1.2,1.4,1.6,1.8,2}> 53 #SET{couleur, ##_saturer:VALEUR|couleur_saturer{#VALEUR}} 54 [(#VALEUR|=={1}|oui) 55 <div class="nuance on" style="background-color:[(#_saturer:VALEUR)]; color:[#(#_saturer:VALEUR|couleur_extreme|couleur_inverser)];"><p><strong>[(#_saturer:VALEUR)]</strong></p></div> 56 ] 57 [(#VALEUR|=={1}|non) 58 <div class="nuance" style="background-color:[(#GET{couleur})]; color:[#(#GET{couleur}|couleur_extreme|couleur_inverser)];"><p>#VALEUR</p></div> 59 ] 60 </BOUCLE_saturerbis> 61 <br style="clear:left" /> 33 <hr> 34 35 <!-- couleur_saturer --> 36 <div class="boite" id="couleur_saturer"> 37 <h2 class="boite__titre">couleur_saturer</h2> 38 <p> 39 Modifie la saturation d'une couleur. 40 </p> 41 <p> 42 <span class="warning"> 43 À ne pas confondre avec le filtre <code>couleur_saturation</code> de SPIP qui agit sur l'intensité d'une couleur. 44 </span> 45 </p> 46 <dl class="codeblock"> 47 <dt>Syntaxe</dt> 48 <dd><code>couleur_saturer{1.2}</code></dd> 49 <dt>Paramètre</dt> 50 <dd>nombre entre 0 et 2 (saturation d'origine = 1)</dd> 51 <dt>Exemple</dt> 52 <dd><code class="Exemple">#VAL{"\[\(#VAL{c5e41d}|couleur_saturer{0.75}\)\]"}</code></dd> 53 </dl> 54 <BOUCLE_saturer(DATA){liste ##GET{couleur1}|couleur_saturer{0.65},##GET{couleur2}|couleur_saturer{0.65}}> 55 <div class="apercu apercu_couleurs"> 56 <BOUCLE_saturerbis(DATA){liste 0.0,0.2,0.4,0.6,0.8,1,1.2,1.4,1.6,1.8,2}> 57 #SET{couleur, ##_saturer:VALEUR|couleur_saturer{#VALEUR}} 58 [(#VALEUR|=={1}|oui) 59 <div class="apercu__item on" style="background-color:[(#_saturer:VALEUR)]; color:[#(#_saturer:VALEUR|couleur_extreme|couleur_inverser)];">[(#_saturer:VALEUR)]</div> 60 ] 61 [(#VALEUR|=={1}|non) 62 <div class="apercu__item" style="background-color:[(#GET{couleur})]; color:[#(#GET{couleur}|couleur_extreme|couleur_inverser)];">#VALEUR</div> 63 ] 64 </BOUCLE_saturerbis> 65 <br style="clear:left" /> 62 66 </div> 63 67 </BOUCLE_saturer> 64 68 </div> 65 69 66 67 <!-- Filtre couleur_teinter --> 68 <a name="couleur_teinter"></a> 69 <div class="boite"> 70 <h2>couleur_teinter</h2> 71 <p> 72 Modifie la teinte d'une couleur. 73 </p> 74 <dl class="dl-horizontal"> 75 <dt>syntaxe</dt> 76 <dd><code>|couleur_teinter{30}</code></dd> 77 <dt>argument</dt> 78 <dd><code>nombre entre -360 et 360</code> <small>(défaut = 30)</small></dd> 79 <dt>exemple</dt> 80 <dd><code class="exemple">#VAL{"#VAL{c5e41d}|couleur_teinter{30}"}</code></dd> 81 </dl> 82 <BOUCLE_teinter(DATA){liste #GET{couleur1},#GET{couleur2}}> 83 <div class="apercu nuances"> 84 <BOUCLE_teinterbis(DATA){liste -360,-150,-120,-90,-60,-30,0,30,60,90,120,150,360}> 85 #SET{couleur, ##_teinter:VALEUR|couleur_teinter{#VALEUR}} 86 [(#VALEUR|=={0}|oui) 87 <div class="nuance on" style="background-color:[(#_teinter:VALEUR)]; color:[#(#_teinter:VALEUR|couleur_extreme|couleur_inverser)];"><p><strong>#_teinter:VALEUR</strong></p></div> 88 ] 89 [(#VALEUR|=={0}|non) 90 <div class="nuance" style="background-color:[(#GET{couleur})]; color:[#(#GET{couleur}|couleur_extreme|couleur_inverser)];"><p>#VALEUR</p></div> 91 ] 92 </BOUCLE_teinterbis> 93 <br style="clear:left" /> 94 </div> 95 </BOUCLE_teinter> 96 </div> 97 98 99 <!-- Filtre couleur_inverserluminosite --> 100 <a name="couleur_inverserluminosite"></a> 101 <div class="boite"> 102 <h2>couleur_inverserluminosite</h2> 103 <p> 104 Inverse la luminosité d'une couleur. </br> 105 [(#CHEMIN_IMAGE{information-16.png}|balise_img{"",icone})] Ce filtre est apparenté aux filtres <code>|couleur_foncer_si_claire</code> et <code>|couleur_eclaircir_si_foncee</code> natifs de SPIP, à ceci près qu'il détermine automatiquement s'il doit foncer ou éclaircir la couleur. 106 </p> 107 <dl class="dl-horizontal"> 108 <dt>syntaxe</dt> 109 <dd><code>|couleur_inverserluminosite{20, false}</code></dd> 110 <dt>argument 1</dt> 111 <dd>pourcentage <code>nombre entre 0 et 100</code> <small>(défaut = 20)</small></dd> 112 <dt>argument 2</dt> 113 <dd>intensifier <code>true / false</code> <small>(défaut = false)</small></dd> 114 <dt>exemple</dt> 115 <dd><code class="exemple">#VAL{"#VAL{c5e41d}|couleur_inverserluminosite{20,true}"}</code></dd> 116 </dl> 117 <BOUCLE_inverser(DATA){liste #GET{couleur1},##GET{couleur2}|couleur_foncerluminosite{30},#ffffff,#000000}> 118 <div class="apercu nuances"> 119 <div class="nuance on" style="background-color:[(#VALEUR)]; color:[#(#VALEUR|couleur_extreme|couleur_inverser)];"><p><strong>#VALEUR</strong></p></div> 120 <BOUCLE_inverserbis(DATA){liste 10,20,30,40,50,60,70,80,90,100}> 121 #SET{couleur, ##_inverser:VALEUR|couleur_inverserluminosite{#VALEUR}} 122 <div class="nuance" style="background-color:[(#GET{couleur})]; color:[#(#GET{couleur}|couleur_extreme|couleur_inverser)];"><p>#VALEUR</p></div> 123 </BOUCLE_inverserbis> 124 <br style="clear:left" /> 125 </div> 126 </BOUCLE_inverser> 127 </div> 128 129 130 <!-- Filtre couleur_foncerluminosite --> 131 <a name="couleur_foncerluminosite"></a> 132 <div class="boite"> 133 <h2>couleur_foncerluminosite</h2> 134 <p> 135 Fonce une couleur<br> 136 [(#CHEMIN_IMAGE{warning-16.png}|balise_img{"",icone})] Le filtre <code>|couleur_foncer</code> de SPIP procure la même fonctionnalité. 137 </p> 138 <dl class="dl-horizontal"> 139 <dt>syntaxe</dt> 140 <dd><code>|couleur_foncerluminosite{20}</code></dd> 141 <dt>argument</dt> 142 <dd><code>nombre entre 0 et 100</code> <small>(défaut = 20)</small></dd> 143 <dt>exemple</dt> 144 <dd><code class="exemple">#VAL{"#VAL{c5e41d}|couleur_foncerluminosite{20}"}</code></dd> 145 </dl> 146 <BOUCLE_foncer(DATA){liste #GET{couleur1},#ffffff}> 147 <div class="apercu nuances"> 148 <div class="nuance on" style="background-color:[(#VALEUR)]; color:[#(#VALEUR|couleur_extreme|couleur_inverser)];"><p><strong>#VALEUR</strong></p></div> 149 <BOUCLE_foncerbis(DATA){liste 10,20,30,40,50,60,70,80,90,100}> 150 #SET{couleur, ##_foncer:VALEUR|couleur_foncerluminosite{#VALEUR}} 151 <div class="nuance" style="background-color:[(#GET{couleur})]; color:[#(#GET{couleur}|couleur_extreme|couleur_inverser)];"><p>#VALEUR</p></div> 152 </BOUCLE_foncerbis> 153 <br style="clear:left" /> 154 </div> 155 </BOUCLE_foncer> 156 </div> 157 158 159 <!-- Filtre couleur_eclaircirluminosite --> 160 <a name="couleur_eclaircirluminosite"></a> 161 <div class="boite"> 162 <h2>couleur_eclaircirluminosite</h2> 163 <p> 164 Eclaircit une couleur<br> 165 [(#CHEMIN_IMAGE{warning-16.png}|balise_img{"",icone})] Le filtre <code>|couleur_eclaircir</code> de SPIP procure la même fonctionnalité. 166 </p> 167 <dl class="dl-horizontal"> 168 <dt>syntaxe</dt> 169 <dd><code>|couleur_eclaircirluminosite{20}</code></dd> 170 <dt>argument</dt> 171 <dd><code>nombre entre 0 et 100</code> <small>(défaut=20)</small></dd> 172 <dt>exemple</dt> 173 <dd><code class="exemple">#VAL{"#VAL{c5e41d}|couleur_eclaircirluminosite{20}"}</code></dd> 174 </dl> 175 <BOUCLE_eclaircir(DATA){liste #GET{couleur1},#000000}> 176 <div class="apercu nuances"> 177 <div class="nuance on" style="background-color:[(#VALEUR)]; color:[#(#VALEUR|couleur_extreme|couleur_inverser)];"><p><strong>#VALEUR</strong></p></div> 178 <BOUCLE_eclaircirbis(DATA){liste 10,20,30,40,50,60,70,80,90,100}> 179 #SET{couleur, ##_eclaircir:VALEUR|couleur_eclaircirluminosite{#VALEUR}} 180 <div class="nuance" style="background-color:[(#GET{couleur})]; color:[#(#GET{couleur}|couleur_extreme|couleur_inverser)];"><p>#VALEUR</p></div> 181 </BOUCLE_eclaircirbis> 182 <br style="clear:left" /> 183 </div> 184 </BOUCLE_eclaircir> 185 </div> 186 187 188 <!-- Filtre couleur_melanger --> 189 <a name="couleur_melanger"></a> 190 <div class="boite"> 191 <h2>couleur_melanger</h2> 192 <p> 193 Mélange deux couleurs. 194 </p> 195 <dl class="dl-horizontal"> 196 <dt>syntaxe</dt> 197 <dd><code>|couleur_melanger{couleurB, 50}</code></dd> 198 <!--<dd><code>#VAL{"#LISTE{couleurA, couleurB}|couleur_melanger{50}"}</code></dd>--> 199 <dt>argument</dt> 200 <dd><code>nombre entre 0 et 100</code> <small>(défaut=50)</small></dd> 201 <dt>exemples</dt> 202 <dd><code class="exemple">#VAL{"#VAL{ff4900}|couleur_melanger{c5e41d, 50}"}</code></dd> 203 <!--<dd><code class="exemple">#VAL{"#LISTE{ff4900, c5e41d}|couleur_melanger{50}"}</code></dd>--> 204 </dl> 205 <BOUCLE_melanger(DATA){source table, #ARRAY{#GET{couleur1},#GET{couleur2}, #GET{couleur2},#dddddd, #ff4900, #GET{couleur1}}}> 206 <div class="apercu nuances"> 207 <div class="nuance on" style="background-color:[(#CLE)]; color:[#(#CLE|couleur_extreme|couleur_inverser)];"><p><strong>#CLE</strong></p></div> 208 <div class="nuance on" style="background-color:[(#VALEUR)]; color:[#(#VALEUR|couleur_extreme|couleur_inverser)];"><p><strong>#VALEUR</strong></p></div> 209 <BOUCLE_melangerbis(DATA){liste 0.0,20,40,60,80,100}> 210 #SET{couleur, ##_melanger:CLE|couleur_melanger{#_melanger:VALEUR, #VALEUR}} 211 <div class="nuance" style="background-color:[(#GET{couleur})]; color:[#(#GET{couleur}|couleur_extreme|couleur_inverser)];"><p>#VALEUR</p></div> 212 </BOUCLE_melangerbis> 213 <br style="clear:left" /> 214 </div> 215 </BOUCLE_melanger> 216 </div> 70 <hr> 71 72 <!-- couleur_teinter --> 73 <div class="boite" id="couleur_teinter"> 74 <h2 class="boite__titre">couleur_teinter</h2> 75 <p> 76 Modifie la teinte d'une couleur. 77 </p> 78 <dl class="codeblock"> 79 <dt>Syntaxe</dt> 80 <dd><code>couleur_teinter{30}</code></dd> 81 <dt>Paramètre</dt> 82 <dd>nombre entre -360 et 360 (défaut = 30)</dd> 83 <dt>Exemple</dt> 84 <dd><code class="Exemple">#VAL{"\[\(#VAL{c5e41d}|couleur_teinter{30}\)\]"}</code></dd> 85 </dl> 86 <BOUCLE_teinter(DATA){liste #GET{couleur1},#GET{couleur2}}> 87 <div class="apercu apercu_couleurs"> 88 <BOUCLE_teinterbis(DATA){liste -360,-150,-120,-90,-60,-30,0,30,60,90,120,150,360}> 89 #SET{couleur, ##_teinter:VALEUR|couleur_teinter{#VALEUR}} 90 [(#VALEUR|=={0}|oui) 91 <div class="apercu__item on" style="background-color:[(#_teinter:VALEUR)]; color:[#(#_teinter:VALEUR|couleur_extreme|couleur_inverser)];"><p><strong>#_teinter:VALEUR</strong></p></div> 92 ] 93 [(#VALEUR|=={0}|non) 94 <div class="apercu__item" style="background-color:[(#GET{couleur})]; color:[#(#GET{couleur}|couleur_extreme|couleur_inverser)];">#VALEUR</div> 95 ] 96 </BOUCLE_teinterbis> 97 <br style="clear:left" /> 98 </div> 99 </BOUCLE_teinter> 100 </div> 101 102 <hr> 103 104 <!-- couleur_inverserluminosite --> 105 <div class="boite" id="couleur_inverserluminosite"> 106 <h2 class="boite__titre">couleur_inverserluminosite</h2> 107 <p> 108 Inverse la luminosité d'une couleur. 109 </p> 110 <p> 111 <span class="warning"> 112 Ce filtre est apparenté aux filtres <code>couleur_foncer_si_claire</code> et <code>couleur_eclaircir_si_foncee</code> natifs de SPIP, à ceci près qu'il détermine automatiquement s'il doit foncer ou éclaircir la couleur. 113 <span class="warning"> 114 </p> 115 <dl class="codeblock"> 116 <dt>Syntaxe</dt> 117 <dd><code>couleur_inverserluminosite{20, false}</code></dd> 118 <dt>Paramètre 1</dt> 119 <dd>pourcentage : nombre entre 0 et 100 (défaut = 20)</dd> 120 <dt>Paramètre 2</dt> 121 <dd>intensifier : true / false (défaut = false)</dd> 122 <dt>Exemple</dt> 123 <dd><code class="Exemple">#VAL{"\[\(#VAL{c5e41d}|couleur_inverserluminosite{20,true}\)\]"}</code></dd> 124 </dl> 125 <BOUCLE_inverser(DATA){liste #GET{couleur1},##GET{couleur2}|couleur_foncerluminosite{30},#ffffff,#000000}> 126 <div class="apercu apercu_couleurs"> 127 <div class="apercu__item on" style="background-color:[(#VALEUR)]; color:[#(#VALEUR|couleur_extreme|couleur_inverser)];">#VALEUR</div> 128 <BOUCLE_inverserbis(DATA){liste 10,20,30,40,50,60,70,80,90,100}> 129 #SET{couleur, ##_inverser:VALEUR|couleur_inverserluminosite{#VALEUR}} 130 <div class="apercu__item" style="background-color:[(#GET{couleur})]; color:[#(#GET{couleur}|couleur_extreme|couleur_inverser)];">#VALEUR</div> 131 </BOUCLE_inverserbis> 132 <br style="clear:left" /> 133 </div> 134 </BOUCLE_inverser> 135 </div> 136 137 <hr> 138 139 140 <!-- couleur_foncerluminosite --> 141 <div class="boite" id="couleur_foncerluminosite"> 142 <h2 class="boite__titre">couleur_foncerluminosite</h2> 143 <p> 144 Fonce une couleur 145 </p> 146 <p> 147 <span class="warning"> 148 Le filtre <code>couleur_foncer</code> de SPIP procure la même fonctionnalité. 149 </span> 150 </p> 151 <dl class="codeblock"> 152 <dt>Syntaxe</dt> 153 <dd><code>couleur_foncerluminosite{20}</code></dd> 154 <dt>Paramètre</dt> 155 <dd>nombre entre 0 et 100 (défaut = 20)</dd> 156 <dt>Exemple</dt> 157 <dd><code class="Exemple">#VAL{"\[\(#VAL{c5e41d}|couleur_foncerluminosite{20}\)\]"}</code></dd> 158 </dl> 159 <div class="apercu apercu_couleurs"> 160 <div class="apercu__item on" style="background-color:[(#GET{couleur1})]; color:[#(#GET{couleur1}|couleur_extreme|couleur_inverser)];">#GET{couleur1}</div> 161 <BOUCLE_foncer(DATA){liste 10,20,30,40,50,60,70,80,90,100}> 162 #SET{couleur, ##GET{couleur1}|couleur_foncerluminosite{#VALEUR}} 163 <div class="apercu__item" style="background-color:[(#GET{couleur})]; color:[#(#GET{couleur}|couleur_extreme|couleur_inverser)];">#VALEUR</div> 164 </BOUCLE_foncer> 165 </div> 166 </div> 167 168 <hr> 169 170 171 <!-- couleur_eclaircirluminosite --> 172 <div class="boite" id="couleur_eclaircirluminosite"> 173 <h2 class="boite__titre">couleur_eclaircirluminosite</h2> 174 <p> 175 Eclaircit une couleur<br> 176 </p> 177 <p> 178 <span class="warning"> 179 Le filtre <code>couleur_eclaircir</code> de SPIP procure la même fonctionnalité. 180 </span> 181 </p> 182 <dl class="codeblock"> 183 <dt>Syntaxe</dt> 184 <dd><code>couleur_eclaircirluminosite{20}</code></dd> 185 <dt>Paramètre</dt> 186 <dd><code>nombre entre 0 et 100</code> <small>(défaut=20)</small></dd> 187 <dt>Exemple</dt> 188 <dd><code class="Exemple">#VAL{"\[\(#VAL{c5e41d}|couleur_eclaircirluminosite{20}\)\]"}</code></dd> 189 </dl> 190 <div class="apercu apercu_couleurs"> 191 <div class="apercu__item on" style="background-color:[(#GET{couleur1})]; color:[#(#GET{couleur1}|couleur_extreme|couleur_inverser)];">#GET{couleur1}</div> 192 <BOUCLE_eclaircir(DATA){liste 10,20,30,40,50,60,70,80,90,100}> 193 #SET{couleur, ##GET{couleur1}|couleur_eclaircirluminosite{#VALEUR}} 194 <div class="apercu__item" style="background-color:[(#GET{couleur})]; color:[#(#GET{couleur}|couleur_extreme|couleur_inverser)];">#VALEUR</div> 195 </BOUCLE_eclaircir> 196 </div> 197 </div> 198 199 <hr> 200 201 202 <!-- couleur_melanger --> 203 <div class="boite" id="couleur_melanger"> 204 <h2 class="boite__titre">couleur_melanger</h2> 205 <p> 206 Mélange deux couleurs. 207 </p> 208 <dl class="codeblock"> 209 <dt>Syntaxe</dt> 210 <dd><code>couleur_melanger{couleurB, 50}</code></dd> 211 <!--<dd><code>#VAL{"#LISTE{couleurA, couleurB}|couleur_melanger{50}"}</code></dd>--> 212 <dt>Paramètre</dt> 213 <dd>nombre entre 0 et 100 (défaut=50)</dd> 214 <dt>Exemples</dt> 215 <dd><code class="Exemple">#VAL{"\[\(#VAL{ff4900}|couleur_melanger{c5e41d, 50}\)\]"}</code></dd> 216 <!--<dd><code class="Exemple">#VAL{"#LISTE{ff4900, c5e41d}|couleur_melanger{50}"}</code></dd>--> 217 </dl> 218 <BOUCLE_melanger(DATA){source table, #ARRAY{#GET{couleur1},#GET{couleur2}, #GET{couleur2},#dddddd, #ff4900, #GET{couleur1}}}> 219 <div class="apercu apercu_couleurs"> 220 <div class="apercu__item on" style="background-color:[(#CLE)]; color:[#(#CLE|couleur_extreme|couleur_inverser)];"><p><strong>#CLE</strong></p></div> 221 <div class="apercu__item on" style="background-color:[(#VALEUR)]; color:[#(#VALEUR|couleur_extreme|couleur_inverser)];">#VALEUR</div> 222 <BOUCLE_melangerbis(DATA){liste 0.0,20,40,60,80,100}> 223 #SET{couleur, ##_melanger:CLE|couleur_melanger{#_melanger:VALEUR, #VALEUR}} 224 <div class="apercu__item" style="background-color:[(#GET{couleur})]; color:[#(#GET{couleur}|couleur_extreme|couleur_inverser)];">#VALEUR</div> 225 </BOUCLE_melangerbis> 226 <br style="clear:left" /> 227 </div> 228 </BOUCLE_melanger> 229 </div> -
_plugins_/fonctions_images/trunk/demo/inc-filtres_images.html
r66846 r112349 1 #SET{img,#CHEMIN{images/ecureuil.jpg}|balise_img} 1 2 #SET{couleur1, #c5e41d} 2 3 #SET{couleur2, ##GET{couleur1}|couleur_inverser} 3 4 4 5 5 <!-- filtre image_saturer --> 6 <a name="image_saturer"></a> 7 <div class="boite"> 8 <h2>image_saturer</h2> 9 <p> 10 Modifie la saturation d'une image<br /> 11 </p> 12 <dl class="dl-horizontal"> 13 <dt>syntaxe</dt> 14 <dd><code>|image_saturer{1.2}</code></dd> 15 <dt>argument</dt> 16 <dd><code>nombre entre 0 et2</code> <small>(1 = saturation d'origine)</small></dd> 17 <dt>exemple</dt> 18 <dd><code class="exemple">#VAL{"#CHEMIN{images/ecureuil.jpg}|image_saturer{1.2}"}</code></dd> 19 </dl> 20 <div class="apercu images"> 21 <BOUCLE_imgsaturer(DATA){liste 0.0, 0.5, 1, 1.5, 2}> 22 [(#VALEUR|=={1}|oui) 23 <div class="image on">[<p>(#VALEUR) = originale</p>][(#CHEMIN{images/ecureuil.jpg}|image_reduire{150})]</div> 24 ] 25 [(#VALEUR|=={1}|non) 26 <div class="image">[<p>(#VALEUR)</p>][(#CHEMIN{images/ecureuil.jpg}|image_reduire{150}|image_saturer{#VALEUR})]</div> 27 ] 28 </BOUCLE_imgsaturer> 29 <br style="clear:left"> 30 </div> 31 </div> 32 33 34 <!-- filtre image_niveaux_gris_auto --> 35 <a name="image_niveaux_gris_auto"></a> 36 <div class="boite"> 37 <h2>image_niveaux_gris_auto</h2> 38 <p> 39 Corrige automatiquement les niveaux de gris d'une image. 40 <a href="http://www.paris-beyrouth.org/Corriger-les-niveaux-des-images">(Paris-Beyrouth : Corriger les niveaux des images</a>) 41 </p> 42 <dl class="dl-horizontal"> 43 <dt>syntaxe</dt> 44 <dd><code>|image_niveaux_gris_auto</code></dd> 45 <dt>exemple</dt> 46 <dd><code class="exemple">#VAL{"#CHEMIN{images/ecureuil.jpg}|image_niveaux_gris_auto"}</code></dd> 47 </dl> 48 <div class="apercu images"> 49 <div class="image on"><p>originale</p>[(#CHEMIN{images/ecureuil.jpg}|image_courbe{rvb, 1=75})]</div> 50 <div class="image"><p>niveaux_gris_auto</p>[(#CHEMIN{images/ecureuil.jpg}|image_courbe{rvb, 1=75}|image_niveaux_gris_auto)]</div> 51 <br style="clear:left"> 52 </div> 53 </div> 54 6 <hr> 7 8 <!-- image_saturer --> 9 <div class="boite" id="image_saturer"> 10 <h2 class="boite__titre">image_saturer</h2> 11 <p> 12 Modifie la saturation d'une image<br /> 13 </p> 14 <dl class="codeblock"> 15 <dt>Syntaxe</dt> 16 <dd><code>image_saturer{1.2}</code></dd> 17 <dt>Paramètre</dt> 18 <dd>nombre entre 0 et 2 (1 = saturation d'origine)</dd> 19 <dt>Exemple</dt> 20 <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/ecureuil.jpg}|image_saturer{1.2}\)\]"}</code></dd> 21 </dl> 22 <div class="apercu apercu_images"> 23 <BOUCLE_imgsaturer(DATA){liste 0.0, 0.5, 1, 1.5, 2}> 24 [(#VALEUR|=={1}|oui) 25 <div class="apercu__item on">[<p>(#VALEUR) = originale</p>][(#GET{img})]</div> 26 ] 27 [(#VALEUR|=={1}|non) 28 <div class="apercu__item">[<p>(#VALEUR)</p>][(#GET{img}|image_saturer{#VALEUR})]</div> 29 ] 30 </BOUCLE_imgsaturer> 31 </div> 32 </div> 33 34 <hr> 35 36 <!-- image_niveaux_gris_auto --> 37 <div class="boite" id="image_niveaux_gris_auto"> 38 <h2 class="boite__titre">image_niveaux_gris_auto</h2> 39 <p> 40 Corrige automatiquement les niveaux de gris d'une image. 41 <a href="http://www.paris-beyrouth.org/Corriger-les-niveaux-des-images">(Paris-Beyrouth : Corriger les niveaux des images</a>) 42 </p> 43 <dl class="codeblock"> 44 <dt>Syntaxe</dt> 45 <dd><code>image_niveaux_gris_auto</code></dd> 46 <dt>Exemple</dt> 47 <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/ecureuil.jpg}|image_niveaux_gris_auto\)\]"}</code></dd> 48 </dl> 49 <div class="apercu apercu_images"> 50 <div class="apercu__item on"><p>originale</p>[(#GET{img}|image_courbe{rvb, 1=75})]</div> 51 <div class="apercu__item"><p>niveaux_gris_auto</p>[(#GET{img}|image_courbe{rvb, 1=75}|image_niveaux_gris_auto)]</div> 52 </div> 53 </div> 55 54 56 55 [(#REM) ne semble pas marcher 57 <!-- filtre image_podpod --> 58 <a name="image_podpod"></a> 59 <div class="boite"> 60 <h2>image_podpod</h2> 61 <p> 62 Rempli par une couleur la plage de niveau de gris compris entre 2 paramètres. 63 (<a href="http://www.paris-beyrouth.org/Creer-automatiquement-une">Paris-Beyrouth : Créer automatiquement une publicité podPod</a>) 64 </p> 65 <dl class="dl-horizontal"> 66 <dt>syntaxe</dt> 67 <dd><code>|image_podpod{c5e41d,150,200}</code></dd> 68 <dt>argument1</dt> 69 <dd><code>#couleur</code></dd> 70 <dt>argument2</dt> 71 <dd><code>nombre entre 0 et 255</code><small>borne basse de la plage de couleur</small></dd> 72 <dt>argument3</dt> 73 <dd><code>nombre entre 0 et 255</code><small>borne haute de la plage de couleur</small></dd> 74 <dt>exemple</dt> 75 <dd><code class="exemple">#VAL{"#CHEMIN{images/ecureuil.jpg}|image_podpod{c5e41d,150,200}"}</code></dd> 76 </dl> 77 <div class="apercu images"> 78 <div class="image on"><p>originale</p>[(#CHEMIN{images/ecureuil.jpg}|balise_img)]</div> 79 <div class="image"><p>dd5500,100,255</p>[(#CHEMIN{images/ecureuil.jpg}|balise_img|image_podpod{000000,0,70})]</div> 80 <br style="clear:left"> 81 </div> 56 <hr> 57 <!-- image_podpod --> 58 <div class="boite" id="image_podpod"> 59 <h2 class="boite__titre">image_podpod</h2> 60 <p> 61 Rempli par une couleur la plage de niveau de gris compris entre 2 Paramètres. 62 (<a href="http://www.paris-beyrouth.org/Creer-automatiquement-une">Paris-Beyrouth : Créer automatiquement une publicité podPod</a>) 63 </p> 64 <dl class="codeblock"> 65 <dt>Syntaxe</dt> 66 <dd><code>image_podpod{c5e41d,150,200}</code></dd> 67 <dt>Paramètre1</dt> 68 <dd>Code hexadécimal</dd> 69 <dt>Paramètre2</dt> 70 <dd>Nombre entre 0 et 255 : borne basse de la plage de couleur</dd> 71 <dt>Paramètre3</dt> 72 <dd>Nombre entre 0 et 255 : borne haute de la plage de couleur</dd> 73 <dt>Exemple</dt> 74 <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/ecureuil.jpg}|image_podpod{c5e41d,150,200}\)\]"}</code></dd> 75 </dl> 76 <div class="apercu apercu_images"> 77 <div class="apercu__item on"><p>originale</p>[(#GET{img}|balise_img)]</div> 78 <div class="apercu__item"><p>dd5500,100,255</p>[(#GET{img}|balise_img|image_podpod{000000,0,70})]</div> 79 </div> 82 80 </div> 83 81 ] 84 82 83 <hr> 85 84 86 85 <!-- filtre couleur_courbe --> 87 <a name="image_courbe"></a> 88 <div class="boite"> 89 <h2>image_courbe</h2> 90 <p> 91 Modifie les courbes d'une image, en manipulant 1 ou 2 points de la courbe 92 <a href="http://www.paris-beyrouth.org/tutoriaux-spip/article/modifier-les-courbes-d-une-image">(Paris-Beyrouth : Modifier les courbes d'une image)</a><br /> 93 </p> 94 [<p>(#CHEMIN{images/courbes.png}|balise_img)</p>] 95 <dl class="dl-horizontal"> 96 <dt>syntaxe</dt> 97 <dd><code>|image_courbe{rvb, 80=30, 170=220}</code></dd> 98 <dt>argument 1</dt> 99 <dd><code>rvb/r/v/b</code> <small>couche(s) de couleur(s) affectée(s)</small></dd> 100 <dt>argument 2</dt> 101 <dd><code>x=y</code> <small>nombres de 0 à 255</small></dd> 102 <dt>argument3</dt> 103 <dd><code>x=y</code> <small>(optionnel) nombres de 0 à 255</small></dd> 104 <dt>exemple</dt> 105 <dd><code class="exemple">#VAL{"#CHEMIN{images/ecureuil.jpg}|image_courbe{rvb, 80=30, 170=220}"}</code></dd> 106 </dl> 107 <div class="apercu images"> 108 <div class="image on"><p>originale</p>[(#CHEMIN{images/ecureuil.jpg}|image_reduire{200})]</div> 109 <BOUCLE_imgcourbe(DATA){source table, #LISTE{#ARRAY{param1,rvb, param2,80=30, param3,170=220}, #ARRAY{param1,rvb, param2,80=100, param3,170=150}, #ARRAY{param1,r, param2,130=40, param3,190=160}}}> 110 <div class="image"><p>#VALEUR{param1}, #VALEUR{param2}, #VALEUR{param3}</p>[(#CHEMIN{images/ecureuil.jpg}|image_reduire{200}|image_courbe{#VALEUR{param1},#VALEUR{param2},#VALEUR{param3}})]</div> 111 </BOUCLE_imgcourbe> 112 <br style="clear:left"> 113 </div> 114 </div> 115 116 117 <!-- filtre image_float --> 118 <a name="image_float"></a> 119 <div class="boite"> 120 <h2>image_float</h2> 121 <p> 122 Faire un texte qui épouse une image 123 <a href="http://www.paris-beyrouth.org/Un-habillage-irregulier-2">(Paris-Beyrouth : Un habillage irrégulier</a>)<br /> 124 </p> 125 <dl class="dl-horizontal"> 126 <dt>syntaxe</dt> 127 <dd><code>|image_float{left, 10, ffffff}</code></dd> 128 <dt>argument 1</dt> 129 <dd><code>left/center/right</code> <small>position de l'image</small></dd> 130 <dt>argument 2</dt> 131 <dd><code>nombre</code> <small>marge en px autour de l'image</small></dd> 132 <dt>argument3</dt> 133 <dd><code>#couleur</code> <small>(optionnel) couleur de fond de l'image</small></dd> 134 <dt>exemple</dt> 135 <dd><code class="exemple">#VAL{"#CHEMIN{images/ecureuil_decoupe.png}|image_float{left, 5}"}</code></dd> 136 </dl> 137 <div class="texte float"> 138 [(#CHEMIN{images/ecureuil_decoupe.png}|image_float{left, 5})] 139 <p> 140 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus utnunc eget ante ornare nonummy. Ut arcu. Duis tincidunt tincidunt quam. In elementum blandit odio. Nullam ultrices. Nulla sem augue, mollis id, vulputate eget, ullamcorper ultrices, purus. Aenean porttitor odio at mauris. Mauris quis enim vitae purus dictum ultricies. 141 </p> 142 <p> 143 Proin pharetra lectus auctor lacus. Quisque at sem ac lectus ornare vehicula. Nunc pulvinar, leo ut tristique auctor, felis diam gravida neque, consectetuer cursus sem 144 nisl ut enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec justo. Aliquam erat volutpat. Sed vel enim nec tellus suscipit imperdiet. Maecenas sagittis, dolor id tincidunt suscipit, orci tortor fermentum mi, id varius dolor nisi quis lectus. Quisque ante sem, molestie a, euismod sed, tempus sit amet, mauris. Integer vel ante eget urna sagittis consectetuer. Quisque ullamcorper convallis velit. 145 </p> 146 </div> 147 </div> 148 149 150 <!-- filtre image_contour_alpha --> 151 <a name="image_contour_alpha"></a> 152 <div class="boite"> 153 <h2>image_contour_alpha</h2> 154 <p> 155 Trace le contour d'une image transparente (<a href="http://www.paris-beyrouth.org/tutoriaux-spip/article/tracer-les-contours-de">Paris-Beyrout : Tracer les contours de transparence</a>) 156 </p> 157 <dl class="dl-horizontal"> 158 <dt>syntaxe</dt> 159 <dd><code>|image_contour_alpha{000000, 1}</code></dd> 160 <dt>argument 1</dt> 161 <dd><code>#couleur</code> <small>couleur du contour</small></dd> 162 <dt>argument 2</dt> 163 <dd><code>nombre</code> <small>épaisseur du contour</small></dd> 164 <dt>exemple</dt> 165 <dd><code class="exemple">#VAL{"#CHEMIN{images/ecureuil.jpg}|image_contour_alpha{000000, 1}"}</code></dd> 166 </dl> 167 <div class="apercu images"> 168 <div class="image on alpha bordure"><p>originale</p>[(#CHEMIN{images/ecureuil_decoupe.png}|balise_img)]</div> 169 <div class="image alpha bordure"><p>000000, 2</p>[(#CHEMIN{images/ecureuil_decoupe.png}|image_contour_alpha{000000, 2})]</div> 170 <div class="image alpha bordure"><p>9dba00, 2</p>[(#CHEMIN{images/ecureuil_decoupe.png}|image_contour_alpha{9dba00, 2})]</div> 171 <br style="clear:left"> 172 </div> 173 </div> 174 175 176 <!-- filtre image_sincity --> 177 <a name="image_sincity"></a> 178 <div class="boite"> 179 <h2>image_sincity</h2> 180 <p> 181 Effet automatique : saturation contrastée + accentuation du rouge 182 <a href="http://www.paris-beyrouth.org/Welcome-to-Spip-City">(Paris-Beyrouth : Welcome to Spip-City)</a> 183 </p> 184 <dl class="dl-horizontal"> 185 <dt>syntaxe</dt> 186 <dd><code>|image_sincity</code></dd> 187 <dt>exemple</dt> 188 <dd><code class="exemple">#VAL{"#CHEMIN{images/ecureuil.jpg}|image_sincity"}</code></dd> 189 </dl> 190 <div class="apercu images"> 191 <div class="image on"><p>originale</p>[(#CHEMIN{images/ecureuil.jpg}|image_courbe{rvb, 80=40})]</div> 192 <div class="image"><p>sincity</p>[(#CHEMIN{images/ecureuil.jpg}|image_courbe{rvb, 80=40}|image_sincity)]</div> 193 <br style="clear:left"> 194 </div> 195 </div> 196 197 198 <!-- filtre image_estampage_alpha --> 199 <a name="image_estampage_alpha"></a> 200 <div class="boite"> 201 <h2>image_estampage_alpha</h2> 202 <p> 203 Réalise des estampages 204 <a href="http://www.paris-beyrouth.org/Des-titres-en-relief">(Paris-Beyrouth : Des titres en relief)</a> 205 </p> 206 <dl class="dl-horizontal"> 207 <dt>syntaxe</dt> 208 <dd><code>|image_estampage_alpha{1,1}</code></dd> 209 <dt>argument 1</dt> 210 <dd><code>nombre</code> <small>épaisseur en px</small></dd> 211 <dt>argument 2</dt> 212 <dd><code>nombre</code> <small>netteté</small></dd> 213 <dt>exemple</dt> 214 <dd><code class="exemple">#VAL{"#CHEMIN{images/ecureuil_decoupe.png}|image_estampage_alpha{1,1}"}</code></dd> 215 </dl> 216 <div class="apercu images"> 217 <div class="image alpha on bordure"><p>originale</p>[(#CHEMIN{images/ecureuil_decoupe.png}|balise_img)]</div> 218 <BOUCLE_imgestampage(DATA){source table, #LISTE{#ARRAY{param1,1, param2,1}, #ARRAY{param1,1, param2,4}, #ARRAY{param1,4, param2,1}}}> 219 <div class="image"><p>#VALEUR{param1}, #VALEUR{param2}</p>[(#CHEMIN{images/ecureuil_decoupe.png}|image_estampage_alpha{#VALEUR{param1},#VALEUR{param2}})]</div> 220 </BOUCLE_imgestampage> 221 <br style="clear:left"> 222 </div> 223 </div> 224 225 226 <!-- filtre image_dispersion --> 227 <a name="image_dispersion"></a> 228 <div class="boite"> 229 <h2>image_dispersion</h2> 230 <p> 231 Réalise des dispersions, des floutages 232 <a href="http://www.paris-beyrouth.org/Un-filtre-de-dispersion-graphique">(Paris-Beyrouth : Un filtre de dispersion graphique</a>) 233 </p> 234 <dl class="dl-horizontal"> 235 <dt>syntaxe</dt> 236 <dd><code>|image_dispersion{url_image, 8, 8}</code></dd> 237 <dt>argument 1</dt> 238 <dd><code>url de l'image servant de filtre</code> <small></small></dd> 239 <dt>argument 2</dt> 240 <dd><code>nombre</code> <small>déplacement en x</small></dd> 241 <dt>argument 3</dt> 242 <dd><code>nombre</code> <small>déplacement en y</small></dd> 243 <dt>exemple</dt> 244 <dd><code class="exemple">#VAL{"#CHEMIN{images/ecureuil.jpg}|image_dispersion{#CHEMIN{images/disp-noir.png},8,8}"}</code></dd> 245 </dl> 246 <div class="apercu images"> 247 <div class="image alpha on"><p>image 1</p>[(#CHEMIN{images/ecureuil.jpg}|balise_img)]</div> 248 <div class="image alpha on"><p>masque</p>[(#CHEMIN{images/disp-noir.png}|balise_img)]</div> 249 <div class="image"><p>8, 8</p>[(#CHEMIN{images/ecureuil.jpg}|image_dispersion{#CHEMIN{images/disp-noir.png},8,8})]</div> 250 <br style="clear:left"> 251 </div> 252 <div class="apercu images"> 253 <div class="image alpha on"><p>image 1</p>[(#CHEMIN{images/ecureuil.jpg}|balise_img)]</div> 254 <div class="image alpha on"><p>masque</p>[(#CHEMIN{images/disp-twirl.png}|balise_img)]</div> 255 <div class="image"><p>8, 8</p>[(#CHEMIN{images/ecureuil.jpg}|image_dispersion{#CHEMIN{images/disp-twirl.png},8,8})]</div> 256 <br style="clear:left"> 257 </div> 258 </div> 259 260 261 <!-- filtre image_merge --> 262 <a name="image_merge"></a> 263 <div class="boite"> 264 <h2>image_merge</h2> 265 <p> 266 Superpose une image sur une autre<br> 267 [(#CHEMIN_IMAGE{warning-16.png}|balise_img{"",icone})]Le filtre <code>|image_masque</code> de Spip permet d'obtenir le même résultat, et propose plus d'options. 268 </p> 269 <dl class="dl-horizontal"> 270 <dt>syntaxe</dt> 271 <dd><code>|image_merge{url_image, right, top}</code></dd> 272 <dt>argument 1</dt> 273 <dd><code>left/center/right</code> <small>placement horizontal</small></dd> 274 <dt>argument 2</dt> 275 <dd><code>top/middle/bottom</code> <small>placement vertical</small></dd> 276 <dt>exemple</dt> 277 <dd><code class="exemple">#VAL{"#CHEMIN{images/quadrillage.png}|image_merge{#CHEMIN{images/cercle.png},center,middle}"}</code></dd> 278 </dl> 279 <div class="apercu images"> 280 <div class="image on bordure"><p>image 1</p>[(#CHEMIN{images/quadrillage.png}|balise_img)]</div> 281 <div class="image alpha on"><p>image 2</p>[(#CHEMIN{images/cercle.png}|balise_img)]</div> 282 <div class="image bordure"><p>center, middle</p>[(#CHEMIN{images/quadrillage.png}|image_merge{#CHEMIN{images/cercle.png},center,middle})]</div> 283 <div class="image bordure"><p>left, bottom</p>[(#CHEMIN{images/quadrillage.png}|image_merge{#CHEMIN{images/cercle.png},left,bottom})]</div> 284 <br style="clear:left"> 285 </div> 286 </div> 287 288 289 <!-- filtre image_negatif --> 290 <a name="image_negatif"></a> 291 <div class="boite"> 292 <h2>image_negatif</h2> 293 <p> 294 Passe une image en négatif<br> 295 [(#CHEMIN_IMAGE{information-16.png}|balise_img{"",icone})]Le filtre <code class="exemple">|image_courbe{rvb, 0=255, 255=0}</code> produira le même résultat 296 </p> 297 <dl class="dl-horizontal"> 298 <dt>syntaxe</dt> 299 <dd><code>|image_negatif</code></dd> 300 <dt>exemple</dt> 301 <dd><code class="exemple">#VAL{"#CHEMIN{images/ecureuil.jpg}|image_negatif"}</code></dd> 302 </dl> 303 <div class="apercu images"> 304 <div class="image on"><p>originale</p>[(#CHEMIN{images/ecureuil.jpg}|balise_img)]</div> 305 <div class="image"><p>image_negatif</p>[(#CHEMIN{images/ecureuil.jpg}|image_negatif)]</div> 306 <br style="clear:left"> 307 </div> 308 </div> 86 <div class="boite" id="image_courbe"> 87 <h2 class="boite__titre">image_courbe</h2> 88 <p> 89 Modifie les courbes d'une image, en manipulant 1 ou 2 points de la courbe 90 <a href="http://www.paris-beyrouth.org/tutoriaux-spip/article/modifier-les-courbes-d-une-image">(Paris-Beyrouth : Modifier les courbes d'une image)</a><br /> 91 </p> 92 [<p>(#CHEMIN{images/courbes.png}|balise_img)</p>] 93 <dl class="codeblock"> 94 <dt>Syntaxe</dt> 95 <dd><code>image_courbe{rvb, 80=30, 170=220}</code></dd> 96 <dt>Paramètre 1</dt> 97 <dd>rvb/r/v/b : couche(s) de couleur(s) affectée(s)</dd> 98 <dt>Paramètre 2</dt> 99 <dd>x=y : nombres de 0 à 255</dd> 100 <dt>Paramètre3</dt> 101 <dd>x=y : (optionnel) nombres de 0 à 255</dd> 102 <dt>Exemple</dt> 103 <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/ecureuil.jpg}|image_courbe{rvb, 80=30, 170=220}\)\]"}</code></dd> 104 </dl> 105 <div class="apercu apercu_images"> 106 <div class="apercu__item on"><p>originale</p>[(#GET{img})]</div> 107 <BOUCLE_imgcourbe(DATA){source table, #LISTE{#ARRAY{param1,rvb, param2,80=30, param3,170=220}, #ARRAY{param1,rvb, param2,80=100, param3,170=150}, #ARRAY{param1,r, param2,130=40, param3,190=160}}}> 108 <div class="apercu__item"><p>#VALEUR{param1}, #VALEUR{param2}, #VALEUR{param3}</p>[(#GET{img}|image_courbe{#VALEUR{param1},#VALEUR{param2},#VALEUR{param3}})]</div> 109 </BOUCLE_imgcourbe> 110 </div> 111 </div> 112 113 <hr> 114 115 <!-- image_float --> 116 <div class="boite" id="image_float"> 117 <h2 class="boite__titre">image_float</h2> 118 <p> 119 Faire un texte qui épouse une image 120 <a href="http://www.paris-beyrouth.org/Un-habillage-irregulier-2">(Paris-Beyrouth : Un habillage irrégulier</a>)<br /> 121 </p> 122 <dl class="codeblock"> 123 <dt>Syntaxe</dt> 124 <dd><code>image_float{left, 10, ffffff}</code></dd> 125 <dt>Paramètre 1</dt> 126 <dd>left/center/right : position de l'image</dd> 127 <dt>Paramètre 2</dt> 128 <dd>Nombre : marge en px autour de l'image</dd> 129 <dt>Paramètre3</dt> 130 <dd>Code hexadécimal : (optionnel) couleur de fond de l'image</dd> 131 <dt>Exemple</dt> 132 <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/ecureuil_decoupe.png}|image_float{left, 5}\)\]"}</code></dd> 133 </dl> 134 <div class="texte float"> 135 [(#CHEMIN{images/ecureuil_decoupe.png}|image_float{left, 5})] 136 <p> 137 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus utnunc eget ante ornare nonummy. Ut arcu. Duis tincidunt tincidunt quam. In elementum blandit odio. Nullam ultrices. Nulla sem augue, mollis id, vulputate eget, ullamcorper ultrices, purus. Aenean porttitor odio at mauris. Mauris quis enim vitae purus dictum ultricies. 138 </p> 139 <p> 140 Proin pharetra lectus auctor lacus. Quisque at sem ac lectus ornare vehicula. Nunc pulvinar, leo ut tristique auctor, felis diam gravida neque, consectetuer cursus sem 141 nisl ut enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec justo. Aliquam erat volutpat. Sed vel enim nec tellus suscipit imperdiet. Maecenas sagittis, dolor id tincidunt suscipit, orci tortor fermentum mi, id varius dolor nisi quis lectus. Quisque ante sem, molestie a, euismod sed, tempus sit amet, mauris. Integer vel ante eget urna sagittis consectetuer. Quisque ullamcorper convallis velit. 142 </p> 143 </div> 144 </div> 145 146 <hr> 147 148 <!-- image_contour_alpha --> 149 <div class="boite" id="image_contour_alpha"> 150 <h2 class="boite__titre">image_contour_alpha</h2> 151 <p> 152 Trace le contour d'une image transparente (<a href="http://www.paris-beyrouth.org/tutoriaux-spip/article/tracer-les-contours-de">Paris-Beyrout : Tracer les contours de transparence</a>) 153 </p> 154 <dl class="codeblock"> 155 <dt>Syntaxe</dt> 156 <dd><code>image_contour_alpha{000000, 1}</code></dd> 157 <dt>Paramètre 1</dt> 158 <dd>Code hexadécimal : couleur du contour</dd> 159 <dt>Paramètre 2</dt> 160 <dd>Nombre : épaisseur du contour</dd> 161 <dt>Exemple</dt> 162 <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/ecureuil.jpg}|image_contour_alpha{000000, 1}\)\]"}</code></dd> 163 </dl> 164 <div class="apercu apercu_images"> 165 <div class="apercu__item on alpha bordure"><p>originale</p>[(#CHEMIN{images/ecureuil_decoupe.png}|balise_img)]</div> 166 <div class="apercu__item alpha bordure"><p>000000, 2</p>[(#CHEMIN{images/ecureuil_decoupe.png}|image_contour_alpha{000000, 2})]</div> 167 <div class="apercu__item alpha bordure"><p>9dba00, 2</p>[(#CHEMIN{images/ecureuil_decoupe.png}|image_contour_alpha{9dba00, 2})]</div> 168 </div> 169 </div> 170 171 <hr> 172 173 <!-- image_sincity --> 174 <div class="boite" id="image_sincity"> 175 <h2 class="boite__titre">image_sincity</h2> 176 <p> 177 Effet automatique : saturation contrastée + accentuation du rouge 178 <a href="http://www.paris-beyrouth.org/Welcome-to-Spip-City">(Paris-Beyrouth : Welcome to Spip-City)</a> 179 </p> 180 <dl class="codeblock"> 181 <dt>Syntaxe</dt> 182 <dd><code>image_sincity</code></dd> 183 <dt>Exemple</dt> 184 <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/ecureuil.jpg}|image_sincity\)\]"}</code></dd> 185 </dl> 186 <div class="apercu apercu_images"> 187 <div class="apercu__item on"><p>originale</p>[(#GET{img}|image_courbe{rvb, 80=40})]</div> 188 <div class="apercu__item"><p>sincity</p>[(#GET{img}|image_courbe{rvb, 80=40}|image_sincity)]</div> 189 </div> 190 </div> 191 192 <hr> 193 194 <!-- image_estampage_alpha --> 195 <div class="boite" id="image_estampage_alpha"> 196 <h2 class="boite__titre">image_estampage_alpha</h2> 197 <p> 198 Réalise des estampages 199 <a href="http://www.paris-beyrouth.org/Des-titres-en-relief">(Paris-Beyrouth : Des titres en relief)</a> 200 </p> 201 <dl class="codeblock"> 202 <dt>Syntaxe</dt> 203 <dd><code>image_estampage_alpha{1,1}</code></dd> 204 <dt>Paramètre 1</dt> 205 <dd>Nombre : épaisseur en px</dd> 206 <dt>Paramètre 2</dt> 207 <dd>nombre : netteté</dd> 208 <dt>Exemple</dt> 209 <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/ecureuil_decoupe.png}|image_estampage_alpha{1,1}\)\]"}</code></dd> 210 </dl> 211 <div class="apercu apercu_images"> 212 <div class="apercu__item alpha on bordure"><p>originale</p>[(#CHEMIN{images/ecureuil_decoupe.png}|balise_img)]</div> 213 <BOUCLE_imgestampage(DATA){source table, #LISTE{#ARRAY{param1,1, param2,1}, #ARRAY{param1,1, param2,4}, #ARRAY{param1,4, param2,1}}}> 214 <div class="apercu__item"><p>#VALEUR{param1}, #VALEUR{param2}</p>[(#CHEMIN{images/ecureuil_decoupe.png}|image_estampage_alpha{#VALEUR{param1},#VALEUR{param2}})]</div> 215 </BOUCLE_imgestampage> 216 </div> 217 </div> 218 219 <hr> 220 221 <!-- image_dispersion --> 222 <div class="boite" id="image_dispersion"> 223 <h2 class="boite__titre">image_dispersion</h2> 224 <p> 225 Réalise des dispersions, des floutages 226 <a href="http://www.paris-beyrouth.org/Un-filtre-de-dispersion-graphique">(Paris-Beyrouth : Un filtre de dispersion graphique</a>) 227 </p> 228 <dl class="codeblock"> 229 <dt>Syntaxe</dt> 230 <dd><code>image_dispersion{url_image, 8, 8}</code></dd> 231 <dt>Paramètre 1</dt> 232 <dd>Url de l'image servant de filtre</dd> 233 <dt>Paramètre 2</dt> 234 <dd>Nombre : déplacement en x</dd> 235 <dt>Paramètre 3</dt> 236 <dd>Nombre : déplacement en y</dd> 237 <dt>Exemple</dt> 238 <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/ecureuil.jpg}|image_dispersion{#CHEMIN{images/disp-noir.png},8,8}\)\]"}</code></dd> 239 </dl> 240 <div class="apercu apercu_images"> 241 <div class="apercu__item alpha on"><p>Image</p>[(#GET{img})]</div> 242 <div class="apercu__item alpha on"><p>Masque</p>[(#CHEMIN{images/disp-noir.png}|balise_img)]</div> 243 <div class="apercu__item"><p>8, 8</p>[(#GET{img}|image_dispersion{#CHEMIN{images/disp-noir.png},8,8})]</div> 244 </div> 245 <div class="apercu apercu_images"> 246 <div class="apercu__item alpha on"><p>Image 1</p>[(#GET{img})]</div> 247 <div class="apercu__item alpha on"><p>Masque</p>[(#CHEMIN{images/disp-twirl.png}|balise_img)]</div> 248 <div class="apercu__item"><p>8, 8</p>[(#GET{img}|image_dispersion{#CHEMIN{images/disp-twirl.png},8,8})]</div> 249 </div> 250 </div> 251 252 <hr> 253 254 <!-- image_merge --> 255 <div class="boite" id="image_merge"> 256 <h2 class="boite__titre">image_merge</h2> 257 <p> 258 Superpose une image sur une autre<br> 259 </p> 260 <p> 261 <span class="warning">Le filtre <code>image_Masque</code> de Spip permet d'obtenir le même résultat, et propose plus d'options.</span> 262 </p> 263 <dl class="codeblock"> 264 <dt>Syntaxe</dt> 265 <dd><code>image_merge{url_image, right, top}</code></dd> 266 <dt>Paramètre 1</dt> 267 <dd>left/center/right : position horizontal</dd> 268 <dt>Paramètre 2</dt> 269 <dd>top/middle/bottom : position verticale</dd> 270 <dt>Exemple</dt> 271 <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/quadrillage.png}|image_merge{#CHEMIN{images/cercle.png},center,middle}\)\]"}</code></dd> 272 </dl> 273 <div class="apercu apercu_images"> 274 <div class="apercu__item on bordure"><p>image 1</p>[(#CHEMIN{images/quadrillage.png}|balise_img)]</div> 275 <div class="apercu__item alpha on"><p>image 2</p>[(#CHEMIN{images/cercle.png}|balise_img)]</div> 276 <div class="apercu__item bordure"><p>center, middle</p>[(#CHEMIN{images/quadrillage.png}|image_merge{#CHEMIN{images/cercle.png},center,middle})]</div> 277 <div class="apercu__item bordure"><p>left, bottom</p>[(#CHEMIN{images/quadrillage.png}|image_merge{#CHEMIN{images/cercle.png},left,bottom})]</div> 278 </div> 279 </div> 280 281 282 <!-- image_negatif --> 283 <div class="boite" id="image_negatif"> 284 <h2 class="boite__titre">image_negatif</h2> 285 <p> 286 Passe une image en négatif 287 </p> 288 <p> 289 <span class="warning">Le filtre <code class="Exemple">image_courbe{rvb, 0=255, 255=0}</code> produira le même résultat</span> 290 </p> 291 <dl class="codeblock"> 292 <dt>Syntaxe</dt> 293 <dd><code>image_negatif</code></dd> 294 <dt>Exemple</dt> 295 <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/ecureuil.jpg}|image_negatif\)\]"}</code></dd> 296 </dl> 297 <div class="apercu apercu_images"> 298 <div class="apercu__item on"><p>originale</p>[(#GET{img})]</div> 299 <div class="apercu__item"><p>image_negatif</p>[(#GET{img}|image_negatif)]</div> 300 </div> 301 </div> -
_plugins_/fonctions_images/trunk/demo/style_demo_fonctions_images.css
r66846 r112349 1 body { 2 padding: 2em 0; 3 } 1 /* Reset */ 2 *, *:before, *:after { 3 box-sizing: border-box; 4 } 5 html, body { 6 padding: 0; 7 margin: 0; 8 font-family: sans; 9 } 10 a { 11 text-decoration: none; 12 } 13 14 /* Layout */ 15 .page { 16 padding: 1em; 17 } 18 .menu { 19 position: fixed; 20 top: 1em; 21 left: 1em; 22 width: 20em; 23 } 24 .main { 25 width: calc(100% - 20em); 26 margin-left: 20em; 27 } 4 28 5 29 /* menu */ 6 .span3 .sidebar-nav.affix { 7 width: 19%; 8 } 30 .menu { 31 margin: 0; 32 padding: 0; 33 list-style: none; 34 } 35 .menu__item { 36 padding: 0.25em 0; 37 } 38 .menu__item_header { 39 padding: 1em 0; 40 font-weight: bold; 41 } 9 42 10 /* conteneur */ 11 .boite { 12 padding: 1em; 13 margin: 2em 0; 14 background-color: #eee; 15 border-radius: 4px; 16 } 43 /* Boite */ 44 .boite { 45 margin: 2em 0; 46 } 47 .boite__titre { 48 margin: 0 0 2em; 49 } 50 51 /* Paramètres et cie */ 52 .codeblock { 53 display: flex; 54 flex-flow: row wrap; 55 margin-bottom: 2em; 56 } 57 .codeblock dd, 58 .codeblock dt { 59 margin-bottom: 0.5em; 60 } 61 .codeblock dt { 62 flex: 0 0 10em; 63 font-weight: bold; 64 } 65 .codeblock dd { 66 flex: 0 0 calc(100% - 11em); 67 margin-left: 0; 68 } 69 code { 70 font-family: monospace; 71 font-size: 1.15em; 72 color: hsl(320, 100%, 40%); 73 } 17 74 18 75 /* apercus */ 19 .apercu + .apercu { 20 margin-top: 1em; 21 } 22 .apercu .nuance { 23 display: table; /* pour centrer verticalement le texte */ 24 float: left; 25 width: 50px; 26 height: 50px; 27 margin-right:.5em; 28 border: 1px solid #888; 29 border-color: rgba(0,0,0,.2); 30 text-align:center; 31 } 32 .apercu .nuance.on { 33 width: 100px; 34 height: 100px; 35 border-color: rgba(0,0,0,.4); 36 } 37 .apercu .image { 38 position: relative; 39 float: left; 40 margin-right:.5em; 41 line-height: 0; /* pour eviter l'espace en dessous de l'image */ 42 } 76 .apercu { 77 display: flex; 78 align-items: center; 79 margin-bottom: 1em; 80 } 81 .apercu__item { 82 margin-right: 0.5em; 83 font-weight: bold; 84 position: relative; 85 } 86 .apercu__item p { 87 position: absolute; 88 top: 0; 89 left: 50%; 90 transform: translateX(-50%); 91 padding: 0.2em 0.5em; 92 margin: 0; 93 background: black; 94 color: white; 95 font-family: monospace; 96 } 97 .apercu_couleurs .apercu__item { 98 display: flex; 99 justify-content: center; 100 align-items: center; 101 width: 5em; 102 height: 5em; 103 border: 1px solid hsla(0, 0%, 0%, 0.05); 104 } 105 .apercu_couleurs .apercu__item.on { 106 width: 10em; 107 height: 10em; 108 } 43 109 44 110 45 /* etiquette */ 46 .apercu .nuance > p { 47 display: table-cell; 48 vertical-align: middle; 49 } 50 .apercu .nuance.on > p { 51 text-transform: uppercase; 52 } 53 .apercu .image > p { 54 display: block; 55 position: absolute; 56 top: 0; left: 0; 57 padding: .3em .6em; 58 background-color: #222; 59 background-color: rgba(0,0,0,.65); 60 color: #eee; 61 font-size: 1.1em; 62 line-height: 1; 63 } 64 .apercu .image.on > p { 65 background-color: #0088CC; 66 } 67 68 69 /* divers */ 70 code { 71 font-size: 13px; 72 background-color: rgba(255,255,255,.7); 73 } 74 code.exemple {color: #222;} 75 .texte.float { 76 max-width: 50em; 77 } 78 .texte.float img { 79 max-width: none; 80 } 81 .alpha { 82 background-image: url(../images/transparent.jpg); 83 } 84 .bordure { 85 border: 1px solid #aaa; 86 border-color: rgba(0,0,0,.2); 87 } 88 .icone { 89 margin-right: .5em; 90 } 111 /* Divers */ 112 .warning { 113 background-color: hsl(60, 100%, 75%); 114 padding: 0.2em; 115 } 116 .texte.float { 117 max-width: 50em; 118 } 119 .texte.float img { 120 max-width: none; 121 } 122 .alpha { 123 background-image: url(../images/transparent.jpg); 124 } 125 .bordure { 126 border: 1px solid #aaa; 127 border-color: rgba(0, 0, 0, 0.2); 128 } 129 hr { 130 margin: 2em 0; 131 border-color: 1px solid hsl(0, 0%, 33%); 132 } -
_plugins_/fonctions_images/trunk/paquet.xml
r112348 r112349 2 2 prefix="fonctions_images" 3 3 categorie="multimedia" 4 version="0.6.1 4"4 version="0.6.15" 5 5 etat="stable" 6 6 compatibilite="[3.0.0;3.2.*]"
Note: See TracChangeset
for help on using the changeset viewer.