Is there a way to retrieve all the tags of any tumblr post for my html custom theme?

Question

I am customizing a tumblr theme and I would like to know whether it is possible to retrieve all the tags of a post and use them as classes for my page container. So far, I have been able to achieve grabbing post tags in posts that just have one tag, using the following code:

<div id="page" {block:posts}{block:HasTags}{block:Tags}class={Tag}{/block:Tags}{/block:HasTags}{/block:Posts}>

But in those posts that have more than one tag, the above code only grabs the first tag. So, I was wondering if there's a way, perhaps adding some script to the head, that grabs all the post tags and allows the page to have several classes. Thanks so much.

Answer 1

There is a neat block that can accomplish this for you called {TagsAsClasses}

Just change your code to this:

<div id="page" class={TagsAsClasses}>

Or if you want to concatenate strings use something like:

<div id="page" class="customClass {TagsAsClasses}">

The {block:HasTags} is expecting to iterate over a block of html (like an anchor) and then output each tag link and tag name in the block, you cannot do that inside a classname selector. Luckily Tumblr provides this function to iterate over the array of tags and separate them with spaces inside the element attribute values.

See this answer for more information: https://webapps.stackexchange.com/a/27983