Tumblr c’est à mon avis l’alchimie idéale entre Twitter & WordPress.
Tumblr c’est vachement cool, on peut trouver pleins d’images rigolotes et des citations sympas.
Tumblr a le vent en poupe : nos flux en témoignent, ivres.

Vous l’aurez compris, ce billet parlera de la plateforme Tumblr. Je vous propose un bref retour d’expérience sur la construction d’un thème.

Aparté sur le wireframe™

Avant de vous lancer le nez dans le code, travaillez bien votre wireframe™ et réfléchissez au propos de votre Tumblr. Posez-vous surtout la question de savoir si Tumblr est bien la plateforme appropriée à ce que vous voulez raconter. Je considère que Tumblr est idéal pour du partage d’images et de courts contenu texte. Il est fait pour ça, et si vous chercher un CMS puissant avec des vues, partez.

De fait, l’Infinite scroll de Paul Irish couplé de Masonry+Isotope seront de parfaits alliés pour vous guider dans vos zonings. Maintenant, vous faites ce que vous voulez, ça ne me regarde pas.

Un templating simple mais avec des inconvénients

La première chose qui m’a intrigué était de comprendre comment gérer ma page Index par rapport aux pages internes (Permalink).

Pour avoir un peu l’habitude de Drupal ou WordPress, je m’attendais à trouver plusieurs templates. Tumblr propose à l’inverse de construire son thème sur un seul fichier HTML.

Le principe est simple : grâce à 2 balises ({block:IndexPage} & {block:PermalinkPage}), on discerne si le contenu qu’elles contiennent doit être affiché sur la page Index ou sur la page Permalink.

L’intérêt est de combiner un maximum les éléments afin de factoriser son code. De fait, je trouve plus pertinent d’intégrer les éléments Permalink dans la boucle index, plutôt que de scinder en 2 le doc et de répéter plusieurs fois les mêmes éléments.

Par exemple :

{block:IndexPage}
<h2>Mon titre</h2>
{block:PermalinkPage}
            <h3>Mon sous-titre</h3>
      {/block:PermalinkPage}
{/block:IndexPage}

Une fois ce principe assimilé, reste à trouver la solution la plus rapide et la moins contraignante pour travailler sur son thème.

Travailler en local : plus ou moins

Au cours de mes recherches, je suis vite tombé là-dessus : http://tumblrthemr.icelab.com.au/.
Mais pour ne rien vous cacher, je n’ai pas tout saisi…

Du coup, voici comment j’ai procédé :

Avant toute chose, sachez que vous ne pouvez pas protéger par mot de passe votre 1er thème Tumblr. Évitez donc d’y construire votre thème : tout le monde verra vos background:red. Créez donc un 2e thème, protégé par mot de passe.

J’ai rapatrié le thème par défaut sur mon disque et nettoyé un peu tout ça, histoire d’avoir une structure propre et pour que je puisse m’y retrouver.

Tumblr ne tolère pas les fichiers hébergés ailleurs que sur ses serveurs (nous y reviendrons). J’ai donc hébergé images, css, et JS sur un dropbox public (ou autre serveur, faites ce que vous voulez, c’est aussi ça l’internet libre).

La suite s’avère archaïque : on copie et on colle dans l’interface Tumblr son thème fraichement modifié.

Quelques tips

Petit aparté sur les fonts.

FontSquirrel c’est génial, mais comme je vous le disais plus haut, Tumblr ne tolère pas les sources externes. La solution la plus stable que j’ai trouvée est d’encoder mes fonts en base64 : il y a cette option dans la génération de la font, catégorie « expert ». Le problème avec le base64, c’est que c’est assez lourd et que le moindre ctrl+F pourra faire ramer votre cher Sublime Text 2™. De fait, je vous conseille d’enregistrer vos fonts dans un fichier css à part, hébergé là aussi sur dropbox, et de l’importer dans le template comme vos autres css.
Au fait : le base64 ça marche pas sur IE8 {trollface}.

