Mister Baltimore (av8rmike) wrote in s2expressive,
Mister Baltimore

Alphabetical Index on Tag Page

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!
Tags: !tutorial, $acct level:paid or perm, pageviews:tags, s2:theme layer
  • Post a new comment


    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened