simplejidad

Diseñando para Tumblr

Desde hace unos días vengo trabajando en un template personalizado para Tumblr.

El proceso há sido divertido y despues de haber trabajado integrando muchos CMS’s, la iniciativa de una sola página de Tumblr es muy refrescante.  El motor de Tumblr maneja cada página del Tumblelog de un usuario con una sola plantilla en XHMTL y CSS, reduciendo vastamente no solo la cantidad de trabajo necesario para crear un template, sino tambien la cantidad de código repetido (en el caso de Wordpress)

Creando un Tema para Tumblr

El primer paso sería producir la página en html, más el CSS y las imágenes, que juntos representan el diseño. A esto le añadimos etiquetas personalizadas que permitirán a Tumblr identificar las partes de nuestro diseño y realizar variaciones a los distintos tipos de posts.

Luego se debe copiar el HTML (con el CSS incluido) directamente a la casilla de “Custom HTML” en la sección customize del dashboard de Tumblr. Utiliza el boton preview para verificar que las etqiuetas quedaron en el sitio correcto.

Como parte del proceso, me hubiese gustado subir las imagenes a Tumblr, pero el alojamiento de archivos para los templates no está incluido en el servicio, así que registré una cuenta en Photo Bucket y enlacé las referencias a las imágenes desde ahí.

Usando las etiquetas

Las etiquetas de Tumblr estan divididas en dos grupos:

Variables, para mostrar data dinámic. Como: {Title} que muestra el nombre del Tumblelog.

Bloques, para hacer loop en sets de datos y mostrarlos condicionalmente.

{block:Description}
  <p id="description">{Description}</p>
{block:Description}

Esto cubre casi todas las situaciones, pero no hay concepto de else o de not, por lo que no es posible mostrar algo cuando alguna condición resulte negativa. (Como hubiese sido útil en varios casos)

El uso más importante para los bloques es el de manipular el display de los posts dependiendo su tipo (Text, Chat, Audio, Video, Quote, Link)

Inconvenientes

La mayor parte de los inconvenientes de hacer un template en Tumblr se encuentran en el preview:

• No se muestran todos los tipos de posts (videos, audio)
• Los posts de muestra no están etiquetados, ni se muestra la paginación.
• No hay listas, encabezados o texto preformateado en los posts de ejemplo.

Tener una previsualización más parecida al resultado final (con el contenido) sería de gran ayuda al momento de probar los cambios que vamos realizando al diseño.

La documentación de las etiquetas es muy completa y es el sitio definitivo para aprender a hacer templates para Tumblr.

Este post es solo una pequeña lista de asuntos que pude observar creando el template de mi blog.