Como criar um Theme para Tumblr (Parte II) | Criatividade, Tutoriais Photoshop e Templates
Criatividade, Tutoriais Photoshop e Templates > Tutoriais > Como criar um Theme para Tumblr (Parte II)
21-08-2012, em Tutoriais, por Diogo Espinha
Não perca o primeiro artigo desta série Como criar um Theme para Tumblr (Parte I)
1. BLOCOS E VARIÁVEIS
No Tumblr existem blocos e variáveis que basicamente são o primeiro passo em direção à criação de um template. Para aqueles que estão familiarizados com o WordPress, o Codex é um compêndio gigante com toda a informação necessária para os desenvolvedores, com centenas de páginas. Para Tumblr, você tem uma só página – sim, uma. Se estivesse a criar um blog de raiz, teria de criar um banco de dados, criar as tabelas, criar as queries SQL para tratamento de dados, entre muitos outros processos.
No Tumblr, isto é feito automaticamente, facilitando a tarefa do desenvolvedor. Aquilo que é necessário criar é os locais onde irão ser inseridos os dados, que são denominados Blocos. Por exemplo, se você quiser mostrar texto simples, utilizaria algo idêntico ao código abaixo:
Para decifrar este pequeno trecho de código não é necessário ser nenhum expert em linguagens de programação. Para começar, o bloco é iniciado e definido qual o seu conteúdo, com o {block: Text}, de seguida é inserido o bloco onde será inserido o título do post ao inserir o {block: Title}, dentro do qual inserimos o heading a utilizar, o permalink e o título. Depois fechamos os blocos e está concluído.
A inserção do titulo dentro do bloco title tem como propósito proporcionar mais flexibilidade ao usuário, pois no Tumblr é possível não inserir um título ou omitir o mesmo. Caso isto seja feito, será utilizada uma tag como título do post, sendo estilizada com o h2 do exemplo. Então estes blocos fazem com que a informação dentro dos mesmos apenas seja mostrada se o post específico tiver um título, caso contrário será pulado.
No que toca a variáveis e como acontece com a grande maioria dos aplicativos de blogging disponíveis na internet, Tumblr oferece-lhe uma mão cheia de variáveis básicas que podem ser utilizadas nos seus projetos, como o titulo do seu blog, a descrição ou simplesmente o caminho para o seu avatar.
A informação pode ser inserida ou atualizada a partir da seção de personalização do seu template, como mostramos no ponto 2 do artigo anterior. Dentro do nosso template, se pretendermos mostrar o título e a descrição do mesmo, utilizamos o {Title} e {Description}. Além destas duas variáveis, existem ainda algumas mais como lhe mostramos abaixo:
{Title} – Título do blog
{Description} – Descrição do blog
{RSS} – O caminho para o RSS Feed do blog, criado pelo Tumblr
{Favicon} – O URL para o favicon desejado
{PortraitURL-64} – O URL para a foto de perfil enviada, em que o 64 representa a dimensão em pixéis, sendo assim uma imagem de 64x64px. Este número pode ser alterado de acordo com a preferência, podendo ter valores como 16, 24, 30, 40, 48, 64, 96, 128px.
{CustomCSS} – Ao incluir este bloco, estará a inserir o código CSS personalizado, que terá prioridade sobre o código original, esta funcionalidade está disponível através do painel de controlo em "Avançadas"
Uma vez que não existe server-side scripting como acontece em WordPress, Tumblr torna-se uma ferramenta particularmente fácil para os designers. Ao invés de utilizar alguns métodos como WordPress, Tumblr apenas necessita de utilizar as tags do template, sem necessidade de utilizar longos ficheiros de programação. Como referenciámos no artigo anterior, Tumblr tem 7 tipos de posts diferentes, Texto, Fotos, Citações, Links, Chats, Audio e Video.
Para determinar onde será inserido o conteúdo dos artigos dentro da markup HTML, temos de definir que o mesmo irá ser inserido dentro do bloco Posts, utilizando o código do exemplo abaixo:
<li>{Permalink}</li>
Este é um tipo genérico para a apresentação do conteúdo de um post. Mas e se pretender personalizar cada tipo de post, com imagens relativas a cada um deles? Nesse caso terá de utilizar os blocos específicos para cada um dos tipos de posts. A título de exemplo, se pretender fazê-lo com uma citação utilizaria o seguinte bloco:
3. BLOCOS ESPECÍFICOS DOS POSTS
Como referenciamos no ponto anterior, existem blocos específicos para cada um dos post types existentes em Tumblr. A utilização de um bloco genérico para a apresentação do conteúdo dos artigos poderá não ser a melhor maneira, nem em termos de código nem em termos de aparência do mesmo, uma vez que é possível personalizar cada tipo de artigo. Existem blocos específicos para cada um dos tipos de artigos:
{block:Text} {/block:Text}
{block:Quote} {/block:Quote}
{block:Video} {/block:Video}
{block:Audio} {/block:Audio}
{block:Photo} {/block:Photo}
{block:Photoset} {/block:Photoset}
{block:Link} {/block:Link}
{block:Chat} {/block:Chat}
Agora tem conhecimento de todos os blocos disponíveis para utilização no seu template tumblr. De notar que não tínhamos falado ainda do Photoset, que se insere dentro das fotografias mas é um post com mais que um fotografia, sendo considerado um Photoset e podendo ser estilizado de forma diferente dos posts simples de fotografia. Agora, imaginando que você pretender personalizar um dos tipos de posts existentes, vamos-lhe dar um exemplo:
Imagine que pretende personalizar os tipos de posts e inserir um ícone relativo a cada um deles. Nesse caso poderá inserir o seguinte código, a título de exemplo:
<li><img src="http://URL/icone-texto.png" />{Permalink}</li>
<li><img src="http://URL/icone-foto.png" />{Permalink}</li>
<li><img src="http://URL/icone-link.png" />{Permalink}</li>
<li><img src="http://URL/icone-citacao.png" />{Permalink}</li>
<li><img src="http://URL/icone-video.png" />{Permalink}</li>
<li><img src="http://URL/icone-audio.png" />{Permalink}</li>
<li><img src="http://URL/icone-photoset.png" />{Permalink}</li>
<li><img src="http://URL/icone-chat.png" />{Permalink}</li>
Com esta informação você já conseguirá começar a personalizar o seu template, colocando uma imagem relativa a cada um dos diferentes tipos de posts, de forma a diferenciar os conteúdos em termos visuais para os visitantes.
No caso dos artigos de fotografias, irá ter disponível uma variável que permite obter o url para a fotografia enviada, então quando um utilizador cria um novo post de fotografia a variável {PhotoURL-500} estará disponível para utilização, podendo utilizá-la como ícone:
<li><img src="{PhotoURL-500}" alt="{PhotoAlt}" /></li>
No próximo artigo iremos abordar as variáveis específicas de cada um dos tipos de posts disponíveis em Tumblr, começando a entrar no núcleo da programação de um template Tumblr. Não perca!