drupal portal platform integration

Users of a drupal based site can integrate the pgn4web chessboard using a custom bbcode allowing entering PGN games in drupal articles.

Two options are available:

• installing pgn4web on your site and using a sophisticated bbcode supporting display options and unlimited games
• using pgn4web from a different site

See for instance the pgn4web test drupal site (this is a test site, things might occasionally be broken), or look at the users sites gallery.

The following procedures have been tested with drupal version 7.0 and the Extensible BBCode module version 7.x-1.2.

screenshot

integration guidelines: installing pgn4web on your site

usage

This method allows displaying chess games by entering the following tag within the content of your article:

[pgn parameter=value ...] 
... chess games in PGN format ...
[/pgn]

Tag parameters:

• showmoves=figurine|text|puzzle|hidden
• initialgame=first|last|random|number
• initialvariation=number
• initialhalfmove=start|end|random|comment|number
• autoplaymode=game|loop|none

Please note that, differently from pgn4web plugins for other platforms, the tag parameters must be lowercase.

Example:

[pgn initialhalfmove=16 autoplaymode=none]

[Event "World championship"]
[Site "Moscow URS"]
[Date "1985.10.15"]
[Round "16"]
[White "Karpov"]
[Black "Kasparov"]
[Result "0-1"]

1. e4 c5 2. Nf3 e6 3. d4 cxd4 4. Nxd4 Nc6 5. Nb5 d6 6. c4 Nf6 7. N1c3 a6 8.
Na3 d5 9. cxd5 exd5 10. exd5 Nb4 11. Be2 Bc5 12. O-O O-O 13. Bf3 Bf5 14.
Bg5 Re8 15. Qd2 b5 16. Rad1 Nd3 17. Nab1 h6 18. Bh4 b4 19. Na4 Bd6 20. Bg3
Rc8 21. b3 g5 22. Bxd6 Qxd6 23. g3 Nd7 24. Bg2 Qf6 25. a3 a5 26. axb4 axb4
27. Qa2 Bg6 28. d6 g4 29. Qd2 Kg7 30. f3 Qxd6 31. fxg4 Qd4+ 32. Kh1 Nf6 33.
Rf4 Ne4 34. Qxd3 Nf2+ 35. Rxf2 Bxd3 36. Rfd2 Qe3 37. Rxd3 Rc1 38. Nb2 Qf2
39. Nd2 Rxd1+ 40. Nxd1 Re1+ 0-1

[/pgn]

installation

First step is for the site administrator to install the Extensible BBCode module; please make sure you download and install the release corresponding to your version of drupal.

