howto_user (howto_user) wrote in s2howto,
howto_user
howto_user
s2howto

[paidaccount] [gradient strip] Adding an Image Between Comment Links

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.

Tags: - gradient strip, image between comment links, paid accounts only
Subscribe

Comments for this post were disabled by the author