Smarty: Insert / Comment Tags

Smarty This may have some use: {insert}. I noticed it when backing up my templates tonight… • Also, I’d like to make buttons that act like the quicktags in the Blogsome backend for commenting: so it inserts the relevant tags in. Will require some JavaScript, I assume…

Disabling Unneeded Source Items

I can’t use iTunesMusicStore (I live in Australia), and I don’t listen to podcasts (dialup connection, besides I’d much rather listen to something from my Classical Music collection on the train anyway, chills me out nicely…), so I don’t need either of these in the Source list under iTunes 5. The setting for disabling the iTMS has moved to Parental Controls, and there wasn’t a Disable Podcasts one before, but there is now. I used to use the arrows that appeared for searching my library, but the functionality of this seems to have vanished under iTunes 5, so I’ll leave it off for now.

Seperating Trackbacks and Comments

I can’t recall if this came up on the Blogsome forums or not, but some people are keen to seperate Trackbacks and Comments in the comment list. Sometimes, and especially for people new to blogs, Trackbacks don’t seem to make that much sense, so I thought I would try doing this on Blogsome. Googling seperate trackbacks comments wordpress turned up several sites, the first one I visited was from way back in July 2004, and was way to complicated to bother with.

The second one was better, and gave me the idea of how to do it. Then I remembered that there is a Template Tag called comment_type. I duplicated the main comment: the commentlist and the {foreach} that cycles through each comment, and used the following bit of code to get the {comment_type} into a variable (so I can test it):

1    {capture name=comment_type}{comment_type}{/capture}

It’s a simple matter to test this against a known value:

1    {if $smarty.capture.comment_type != 'Comment'}

And you know that you are working with a Trackback or Pingback. The first iteration of the commentlist only displays non-comments, the second only displays comments (it uses == 'Comment' instead). The last tricky bit was to figure out how to show Trackbacks from my own site in the class='owner' format (on here, in a reddish box rather than green). This required a little trick I had discovered earlier today:

1    {capture name=author_trackback}trackback@{bloginfo show='url'}{/capture}

And then the test is:

1    {if $smarty.capture.reader == $smarty.capture.author_trackback|replace:'http://':''}

