Gravatars in JavaScript for Blogsome

To create an image tag for a Gravatar in JavaScript, for use on Blogsome. Download the md5.jpg file (it’s really a .js file, but we are tricking Blogsome into allowing it to be uploaded), and upload it to your site. Put the following code into your Main Page template (probably in the head section): <script type="text/javascript" src="/images/md5.jpg" /> Put The following code where you want the Gravatar to appear: <script type="text/javascript">document.write('<img src="http://www.gravatar.com/avatar.php?gravatar_id='); document.write(hex_md5("{comment_author_email}")); document.write('&size=20" />'); </script> You can change the size of your Gravatar image with the size=20 part, set it to whatever value you want. Enjoy! **Edit: **Don’t use this code, as it displays the email address to the browser, and then asks it to generate the MD5 fingerprint. This means that a Spam-collector would actually have access to the raw email address. I’ve diasabled the code until I figure out how to get around this…

Connections Template

I’ve put the current contents of my template files up on this page. You’ll always be able to find the latest version of my templates there.

JavaScript in Posts

Clearly, this is the first time I’ve tried to do this. No, that’s not quote true. I’ve been working on a post that does it, I just haven’t published it yet. I’ve discovered that JavaScript is really neat for doing lots of cool stuff. However, WordPress has a couple of issues with it. It’s okay to use JavaScript in template files, or include external JavaScripts, and even to use JavaScript in Pages, but if you try to use it in Posts, it fails. It converts “ into &quot;, and ‘ into &apos;. Or more strictly, into the #8220;-ish version. Which isn’t much good, as then any JavaScript which uses quotes, to define a string, for instance, will not work. You could define a function elsewhere, and then just call it, that should work. But not do anything that requires quotes. There seem to be a couple of WordPress workarounds, but not in WordPress-MU. Or Blogsome, that means. I may have a look at the source, to see if I can figure out a way to make it work nicer. Oh, and that reminds me. I need a decent text editor for Windows. Notepad just ain’t cutting it anymore. Especially if I try to open a Unix file.

Better Quicktags

Some time ago, I wrote a replacement script for the Quicktags that are present in the Blogsome backend. It seems that they have been implemented! You now have the ability to put <abbr> and <acronym> tags into a post, quickly and easily. Also, it’s possible to get the characters < and >, without having to remember what they look like. Try it out!

Converting Themes to Blogsome, Part 1

This is the first post in a series that will deal with Blogsome theme conversions. Part 2 can be found at Blogsome Themes, part 2. To begin with, you will need the following things:

  • A blog created with Blogsome. I suggest that if you already have a blog that has posts on it, you create a new one, just to tweak until the theme is just right. That way, your real blog will continue to work, no matter what. I’ll assume you have a Blogsome blog to test on, and know a bit about the backend (Dashboard, and where to find the various options/tools).
  • The files required for your theme. Alex King has a great list of themes, and runs competitions occasionally, so go visit there if you want to find one, and don’t have one already.
  • Firefox, with the EditCSS extension installed, or the [EditCSS][7] bookmark
  • Patience

You should also bookmark the following sites:

  • The [WordPress Codex][8], especially [Template Tags][9]
  • The [Smarty documentation][10]
  • The Blogsome [Forums][11]

I will use the following conventions in this document:

  • Button: a button that you click on. Will look different in each browser - usually it looks like the buttons in your Operating System, but not always.
  • Links that you need to click on will be bold.
  • Code that you modify will either look like this or this
  • Filenames will look like this.
  • Important, or unusual terms will be italic.

Converting a WordPress theme to Blogsome is not always easy, but is very rewarding, and you may learn something along the way. Finally, whilst I have gone to a lot of effort to ensure everything in this document is correct, I take no responsibility for any data loss. You should not have been working on your ‘proper’ blog anyway;).

Starting: Upload Image Files

