Tuesday, October 23, 2012

How to Hide Posts by Tag from Your Blog Home Page

Hey guys! I’ve done this fix for a few people already. Word’s gotten around that I know how to do this and I’ve gotten a few requests on how to do it, so I figured I’d make a DIY tutorial on it. Essentially, what this is, is a fix to hide any post with a specific tag from your blog’s index page. Visual example:

BEFORE

image

AFTER

image

These posts will still show up under any tag category on your blog, so you can provide a link to that tag. I use this to hide my public exchanges, answered asks, reblogs, and other content like that so that when people come to my blog, they can find my actual writing immediately. It looks good, and it feels good. To do this, you’ll need a little bit of ingenuity and the willingness to get down and dirty with your theme. This tutorial is going to assume that you have no knowledge of CSS or HTML.

Here’s a little bit on how this hack works. Every theme is made by different people and so is designed differently, but each theme has some key markup (code, essentially) that makes it work with Tumblr. These are “Tumblr codes”, which either manifest as variables or blocks. For example:

{block:Description} (<— block)
<p id="description">{Description}</p>
(<— variable)
{/block:Description}
(<— block end)

The block defines an area of code where something gets interpreted by Tumblr and displayed. From the Creating a custom HTML theme documentation provided by Tumblr, we see that {block:Description} and {/block:Description} will render anything within it so long as the post has a description, and {Description} will show the actual description itself.

The way this works is, when Tumblr loads your theme, it takes the variety of Tumblr codes and replaces them with the actual data you want to see. Your blog title, image, colors, font choices, posts, custom pages, and whatever else all get populated during this stage. There are a lot of different types of variables and blocks that you can see on that page.

This brings us to the magic of the {TagsAsClasses} variable. When put inside a {block:Post}{/block:Post}, it {TagsAsClasses} gets replaced with HTML friendly versions of the names of whatever you’ve tagged your post with. Let’s get familiar with your theme.

  1. Go to your blog.
  2. Hit the customize button.
  3. Hit the “Edit HTML” button underneath the theme image.
  4. Copy everything you’ve got there and back it up to a .txt file or some other place.
  5. You may want to create a new copy and edit from there—Tumblr’s custom HTML editor can be a pain. Alternatively, you can use something like Mozilla Thimble so that you can see all the pretty colors associated with HTML markup. Don’t expect the preview button to give you an accurate representation, however, because only Tumblr will correctly interpret Tumblr code.
  6. Hit Ctrl + F to search and search for “{block:Posts}”.
  7. Just look around a bit. You should see a bunch of {block}{/block} of varying types—Text, Audio, Photo, Chat, Question, etc. These are the Tumblr codes for interpreting different types of posts that get published.

What’s all this <div></div> stuff? <div></div> is markup to denote that whatever is between the two tags is marked as part of that “div”. Divs can be given an “id” or a “class”, which are used by CSS to reference everything within the divs and style them, giving them the graphic appearance that you see on Tumblr themes. You can even use CSS to hide specific divs. Remember {TagsAsClasses}? That’s going to be coming into play soon.

So how does {block:Posts}{/block:Posts} work? From the documentation, we see that “this block gets rendered for each post in reverse chronological order”, meaning that for every post, we get everything inside of {block:Posts}{/block:Posts} with the new stuff at the top. This means that for every post, you’re going to have a separate set of <div></div>s. You can pop {TagsAsClasses} into the class of these divs in order to give them the classes that you tag them as, and with CSS, we’ll be hiding these posts later.

Figure out what <div> you need to insert {TagsAsClasses} into. Depending on your theme, you might already see {TagsAsClasses} somewhere in your {block:Posts}{/block:Posts}. If that’s the case, then your job is done and you can move on.

If not, you’re going to need to figure out how your theme designer set up your {block:Posts}{/block:Posts} section. There’s generally two iterations of this that I’ve seen:

  1. a single <div></div> (usually <div class=”post”>) that encapsulates all of the post types, including meta info, permalink info, etc.
  2. individual <div></div>s within each post type (usually something like {block:Text}<div class=”text”> …, {block:Photo}<div class=”photo”> … )

If you have the first one, pop in {TagsAsClasses} into the class section next to whatever class the <div> is already called. If it’s called <div class=”post”>, that becomes <div class=”post {TagsAsClasses}”>. If it’s called <div class=”rubberfish sillypants”>, that becomes <div class=”rubberfish sillypants {TagsAsClasses}”>.

If you have the second case, find the {block:Posts} block and then put <div class=”{TagsAsClasses}”> on the line after that, and then find {/block:Posts} and put </div> on the line before that one.

