The S2 HowTo Journal

Tips, Tricks, and Tutorials for Basic S2 Customization

Previous Entry Share Next Entry
[paidaccount] [gradient strip] 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.

This tutorial requires the creation of a theme layer. If you already have a theme layer, you will need to edit it and add the code below. If you do not have a theme layer, you will need to create one by following the instructions in the Theme Layer tutorial.

In the Gradient Strip layout, you can add images between the comment, edit, and other links by overriding the Page::print_entry() and CommentInfo::print_readlink() functions. These images will replace the symbols that normally appear between the links.

Your image file must be in a valid format (common ones are .jpg, .gif, and .png) and be hosted on a website which allows remote loading to LiveJournal.

First, copy the code below, making sure to include everything contained in the box, and paste it into your theme layer:

function Page::print_entry (Entry e){
  var string divider_image = "http://www.example.com/yourimage.jpg";
  lay_content_box_top();
  $this->lay_entrymeta($e);
  $e->print_text();

  """<div class="commentlinks"><img src="$divider_image" /> """;
    var Link editlink = $e->get_link("edit_entry");
    var Link edittagslink = $e->get_link("edit_tags");
    var Link memlink = $e->get_link("mem_add");
    if ($*text_editlink == "") { $*text_editlink = $editlink.caption; }
    if ($*text_memlink == "") { $*text_memlink = $memlink.caption; }
    if (defined $editlink and $editlink.url != "") { """<a href="$editlink.url">$*text_editlink</a> <img src="$divider_image" /> """; }
    if (defined $edittagslink and $edittagslink.url != "") { """<a href="$edittagslink.url">$*text_edittagslink</a> <img src="$divider_image" /> """; }
    if (defined $memlink and $memlink.url != "") { """<a href="$memlink.url">$*text_memlink</a> <img src="$divider_image" /> """; }
    $e.comments->print();
  """</div>""";
  lay_content_box_bottom();
}

function CommentInfo::print_readlink() {
  var string divider_image = "http://www.example.com/yourimage.jpg";
  var Page p = get_page();
  if ($.count > 0 or $.screened) {
    """<a href="$.read_url">""" + get_plural_phrase($.count, $p.view == "friends" ? "text_read_comments_friends" : "text_read_comments") + """</a> <img src="$divider_image" /> """;
  }
}

Next, replace each instance of http://www.example.com/yourimage.jpg with the URL of the image you wish to place between your comment links.

Once you have edited the image URLs, you can save your theme layer by clicking on the "Save & Compile" button at the top of the screen. Your changes will not take effect until you apply your theme layer by selecting it on the Customize Journal page.

Contributed by alsatia.


Comments Disabled:

Comments have been disabled for this post.

?

Log in

No account? Create an account