Les ateliers du klafoutis - Plugins

MediaSizeClass, des CSS pour les zimages

Kozlika — Fri, 24 Oct 2008 14:52:00 +0200

Ce plugin ajoute dans toutes les balises <img /> une class en fonction de la taille (thumbnail, square, small, medium) de l’image insérée.

L’idéal aurait été de pouvoir traiter le xhtml en sortie de traitement pour y ajouter par des chercher/remplacer magiques mes fameuses class, un peu comme le fait le plugin Typo. C’était très au-dessus de mes compétences ! En revanche, je savais pouvoir le faire en passant par la moulinette magique de jQuery et que c’est ainsi d’ailleurs que s’y prend le plugin externalLinks.

En me basant sur ce plugin et avec de l’aide sur le forum, j’ai réussi à obtenir le résultat souhaité et je vous le fais partager.

Il fait quoi ?

Il ajoute dans toutes les balises <img /> une class en fonction de la taille (thumbnail, 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 appliquer un style différent.

Exemple 1

Un cadre d’épaisseur différente.

.thumbnail-img, .square-img, .small-img, .medium-img {
  border-color: #ddd;
  border-style: solid
}
.thumbnail-img {
  border-width: 1px;
}
.square-img {
  border-width: 3px;
}
.smalll-img {
  border-width: 5px;
}
.medium-img {
  border-width: 8px;
}

Exemple 2

Une marquise pour les photos de taille medium (et uniquement elles).

.medium-img {
  padding: 12px;
  background: #e5e5e5;
  border: 1px solid #bbb;
  display: block;
  margin: 1em auto;
}

Ça ne fonctionnera pas si…

… javascript est désactivé

C’est pour ça qu’un traitement du contenu du post aurait été préférable. Comme ce plugin utilise la bibliothèque jQuery, les class ne seront pas affectées sur les navigateurs de vos visiteurs qui ont désactivé javascript.

… si vous donnez des instructions contradictoires

Les règles dites « inline » ont priorité sur les règles de style.css. Donc, si par exemple vous indiquez dans la CSS que les images de taille medium doivent être centrées mais qu’au moment de l’insertion d’une image dans votre billet vous choisissez “à gauche”, c’est cette dernière règle qui sera appliquée. (Par exemple, dans le cas de l’exemple numéro 2, la dernière ligne de la règle sera inopérante.)

On récupère ton plugin comment ?

En le téléchargeant depuis la pièce jointe. Cette pièce jointe est un .zip, décompressez-le puis envoyez-la dans /plugins de votre installation ou renseignez le champ idoine du gestionnaire d’extensions de votre installation.

Ce plugin sera déposé sur DotAddict dès que ça sera à nouveau possible.

MoreTpl, mise à jour 0.6

Kozlika — Tue, 13 Mar 2007 19:16:00 +0000

Keskondit ? Merci Mirovinben !

Grâce à Mirovinben, une nouvelle fonction a été ajoutée au plugin moreTpl : {{tpl:TagEntriesCount}} vous permettra d’afficher le nombre de billets relatifs à un tag. Cette fonction peut être utilisée dans la page de tous les tags (tags.html) ou de la page regroupant tous les billets d’un même tag (tag.html).

Fiche et téléchargement sur Dotaddict.

MoreTpl, mon premier plugin pour Dotclear 2

Kozlika — Mon, 08 Jan 2007 15:07:00 +0100

Il faut bien un début à tout et ceci est mon premier plugin pour Dotclear 2. Mon premier plugin tout court d’ailleurs ! Rien de bien renversant, juste l’ajout de fonctions template dont j’ai eu besoin au cours de mes expérimentations de thèmes et que je mets à dispo ici.

Il fait quoi ton ploug ?

Il permet d’utiliser cinq nouvelles fonctions d’affichage dans les fichiers *.html des thèmes :

On avait déjà {{tpl:EntryExcerpt}}, qui récupère ce que contient le champ extrait du billet et {{tpl:EntryContent}} qui en récupère le champ du contenu. {{tpl:EntryExcerptAndContent}} récupère le tout en une seule « passe ».

Exemple d’utilisation : sur la toute première page d’accueil, afficher le premier billet en entier, que le champ Extrait soit vide ou non et n’afficher que les 400 premiers caractères de la totalité du billet pour les billets suivants et tous les billets de toutes les pages suivantes.

Permet dans le contexte d’un billet de récupérer le cat_url de la catégorie à laquelle il appartient (équivalent de ce qui est possible dans le contexte d’une boucle sur les catégories avec la fonction {{tpl:CategoryShortURL}}).

Exemple d’utilisation : affecter une class spécifique supplémentaire à la <div class=”post”>

Permet d’afficher le nombre de billets affectés à une catégorie (idem que dans le widget Catégories).

Exemple d’utilisation : dans la page category.html, afficher dans les infos situées en haut du main, avant ou après la description d’icelle le nombre de billets qu’elle contient. Ce nombre est renvoyé en chiffres.

{{tpl:EntryCommentCountDigit}} et {{tpl:EntryTrackbackCountDigit}}

Permet d’afficher en chiffre le nombre de commentaires. Attention, les mots « commentaire » ou « rétroliens » sont également supprimés, pensez à les ajouter dans le template si vous les souhaitez.

Exemple d’utilisation : remplacer « un commentaire » par « 1 grain de sel » ou « 1 » [avec une jolie icône de commentaire].

Je le veux !

Fiche détaillée et téléchargement sur Dotaddict.

Les ateliers du klafoutis - Plugins

MediaSizeClass, des CSS pour les zimages

Il fait quoi ?

Et ça sert à quoi ?

Exemple 1

Exemple 2

Ça ne fonctionnera pas si…

… javascript est désactivé

… si vous donnez des instructions contradictoires

On récupère ton plugin comment ?

MoreTpl, mise à jour 0.6

MoreTpl, mon premier plugin pour Dotclear 2

Il fait quoi ton ploug ?

{{tpl:EntryExcerptAndContent}}

{{tpl:EntryCategoryShortURL}}

{{tpl:CategoryEntriesCount}}

{{tpl:EntryCommentCountDigit}} et {{tpl:EntryTrackbackCountDigit}}

Je le veux !

Les ateliers du klafoutis - Plugins

MediaSizeClass, des CSS pour les zimages

Il fait quoi ?

Et ça sert à quoi ?

Exem­ple 1

Exem­ple 2

Ça ne fonc­tion­nera pas si…

… javas­cript est désac­tivé

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

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

MoreTpl, mise à jour 0.6

MoreTpl, mon premier plugin pour Dotclear 2

Il fait quoi ton ploug ?

{{tpl:EntryEx­cerp­tAnd­Con­tent}}

{{tpl:Entry­Ca­te­go­ry­Shor­tURL}}

{{tpl:Cate­go­ryEn­tries­Count}}

{{tpl:Entry­Com­ment­Count­Di­git}} et {{tpl:Entry­Track­ba­ck­Count­Di­git}}

Je le veux !

Exemple 1

Exemple 2

Ça ne fonctionnera pas si…

… javascript est désactivé

… si vous donnez des instructions contradictoires

On récupère ton plugin comment ?

{{tpl:EntryExcerptAndContent}}

{{tpl:EntryCategoryShortURL}}

{{tpl:CategoryEntriesCount}}

{{tpl:EntryCommentCountDigit}} et {{tpl:EntryTrackbackCountDigit}}