Pour rester dans les tips, sachez que quand vous passerez votre thème en production, il faudra envoyer tous vos fichiers chez Tumblr (je me répète, mais c’est une grosse contrainte). Dès lors, pour vous éviter moult téléchargement d’images, utilisez plutôt un bon gros sprite. Il contiendra toutes vos images, allant du picto au visuel d’illustration statique. C’est chouette : un seul téléchargement, et on y gagne beaucoup de temps !

Dernière chose, n’hésitez pas à plugger un boilerplate css : ça aide toujours.

Les variables : ou comment laissez utiliser Comic-Sans-Ms

Suivant vos envies et votre générosité, vous pourrez laisser la main sur certains éléments de votre thème. Tumblr permet ceci grâce aux variables. La plus populaire étant probablement {MetaDescription}.

La mise en place d’une variable n’est pas compliquée : vous la déclarez dans votre <head> comme ça : <meta name= »mavariable » content= »{MetaDescription} » /> et vous l’appelez dans le template comme ceci : <p>{Description}</p>.

Au-delà du texte, on peut aussi utiliser les variables pour des images (<meta name= »image:Header » content= » »/>) ou du css (<meta name= »color:Text » content= »#000″/>). Forcément, si vous utilisez des variables pour manipuler des attributs et que votre css est sur un fichier distant ça ne marchera pas. Rapatriez donc la partie concernée directement dans le template. Certains thèmes rapatrient même entièrement les styles.

2 plugins qui vont vous sauver la vie :

Je le disais au début de mon article, sortir du cadre proposé par Tumblr n’est pas toujours évident. Heureusement, vous trouverez ci-dessous 2 plugins qui apportent des fonctionnalités que je juge manquantes à Tumblr :

• MYLIKE : http://like-button.tumblr.com
  Vous permettra d’utiliser les fonctions coups de cœur sur la page index notamment.

• Tumblr Tag Clouds : http://rive.rs/projects/tumblr-tag-clouds
  Vous permettra de générer la liste de tous les tags utilisés dans la contribution de votre Tumblr. Attention : si votre thème est protégé par mot de passe, le plugin ne fonctionnera pas.

Vous voulez contribuer un thême ?

Ça y est, votre thème est terminé ? Rendez-vous ici http://www.tumblr.com/themes et jetez-vous dans la gueule du lion.

Petit rappel sur les règles de Tumblr :

• Aucun élément externe (voir paragraphe un peu + haut)
• Aucun widget tierce-partie (on utilise le champ texte personnalisé pour permettre un ajout de plugin)
• Doit prendre en charge tous les types de billets (et oui, les 7, comme les 7 boules de cristal : en avoir 6 ça sert à rien)
• Doit supporter les balises standard ({RSS}, {CustomCSS}, etc. )
• Doit faire moins de 64 Ko (allez on compresse, et doucement avec les images !)

J’ai testé il n’y a pas si longtemps de proposer un thème sur le Garden. Il m’a fallu beaucoup de patience pour enfin recevoir une réponse : « Moderator feedback: Not a complete theme. »

Je n’en sais pas vraiment plus, mais après quelques recherche et un peu de déduction, j’imagine qu’il faut proposer un thème utilisant l’ensemble des fonctionnalités de Tumblr. Dans mon cas, je m’étais passé des tags. Si vous avez un retour d’expérience sur cette étape, je suis preneur dans les commentaires juste en dessous !

Enfin, dernière chose et pas des moindres : http://www.tumblr.com/docs/fr/custom_themes+

Cette page est une mine d’informations, je vous conseille de prendre le temps de la lire entièrement : ce n’est pas long et ça permet d’avoir un regard global sur ce qui est faisable et ce qui ne l’est pas.

Au fait, Tumblr c’est cool : faites-en, plein.

via Blogoergosum http://www.blogoergosum.com/34237-tumblr-cest-cool-reflexion-sur-lintegration-dapres-experience-vecue