Tutorial: Tumblr template post block

How to add a tag-specific post block to a Tumblr template

Written by dubiousdisc
Posted on August 3rd 2017

Tumblr templates are very extensible, but complicated to work with. This is one of a series of tutorials of strange things you can add to a Tumblr blog template.

On my Tumblr-based artblog, I've designed a system that makes it so that all posts tagged as not safe for work are hidden behind a click-through box. I draw a lot of nudes, so my thought here was that, since I know that people who are looking to work with me are probably going to browse my art blog, it would be a good thing to make sure that they're never greeted by a sudden penis. Plus, my mother works in a middle school, and I know she often checks on my art at work and might show my work to the kids... You understand my concern.

This is what one such block looks like on my blog. Clicking through will bring you to the actual post, which is displayed like any other post.

A postblock in action

This is achieved through a blend of Javascript and interesting CSS rules.

Because of the nature of the beast, this tutorial is somewhat advanced, and it assumes you've already messed with Tumblr themes before. I'll be as in-depth as I can be, but if you'd like more walking through, contact me and I'll do my best to help you personally!

Step 1: Adding your posts' tags as classes

The first thing you need for this system to work is to make sure that each post's tags appear in the template as classes. This way, we have a way to manipulate posts that have the specific tag that we'd like to make the block for (in this example case, the #nsfw tag).

To do this, you need to go to Edit Theme, then Edit HTML, and find the post-specific part of your Tumblr template, which contains the code that allows each post to be displayed. This would be everything that's inside {block:Posts}. For more information on how Tumblr templates work, you can check Tumblr's custom theme guide. In any case, this part will be very different from template to template, but it might look like something like this:

{block:Posts}

    {block:Photo}
        {LinkOpenTag}<img src="{PhotoURL-1280}" alt="{PhotoAlt}">{LinkCloseTag}
        {block:Caption}{Caption}{/block:Caption}
    {/block:Photo}

[all the different post types...]

{/block:Posts}

The first thing we need to add here is a container for each post, which is where we'll put the tags as classes. Right after {block:Posts}, add:

<article class="{TagsAsClasses}">

And right before {/block:Posts}, close this container by adding:

</article>

At this point, you might want to press the Update Preview button and check that this didn't break anything specific to your particular Tumblr theme. If it worked as intended, you shouldn't be able to see any visible change in your preview, since this is all infrastructure for the actual system to work. For the record, there's no reason why your block couldn't be a <div> instead of an <article>, and if your template is already designed with some kind of container there's nothing stopping you from tacking the class="{TagsAsClasses}" right there. Do what seems to make sense, according to how familiar you are with Tumblr templates. Just make sure to preview before continuing, so you're sure that nothing went wrong at this step.

Step 2: Add the Javascript

Now we need to add the Javascript that will create a click-through box for the specific tag. Right after the newly-added <article class="{TagsAsClasses}">, add:

{block:IndexPage}

<script type="text/javascript">
    var hidepost = {JSTagsAsClasses};
    
    if (hidepost.indexOf("nsfw") > -1)
  {
 document.write("<div class=\"postblock\">This post is marked as not safe for work. <a href=\"{Permalink}\">Click through to view it.</a></div>");
  }

</script>

{/block:IndexPage}

You can change your message to whatever you wish, as long as it contains the link to the actual post. If you're setting up this system for a tag different than the #nsfw tag, change (hidepost.indexOf("nsfw") > -1) to what you need (for example: (hidepost.indexOf("bugs") > -1) to hide #bugs).

If at this stage you check the preview, you shouldn't be able to see any change yet because Tumblr does not allow you to preview Javascript (as to current writing, July 2017).

Step 3: Hide the post

Now, we add the CSS rules that allow for the selected posts to be hidden. Find </head> in your template, and right before it add:

<style type="text/css">

{block:IndexPage}
article[class*="nsfw"] > *:not(.postblock)
{
display: none;
}

{/block:IndexPage}

</style>

Once again, if you're implementing this for a different tag than the #nsfw tag, just change [class*="nsfw"] to whatever you need it to be. Save everything, and you're done! Now anything under the selected tag should be hidden by default unless you click through.

This block will be applied on all posts that contain the word nsfw in their tags. This means that #nsfw and #maybe nsfw will both be blocked. If you'd rather have only things tagged #nsfw be blocked (but not things tagged #maybe nsfw), change [class*="nsfw"] to [class="nsfw"] (note the asterisk; here is a full explanation of what these selectors mean).

I would like to point out that this tutorial was written around a general case that was clearest for me to explain, but you can use this idea and modify it and apply it in slightly different ways for different results. For example, in my artblog the block is designed so that it will only block the post itself but not the date and tags; it just looks better with my template, and I like that the tags can give you an idea of what's under the block. The main idea stays the same, what changes is only the CSS and the way it interacts with the template itself. Feel free to mess around and play with this idea.

Tumblr Post