Tagged Posts in Custom Pages

[imag...@gmail.com]

Me again, just to not mixed up both questions in one single topic.

As everyone here know, we have just one single syntax for Text Posts, by using {Block:Text} inside {Block:Posts}

And we can filter the posts of a specific tag by accessing the Tumblr Blog followed by /tagged/desired-tag

Cool

But is there a way to to do this filtering BEFORE listing the topics? Almost like {block:Post[1-15]}  but with one specific tag, instead an offset.

Or, as a better comparison, like an API Request to /posts sending the tag parameter.

Of course I don't want to use the API (yet)

[Sean Zhu]

You can use {TagsAsClasses} in the post wrapper. This is directly usable for CSS, but you can also use JavaScript to read this information if you put {TagsAsClasses} in a class attribute (via element.className) or any other attribute (via element.getAttribute).

[Bruno Augusto]

I'm answering directly through GMail. I hope it work as well...

I think I did not understand exactly your point. Should I list ALL the posts of ALL tags in one single page and then control the visibility of them with JavaScript?

Wouldn't it be a huge lack of performance?

[Sean Zhu]

Gmail works; I see your reply loud and clear!

My understanding is that you want to posts with a certain tag to appear a certain way, and/or you want something to appear before posts that have a certain tag, yes? This can probably done in CSS with no need for JavaScript.

The solution is to do something like:

<style>

/* This matches elements with class "beforePostInsert" inside any element with class "post-wrapper" and and makes them visible. */

.post-wrapper .beforePostInsert {display: none;}

/* This matches elements with class "beforePostInsert" inside any element with classes "post-wrapper" and "specialtag" and makes them visible.

 * This overrides the above style rule for posts tagged "specialtag". */

.post-wrapper.specialtag .beforePostInsert {display: block;}

/* This matches elements with class "post" inside any element with classes "post-wrapper" and "specialtag" and styles the post however you want. */

.post-wrapper.specialtag .post {

background-color: yellow;

font-weight: bold;

}

</style>

{block:Posts}

<div class="post-wrapper {TagsAsClasses}">

<div class="beforePostInsert">Stuff here will only show up before certain posts!</div>

<div class="post">

Put the insides of the post here!

</div>

</div>

{/block:Posts}

If you don't mind, can you tell me a bit more about what you're trying to do? Then I can explain this more clearly and perhaps also give you some actual code that you can use!

[imag...@gmail.com]

Interesting, I haven't thought about use this tag before.

And what if the tags I prefer to be used came from Page URL? E.g.:

blog.tumblr.com/jobs

Display the posts undr jobs category.

Is it possible natively, or only with JavaScript, by abnalyzing the pathname?

[Sean Zhu]

Basically, you want to display all posts tagged 'jobs' at /jobs? So basically, you want to use /jobs like /tagged/jobs?

I believe that's only possible with JavaScript. You don't need to use location.pathname (you can, btw), because you can set a variable from your static page /jobs. But you are going to need to write JavaScript to somehow retrieve posts tagged 'jobs'. That would be tricky.

Hm, actually, you can use an iframe src="/tagged/jobs" — then you don't need any JavaScript at all. But do you really want to use a whole-page iframe?

I should add that I've used redirects like /jobs —> /tagged/sitename_jobs (the sitename_ prefix makes it harder for someone to accidentally find your posts at www.tumblr.com/tagged/jobs) . I put this into use on some relatively low-traffic Tumblr blogs and no one has really complained about it.

So take your pick. I recommend the redirect option.

[Bruno Augusto]

Yeah, I thought it would be better, but I cam across an issue.

How can I use a Custom Layout, provided when creating pages, if I have no control over this option when creating Redirection Pages?

The main idea is define one "global" layout, through Edit HTML and one different layout to each "subsystem" (and this complements the explanation about Subtemplating I asked before).

So I can have blog.tumblr.com with layout X and blog.tumblr.com/jobs with a different layout (maybe a Gallery style).

--
Atenciosamente

Bruno Augusto
Imaggens Studio

[Sean Zhu]

First, let me stress again that in the end, the posts are going to end up on /tagged/jobs, not /jobs. Okay.

With that said, subtemplates can be created with CSS. On tag pages, you can use {Tag} or {URLSafeTag} to add a class to <html> or <body> or something. Then you can add custom CSS rules for that tag. [theme docs]

Note: This use of {URLSafeTag} must be inside {block:TagPage}{/block:TagPage}!

For example, if in your theme code you have: <html class="{block:TagPage}tag_{URLSafeTag}{/block:TagPage}">

For most pages, this will be rendered as:  <html class="">

But on /tagged/jobs, this will be rendered as:  <html class="tag_jobs">

Which means you can then do something like:

<style>

html.tag_jobs {

background-color: yellow;

}

</style>

And then those CSS styles will apply to only the /tagged/jobs page.

I use {URLSafeTag} because if the tag has a space in it, that would make it two classes. I think {URLSafeTag} replaces spaces with underscores.