a política na vertente de cartaz de campanha

Buzz this

Blogger: associar ícones às categorias do post - parte 1/3

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")


3 comments :

  1. Pata Negra disse...
     

    Fliscorno fico feliz ao entrar na tua nova casa ou a esgalhufar o teu novo penteado - como lhe queiramos chamar. Estive uns dias arredado e eis-me aqui, de novo, a dar a minha volta pelos Meus blogues. Agradeço o lugar que me tens dispensado. Não é por acaso que comento neste poste. Para gente como eu, menos dedicada às ferrementas do Blogguer faz falta um "espaço de dicas" como esta que aqui deixas. Talvez seja uma sugestão para alargar a tua intervenção. E por falar em largo aproveito para te deixar o meu reconhecimento pelo Fliscorno no seu todo: layout agradável, ambiente acolhedor, os temas tratados com a devida idoneidade e com o essencial... etc.etc. -etc porque me falta a adjectivação que mereces.
    Um abraço com um Fliscorno diário na banca.

  2. Bea disse...
     

    Bem, adoro a suas inovações no blog,,, sempre vivendo e aprendendo (consigo)
    LOL. Fique bem

  3. Fliscorno disse...
     

    Bom dia!

    Pata Negra, destaco as coisas que gosto e, pronto, a culpa de escreveres coisas giras é tua :-) Obrigado pela apreciação da template. Quanto à tua sugestão, pelo menos uma séries de artigos para descrever o que fiz aqui na template irão sair. Se isso servir para alguém, porreiro (pá).



    Obrigado Bea. Dá-se o que se tem ;-)

Enviar um comentário