December 1st, 2003

S2 View Types

In S2, all journal views are defined in one layout. Each view can be treated as an object, which contains functions and variables that can be used on that type of page. The "Page" itself is a umbrella over all the others, providing functions and variables that can be used on all views, with each view adding something specific to the general Page.

  • Page

    Page is the top class for S2 views. This means that all the other "views" stem from this one type of object. Page is the entry class for views: when you first write a layout, the function that prints the information is Page::print. All other views are "subclasses" of Page. All other "page" types will be able to use any functions and variables of the Page class. The functions and variables available to the Page class are described here. To specify the type of view you are currently looking at, each Page includes a variable, called "view" which defines what type of page is being viewed. This variable can be accessed by referring to the "view" variable attached to each page object. (This means that within any "Page" class or subclass, you can just call $.view.)

    • RecentPage - $.view = recent

      Child class of Page. Most recent entries page, formally known as the LASTN view in the previous style system. The RecentPage class includes some functions and variables which are specific to this page, such as the array of entries to be printed.

      • FriendsPage - $.view = friends

        Child class of RecentPage. This view is the friends view, which displays the aggregated entries of all your friends. The entries this view has contain more information (friends colors) and there is an additional title string that is set from the friends page title from their personal info. Other than this, there really isn't much of anything different between Friends and Recent pages.

    • YearPage - $.view = archive

      The YearPage is the former calendar view of S1. This type of view contains information about months and the number of posts made per day on each day. This view is the only view which does not contain any entry information, such as subjects or entry text.

    • MonthPage - $.view = month

      The Month Page has information on all the entries made within a specific month. This view type contains metadata on all these entries, although it does not contain entry text or user pictures. This view is generally used to generate a subject listing for a specific month.

    • DayPage - $.view = day

      This view will display all the entries of a single day. The entry information contained in this view is the same as in the RecentPage view, meaning it includes full entry text, subject, user pictures, etc. Entries in this view are sorted, by default, in chronological order, rather than the reverse chronological order used by the Friends Page and Recent Page.

    • EntryPage - $.view = entry

      A single entry and the comments attached to that entry. This view contains full entry information as well as information about all the comments that users have left. This view is the one that defines how actual entries look.

    • ReplyPage - $.view = reply

      A page to reply to a journal entry or comment. This page defines the way that your journal will react when you leave a comment or when you reply to another comment. It includes special functions to generate the reply form as well as information about how replies should be formatted.

    • TagsPage - $.view = tags

      TagsPage displays the list of all the tags that the viewer is allowed to see. It contains the information about tags, such as the security level and the number of times used.

[component] [paidaccount] Adding a counter

Because the Component layout includes a Free Text component that allows the use of HTML, it is not necessary to use this tutorial to add a counter. The preferred method of adding a counter to layouts is through the Free Text option, which is explained here. This tutorial is being retained for historical and informational purposes only.

Paid Accounts Only
The following tutorial requires creating and editing a custom theme, which in turn requires a paid, permanent, or early adopter account. Please read What are the paid account benefits? and How do I buy a paid account? to learn about the paid account benefits and how to buy a paid account.

It is possible for paid members to add additional code to their style that will allow them to display a counter on every page. This tutorial will cover how to add a counter to the sidebar of the Component style.

This tutorial requires you to turn on the "Free Text" component. You can do this by using the S2 customization interface at http://www.livejournal.com/customize/ . You will have to click 'Yes' under the "Enable Free Text" option. Note that you do not have to enter any free text to be displayed, only to turn the component on.

Next, you will need to edit your theme layer.

Once you have opened your theme layer, you will need to override the "print_free_text" function so that it prints an additional component. For information on how this works, please see this tutorial on adding components to the Component layout.

The following code will replace add a counter component below the free text component.

function print_free_text(Page p) { if ($*free_text_text and $*free_text) { print_comp_header($*free_text_text); """$*free_text"""; print_comp_footer(); } print_comp_header("Counter");

""" <a href="http://sm*.sitemeter.com/stats.asp?site=******" target="_top"> <img src="http://sm*.sitemeter.com/meter.asp?site=******" alt="Site Meter" border="0" /></a> """;

print_comp_footer(); }



Note that the counter code above is example code. This code should be replaced by the code that you obtain from your counter site. For more information on what counter services work properly in LiveJournal, please see http://www.livejournal.com/users/howto/1332.html . Note that LiveJournal does not allow Javascript, and, as such, no counters which use JavaScript will work properly.

If you prefer for your free text component to be below the counter component, simply use this code instead:

function print_free_text(Page p) { print_comp_header("Counter");

""" <a href="http://sm*.sitemeter.com/stats.asp?site=******" target="_top"> <img src="http://sm*.sitemeter.com/meter.asp?site=******" alt="Site Meter" border="0" /></a> """;

print_comp_footer(); if ($*free_text_text and $*free_text) { print_comp_header($*free_text_text); """$*free_text"""; print_comp_footer(); } }



Remember that in order for your counter to display, you must select your theme layer, which you can do via the S2 Customization interface.

This component will show on all views of your journal - Recent Entries, Each Entry and Reply Page, Friends page, Day View, Month view, and Calendar view. If you wish to change this, you will need to surround the section of the code above that displays the counter with a conditional statement so that this code displays only on a specific type of page. For example, if you would like your counter to only display on your recent entries page:

function print_free_text(Page p) { if ($*free_text_text and $*free_text) { print_comp_header($*free_text_text); """$*free_text"""; print_comp_footer(); } if ($p.view == "recent") { print_comp_header("Counter");

""" <a href="http://sm*.sitemeter.com/stats.asp?site=******" target="_top"> <img src="http://sm*.sitemeter.com/meter.asp?site=******" alt="Site Meter" border="0" /></a> """;

print_comp_footer(); } }



The types of views you can use are:
recent - Recent Entries Page
friends - Friends Page
archive - Calendar Page, which displays full year
month - Month Page, which displays a subject view of the entire month
day - Day Page, displaying entries of a single day
entry - Entry Page, displaying a single entry with comments
reply - Reply Page, displaying an entry with a reply form

Simply replace the "recent" above with one of the types above to modify where this code displays.

Thanks to xevinx for the original post on which this tutorial is based.