En Passant

Oops. I have discovered, by accessing the blog from my new work computer, that the chess board does not display properly in Internet Explorer. About half the board doesn’t display the black/white squares as expected. I use Firefox (and will do so at work once I get the computer set up the way I want), but it’s no good to have a game viewer that isn’t viewable in the most used browser.

I’m not one to get on the anti-Microsoft bandwagon, and I did not have much of an issue with Vista, but I don’t understand how standardized protocols can be rendered so differently. I mean, read the RFCs or something!

Anyway, I will try to find a fix for this but in the meantime if you really want to play over the games (trust me, they aren’t worth it), use Firefox.

The ChessTempo game viewer is a Javascript application that requires some finagling to get to work with a Wordpress blog. This post will go over all that in gory detail, so hopefully others can have an easier time – and also so that if/when I change themes or lose my notes, I’ll remember what to do.

Firstly, the way the viewer works is by specifying a game, in PGN format. This can either be done “inline” (pasting the entire game within the calling code) or by giving the file name. The former seems awkward and messy to me, especially if you have a long game (or multiple games) with many comments. In order to do the latter I need to upload the game file to this site. Seems simple, but there is a catch.

I should note that I am using GoDaddy web hosting, where Wordpress is an installed application on my server instance. This works differently from a straight Wordpress.com blog, where you do not have server space outside of the blog itself. I am not sure of this, but I believe your option of uploading files is limited in this scenario.

So, assuming you have a file system to upload files to, there are two ways to go about it. One is to just use whatever upload interface is available (ftp, GoDaddy file manager, etc) and place the file where you want it. The other is to upload files from within Wordpress itself. Because I wanted to do everything from within Wordpress and not have to open a separate app/window just to upload the file, I went this route. But as I said, there is a catch.

By default Wordpress only allows for the uploading of certain file types, such as images and other media. In order to allow it to accept PGN files, I had to add that file type to its “whitelist”. This can be accomplished by installing the PJW Mime Config plugin.

After doing that, I still had a problem – the built-in uploader only places files in a predetermined directory. I wanted to place all games in a separate directory, and in order to do this I found and installed the WP Easy Uploader plugin. Apparently this plugin also allows for uploading arbitrary file types, so the first plugin probably isn’t needed – but since I already installed and activated it, I don’t feel like removing those changes and testing that theory out. Feel free to experiment.

In any case, now I can place PGN files in any directory I want. Next step, call the viewer and have it display the game.

Here are the lines necessary to call the viewer:

<script type="text/javascript"  src="http://chesstempo.com/js/pgnyui.js"> </script>
<script type="text/javascript"  src="http://chesstempo.com/js/pgnviewer.js"> </script>
<link  type="text/css"  rel="stylesheet"  href="http://chesstempo.com/css/board-min.css"> </link>
<script type="text/javascript">
  new PgnViewer (
   { boardName: "game123",
      pgnFile: '/chessgames/game.pgn',
      pieceSize: 35 }  );
</script>
<style type="text/css"/>
 .ct-black-square
 {
    background: url("/images/green_marble.jpg") no-repeat;
 }
 .ct-white-square
 {
    background: url("/images/white_marble.jpg") no-repeat;
 }
</style>
<div id="game123-container" style="float: left; margin-right: 20px;"></div>
<div id="game123-moves"></div>
<div style="clear: both;"></div>

The first three lines tell Wordpress where to find the script files, and also to load the CSS that formats the look of the viewer. These initialization lines should be placed in the beginning of the web page, the head section. So I went to the edit page of my theme, and added the following to the header.php file:

<script type="text/javascript"  src="http://chesstempo.com/js/pgnyui.js"> </script>
<script type="text/javascript"  src="http://chesstempo.com/js/pgnviewer.js"> </script>
<link  type="text/css"  rel="stylesheet"  href="http://chesstempo.com/css/board-min.css"> </link>

The remaining lines are to be called within the specific post, replacing “game.pgn” with the specific game file and “game123″ with a unique identifier. This last is important; on the main blog page you see multiple posts, and if you call each game with the same identifier, all you will see is the same game displayed in all the posts.

You will notice I made some modification to the default CSS, by specifying marble texture for the black and white squares. In addition, I added a div wrapper around the elements that display the board and moves. I did this so that the moves would appear to the right of the board display, instead of below it. And because of issues I read involving the “float” parameter, I felt I had to add a “clear” element at the end, to avoid causing display issues with the rest of the post (or other posts that would follow from the main page). I don’t know if it’s needed; the first time I added the game I did not include it, but my knowledge of HTML and CSS is limited and I’d rather be safe than sorry.

So that’s it. Once you get the upload and header customization done, all you need to do is add the lines above and you can display a chess game. If I was motivated (or had the time to learn PHP) I would look at integrating this into Wordpress, as an actual plugin. That way, I could just have a button added to the post editor where I enter in the game file I want, and all the code would be automatically added to the post. But as it is, I am happy it works and hope whoever reads this can benefit from these instructions.

If anyone was reading this blog in the last month – and if Wordpress stats are to be believed, that would be no one – they would have noticed multiple posts decrying my inability to find a workable chess game viewer, a complaint about political bias in an episode of Law & Order: SVU, and a long whine about chess openings and how I can never seem to find one I can live with for long.

Well I have some good news. I finally did find and figure out how to use a game viewer, and I decided to delete all those other posts and spare you, dear reader, from my trials and tribulations. I also wanted this blog to appear more professional, or at least like I knew what I was doing. Of course by admitting this I am exposing the sad truth, but that only matters if anyone is reading this.

In any case, here is a random bad game I played against the computer – I’m not normally this awful, I just wanted a quick game to display. Not that I don’t regularly lose against GNUChess even when I am trying, but I usually make it past move 18. Usually.

About the only thing I’d like to see added to this viewer is the extended PGN data, such as player names, ratings, etc. Until I figure that out I’ll just have to remember to write that info when introducing the game. Ah, and I just noticed that when I switch between Visual and HTML in the Edit Post section, I lose some of the code I need to display the game. The trick appears to be to do all writing in Visual first, then when ready to post, go to HTML and copy/paste the code.

In the next post I will go into detail on how I configured the viewer and got it to work with Wordpress.

Game viewer by ChessTempo (with some style modifications by me).