⚠ Searching for an English translation for this tutorial? Click here! ⚠
Neste tutorial eu estarei mostrando como organizar os captions (comentários) dos posts do Tumblr sem precisar de nenhum script.
Eu encontrei esse método na "Documentação não documentada" que a @bychloethemes fez, onde ela apresenta algumas variáveis do Tumblr que ainda não estão registradas na documentação oficial da plataforma. Lá ela fala, de forma breve, sobre esses códigos que eu estarei mostrando aqui no tutorial. Porém a documentação dela está toda em inglês, então para quem precisa de uma tradução para o português, aqui está a minha explicação.
Mas, antes de começar, já vou avisando que eu não me aprofundarei muito em explicações neste tutorial, então ele pode ficar um pouco confuso para quem não tem muita experiência com códigos. Já que a forma como os códigos estão organizados em um tema pode variar dependendo do tema, eu não tenho como prever de que jeito você encontrará os códigos no HTML do tema que você usa. Portanto esse tutorial é mais recomendado para quem já tem experiência com HTML e com as variáveis do Tumblr.
Tutorial
Introdução:
Primeiramente, precisamos nos certificar de que você conhece todos os formatos de postagem disponíveis no Tumblr e que você reconhece os códigos de cada um dentro do seu tema. Isso porque para alguns tipos de post os códigos não serão exatamente os mesmos.
No Tumblr, nós temos basicamente 9 formatos diferentes de postagens:
- Posts de Texto;
- Posts de Imagem;
- Photosets (sets de imagens);
- Citação;
- Link;
- Diálogo;
- Áudio;
- Vídeo;
- e Ask (posts de resposta).
Quanto aos códigos dos captions (que eu irei passar a seguir), para posts de Textos, Asks e Links existem códigos especiais. Enquanto que para posts de Citação e Diálogo não há código, pois não é possível colocar captions nesses 2 tipos de postagem. E para o restante dos formatos, usa-se o mesmo código.
Resumindo:
- Citação e Diálogo: não há código;
- Imagem, Photoset, Áudio e Vídeo: usa-se o mesmo código;
- Texto, Ask e Link: cada um dos 3 tem um código especial.
Agora eu irei mostrar os códigos dos captions para cada tipo de post e onde colocá-los. E esses códigos farão com que os captions sejam mostrados em ordem no seu tema, como mostrado na imagem de capa deste post.
Posts de Texto:
Vá até o código dos posts de texto do seu tema e encontre a variável {Body}. Apague ela (juntamente com qualquer tag/div que esteja envolvendo ela, caso haja alguma). E, no lugar onde antes estava a variável {Body} (ou seja, logo antes de {/block:Text}), cole o seu novo código dos captions que é este aqui:
<!----- text captions ----->
{block:NotReblog}
<div class="text">{Body}</div>
{/block:NotReblog}
{block:RebloggedFrom}
<div class="text caption reblog-list">
{block:Reblogs}
<div class="reblog-caption {block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">
<div class="reblog-header">
{block:IsActive}
<a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
<img src="{PortraitURL-64}" class="captions-avatar">
</a>
{/block:IsActive}
{block:IsDeactivated}
<span class="inactive-avatar {block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" title="{block:PortugueseBR}Blog desativado{/block:PortugueseBR}{block:NotPortugueseBR}Deactivated blog{/block:NotPortugueseBR}">
<img src="{PortraitURL-64}" class="captions-avatar">
</span>
{/block:IsDeactivated}
{block:IsActive}
<a target="_blank" href="{Permalink}" class="tumblr_blog">{Username}</a>:
{/block:IsActive}
{block:IsDeactivated}
<span class="inactive-username" title="{block:PortugueseBR}Blog desativado{/block:PortugueseBR}{block:NotPortugueseBR}Deactivated blog{/block:NotPortugueseBR}">{Username}</span>:
{/block:IsDeactivated}
</div><!-- .reblog-header -->
<div class="reblog-content">{Body}</div><!-- .reblog-content -->
</div><!-- .reblog-caption .original-reblog -->
{/block:Reblogs}
</div><!-- .text.caption.reblog-list -->
{/block:RebloggedFrom}
<!----- text captions ----->
Exemplo:
Posts de Link:
Vá até o código dos posts de link do seu tema e encontre os seguintes códigos:
{block:Description}{Description}{/block:Description}Apague eles, e substitua-os por este:
<!----- link captions ----->
{block:Description}
{block:NotReblog}
<div class="text">{Description}</div>
{/block:NotReblog}
{block:RebloggedFrom}
<div class="text caption reblog-list">
{block:Reblogs}
<div class="reblog-caption {block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">
<div class="reblog-header">
{block:IsActive}
<a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
<img src="{PortraitURL-64}" class="captions-avatar">
</a>
{/block:IsActive}
{block:IsDeactivated}
<span class="inactive-avatar {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}" title="{block:PortugueseBR}Blog desativado{/block:PortugueseBR}{block:NotPortugueseBR}Deactivated blog{/block:NotPortugueseBR}">
<img src="{PortraitURL-64}" class="captions-avatar">
</span>
{/block:IsDeactivated}
{block:IsActive}
<a target="_blank" href="{Permalink}" class="tumblr_blog">{Username}</a>:
{/block:IsActive}
{block:IsDeactivated}
<span class="inactive-username" title="{block:PortugueseBR}Blog desativado{/block:PortugueseBR}{block:NotPortugueseBR}Deactivated blog{/block:NotPortugueseBR}">{Username}</span>:
{/block:IsDeactivated}
</div><!-- .reblog-header -->
<div class="reblog-content">{Body}</div>
</div><!-- .reblog-caption .original-reblog -->
{/block:Reblogs}
</div><!-- .text.caption.reblog-list -->
{/block:RebloggedFrom}
{/block:Description}
<!----- link captions ----->
Posts de Ask:
Para os posts de ask, vá até seu código e encontre o {/block:Answer}. Logo antes de {/block:Answer}, cole isto:
<!----- ask captions ----->
{block:RebloggedFrom}
<div class="text caption reblog-list">
{block:Reblogs}
<div class="reblog-caption {block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">
<div class="reblog-header">
{block:IsActive}
<a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
<img src="{PortraitURL-64}" class="captions-avatar">
</a>
{/block:IsActive}
{block:IsDeactivated}
<span class="inactive-avatar {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}" title="{block:PortugueseBR}Blog desativado{/block:PortugueseBR}{block:NotPortugueseBR}Deactivated blog{/block:NotPortugueseBR}">
<img src="{PortraitURL-64}" class="captions-avatar">
</span>
{/block:IsDeactivated}
{block:IsActive}
<a target="_blank" href="{Permalink}" class="tumblr_blog">{Username}</a>:
{/block:IsActive}
{block:IsDeactivated}
<span class="inactive-username" title="{block:PortugueseBR}Blog desativado{/block:PortugueseBR}{block:NotPortugueseBR}Deactivated blog{/block:NotPortugueseBR}">{Username}</span>:
{/block:IsDeactivated}
</div><!-- .reblog-header -->
<div class="reblog-content">{Replies}</div>
</div><!-- .reblog-caption .original-reblog -->
{/block:Reblogs}
</div><!-- .text.caption.reblog-list -->
{/block:RebloggedFrom}
<!----- ask captions ----->
Posts de Imagem, Photoset, Áudio e Vídeo:
Agora, para cada um dos posts restantes (exceto posts de Citação e Diálogo, como eu mencionei anteriormente) você deve fazer o seguinte...
Antes do "block" de fechamento de cada um desses posts (antes de {/block:Photo}, {/block:Photoset}, {/block:Audio} e {/block:Video}) você encontrará o código de seus captions, que estará mais ou menos assim:
{block:Caption}{Caption}{/block:Caption}Você deve deletar esse código e substituí-lo por este:
<!----- captions ----->
{block:Caption}
{block:NotReblog}
<div class="text">{Caption}</div>
{/block:NotReblog}
{block:RebloggedFrom}
<div class="text caption reblog-list">
{block:Reblogs}
<div class="reblog-caption {block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">
<div class="reblog-header">
{block:IsActive}
<a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
<img src="{PortraitURL-64}" class="captions-avatar">
</a>
{/block:IsActive}
{block:IsDeactivated}
<span class="inactive-avatar {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}" title="{block:PortugueseBR}Blog desativado{/block:PortugueseBR}{block:NotPortugueseBR}Deactivated blog{/block:NotPortugueseBR}">
<img src="{PortraitURL-64}" class="captions-avatar">
</span>
{/block:IsDeactivated}
{block:IsActive}
<a target="_blank" href="{Permalink}" class="tumblr_blog">{Username}</a>:
{/block:IsActive}
{block:IsDeactivated}
<span class="inactive-username" title="{block:PortugueseBR}Blog desativado{/block:PortugueseBR}{block:NotPortugueseBR}Deactivated blog{/block:NotPortugueseBR}">{Username}</span>:
{/block:IsDeactivated}
</div><!-- .reblog-header -->
<div class="reblog-content">{Body}</div>
</div><!-- .reblog-caption .original-reblog -->
{/block:Reblogs}
</div><!-- .text.caption.reblog-list -->
{/block:RebloggedFrom}
{/block:Caption}
<!----- captions ----->
CSS:
Agora que todos os captions já estão em seus respectivos lugares, é hora de estilizá-los! E, é claro, você pode estilizá-los da forma como preferir. Mas se você quiser usar o estilo mostrado na imagem de exemplo deste tutorial, você pode pegá-lo aqui:
/** captions style (by anyhs-themes.tumblr.com) **/
.tumblr_blog, .inactive-username {
text-transform: uppercase;
font-size: 80%;
letter-spacing: .5px;
margin-left: 3px;
font-family: 'Roboto', sans-serif;
}
.text.reblog-list .reblog-caption {
padding: 10px;
margin-top: 5px;
border: 1px solid #333;
}
.text.reblog-list .reblog-header {
padding: 5px;
margin: -10px;
margin-bottom: 0px;
line-height: 20px;
border-bottom: 1px solid #333;
}
.text.reblog-list .captions-avatar {
width: 16px;
height: 16px;
border-radius: 100%;
float: left;
margin-right: 3px;
margin-top: 2px;
}
.text.reblog-list .reblog-content {
margin-bottom: -10px;
}
/** captions style (by anyhs-themes.tumblr.com) **/