Okay, let’s get started. The first thing you will want to do is upload all of your image files to your Blogsome blog. This is a much more time consuming process on Blogsome, as there is no automated way to do it. Under normal WordPress installations, you can usually FTP into the server, and dump all of the files you need. We need to click on the Upload button in the backend, and then on the Browse… button. Navigate to where the images you have as part of the theme are on your computer, and select the first one. Click the Upload button. When the page loads, record the information it gives you in a place you won’t lose it. Blogsome doesn’t provide the ability to look at lists of images, so if you forget it, you’ll need to try by trial and error to find it. Most of the images will have names that aren’t mangled by Blogsome’s server, so you should end up with a list of files like: /images/header.jpg /images/search.png /images/logo.gif What files you have will really depend on the theme you are using. There are some standard file names, but don’t expect them to be the same as everywhere else!

Update Style Sheet

You now are ready to insert your Style Sheet data. In the backend, click on Manage, and then on Files. Scroll down to the bottom of the page, and click on Site Style Sheet. After a few seconds, your Style Sheet will appear in the text editing box. We need to replace the entire contents of the text view with the contents of the theme’s stylesheet. This could have one of several names: typically it will end in .css, and more than likely it will be the only one. wp-layout.css, stylesheet.css and style.css are all likely candidates. We now need to examine the Style Sheet, and replace all instances of image filenames with their equivalent URL on your server. You can use relative URLs, so if you find something that looks like:

1        background:url(img/content_bg.gif) repeat;

You will want to make it look like:

1        background:url(/images/content_bg.gif) repeat;

You need to ensure you get every filename - otherwise the correct images will not appear! When you are done, you must save your changes. The Update Template! button will do this nicely. Righto! That’s the easy parts done. Next time, you will learn which template files Blogsome uses, and what data needs to go into each of them. You will also learn how to convert a PHP function to Smarty Tags. The next part of this article can be found at Blogsome Themes, part 2.

