Les ateliers du klafoutis - PluginsLà où Kozlika tricote et détricote le xhtml, les css, un peu de PHP et surtout Dotclear.2022-08-05T18:53:35+02:00Kozlikaurn:md5:21990cb11f178008a2c4b268539d428aDotclearMediaSizeClass, des CSS pour les zimagesurn:md5:a9b1bd5d618c3e956b22453266da25b72008-10-24T14:52:00+02:002009-01-03T15:56:54+01:00KozlikaPlugins<p>Ce plu­gin ajoute dans tou­tes les bali­ses <img /> une class en fonc­tion de la taille (thumb­nail, square, small, medium) de l’image insé­rée.</p>
<p>L’idéal aurait été de pou­voir trai­ter le xhtml en sor­tie de trai­te­ment pour y ajou­ter par des cher­cher/rem­pla­cer magi­ques mes fameu­ses class, un peu comme le fait le plu­gin <a href="http://plugins.dotaddict.org/dc2/details/Typo">Typo</a>. C’était très au-des­sus de mes com­pé­ten­ces ! En revan­che, je savais pou­voir le faire en pas­sant par la mou­li­nette magi­que de jQuery et que c’est ainsi d’ailleurs que s’y prend le plu­gin <a href="http://plugins.dotaddict.org/dc2/details/External-Links">exter­nal­Links</a>.</p>
<p>En me basant sur ce plu­gin et avec de l’aide sur le forum, j’ai réussi à obte­nir le résul­tat sou­haité et je vous le fais par­ta­ger.</p> <h3>Il fait quoi ?</h3>
<p>Il ajoute dans tou­tes les bali­ses <img /> une class en fonc­tion de la taille (thumb­nail, square, small, medium) de l’image insé­rée. Les class sont :</p>
<ul>
<li><code>thumbnail-img</code></li>
<li><code>square-img</code></li>
<li><code>small-img</code></li>
<li><code>medium-img</code></li>
</ul>
<h3>Et ça sert à quoi ?</h3>
<p>Eh bien à leur appli­quer un style dif­fé­rent.</p>
<h4>Exem­ple 1</h4>
<p>Un cadre d’épais­seur dif­fé­rente.</p>
<pre class="brush: css">.thumb­nail-img, .square-img, .small-img, .medium-img {
bor­der-color: #ddd;
bor­der-style: solid
}
.thumb­nail-img {
bor­der-width: 1px;
}
.square-img {
bor­der-width: 3px;
}
.smalll-img {
bor­der-width: 5px;
}
.medium-img {
bor­der-width: 8px;
}</pre>
<h4>Exem­ple 2</h4>
<p>Une mar­quise pour les pho­tos de taille medium (et uni­que­ment elles).</p>
<pre class="brush: css">.medium-img {
pad­ding: 12px;
back­ground: #e5e5e5;
bor­der: 1px solid #bbb;
dis­play: block;
mar­gin: 1em auto;
}</pre>
<h3>Ça ne fonc­tion­nera pas si…</h3>
<h4>… javas­cript est désac­tivé</h4>
<p>C’est pour ça qu’un trai­te­ment du con­tenu du post aurait été pré­fé­ra­ble. Comme ce plu­gin uti­lise la biblio­thè­que jQuery, les class ne seront pas affec­tées sur les navi­ga­teurs de vos visi­teurs qui ont désac­tivé javas­cript.</p>
<h4>… si vous don­nez des ins­truc­tions con­tra­dic­toi­res</h4>
<p>Les règles dites « inline » ont prio­rité sur les règles de <code>style.css</code>. Donc, si par exem­ple vous indi­quez dans la CSS que les ima­ges de taille medium doi­vent être cen­trées mais qu’au moment de l’inser­tion d’une image dans votre billet vous choi­sis­sez “à gau­che”, c’est cette der­nière règle qui sera appli­quée. (Par exem­ple, dans le cas de l’exem­ple numéro 2, la der­nière ligne de la règle sera ino­pé­rante.)</p>
<h3>On récu­père ton plu­gin com­ment ?</h3>
<p>En le télé­char­geant depuis la pièce jointe. Cette pièce jointe est un .zip, décom­pres­sez-le puis envoyez-la dans <code>/plu­gins</code> de votre ins­tal­la­tion ou ren­sei­gnez le champ idoine du ges­tion­naire d’exten­sions de votre ins­tal­la­tion.</p>
<p>Ce plu­gin sera déposé sur DotAd­dict dès que ça sera à nou­veau pos­si­ble.</p>MoreTpl, mise à jour 0.6urn:md5:9b69be20ece1a5fae015d74cc49d0aeb2007-03-13T19:16:00+00:002009-01-03T14:56:54+00:00KozlikaPluginsDotclear 2plugins<p><img src="http://ateliers.klafoutis.org/public/plugins-dc2/moreTpl/icon.png" alt="icon.png" title="icon.png, janv. 2009" /></p>
<p>Kes­kon­dit ? <a href="http://www.dotclear.net/forum/viewtopic.php?pid=152842#p152842">Merci Miro­vin­ben</a> !</p> <p>Grâce à <a href="http://www.mirovinben.com/blog">Miro­vin­ben</a>, une nou­velle fonc­tion a été ajou­tée au plu­gin <a href="http://ateliers.klafoutis.org/post/2007/01/08/MoreTpl-Mon-premier-plugin-pour-Dotclear-2">moreTpl</a> : {{tpl:TagEn­tries­Count}} vous per­met­tra d’affi­cher le nom­bre de billets rela­tifs à un tag. Cette fonc­tion peut être uti­li­sée dans la page de tous les tags (tags.html) ou de la page regrou­pant tous les billets d’un même tag (tag.html).</p>
<p><a href="http://plugins.dotaddict.org/dc2/details/moreTpl">Fiche et télé­char­ge­ment</a> sur Dotad­dict.</p>MoreTpl, mon premier plugin pour Dotclear 2urn:md5:cafbba69739e5dd6120b3a864b7156362007-01-08T15:07:00+01:002009-01-03T15:58:07+01:00KozlikaPluginsDotclear 2plugins<p><img src="http://ateliers.klafoutis.org/public/plugins-dc2/moreTpl/icon.png" alt="icon.png" title="icon.png, janv. 2009" /></p>
<p>Il faut bien un début à tout et ceci est mon pre­mier plu­gin pour Dot­clear 2. Mon pre­mier plu­gin tout court d’ailleurs ! Rien de bien ren­ver­sant, juste l’ajout de fonc­tions tem­plate dont j’ai eu besoin au cours de mes expé­ri­men­ta­tions de thè­mes et que je mets à dispo ici.</p> <h3>Il fait quoi ton ploug ?</h3>
<p>Il per­met d’uti­li­ser cinq nou­vel­les fonc­tions <strong>d’affi­chage</strong> dans les fichiers *.html des thè­mes :</p>
<h4>{{tpl:EntryEx­cerp­tAnd­Con­tent}}</h4>
<p>On avait déjà <code>{{tpl:EntryExcerpt}}</code>, qui récu­père ce que con­tient le champ extrait du billet et <code>{{tpl:Entry­Con­tent}}</code> qui en récu­père le champ du con­tenu. <code>{{tpl:EntryEx­cerp­tAnd­Con­tent}}</code> récu­père le tout en une seule « passe ».</p>
<p>Exem­ple d’uti­li­sa­tion : sur la toute pre­mière page d’accueil, affi­cher le pre­mier billet en entier, que le champ Extrait soit vide ou non et n’affi­cher que les 400 pre­miers carac­tè­res de la tota­lité du billet pour les billets sui­vants et tous les billets de tou­tes les pages sui­van­tes.</p>
<h4>{{tpl:Entry­Ca­te­go­ry­Shor­tURL}}</h4>
<p>Per­met dans le con­texte d’un billet de récu­pé­rer le cat_url de la caté­go­rie à laquelle il appar­tient (équi­va­lent de ce qui est pos­si­ble dans le con­texte d’une bou­cle sur les caté­go­ries avec la fonc­tion <code>{{tpl:Cate­go­ry­Shor­tURL}}</code>).</p>
<p>Exem­ple d’uti­li­sa­tion : affec­ter une class spé­ci­fi­que sup­plé­men­taire à la <div class=”post”></p>
<h4>{{tpl:Cate­go­ryEn­tries­Count}}</h4>
<p>Per­met d’affi­cher le nom­bre de billets affec­tés à une caté­go­rie (idem que dans le wid­get Caté­go­ries).</p>
<p>Exem­ple d’uti­li­sa­tion : dans la page cate­gory.html, affi­cher dans les infos situées en haut du main, avant ou après la des­crip­tion d’icelle le nom­bre de billets qu’elle con­tient. Ce nom­bre est ren­voyé en chif­fres.</p>
<h4>{{tpl:Entry­Com­ment­Count­Di­git}} et {{tpl:Entry­Track­ba­ck­Count­Di­git}}</h4>
<p>Per­met d’affi­cher en chif­fre le nom­bre de com­men­tai­res. Atten­tion, les mots « com­men­taire » ou « rétro­liens » sont éga­le­ment sup­pri­més, pen­sez à les ajou­ter dans le tem­plate si vous les sou­hai­tez.</p>
<p>Exem­ple d’uti­li­sa­tion : rem­pla­cer « un com­men­taire » par « 1 grain de sel » ou « 1 » [avec une jolie icône de com­men­taire].</p>
<h3>Je le veux !</h3>
<p><a href="http://plugins.dotaddict.org/dc2/details/moreTpl">Fiche détaillée et télé­char­ge­ment</a> sur Dotad­dict.</p>