Il fait quoi ?

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 :

  • thumbnail-img
  • square-img
  • small-img
  • medium-img

Et ça sert à quoi ?

Eh bien à leur appli­quer un style dif­fé­rent.

Exem­ple 1

Un cadre d’épais­seur dif­fé­rente.

.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;
}

Exem­ple 2

Une mar­quise pour les pho­tos de taille medium (et uni­que­ment elles).

.medium-img {
  pad­ding: 12px;
  back­ground: #e5e5e5;
  bor­der: 1px solid #bbb;
  dis­play: block;
  mar­gin: 1em auto;
}

Ça ne fonc­tion­nera pas si…

… javas­cript est désac­tivé

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.

… si vous don­nez des ins­truc­tions con­tra­dic­toi­res

Les règles dites « inline » ont prio­rité sur les règles de style.css. 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.)

On récu­père ton plu­gin com­ment ?

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 /plu­gins 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.

Ce plu­gin sera déposé sur DotAd­dict dès que ça sera à nou­veau pos­si­ble.