How to organize Tumblr's captions (without scripts)

Click here to see the example a little closer

⚠ Procurando por uma tradução em Português deste tutorial? Clique aqui! ⚠

In this tutorial I will be showing you how to organize the captions (comments) of the posts on Tumblr without needing to use any script.

I found this method in the "Undocumented Documentation" that @bychloethemes did, where she shows some blocks and variables that are not yet registered on the official Tumblr documentation. In her documentation she talks about this method in a brief way, so if you rather a brief explanation you can go check her page. But if you want a little more details about it, then you can keep on reading my tutorial.

Tutorial

Introduction:

First of all, we need to make sure that you know all the post formats available on Tumblr and that you are able to recognize their respective codes in the HTML of your theme. This is important because for certain post formats the codes won't be exactly the same.

On Tumblr, we basically have 9 different post formats:

Text posts;
Image posts;
Photosets;
Quotes;
Links;
Chats;
Audios;
Videos;
and Answers (ask posts).

For Text, Answer and Link posts there are special caption codes. Whereas for Quote and Chat there is no code, since it's not possible to add captions to these 2 types of post. And for the rest of the post types, we use the same code.

Summing up:

Quote and Chat: no code;
Image, Photoset, Audio and Video: the same code goes for all of them;
Text, Answer and Link: every each one of them have its own special code.

Now I'll show the codes for every post type and where to put them. And these codes will make the captions to be displayed in order on your theme, as shown in the cover image of this tutorial.

Text posts:

Go to the code of the Text posts of your theme and find {Body}. Erase it from the code (including any tag/div that's wrapping it, if any), and replace it by the following code:

<!----- 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 ----->

In case you're still a little confused: you have to paste this code directly before {/block:Text}. Example:

Link Posts:

Go to the code of the Link posts of your theme and find the follow codes:

{block:Description}{Description}{/block:Description}

Remove them, and replace them by this:

<!----- 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 ----->

Answer posts:

For Answer posts, go to its code and find {/block:Answer}. Right before the {/block:Answer}, paste this:

<!----- 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 ----->

Image, Photoset, Audio and Video posts:

Now, for every each one of the other post types (except for Quote and Chat posts, as I mentioned before) you must do this: before the closing block of every each one of these posts (before {/block:Photo}, {/block:Photoset}, {/block:Audio} e {/block:Video}) you'll find the code for their captions. They will be kinda like this:

{block:Caption}{Caption}{/block:Caption}

So you must remove these codes and replace it by this:

<!----- 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:

Now that all captions are in their right places, it's time to style them! And, of course, you can style them as you want. But if you want to use the style that I used at the cover image of this post, you can get it here:

/** 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) **/

If this tutorial was useful to you, please, like or reblog it on Tumblr (here);
If you have any questions, you can contact me here.

Search

Banner

How to organize Tumblr's captions (without scripts)