The S2 HowTo Journal

Tips, Tricks, and Tutorials for Basic S2 Customization

Previous Entry Share Next Entry
[paidaccount][classic] Adding an image between comment links
howto_user wrote in s2howto
Paid Accounts Only
The following tutorial requires creating and editing a custom style, 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.

One of the ways to make your comment links unique is to add an image in between them. This tutorial describes how you can do that in Classic. It will replace the function CommentInfo::print. This new code will be placed in a theme layer. If you already have a theme layer for this style, you can simply edit it. If you not, you will need to create one by following the instructions in the Theme Layer tutorial.

To make an image appear in between the comment links on your most recent entries view, you can add an <img> tag to the function CommentInfo::print. Your image should be a valid format (.jpg, .gif, .png, etc.) and hosted on some website that allows remote loading. An image tag is formatted like this:

<img src="http://www.example.com/username/image.jpg">

where http://www.example.com/username/image.jpg would need to be replaced with an actual image URL.

Now, you will need to add the following code to your theme layer:

function CommentInfo::print ()
{
    if (not $.enabled) { return; }
    "<p class='comments'>(";
    if ($.count > 0 or $.screened) {
        $this->print_readlink();
        """ <img src="http://www.example.com/username/image.jpg"> """;
    }
    $this->print_postlink();
    ")</p>";
}

If you use this method, the image will only appear if there are comments to an entry. You can make the image appear regardless of whether or not there are comments by moving the image tag this way:

function CommentInfo::print ()
{
    if (not $.enabled) { return; }
    "<p class='comments'>(";
    if ($.count > 0 or $.screened) {
        $this->print_readlink();
    }
    """ <img src="http://www.example.com/username/image.jpg"> """;
    $this->print_postlink();
    ")</p>";
}

Compile your layer, and it's ready to use. You will need to apply your theme layer via the Customize interface in order for your changes to take effect.

Written by </a></b></a>camomiletea, based on an S1 tutorial by </a></b></a>thewildrose.


Comments Disabled:

Comments have been disabled for this post.

?

Log in

No account? Create an account