Tumblr

Août et juillet furent un été de débuts et de fins, depuis long le premier été européen, entre autre occupé par une nouvelle mouture, revue de fond en comble, du template (qui n'avait pas guère changé depuis 2009), et l'inscription sur TUMBLR — dans le but d'essayer la plateforme, d'en faire un pur photoblog et de compléter avantageusement le Bento.

Tumblr, donc.

Deux pages principales, du côté utilisateur : le dashboard et la page du blogmaster (qui porte le nom du blog).

La première est une liste de lecture des blogs Tumblr suivis, ainsi que le suivi de votre interactivité vis-à-vis d'iceux (liked, followed, etc.) :

La seconde c'est l'inverse et le suivi de l'interaction des gens avec votre blog et vos billets (likes, reblogs, etc.). Notez qu'à partir de l'une comme de l'autre on peut rédiger un nouveau billet (classés par nature : texte, photo, citation, etc.).

C'est à partir de cette page de tumblrmaster que vous pourrez modifier l'apparence du blog (customize), à commencer par choisir un "thème" (modèle, template). On opta pour Simplification. Très important, de toujours partir du simple (c'est à dire, si vous en avez quoi que ce soit à faire de comprendre un peu ce qui se passe). Une fois le thème choisi, se présente une page de modification rapide (couleurs, polices, etc. : c'est le Template Editor de Blogger en minimal):

Remarquez qu'en bas à gauche on peut créer des pages fixes : utile pour les présentations, les liens, etc. On voit aussi une sorte d'aperçu dans la partie (principale) à droite, qui cesse vite, toutefois, de fonctionner dès qu'on touche à l'éditeur HTML. Mouais.

C'est justement de cette page (cliquer sur Edit HTML) que se peut modifier le code. Ça dépayse un peu du CSS utilisé sous Blogger, mais on s'y retrouve assez vite. Deux ou trois trucs à modifier, outre l'apparence générale.

La taille par défaut des photos est limitée à 500px (ce qui est un peu ridicule par les temps qui courent). Pour faire du tumblr un pur photoblog, il faut simplement bidouiller le CSS. Ajoutez-y :

.photo img { max-width: 100%; height: auto }

ou une hauteur autre qu'auto si vous utilisez le format vertical et souhaitez éviter autant que possible le défilement d'écran (j'ai tâtonné et opté dans un premier temps pour une max-height de 850px).

Après réflexion et au vu de la relative piètre qualité des photos, 850px c'était trop grand : on s'en tint à 750 et un max-width de 88% pour ajuster les formats horizontaux (une petite règle de trois arrondie, n'est-ce pas) :

.photo img { max-width: 88%; max-height: 750px }

En suite, si vous souhaitez effacer la bordure autour des images, voici le code à insérer :

.photo a img{border:0 none;}

qu'il faut modifier en :

.photo a img{border:5px #000000 solid;}

pour y mettre une bordure noire de 5px, par exemple.
Et vice-versa, selon le modèle de base.

 
S'il n'y a que des photos, ne s'occuper que de cela : la dernière chose importante, c'est de décider de la règle qui détermine ce qui se passe si l'on clique sur une photo. On opta (j'en suis assez satisfait), pour une redirection vers la photo seule si l'on est sur la page principale, et pour une redirection vers la page principale si l'on est sur une page de photo seule (pas besoin de rediriger vers une photo en grand format : elles sont déjà suffisamment imposantes).

{block:Photo}
      <div class="photo">
      
       {block:IndexPage}<a href="{Permalink}">{/block:IndexPage}
        {block:PermalinkPage}<a href="/">{/block:PermalinkPage}
          <img src="{block:IndexPage}{PhotoURL-HighRes}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}" alt="{PhotoAlt}">
        {block:IndexPage}</a>{/block:IndexPage}
         {block:PermalinkPage}</a>{/block:PermalinkPage}

        {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
        
      {/block:Photo}

Ensuite ? c'est du détail : un pixel en moins en marge, un alignement à droite ou à gauche, et des gadgets HTML pour enrober le tout, et n'oubliez ni la redirection sur feedburner ni l'ajout d'une tracker comme StatCounter...



Ah, en passant, une page utile : un rappel de CSS/HTML pour modifier les thèmes.

Par ailleurs : une fonctionnalité intéressante et pratique de Tumblr est l'archivage automatique et visuel sur une page à part (Archive) (page qu'on a dû par ailleurs construire et qu'on met à jour manuellement sur le Bento), accessible depuis le blog. En revanche, l'utilisateur n'a aucun contrôle (que je sache) sur le code de cette page. Il y aurait pourtant des choses à faire (la gestion de la taille de l'aperçu des photos est catastrophique).

Autre note : le format de la date pour la publication programmée (scheduled post) est ridicule, sur le mode "next thursday, 10am". Préférez "August 31, 10:00" etc. Un petit calendrier déroulant eût été bienvenu...

À suivre !