Tumblr Themes – How to Separate Tags with Commas in Tumblr Themes

tumblrtumblr-themes

At the end of every post type in my Tumblr theme, I've got this code:

<p class="permalink">
   <a href="{Permalink}">{NoteCountWithLabel}</a>
   {block:HasTags} &nbsp;&nbsp; # filed under:
      {block:Tags}  
         <a href="{TagURL}">{Tag}</a>
      {/block:Tags}
   {/block:HasTags}
</p>

(I know the &nbsp; bit is not exactly a class act. It was my four second workaround, and it's not the purpose of this question, so bear with me!)

On a post with multiple tags, that yields:

this is what it looks like

If I just add a comma after {Tag}, making it <a href="{TagURL}">{Tag},</a>, I get:

too many commas

The last tag has an extraneous comma, and posts with only one tag would show the extra comma under this method, as well.

How do I add just the right number of commas?

Update:

Jeremy's answer below did what I wanted. But, in an attempt to get fancy be "standards-compliant" (though I don't know why anyone using IE8 would read my tumblr), I attempted to implement w3d's suggestion. So now the CSS looks like:

a.tag:before {
  content:", ";
}
a.tag:first-child:before {
  content:"";
}

The result is now:

updated screenshot

(n.b.: the line break is unrelated – I added that on purpose.)

So. What went wrong?

Best Answer

I've got another idea.

{block:Tags}<a class="tag" href="{TagURL}">{Tag}</a><span class="tagtail"></span>{/block:Tags}

This will add a span with the "tagtail" class after every tag.

Then, add this css:

span.tagtail + a.tag:before {
   content:", ";
}

This will select every tag anchor that comes after a tagtail span (so every one but the first). This way, we avoid the need to use the first-child or last-child selectors.

UPDATE:

If you want to ensure that the commas are styled apart from the anchor, I suppose you could also do:

{block:Tags}<span class="taghead">, </span><a class="tag" href="{TagURL}">{Tag}</a>{/block:Tags}

and then style it like:

span.taghead { display:none; }
a.tag + span.taghead { display:inline; }

However, this might need tweaking because browsers differ on overriding rules.

Related Topic