Users of phpBB based forums can integrate the pgn4web chessboard in their posts using a custom bbcode for PGN games, like this:
[pgn] ... PGN data ... [/pgn]
The pgn4web test phpBB site provides an implementation example (this is a test site, things might occasionally be broken).
The following procedure requires phpBB version 3 or above and has been fully tested with phpBB version 3.0.6
See generic instructions for the forum administrator to create custom bbcodes in phpBB.
The forum administrator should create a new BBcode with BBcode usage
string:
[pgn]{TEXT}[/pgn]
The reccomended value for the HTML replacement
string is:
<textarea id='pgn4web_' style='display: none;'>
{TEXT}
</textarea>
<iframe id='pgn4web_board' frameborder='0' width='100%' height='0' 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 type='text/javascript'>
"use strict";
var pgn4webPath = "/pgn4web";
var pgn4webTextareaIdNum;
if (pgn4webTextareaIdNum === undefined) { pgn4webTextareaIdNum = 1; }
var pgn4webTextareaId = "pgn4web_" + pgn4webTextareaIdNum++;
var pgn4webBoardId = pgn4webTextareaId + "_board";
document.getElementById("pgn4web_").id = pgn4webTextareaId
document.getElementById("pgn4web_board").id = pgn4webBoardId
document.getElementById(pgn4webTextareaId).value = document.getElementById(pgn4webTextareaId).value.replace(/<.*?>/g, ' ');
document.getElementById(pgn4webBoardId).src = pgn4webPath + "/board.html?am=l&d=3000&ss=26&ps=d&pf=d&lcs=TtKN&dcs=LHCg&bbcs=LHCg&hm=b&hcs=mF9_&bd=c&cbcs=RZmI&ctcs=zEtr&hd=j&md=f&tm=13&fhcs=$$$$&fhs=14&fmcs=$$$$&fccs=v71$&hmcs=M___&fms=14&fcs=m&cd=i&bcs=TtKN&fp=13&hl=t&fh=b&fw=p&pi=" + pgn4webTextareaId;
var height = 268;
var 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.getElementById(pgn4webBoardId).height = height;
</script>
Please remember to set the variable pgn4webPath
above to the path of the pgn4web folder on your site.
Please note these settings apply a predefined set of colors and options to match the default phpBB 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 phpBB and pgn4web are on the same domain.
In case you need to install phpBB and pgn4web on different domains, please use the following alternative value for the HTML replacement string. Please note that this alternative solution limits the size of the PGN data to approximately 2000 characters:
<script type="text/javascript">
"use strict";
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>
<textarea id='pgn4web_' style='display: none;'>
{TEXT}
</textarea>
<iframe id='pgn4web_board' frameborder='0' width='100%' height='0' 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 type='text/javascript'>
"use strict";
var pgn4webTextareaIdNum;
if (pgn4webTextareaIdNum === undefined) { pgn4webTextareaIdNum = 1; }
var pgn4webTextareaId = "pgn4web_" + pgn4webTextareaIdNum++;
var pgn4webBoardId = pgn4webTextareaId + "_board";
document.getElementById("pgn4web_").id = pgn4webTextareaId
document.getElementById("pgn4web_board").id = pgn4webBoardId
document.getElementById(pgn4webTextareaId).value = document.getElementById(pgn4webTextareaId).value.replace(/<.*?>/g, ' ');
var pgnText = document.getElementById(pgn4webTextareaId).value.replace(/<.*?>/g, ' ');
document.getElementById(pgn4webBoardId).src = pgn4webURL + "/board.html?am=l&d=3000&ss=26&ps=d&pf=d&lcs=TtKN&dcs=LHCg&bbcs=LHCg&hm=b&hcs=mF9_&bd=c&cbcs=RZmI&ctcs=zEtr&hd=j&md=f&tm=13&fhcs=$$$$&fhs=14&fmcs=$$$$&fccs=v71$&hmcs=M___&fms=14&fcs=m&cd=i&bcs=TtKN&fp=13&hl=t&fh=b&fw=p&pe=" + EncodePGN(pgnText);
var height = 268;
var 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.getElementById(pgn4webBoardId).height = height;
</script>
Please remember to set the variable pgn4webURL
above to the URL of the pgn4web server you plan to use.
<
and >
characters; please make sure your PGN data does not contain <
and >
characters. With minor modifications to the integration guidelines described above other bbcode tags can be created for specialized applications, for instance taking advantage of the board widget puzzle support.
Wiki: BoardWidget_instructions
Wiki: BoardWidget_puzzle
Wiki: Contribute
Wiki: Features_Limitations_Bugs
Wiki: Index
Wiki: User_Notes_Web_Platforms
View and moderate all "wiki Discussion" comments posted by this user
Mark all as spam, and block user from posting to "Wiki"
Originally posted by: pa...@casaschi.net
how to stop the games from autoplaying
Some forum administrators prefer the chessboard to load without automatically starting autoplaying the games. In order to achieve that, simply replace in the bbcode definition am=l with am=n
View and moderate all "wiki Discussion" comments posted by this user
Mark all as spam, and block user from posting to "Wiki"
Originally posted by: pa...@casaschi.net
supporting earlier versions of phpbb
The instruction in the wiki page above refer to phpbb version 3.
Earlier versions of phpbb do not provide configuration options for defining new bbcodes, however the following instructions should help setup a "pgn" bbcode manually patching the code.
Assuming using phpbb2 v2.023:
1) download the latest pgn4web-x.xx.zip package and unzip the content somewhere on the forum server; assume that the board.html file of the pgn4web package will be externally accessible from the forum server as http://www.example.com/pgn4web/board.html
2) patch the phpbb2 file includes/bbcode.php adding the following lines of code in the obvious places (following similar code for other bbcodes):
3) patch the phpbb2 file templates/subSilver/bbcode.tpl and similarly for all other installed templates, adding the following code in the obvious place (following similar code for other bbcodes):
4) done!
Keep in mind, this code has not been widely tested and might need further fine tuning. For instance, issues have been reported with some character sequence in the PGN game interpreted as a smiley, breaking the chessboard display unless the "Disable Smilies in this post" tick is checked.
View and moderate all "wiki Discussion" comments posted by this user
Mark all as spam, and block user from posting to "Wiki"
Originally posted by: pa...@casaschi.net
the puzzle tag
The pgn tag can be easily modified into a tag optimized for puzzles, hiding the move text until the user clicks on the prompt in order to show the puzzle solution. In order to achieve that, simply replace in the bbcode definition am=l with am=n, hd=j with hd=v and md=f with md=p.
Last edit: Anonymous 2017-08-29
FEN positions display
the pgn tag defined above only understands PGN inputs; for a FEN string to be understood as PGN input, you have to supply PGN data in this format:
You can easily adapt the pgn above to accept FEN inputs directly, defining as BBcode usage string [pos]{TEXT}[/pos] (note that there seems to be an internal conflict if you try using fen as tag) and as HTML replacement the same code as in the main article, but constructing the PGN data from the FEN string by replacing
with
Last edit: Paolo Casaschi 2017-01-12
extended options for the chessboard display
the suggested
[pgn]
bbcode only uses a subset of the pgn4web board widget. In order to allow taking advantage of all options of the pgn4web board widget, including setting the board square size, the following bbcode can be used.bbcode usage:
[pgneo={TEXT1}]{TEXT2}[/pgneo]
html replacement:
The {TEXT1} bbocde parameter should be set to a string of URL parameters for the board widgets; the list of available parameters can be displayed browsing to
board.html?h=t
; in addition the height (shortened as h) parameter can be used to set the chessboard widget height.This example creates a chessboard with board widget height 400, square size 40 and font moves 20: