Listing author’s posts separately on Tumblr

tumblrtumblr-themes

I'm new on Tumblr. And I have a group blog. There are 2 authors of this blog. I will design a 2-column theme and i want to list AUTHOR-A's posts on left side and AUTHOR-B's posts on right side. Basically like this :

<div style="float:left">
    {listPostsOf:author-a}{/listPostsOf}
</div>
<div style="float:right">
    {listPostsOf:author-b}{/listPostsOf}
</div>

Is it possible to get author's posts seperately like this ? If it's not, maybe we can solve this problem with tags. I mean, AUTHOR-A adds author-a tag to its all posts, and AUTHOR-B adds author-b tag. And maybe we can get them like this :

<div style="float:left">
    {listTags:author-a}{/listTags}
</div>
<div style="float:right">
    {listTags:author-b}{/listTags}
</div>

Best Answer

At this time, you cannot get the "authorship" information of the Posts on a Group blog from Tumblr via the Theme Variables

Edit: At the time I wrote this, I believed it was still correct. For a long time, this was not possible. Sometime in the last month or two (last time I read the Tumblr Theme Documents) this ability has been added to Tumblr. Yay!

Using the new Theme Variables for Post Authors


First, you ought to go read the Documentation under the heading "Post Authors"

The most relevant new Theme Variable is {PostAuthorName} which will give you the Tumblr name of the author of the post on a group blog.   This variable is available within the {block:Posts} in your Theme Code.

Example Usage

Because there are no {block:..} type elements for the Post Authors (to say, "iterate" over all author's posts), typical usage for what the OP wants to do would likely make use of CSS classes.

However, because Tumblr Names are not guaranteed to be valid CSS class names, you should take some precaution when embedding them in your HTML. (for example, "1234myblog" is a valid Tumblr Name, but not a valid CSS class name. Also, in the old days Tumblr used to allow Tumblr Names that started and ended with Dashes, like "-mycoolblog-" which is also not a valid CSS class)

Eg, instead of:   <div class="post {PostAuthorName}">  
A safer alternative might be:   <div class="post author{PostAuthorName}post">

In that way, the "safe" version will prevent your code from breaking if an author has a Tumblr Name that is not a valid CSS Class name. (Of course, you can skip this if you know your author's names in advance!)

Not also that {PostAuthorName} will return the author's names in all-lower-case.

And so, some example code:

<div class="posts">
    {block:Posts}
        ...
        <div class="post author{PostAuthorName}post">
            <!-- Post content in here -->
        </div>
        ...
    {/block:Posts}
</div>

Then maybe a little CSS. Let's suppose your Author's Tumblr Names are "43-is-the-answer" and "-a-hitch-hiker-":

<style>
    .post.author43-is-the-answerpost { float: left; }
    .post.author-a-hitch-hiker-post { float: right; }
</style>

Then one Author's posts will float to the left, and the other author's to the right inside your posts Container div.

That's simplified a lot -- but it should get you on the right track.

Using the Technique of "Tagging Posts with the Author"


This was my original recommendation, and it does work just fine. I'll re-produce the original answer here.

The other alternative, as the OP suggested, to use Tags, and have each author tag his posts with a unique tag.

In your Theme Code, you can use the {TagsAsClasses} theme variable to extract the "Author Tags" and apply them as CSS classes to each post. Yes, it will add all the other tags too, but that's probably OK as long as you're careful with your CSS :)

Note   The {TagsAsClasses} variable will automatically lower-case your tags, and replace any spaces (" ") or dashes ("-") with an underscore ("_").

So, supposing our Authors tagged their posts with "Jim Beam" and "Ezra-Brooks" (and sometimes made an error and tagged with "jim beam" and "ezra brooks"), then the class names given by {TagsAsClasses} will still be jim_beam and ezra_brooks

Example code:

<div class="posts">
    {block:Posts}
        ...
        <div class="post {TagsAsClasses}">
            <!-- Post content in here -->
        </div>
        ...
    {/block:Posts}
</div>

And a little corresponding CSS:

<style>
    .post.jim_beam { float: left; }
    .post.ezra_brooks { float: right; }
</style>

Again, just a rough example to get you on the right track.


This post was significantly updated on 22-June-2012