Do you have a chess website? Are you a member of a Chess Team or Club? Would you like to display your team or club games on the web so you can watch them later?
This page describes a fairly easy way you can put collections of chess games on the web. This approach is an adaptation of Paolo Casaschi’s pgn4web open-source javascript chessboard.
For this example, we’ll use the name “Forest Lawn Chess Team.” To demonstrate how to use game files, we’ll borrow a collection of games from Bobby Fischer’s 60 Most Memorable Games.
This is what the finished page looks like. (look here)
You can use this template to create game display pages for your own chess club, chess team or chess website. Here’s how.
STEP 1 - At your web hosting location, create a new folder. Call it “ChessGamesCollection”. (By the way, capital letters matter, so you’ll want to spell it exactly like it is here. Also don’t use the quote marks--just the words in-between.)
STEP 2 - Next visit http://pgn4web.casaschi.net/home.html and download Paolo Casaschi’s latest version of pgn4web.zip. (There will be some numbers in the file name. For example, it might say pgn4web-1.83.zip.)
After downloading and unzipping the package, you will find many files. One of the files is called pgn4web.js. Take that one file (pgn4web.js) and upload it to the new folder which you just created in Step 1.
STEP 3 - Now click on and download this package... WhatYouNeed.zip. After unzipping this folder, you will see 22 files. Eventually you will upload all these files to the ChessGamesCollection folder mentioned earlier, but first...
STEP 4 - There are two files you’ll want to change. The first file to change is the one called “index.html”.
You can’t just double-click on “index.html” or your browser will try to open it as a web page. Instead, right-click (or control-click on Mac) and open the file in any text editing program. When you open it, you will see the html source code.
In the html source code, there are three lines that need editing. Not far from the top are some lines that say...
<title>
Forest Lawn Chess Team Presents Games of Bobby Fischer
</title>
This is the title line that will be displayed in small letters at the very top edge of the viewer’s browser. To edit this, leave all the arrows there and the word “title” whenever it appears, and leave the slash... but change the Forest Lawn line to match your organization or website. For example, you might say River Falls Chess Club Presents Games from the Winter Tournament.
Further down the source code, you’ll find the same information again, only this time it will be split into two lines. These are the titles that are displayed on the first inch or so of your page. As before, don’t change any of the arrows nearby--only the two lines that mention Forest Lawn and Bobby Fischer.
After making these three edits, SAVE your changes. This replaces the index.html file with a slightly edited index file that matches your club or website.
Step 5 - The other file that requires editing is the one called “GamesInPgnNotation.pgn”. If you open this file with a text editor, you’ll see how the 60 games of Bobby Fischer were written down in pgn format.
Replace this game collection with your own collection and then save the file. But don’t change the file name. It should still be called “GamesInPgnNotation.pgn”. (again, exact spelling matters, and no quotes.)
(By the way, the pgn notation allows you
to include information like...
Event
Site
Date
Round
White
Black
Result
ECO opening
...just follow the pattern in the pgn files for the Bobby Fischer games.)
Step 6 - Now take all 22 files you found when you downloaded and unzipped WhatYouNeed.zip, two of which you have edited, and upload all of them to the “ChessGamesCollection” folder you created in Step 1 (the folder that already has the pgn4web.js file in it). This gives you a total of 23 files in the folder.
Step 7 - Finally, link to it from one of your web pages. For example, if your site is hosted by KingKnightPawn.com, then you would create a link on one of your pages pointing to...
http://www.KingKnightPawn.com/ChessGamesCollection/
Okay, that’s about it. Have fun. If you have questions, you may write to the email address at the bottom of this page.