Now time to put in the magic CSS that hides everything. Search for {CustomCSS}—if that’s not there, search for </style> until you find a bunch of odd-looking code that has lots of #, ., class and id names, :s, and {s and }s. That’s CSS, or Cascading Style Sheets. Go to the bottom of all that until you find that last </style> that denotes the end of the CSS code and copy in this code:

{block:IndexPage}
.reblogs {display:none;}
{/block:IndexPage}

{block:TagPage}
.reblogs {display:block;}
{/block:TagPage}

{block:IndexPage}{/block:IndexPage} is rendered on your main blog page. This means whatever page that your viewer lands on that is NOT a tag page—including http://yourblog.tumblr.com/, http://yourblog.tumblr.com/page/2, etc.

{block:TagPage}{/block:TagPage} is rendered on any page that is a tag page, such as http://yourblog.tumblr.com/tagged/reblogs.

In this example, I’m trying to hide anything I post that’s tagged with “reblogs”. .reblogs {display:none;} essentially says—hey, grab whatever element (which can be a <div>, a <p>, a <blockquote>, basically any HTML markup) that has the class “reblogs” and then do NOT display it. Because it’s only rendered on index pages because of our block tags for that, everything tagged reblogs is invisible on the main page. The opposite case happens with .reblogs {display:block;} : this one says, grab whatever element has “reblogs” and display it in “block” format (the standard format for displaying a div). Because it’s inside the tag page blocks, it doesn’t appear on the index page as well and overwrite what we had set to display on the index page.

You can rename these or have multiples. Want to hide anything with the tag “ask”? That’s easy—just use the exact same format. With the code below, you’re now hiding both reblogs as well as asks.

{block:IndexPage}
.reblogs {display:none;}
.asks {display:none;}
{/block:IndexPage}

{block:TagPage}
.reblogs {display:block;}
.reblogs {display:block;}
{/block:TagPage}

Bam! You’re done! Copy or update the appearance of your blog, save changes, and see if it worked. Depending on your theme, it may or may not have worked, or you might not have even figured out how to do it. A lot of HTML theme designers don’t actually know anything about good markup practice and as a result make it hell for other people to customize. However, if you did get it working—good job! Have fun! Your next step is to add a page that redirects to the specific tag that you’ve just hidden so that people can actually get to the posts you’ve hidden (but if you just want them hidden in general, that’s cool, too).

OK, a couple notes and caveats:

  1. This does not actually prevent Tumblr from rendering post content—it merely hides them. Say you allow 10 posts per page (if you use pagination)—if you have 6 hidden posts, all 10 are there but only 4 are showing before the next page. This can lead to somewhat erratic post-per-page counts when people are skipping through the different pages in your blog (but it doesn’t really bother me, personally).
  2. This fix does not work on Tumblr’s optimized mobile theme. All the posts that you’ve hidden will still appear because the mobile theme utilizes an entirely different set of HTML and CSS from the one you’ve just modified. You can overwrite this by unchecking the box that allows your blog to use the mobile theme. It’s up to you to decide whether or not your blog in standard display is mobile-friendly enough.
  3. Posts still show up on the dashboard, obviously. If you didn’t want this to happen.. then why are you even posting something?
  4. If you have a habit of tagging your posts with classes that accidentally overlap classes that your theme already uses (this occurs most often the “meta” class), then you will have to either change your tagging habits or change some things in your code. You’ll want to use this:

    {block:HasTags}{block:Tags} tag-{URLSafeTag}{/block:Tags}{/block:HasTags}

    You will need to replace your CSS classes to account for the specialized tag- bit, so .reblogs{display:none;} and .reblogs{display:block} become .tag-reblogs{display:none;} and .tag-reblogs{display:block;}.

And with all that said, you’re done! I hope this helps you guys out. It certainly helped me clean up my blog and make it look good for whoever wants to read it. If you can’t figure it out, ask a techie friend and he’ll probably be able to get it figured out for you right quick.

UPDATE: People have been finding this post. I do not have the time to sort through your themes personally, so please don’t ask me to look at your theme. Every theme is different, and if you don’t have the knowledge to figure out your theme’s quirks, find a friend or ask for assistance in a forum somewhere.

Notes

  1. spyrocoollp reblogged this from creepyblogs
  2. needstosortoutpriorities reblogged this from creepyblogs
  3. codescenter reblogged this from creepyblogs
  4. dumplessss reblogged this from creepyblogs
  5. finejustbitter reblogged this from wincenworks
  6. wincenworks reblogged this from yungmeduseld
  7. yungmeduseld reblogged this from creepyblogs
  8. kittyresources reblogged this from creepyblogs and added:
    Hey guys! I’ve done this fix for a few people already. Word’s gotten around that I know how to do this and I’ve gotten a...