{"id":1802,"date":"2006-07-17T22:25:11","date_gmt":"2006-07-17T22:25:11","guid":{"rendered":"http:\/\/svay.com\/blog\/?p=1802"},"modified":"2006-07-17T22:25:11","modified_gmt":"2006-07-17T22:25:11","slug":"402-mise-en-uvre-des-favatars","status":"publish","type":"post","link":"https:\/\/svay.com\/blog\/402-mise-en-uvre-des-favatars\/","title":{"rendered":"Mise en \u0153uvre des favatars"},"content":{"rendered":"

Je me suis pos\u00e9 la question d’int\u00e9grer des gravatars<\/a> dans les commentaires ce matin. \u00c7a les rend plus sympathiques et permet d’identifier l’auteur rapidement. Mais le fait que ce soit un syst\u00e8me centralis\u00e9 ne me plait pas du tout. J’ai alors cherch\u00e9 s’il existait quelque chose de d\u00e9centralis\u00e9. Sur une indication tr\u00e8s pertinente de neuro<\/a>, je suis tomb\u00e9 sur les favatars<\/a>.<\/p>\n

<\/p>\n

Le principe est plut\u00f4t simple: utiliser les favicons comme des avatars d\u00e9centralis\u00e9s. La taille est suffisamment grande pour que chacun ait une image personnalis\u00e9e et pas trop pour ne pas repr\u00e9senter des images choquantes. Le syst\u00e8me est plaisant mais comment l’int\u00e9grer au blog ?<\/p>\n

J’ai commenc\u00e9 \u00e0 imaginer un syst\u00e8me qui r\u00e9cup\u00e8re les favicons en PHP (fopen distant par exemple), les met en cache et les affiche dans le template mais ce serait sortir l’artillerie lourde pour pas grand chose. Finalement, je me suis tourn\u00e9 vers une solution encore plus simple et l\u00e9g\u00e8re: faire faire le travail par le navigateur avec un peu de javascript.<\/p>\n

Pour le moment, cela donne quelques lignes de javascript \u00e9crites rapidement:<\/p>\n

function dcFavatar(){     var comments = document.getElementsByClassName('comment-info');     for (var i=0; i<comments.length; i++){         link = comments[i].getElementsByTagName('A');         if (link.length > 1){             var img = document.createElement(\"IMG\");             img.className = 'favatar';             img.src = link[1].href+'favicon.ico';             img.style.display = 'none';             img.onload = function(){                 this.style.display = 'inline';             }             link[1].parentNode.insertBefore(img, link[1]);         }     } }<\/pre>\n
Il faut noter que ce bout de code utilise la m\u00e9thode getElementsByClassName de prototype.lite.js. \u00c0 remplacer par votre getElementsByClassName pr\u00e9f\u00e9r\u00e9e.<\/p>\n
Pour ceux qui se posent la question de savoir ce qu’il se passe lorsque Javascript est d\u00e9sactiv\u00e9, je r\u00e9pondrais qu’ils n’auraient rien remarqu\u00e9 si je n’avais pas bloggu\u00e9 sur le sujet \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"
Je me suis pos\u00e9 la question d’int\u00e9grer des gravatars<\/a> dans les commentaires ce matin. \u00c7a les rend plus sympathiques et permet d’identifier l’auteur rapidement. Mais le fait que ce soit un syst\u00e8me centralis\u00e9 ne me plait pas du tout. J’ai alors cherch\u00e9 s’il existait quelque chose de d\u00e9centralis\u00e9. Sur une indication tr\u00e8s pertinente de neuro<\/a>, je suis tomb\u00e9 sur les favatars<\/a>.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[23],"tags":[],"_links":{"self":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts\/1802"}],"collection":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/comments?post=1802"}],"version-history":[{"count":0,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts\/1802\/revisions"}],"wp:attachment":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/media?parent=1802"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/categories?post=1802"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/tags?post=1802"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}