Second step is the activation of the Extensible BBCode module (administer -> site building -> modules); the minimal requirement is to activate the Extensible BBCode component (you can leave out the built-in bbcodes if you don't need them otherwise).

Final step is the creation of a custom BBcode (administer -> site configuration -> bbcode settings) with name pgn, leaving all the tag options tickboxes unticked.

The reccomended value for the replacement code is:

<script type='text/javascript'>
var pgn4webPath = "/pgn4web";
var pgn4webTextareaIdNum;
if (pgn4webTextareaIdNum === undefined) { pgn4webTextareaIdNum = 1; }
pgn4webTextareaId = "pgn4web_" + pgn4webTextareaIdNum++;
document.write("<textarea id='" + pgn4webTextareaId +"' style='display: none;'>");
</script>
{content}
</textarea>
<script type='text/javascript'>
document.getElementById(pgn4webTextareaId).value = document.getElementById(pgn4webTextareaId).value.replace(/<[\s\/]*(br|p)[\s\/]*>/gi, ' ');
height = 268;
if (!(am = "{autoplaymode}")) { if (!(am = "{am}")) { am = "l"; } }
if (!(sm = "{showmoves}")) { if (!(sm = "{sm}")) { sm = "f"; } }
if ((sm == "puzzle") || (sm == "p")) { hd = "v"; } else { hd = "j"; }
if (!(ig = "{initialgame}")) { if (!(ig = "{ig}")) { ig = "f"; } }
if (!(iv = "{initialvariation}")) { if (!(iv = "{iv}")) { iv = "0"; } }
if (!(ih = "{initialhalfmove}")) { if (!(ih = "{ih}")) { ih = "s"; } }
multiGamesRegexp = /\s*\[\s*\w+\s*"[^"]*"\s*\]\s*[^\s\[\]]+[\s\S]*\[\s*\w+\s*"[^"]*"\s*\]\s*/m;
if (multiGamesRegexp.test(document.getElementById(pgn4webTextareaId).value)) { height += 34; }
document.write("<iframe src='" + pgn4webPath + "/board.html?am=" + encodeURI(am) + "&d=3000&ig=" + encodeURI(ig) + "&iv=" + encodeURI(iv) + "&ih=" + encodeURI(ih) + "&ss=26&ps=d&pf=d&lcs=ZeyT&dcs=OImt&bbcs=OImt&hm=b&hcs=xnm_&bd=c&cbcs=Xe2L&ctcs=l4It&hd=" + encodeURI(hd) + "&md=" + encodeURI(sm) + "&tm=13&fhcs=$$$$&fhs=14&fmcs=$$$$&fccs=v71$&hmcs=OImt&fms=14&fcs=m&cd=i&bcs=ZeyT&fp=13&hl=t&fh=b&fw=p&pi=" + pgn4webTextareaId + "' frameborder='0' width='100%' height='" + height + "' scrolling='no' marginheight='0' marginwidth='0'>your web browser and/or your host do not support iframes as required to display the chessboard</iframe>");
</script>

Please remember to set the variable pgn4webPath above to the path of the pgn4web folder on your site.

After adding/modifying the Extensible BBcode plugin and or adding/modiying the custom BBcode, it is recommended to clear drupal cached data in order for the pages to use the latest BBcode definitions. Drupal cached data can be cleared from the administration area (administer -> site configuration -> performance).

Please note these settings apply a predefined set of colors and options to match the default drupal template; if you need to change any of the colors and options (the parameters after board.html in the code above) you can refer to the board widget instructions wiki page or ask for support.

The instructions above require pgn4web 1.91 or later and requires that drupal and pgn4web are on the same domain.

At this point you should be able to add chess games to your drupal articles by using the [pgn] tag, as in the example above from the 1985 world championship.
In order for the pgn tag to be properly converted into a pgn4web chessboard end users need to select the BBcode option for the article input format.
In addition, end users should make sure that drupal automatically cretaed summary for the article does not cut across the PGN data, otherwise the article presented in summary mode will not show the chessboard properly: modify the display settings of the teaser (structure -> content types -> article/basic page -> display settings). Otherwise the end users should use the split summary at cursor option for the article, manually setting the split location outside the [pgn] ... [/pgn] tag.

integration guidelines: using pgn4web from a different site

In case you need to install drupal and pgn4web on different domains, or in case you cannot install pgn4web on your site and you want to use the pgn4web site, you can configure a lightweight version of the pgn bbcode with a limitations on the size of the PGN data is to approximately 2000 characters.

This method is implemented using the following alternative value for the replacement code.

<script type="text/javascript">
var pgn4webURL = "http://pgn4web.casaschi.net";
if (!document.getElementById("pgn4webEncoderScript")) { document.write('<script id="pgn4webEncoderScript" type="text/javascript" src="' + pgn4webURL + '/pgn-encoder.js"></' + 'script>'); }
</script>
<script type='text/javascript'>
var pgn4webTextareaIdNum;
if (pgn4webTextareaIdNum === undefined) { pgn4webTextareaIdNum = 1; }
pgn4webTextareaId = "pgn4web_" + pgn4webTextareaIdNum++;
document.write("<textarea id='" + pgn4webTextareaId +"' style='display: none;'>");
</script>
{content}
</textarea>
<script type='text/javascript'>
pgnText = document.getElementById(pgn4webTextareaId).value;
pgnText = pgnText.replace(/<\s*br\s*\/>/gi, ' ');
pgnText = pgnText.replace(/<\s*\/*p\s*>/gi, ' ');
height = 268;
if (!(am = "{autoplaymode}")) { if (!(am = "{am}")) { am = "l"; } }
if (!(sm = "{showmoves}")) { if (!(sm = "{sm}")) { sm = "f"; } }
if ((sm == "puzzle") || (sm == "p")) { hd = "v"; } else { hd = "j"; }
if (!(ig = "{initialgame}")) { if (!(ig = "{ig}")) { ig = "f"; } }
if (!(iv = "{initialvariation}")) { if (!(iv = "{iv}")) { iv = "0"; } }
if (!(ih = "{initialhalfmove}")) { if (!(ih = "{ih}")) { ih = "s"; } }
multiGamesRegexp = /\s*\[\s*\w+\s*"[^"]*"\s*\]\s*[^\s\[\]]+[\s\S]*\[\s*\w+\s*"[^"]*"\s*\]\s*/m;
if (multiGamesRegexp.test(pgnText)) { height += 34; }
pgnEncoded = EncodePGN(pgnText);
document.write("<iframe src='" + pgn4webURL + "/board.html?am=" + encodeURI(am) + "&d=3000&ig=" + encodeURI(ig) + "&iv=" + encodeURI(iv) + "&ih=" + encodeURI(ih) + "&ss=26&ps=d&pf=d&lcs=ZeyT&dcs=OImt&bbcs=OImt&hm=b&hcs=xnm_&bd=c&cbcs=Xe2L&ctcs=l4It&hd=" + encodeURI(hd) + "&md=" + encodeURI(sm) + "&tm=13&fhcs=$$$$&fhs=14&fmcs=$$$$&fccs=v71$&hmcs=OImt&fms=14&fcs=m&cd=i&bcs=ZeyT&fp=13&hl=t&fh=b&fw=p&pe=" + pgnEncoded + "' frameborder=0 width=100% height=" + height + " scrolling='no' marginheight='0' marginwidth='0'>your web browser and/or your host do not support iframes as required to display the chessboard</iframe>");
</script>

Please remember to set the variable pgn4webURL above to the URL of the pgn4web server you plan to use.