[7]: javascript:(function()%7Bfunction%20init()%7Bvar%20newline=unescape(%22%25%22+%220A%22),importCount=0,L=%5B%5D;dead=false;oldCSS=null;x=opener;ta=document.f.ta;ta.select();if(x.editStyles)%7Bta.value=x.editStyles.innerHTML;update();return;%7Dta.value=%22/%20Type%20CSS%20rules%20here%20and%20they%20will%20be%20applied%22+newline+%22to%20pages%20from%20’%22+location.host+%22’%22+newline+%22immediately%20as%20long%20as%20you%20keep%20this%20window%20open.%20/%22+newline+newline;function%20add(s)%7Bif(!s.disabled)%7Bvar%20y=%7Bsheet:s,readable:true,label:%22Imported%22,inline:false,shorturl:%22%22,fulltext:%22%22%7D;try%7Bfor(var%20k=0,m;m=s.cssRules%5Bk%5D;++k)if(m.type==3)add(m.styleSheet);%7Dcatch(er)%7By.readable=false;%7DL.push(y);if(s.ownerNode)%7By.label=s.ownerNode.tagName.toUpperCase()+%22-tag%22;if(!s.ownerNode.getAttribute(%22src%22)&&!s.ownerNode.href)y.inline=true;%7Dif(y.inline)%7By.label=%22Inline%20%22+y.label;y.fulltext=fix(s.ownerNode.innerHTML);%7Delse%20if(s.href.substr(0,13)==%22data:text/css%22)%7By.shorturl=%22%20contained%20in%20a%20data:%20URL%22;y.fulltext=fix(unescape(s.href.slice(14)));%7Delse%7B++importCount;y.importtext=%22@import%20%5C%22%22+s.href+%22%5C%22;%22;y.shorturl=%22%20%22+s.href.split(‘/’).reverse()%5B0%5D;if(!y.readable)%7By.fulltext=%22/%20Out-of-domain;%20imported%20above.%20/%22;%7Delse%20if(s.href.substr(0,5)!=%22http:%22)%7By.fulltext=%22/%20Non-http;%20imported%20above.%20/%22;%7Delse%7Bvar%20loadingText=%22/%20Loading%20(%22+(L.length-1)+%22)%20/%22;y.fulltext=loadingText;var%20p=new%20XMLHttpRequest();p.onload=function(e)%7Bta.value=ta.value.replace(y.importtext+newline,%22%22);y.fulltext=p.responseText;ta.value=ta.value.replace(loadingText,fix(y.fulltext));ta.value=ta.value.replace(firstNote+newline,%22%22);%7D;p.open(%22GET%22,s.href);p.send(null);%7D%7D%7D%7Dfunction%20fix(s)%7Bwhile((s%5B0%5D==newline)&&s.length%3E1)s=s.slice(1);while((s%5Bs.length-1%5D==newline)&&s.length%3E1)s=s.substr(0,s.length-1);s=s.replace(/@import.;/ig,function()%7Breturn%20%22/%20%22+RegExp.lastMatch+%22%20/%22;%7D);return%20s;%7Dfor(var%20i=0,ss;ss=x.document.styleSheets%5Bi%5D;++i)add(ss);var%20imports=%22%22,main=%22%22;var%20firstNote=%22/%20Style%20sheets%20whose%20contents%20could%20be%20loaded%20were%20/%22+newline+%22/%20imported%20instead.%20%20Rule%20order%20may%20be%20incorrect%20%20%20/%22+newline+%22/%20as%20a%20result.%20/%22+newline;if(importCount)%7Bta.value+=firstNote;%7Dfor(var%20i=0;ss=L%5Bi%5D;++i)%7Bif(ss.importtext)%7Bimports+=ss.importtext+newline;%7Dmain+=%22/%20%22+ss.label+%22%20style%20sheet%22+ss.shorturl+%22%20*/%22+newline;main+=newline;main+=ss.fulltext;main+=newline;main+=newline;main+=newline;%7Dta.value+=imports+newline+main;update();%7Dfunction%20update()%7Btry%7Bif(!x%7C%7Cx.closed)%7Bta.style.backgroundColor=%22%23ddd%22;return;%7Dx.editStyles;%7Dcatch(er)%7Bta.style.backgroundColor=%22%23fdc%22;setTimeout(update,150);dead=true;return;%7Dif(dead)%7Bdead=false;ta.style.backgroundColor=%22%22;oldCSS=null;%7Dif(!x.editStyles)%7Bvar%20newSS;newSS=x.document.createElement(%22style%22);newSS.type=%22text/css%22;x.document.getElementsByTagName(%22head%22)%5B0%5D.appendChild(newSS);x.editStyles=newSS;oldCSS=null;for(var%20i=0,ss;ss=x.document.styleSheets%5Bi%5D;++i)ss.disabled=true;%7Dif(oldCSS!=ta.value)%7BoldCSS=ta.value;x.editStyles.innerHTML=ta.value;%7DsetTimeout(update,150);%7Dy=open(‘’,’’,’resizable,scrollbars=yes,width=550,height=520’);y.document.write(‘%3Ctitle%3EEdit%20Styles%3C/title%3E%3Cstyle%3E.ec%20%7B%20width:%20100%25;%20height:%20100%25;%20border:%20none;%20margin:%200px;%20padding:%200px;%20%7D%3C/style%3E%3Cbody%20class=%22ec%22%3E%3Cform%20name=%22f%22%20style=%22margin:%200px;%22%20class=%22ec%22%3E%3Ctextarea%20name=%22ta%22%20wrap=%22soft%22%20style=%22margin:%200px;%20border:%200px;%20width:100%25;%20height:100%25;%22%20class=%22ec%22%3E%3C/textarea%3E%3Cscript%3E’+update+init+’init();%3C’+’/script%3E’);y.document.close();%7D)() [8]: http://codex.wordpress.org [9]: http://codex.wordpress.org/Template_Tags [10]: http://smarty.php.net/manual/en/ [11]: http://www.blogsome.com/forum/index.php

Related Stories.