(This assumes you have used my previous method for styling your own comments differently). The full text of my comments.html template then:

  1    <div id="commentarea">
  2    {if $post->ping_status}
  3        <p class='indented'>{_e text='The <acronym title="Uniform Resource Identifier">URI</acronym> to TrackBack this entry is:'} <em>{trackback_url}</em></p>
  4    {/if}
  5    
  6    <p class='indented'>{comments_rss_link link_text='<span class="rss"><abbr title="Really Simple Syndication">RSS</abbr></span> feed for comments on this post.'}</p>
  7    
  8    <h3 class="comments">{comments_number zero="Responses" one="1 Response" more="% Responses"} to &#8220;{the_title}&#8221;
  9    {if $post->comment_status == 'open'}
 10    <a href="#postcomment" title="{_e text='Leave a comment';}">&raquo;</a>
 11    {/if}
 12    </h3>
 13    
 14    {if $comments != ''}
 15      {capture name=author}{the_author_email}{/capture}
 16      {capture name=author_trackback}trackback@{bloginfo show='url'}{/capture}
 17    
 18      <h3 class="comments">Trackbacks / Pingbacks</h3>
 19      <ol class="commentlist">
 20      {foreach from=$comments key=key item=comment}
 21        {globalvar var='comment' value=$comment}
 22        {capture name=comment_type}{comment_type}{/capture}
 23        {if $smarty.capture.comment_type != 'Comment'}
 24            {capture name=reader}{comment_author_email}{/capture}
 25            {if $smarty.capture.reader == $smarty.capture.author_trackback|replace:'http://':''}
 26            <li class="owner" id="comment-{comment_ID}">
 27            {else}
 28            <li class="alt" id="comment-{comment_ID}">
 29            {/if}
 30            From the site {comment_author_link}:
 31        {comment_text}
 32            Posted on {comment_date} at {comment_time}.
 33            {edit_comment_link text="Edit this trackback", before='<span class="button">' after="</span>"}
 34        </li>
 35        {/if}
 36      {/foreach}
 37      </ol>
 38    
 39      <h3 class="comments">Comments</h3>
 40      <ol class="commentlist">
 41      {foreach from=$comments key=key item=comment}
 42        {globalvar var='comment' value=$comment}
 43        {capture name=comment_type}{comment_type}{/capture}
 44        {if $smarty.capture.comment_type == 'Comment'}
 45            {capture name=reader}{comment_author_email}{/capture}
 46            {if $smarty.capture.reader == $smarty.capture.author}
 47        <li class="owner" id="comment-{comment_ID}">
 48            {else}
 49        <li class="alt" id="comment-{comment_ID}">
 50            {/if}
 51                <script type="text/javascript">document.write('<div class="right"><img src="http://www.gravatar.com/avatar.php?gravatar_id='); document.write(hex_md5("{comment_author_email}")); document.write('&size=50" /><\/div>'); </script>
 52                On <a href="#comment-{comment_ID}">{comment_date} at {comment_time}</a>, {comment_author_link} said: 
 53              {comment_text}
 54                {edit_comment_link text="Edit this comment", before='<span class="button">' after="</span>"}
 55        </li>
 56         {/if}
 57      {/foreach}
 58      </ol>
 59    
 60    {else} _<!-- this is displayed if there are no comments so far -->_
 61        <p class='indented'>{_e text="No comments yet."}</p>
 62    {/if}
 63    
 64    <h3  class="comments">{_e text="Leave a Reply"}</h3>
 65    {if 'open' == $post->comment_status}
 66         <form action="{$siteurl}/wp-comments-post.php" method="post" id="commentform">
 67        <p>
 68          <input type="text" name="author" id="author" class="textarea" value="{insert name=var var=comment_author}" size="28" tabindex="1" />
 69           <label for="author">{_e text="Name"}</label> {if $req != ''} {_e text='(required)'} {/if}
 70        <input type="hidden" name="comment_post_ID" value="{$post->ID}" />
 71        <input type="hidden" name="redirect_to" value="{$redirect_to}" />
 72        </p>
 73    
 74        <p>
 75          <input type="text" name="email" id="email" value="{insert name=var var=comment_author_email}" size="28" tabindex="2" />
 76           <label for="email">{_e text="E-mail"}</label> {if $req != ''} {_e text='(required)'}{/if}
 77        </p>
 78    
 79        <p>
 80          <input type="text" name="url" id="url" value="{insert name=var var=comment_author_url}" size="28" tabindex="3" />
 81           <label for="url">{_e text="<acronym title='Uniform Resource Identifier'>URI</acronym>"}</label>
 82        </p>
 83    
 84        <p>
 85          <label for="comment">{_e text="Your Comment"}</label>
 86        <br />
 87          <textarea name="comment" id="comment" cols="60" rows="12" tabindex="4"></textarea>
 88              <input type="hidden" id="textarea_next_time" name="textarea_next_time" value="60,12" />
 89        </p>
 90    
 91        <p>
 92          _<!--input disabled name="preview" type="image" tabindex="5" src="/images/preview.png" size="75%" /-->_
 93          <input name="submit" type="image" tabindex="6" src="/images/post_comment.png" size="75%" />
 94        </p>
 95    
 96    <p>{_e text="Line and paragraph breaks automatic, e-mail address never displayed, <acronym title='Hypertext Markup Language'>HTML</acronym> allowed:"} <code>{allowed_tags}</code>, 'Smart' Smileys.</p>
 97    
 98    
 99    </form>
100    {else} _<!-- comments are closed -->_
101    <p>{_e text="Sorry, the comment form is closed at this time."}</p>
102    {/if}
103    </div>

Using CSS to replace tables.

Using some classy CSS, you can make text flow nicely around images, rather than having to set stuff up using tables, and demonstrated in this post. Basically, you just put the following into your CSS file:

1    .left {
2        float:left;
3    }
4    
5    .right {
6        float:right;
7    }

And then wrap the image in <div class='left'> ... </div> tags (or class='right' to make it sit on the right of the text). You can use margin:15 0 15 25; for example to put a margin of 15 on the top, 0 on the right, 15 on the bottom and 25 on the left, so that the text does not come right up against the image. I also change some text properties in my CSS, so I can include a caption inside the <div class='left/right'> ... </div> tags and it will be italic, centred and so on. I’ll leave these as an exercise to the reader. If you just use the code above, you can also use this whenever you have post-links, or page-links, so that one always appears on the left, and the other on the right. I have now removed every table from the site, except the one on the page this article links to.