?

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!

Comments

( 5 comments — Leave a comment )
ex_uniquewo
Jul. 9th, 2008 05:40 pm (UTC)
Great idea! I'm using this at Component Help. Thanks for coding and sharing.
anti_aol
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 ... :)
stickykeys633
Oct. 19th, 2008 05:40 pm (UTC)
Awesome! Still works like a charm!
danielefton
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
av8rmike
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
S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  

S2 Help Communities

Tags

Powered by LiveJournal.com
Designed by chasethestars