FLISCORNO

Este artigo explica como fazer para ter diferentes ícones antes do título

Quem por aqui passa já terá reparado que associado a cada post aparece um ícone e que não é constante. Com efeito, cada conjunto de categorias do blog (labels) está associado a um ícone, o qual é escolhido automaticamente. Assim, quando se cria um post, escolhe-se a categoria para o marcar e plimmmm depois de publicar o respectivo ícone aparece. Mais tarde, se alterar a categoria do post, o ícone mudará em correspondência.

Passo a expôr como implementei esta funcionalidade na template. Dada a extensão do artigo, este será partido em 3 partes:

1. O problema
2. Implementação
3. Juntando as peças

Associar ícones às categorias do post- parte 1/3: O problema

O objectivo
Aqui no Fliscorno há uma certa misturada de conteúdos. Dizem as regras da boa blogagem, as quais supostamente ajudam a aumentar o número de visitantes, que se deve manter coêrencia no género de conteúdos abordados no blog. Por exemplo, evitar falar dos negócios da política num blog de culinária sob pena disso causar indigestão. A ideia subjacente é que quem vai a um site espera encotrar lá um certo tipo de conteúdos e isso fidelizará o visitante. Pela minha experiência pessoal, sei que assim é. Mas o facto é que não me apetece ter vários blogs e gosto de malhar em áreas diferentes conforme a pachorra do momento. Claro que para o visitante poderá ser algo frustante, daí que optei por facilitar a identificação visual dos conteúdos pelo uso de um ícone que esteja relacionado com a categoria do post. Já agora, na mesma linha da separação da separação de conteúdos, também abordarei noutro artigo a forma de ter um feed por cada categoria.

As limitações do Blogger
Olhado para uma template genérica, vemos que a parte onde as categorias são mostradas é esta (ir a Layout | Edit HTML | Download Full Template e abrir o ficheiro XML descarregado):

<b:loop values='data:post.labels' var='label'>
  <a expr:href='data:label.url' rel='tag'>
  <data:label.name/></a>
  <b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>   
</b:loop>

Mais à frente explicarei este pedaço de código mas por agora basta verificar que existe um clico (loop) dentro do qual são listadas as categorias associadas ao post.

Portanto, para ter um ícone diferente para cada post, bastaria olhar para cada categoria e decidir sobre o ícone a usar. Algo assim:

<b:loop values='data:post.labels' var='label'>
  <a expr:href='data:label.url' rel='tag'>
  <data:label.name/></a>
  <b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>   
  IF categoria = gracinha THEN
    usa o ícone da gracinha
  END IF
</b:loop>

O problema desta abordagem está no facto de o Blogger não ter o bloco IF ... THEN ... ELSE!

A solução
Como resolver então o problema? O truque que encontrei para contornar este problema foi:

1. parte do processamento é feito pelo Blogger
2. a parte restante é feita pelo browser ao receber a página.

Assim, na template do Blogger coloquei comandos para gerar um javascript. Este script é depois interpretado pelo cliente (o browser) para escolher o ícone certo a apresentar.

Na próxima parte deste artigo detalharei a solução implementada. Entretanto, se a curiosidade apertar, experimente ver o código fonte desta página e olhe para o script gerado (procure o texto "var all_labels")