Log in

No account? Create an account

Previous Entry | Next Entry

Alphabetical Index on Tag Page

  • Jun. 19th, 2008 at 11:15 PM
As mentioned in this post in suggestions, this code will generate an alphabetical index of your tags horizontally at the top of your tags page. Each letter is a link to the first tag in your list starting with that letter, so clicking on it will scroll the page down to that tag. (This behavior is similar to that used in the Page Summary module in the sidebar.) Obviously, this code is more useful for journals or communities that have lots of tags.

For an example of what this looks like, check out this community's tag page!

This tutorial requires a Paid or Permanent account to create/edit theme layers. Follow the instructions in this post for creating a theme layer (if you don't already have one), and copy in this code at step 6.

function TagsPage::print_body() {
    print safe """<h2 class="asset-name page-header2">$*text_tags_page_header</h2>""";
    var string tag_index = "";
    var string initial = "";
    var TagDetail td;
    var TagDetail{} my_tags = {};

    foreach $td ($.tags) {
        $initial = $td.name->substr(0,1);
        if (not $tag_index->contains($initial)) {
            $tag_index = $tag_index + $initial;
            $my_tags{$initial} = $td;

    print """<div style="margin: 10px; word-spacing: 1em;">"""; # can edit style here
    foreach var string char ($tag_index) {
        print """<a href="#$char">$char</a> """;

    print "</div><ul>";
    foreach $td ($.tags) {
        var string idstring = "";
        $initial = $td.name->substr(0,1);
        if ($my_tags{$initial}.name == $td.name) {
            $idstring = " id=\"$initial\"";
        print safe """<li$idstring><a href="$td.url">$td.name</a></li>""";
    print "</ul>";

As it says in the comment, one could modify the inline style of the index however. I just chose something simple. At the moment, the tags only print in a simple list, no clouds or heirarchies or anything, but it shouldn't be too complicated to implement something else. Any questions, suggestions, problems, don't hesitate to comment!


( 5 comments — Leave a comment )
Jul. 9th, 2008 05:40 pm (UTC)
Great idea! I'm using this at Component Help. Thanks for coding and sharing.
Jul. 26th, 2008 07:55 pm (UTC)
This idea is fantastic! I'm using the code here now. I'm also using this to make my unwanted comment-bar links go away. Just awesome ... :)
Oct. 19th, 2008 05:40 pm (UTC)
Awesome! Still works like a charm!
Mar. 19th, 2009 12:27 pm (UTC)
I got this to work, but I'm wondering if it can be expanded upon.

I'm using nested tags with : as my divider. Is it possible to create links to each top level tag?

example http://danielefton.livejournal.com/tag/#writing
Apr. 6th, 2009 12:44 pm (UTC)
Sorry, I completely kept forgetting to check in on this. I'm not sure I understand how doing what you're asking would be more useful.
( 5 comments — Leave a comment )

Latest Month

March 2016

S2 Help Communities


Powered by LiveJournal.com
Designed by chasethestars