After hacking through the source, I finally figured out how to make {relatedstories} work. The trick is that it stores the date in a variable called $relatedstories.

 1    {relatedstories}
 2    {if $relatedstories}
 3      <h2>Related Stories</h2>
 4      <ul>
 5      {foreach from=$relatedstories key=key item=story}
 6        <li> <a href="{get_permalink id=$story->ID}" >
 7            {$story->post_title}</a>
 8        </li>
 9      {/foreach}
10      </ul>
11    {/if}

I’ve got it set up in my sidebar at the moment. It’s smart enough to figure out when it’s not a single post page, and won’t show then, so you don’t need any fancy extra Smarty Tags to only show in single post view. Oh, and it also sets the variable $relatedstoriesWords, so it’s possible to do something like: <h2 title="{$relatedstoriesWords}">Related Stories</h2> and when you hover over the title, it tells you the words it’s looking for. I’m still working on how to truncate the title. {$story->post_title|truncate} fails dismally. Quite annoying.

Connections Theme Edits Finished.

I’ve finished the edits I wanted and needed to make to Patricia Müller’s excellent (award winning) theme ‘Connections’. I had heaps of hassles with matching up <div> and </div> tags, and according to the XHTML Validator, I still haven’t got it completely right, but close enough for now! Also, (and young coders take note) Internet Explorer (Win) was not handling HTML comments the same way every other (read: real) browser does. Removing these comments, or uncommenting them, fixed the problem with pages not displaying blog comments and the sidebar. Finally, Netscape (Mac) doesn’t display the “rap” image, nor does IE Mac display any images.  If you are using either of these products, get Camino, Firefox, or just use Safari, dammit! Oh, and I wonder if anyone knows where the photo of me was taken!

Search issues

Bug: if you search on this blog, it only searches within the currently active ‘group’, whether that’s a category, day or post, or the whole blog. The code in question is:

1    <form id="searchform" method="post" action="{$Smarty.server.PHP_SELF}">
2        <div style="text-align:center">
3            <p><input type="text" name="s" id="s" size="20" /></p>
4            <p><input type="image" src="/images/search.png" name="submit" value="Search" /></p>
5        </div>
6    </form>

Obviously, the important part is the {$Smarty.server.PHP_SELF} section. Setting it to {$Smarty.server.SERVER_NAME} or several other things seems to make no difference!

Blogsome Forum RSS feed.

Blogsome has implemented RSS feeds in the forums: RSS: click if your RSS syndicator can handle feed: URIs. RSS: an http: link to the feed.

Arguments that don't work

I’ve come across several Smarty Tags that call WordPress functions that have listed arguments that don’t work. I didn’t bother too much about it - usually I can live with it. Then, I realised how I solved one instance of this happening: the Recent Comments plugin.

I downloaded the source to this, and looked at it. Besides there being some spelling mistakes, it had argument names which differed from the documented ones. No wonder it was failing when I tried to change the number of comments, and the comment length! So, looking at the code helped me solve the problem. Maybe it will with the other issues I have come across: most notably {previous_post_link} and {next_post_link}, and {edit_post_link}.

I’ll start with the {edit_post_link}. The codex says the argument I want to change is called text, but the source reveals it to be link. Changing this enabled me to change the text that is presented to whatever I want. The same goes for {edit_comment_link}.

I was originally using the tags {previous_post} and {next_post}, but was unable to change the previous post: next post: text that appeared. Changing the name of the argument from text to previous and next (as applicable) fixed this. Similarly, since {previous_post} and her sister are deprecated, {previous_post_link} has arguments that differ from those detailed in the Codex. The arguments it (and {next_post_link}) can handle are:
  • format - defaults to &laquo; %link. You need to have the %link where you want the URL to appear! You can add more stuff that you want to appear but not be part of the link itself.
  • link - defaults to %title. Add other text that you want to add into the link area.
  • in_same_cat
  • excluded_categories

Depending upon if you want an image clickable, you can either insert the code into the format or link argument. Just for fun, I included my favicon in the non-link section of the link text (ie, the format argument). I’ll leave it there for a while, just to prove it can be done…in the meantime, I’m going to fix the Codex.