User_Notes_drupal

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.

A third party drupal module is available for automatic integration; alternatively, guidelines are provided for manual integration of pgn4web with drupal.

third party drupal module

A drupal developer (robrechtj(at)gmail.com) has produced a drupal module available at the drupal modules repository. The module integrates the pgn4web chessboard and provides automatically a custom bbcode for entering PGN games in drupal articles.

The drupal module is from a third party developer; as such it has not been prepared and fully checked by the pgn4web project and has not fully integrated into the pgn4web project; use this module at your own risk. For support, please contact the authors directly from the druapl module homepage.

guidelines for manual drupal integration guidelines

The folowing guidelines have been tested with drupal up to v8.2.6, please contact the pgn4web project for any issue with different versions of drupal.

Two options are available for manual drupal integration:

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

The following procedures require the latest version of the Extensible BBCode module for your version of drupal. In case this module is not available for your version of drupal, alternative procedures can be used for creating a custom BBcode with similar replacement code, for example by manually editing the drupal code providing basic BBcodes.

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

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]

Please note that doe drupal 7 and earlier versions, the tag parameters must be all lowercase instead.

installation

drupal 8 and later versions

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 (extend area); 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).

Third step is the creation of a custom BBcode (configuration/bbcode settings area) with name pgn.

The reccomended value for the template code is: 

<script type="text/javascript">
"use strict";
var pgn4webPath = "/pgn4web";
var pgn4webTextareaIdNum;
if (pgn4webTextareaIdNum === undefined) { pgn4webTextareaIdNum = 1; }
var pgn4webTextareaId = "pgn4web_" + pgn4webTextareaIdNum++;
document.write("<textarea id='" + pgn4webTextareaId +"' style='display: none;'>");
</script>
{{  tag.source  }}
</textarea>
<script type='text/javascript'>
"use strict";
var pgnText = document.getElementById(pgn4webTextareaId).value = document.getElementById(pgn4webTextareaId).value.replace(/<.*?>/g, ' ');
var height = 268;
var am = "{{ tag.attr.autoplayMode ?: tag.attr.am ?: 'l' }}";
var sm = "{{ tag.attr.showMoves ?: tag.attr.sm ?: 'f' }}";
var hd; if ((sm == "puzzle") || (sm == "p")) { hd = "v"; } else { hd = "j"; }
var ig = "{{ tag.attr.initialGame ?: tag.attr.ig ?: 'f' }}";
var iv = "{{ tag.attr.initialVariation ?: tag.attr.iv ?: '0' }}";
var ih = "{{ tag.attr.initialHalfmove ?: tag.attr.ih ?: 's' }}";
var multiGamesRegexp = /\s*\[\s*\w+\s*"[^"]*"\s*\]\s*[^\s\[\]]+[\s\S]*\[\s*\w+\s*"[^"]*"\s*\]\s*/m;
if (multiGamesRegexp.test(pgnText)) { height += 34; }
document.write("<iframe src='" + pgn4webPath + "/board.html?am=" + encodeURI(am) + "&amp;d=3000&amp;ig=" + encodeURI(ig) + "&amp;iv=" + encodeURI(iv) + "&amp;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) + "&amp;tm=13&amp;fhcs=$$$$&amp;fhs=14&amp;fmcs=$$$$&amp;fccs=v71$&amp;hmcs=OImt&amp;fms=14&amp;fcs=m&amp;cd=i&amp;bcs=ZeyT&amp;fp=13&amp;hl=t&amp;fh=b&amp;fw=p&amp;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.

Final step is to modify the BBCode text format (configuration/text formats and editors area) by making sure that:

  • for the BBCode text format the "Display any HTML as plain text" and "Limit allowed HTML tags and correct faulty HTML" filters are not ticked.
  • in the "Convert BBCode into HTML" filter settings the "Convert linebreaks to HTML" filter is not ticked

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. Please select the BBcode option for the input formatof your article or page.

drupal 7 and earlier versions

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 (site building/modules area); 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 (configuration/bbcode settings area) with name pgn, leaving all the tag options tickboxes unticked.

The reccomended value for the replacement code is: 

<script type='text/javascript'>
"use strict";
var pgn4webPath = "/pgn4web";
var pgn4webTextareaIdNum;
if (pgn4webTextareaIdNum === undefined) { pgn4webTextareaIdNum = 1; }
var pgn4webTextareaId = "pgn4web_" + pgn4webTextareaIdNum++;
document.write("<textarea id='" + pgn4webTextareaId +"' style='display: none;'>");
</script>
{content}
</textarea>
<script type='text/javascript'>
"use strict";
document.getElementById(pgn4webTextareaId).value = document.getElementById(pgn4webTextareaId).value.replace(/<.*?>/g, ' ');
var height = 268;
var am; if (!(am = "{autoplaymode}")) { if (!(am = "{am}")) { am = "l"; } }
var sm; if (!(sm = "{showmoves}")) { if (!(sm = "{sm}")) { sm = "f"; } }
var hd; if ((sm == "puzzle") || (sm == "p")) { hd = "v"; } else { hd = "j"; }
var ig; if (!(ig = "{initialgame}")) { if (!(ig = "{ig}")) { ig = "f"; } }
var iv; if (!(iv = "{initialvariation}")) { if (!(iv = "{iv}")) { iv = "0"; } }
var ih; if (!(ih = "{initialhalfmove}")) { if (!(ih = "{ih}")) { ih = "s"; } }
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.write("<iframe src='" + pgn4webPath + "/board.html?am=" + encodeURI(am) + "&amp;d=3000&amp;ig=" + encodeURI(ig) + "&amp;iv=" + encodeURI(iv) + "&amp;ih=" + encodeURI(ih) + "&amp;ss=26&amp;ps=d&amp;pf=d&amp;lcs=ZeyT&amp;dcs=OImt&amp;bbcs=OImt&amp;hm=b&amp;hcs=xnm_&amp;bd=c&amp;cbcs=Xe2L&amp;ctcs=l4It&amp;hd=" + encodeURI(hd) + "&amp;md=" + encodeURI(sm) + "&amp;tm=13&amp;fhcs=$$$$&amp;fhs=14&amp;fmcs=$$$$&amp;fccs=v71$&amp;hmcs=OImt&amp;fms=14&amp;fcs=m&amp;cd=i&amp;bcs=ZeyT&amp;fp=13&amp;hl=t&amp;fh=b&amp;fw=p&amp;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.

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 (remember that for drupal 7 and earlier versions the tag parameters must be all lowercase). Please select the BBcode option for the input formatof your article or page.

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.

The guidelines are similar to the guidelines for installing pgn4web on your site, with the differences described below.

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

drupal 8 and later versions

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

<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>
<script type='text/javascript'>
"use strict";
var pgn4webTextareaIdNum;
if (pgn4webTextareaIdNum === undefined) { pgn4webTextareaIdNum = 1; }
var pgn4webTextareaId = "pgn4web_" + pgn4webTextareaIdNum++;
document.write("<textarea id='" + pgn4webTextareaId +"' style='display: none;'>");
</script>
{{  tag.source  }}
</textarea>
<script type='text/javascript'>
"use strict";
var pgnText = document.getElementById(pgn4webTextareaId).value.replace(/<.*?>/g, ' ');
var height = 268;
var am = "{{ tag.attr.autoplayMode ?: tag.attr.am ?: 'l' }}";
var sm = "{{ tag.attr.showMoves ?: tag.attr.sm ?: 'f' }}";
var hd; if ((sm == "puzzle") || (sm == "p")) { hd = "v"; } else { hd = "j"; }
var ig = "{{ tag.attr.initialGame ?: tag.attr.ig ?: 'f' }}";
var iv = "{{ tag.attr.initialVariation ?: tag.attr.iv ?: '0' }}";
var ih = "{{ tag.attr.initialHalfmove ?: tag.attr.ih ?: 's' }}";
var multiGamesRegexp = /\s*\[\s*\w+\s*"[^"]*"\s*\]\s*[^\s\[\]]+[\s\S]*\[\s*\w+\s*"[^"]*"\s*\]\s*/m;
if (multiGamesRegexp.test(pgnText)) { height += 34; }
document.write("<iframe src='" + pgn4webURL + "/board.html?am=" + encodeURI(am) + "&amp;d=3000&amp;ig=" + encodeURI(ig) + "&amp;iv=" + encodeURI(iv) + "&amp;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) + "&amp;tm=13&amp;fhcs=$$$$&amp;fhs=14&amp;fmcs=$$$$&amp;fccs=v71$&amp;hmcs=OImt&amp;fms=14&amp;fcs=m&amp;cd=i&amp;bcs=ZeyT&amp;fp=13&amp;hl=t&amp;fh=b&amp;fw=p&amp;pe=" + EncodePGN(pgnText) + "' 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>
drupal 7 and earlier versions

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

<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>
<script type='text/javascript'>
"use strict";
var pgn4webTextareaIdNum;
if (pgn4webTextareaIdNum === undefined) { pgn4webTextareaIdNum = 1; }
var pgn4webTextareaId = "pgn4web_" + pgn4webTextareaIdNum++;
document.write("<textarea id='" + pgn4webTextareaId + "' style='display: none;'>");
</script>
{content}
</textarea>
<script type='text/javascript'>
"use strict";
document.getElementById(pgn4webTextareaId).value = document.getElementById(pgn4webTextareaId).value.replace(/<.*?>/g, ' ');
var height = 268;
var am; if (!(am = "{autoplaymode}")) { if (!(am = "{am}")) { am = "l"; } }
var sm; if (!(sm = "{showmoves}")) { if (!(sm = "{sm}")) { sm = "f"; } }
var hd; if ((sm == "puzzle") || (sm == "p")) { hd = "v"; } else { hd = "j"; }
var ig; if (!(ig = "{initialgame}")) { if (!(ig = "{ig}")) { ig = "f"; } }
var iv; if (!(iv = "{initialvariation}")) { if (!(iv = "{iv}")) { iv = "0"; } }
var ih; if (!(ih = "{initialhalfmove}")) { if (!(ih = "{ih}")) { ih = "s"; } }
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.write("<iframe src='" + pgn4webURL + "/board.html?am=" + encodeURI(am) + "&amp;d=3000&amp;ig=" + encodeURI(ig) + "&amp;iv=" + encodeURI(iv) + "&amp;ih=" + encodeURI(ih) + "&amp;ss=26&amp;ps=d&amp;pf=d&amp;lcs=ZeyT&amp;dcs=OImt&amp;bbcs=OImt&amp;hm=b&amp;hcs=xnm_&amp;bd=c&amp;cbcs=Xe2L&amp;ctcs=l4It&amp;hd=" + encodeURI(hd) + "&amp;md=" + encodeURI(sm) + "&amp;tm=13&amp;fhcs=$$$$&amp;fhs=14&amp;fmcs=$$$$&amp;fccs=v71$&amp;hmcs=OImt&amp;fms=14&amp;fcs=m&amp;cd=i&amp;bcs=ZeyT&amp;fp=13&amp;hl=t&amp;fh=b&amp;fw=p&amp;pe=" + EncodePGN(pgnText) + "' 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>

notes

  • 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 configuration/performance area.

  • The recommended 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.

  • 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 from the structure/content types/article and basic page/display area. Otherwise the end users should manually assign the summary content for each article and basic page.

caveats

  • HTML tags are stripped from the PGN data, removing all text between < and > characters; please make sure your PGN data does not contain < and > characters.

Related

Wiki: BoardWidget_instructions
Wiki: Contribute
Wiki: Features_Limitations_Bugs
Wiki: Index
Wiki: UserContributedMaterial
Wiki: User_Notes_Web_Platforms

Discussion

  • Comment has been marked as spam. 
    Undo

    View and moderate all "wiki Discussion" comments posted by this user

    Mark all as spam, and block user from posting to "Wiki"

    Anonymous

    Anonymous - 2011-02-16

    Originally posted by: paolocas...@gmail.com

    It should not be too difficult to avoid using the XBBCode module by creating a dedicated module, possibly in the form of a "mini module" as described here: http://drupal.org/node/70903

    This would also allow for the pgn4web integration with drupal to have the full set of tag options (initial move, autoplay options) and configuration settings (colors, layout and so on) as the wordpress plugin, the joomla extension and the mediawiki extension.

    Any drupal experts volunteering?

     
  • Comment has been marked as spam. 
    Undo

    View and moderate all "wiki Discussion" comments posted by this user

    Mark all as spam, and block user from posting to "Wiki"

    Anonymous

    Anonymous - 2012-08-06

    Originally posted by: robrec...@gmail.com

    I've created a pgn4web project on drupal.org : http://drupal.org/project/pgn4web.

    Currently pretty basic (and enough for my immediate needs), but I'm willing to extend it if needed.

     

    Last edit: Anonymous 2017-12-03

  • Paolo Casaschi

    Paolo Casaschi - 2020-04-14

    Steven Bellens from the rokadewesterlo.be site has been successful integrating pgn4web with drupal 8 and the gutenberg editor: inserting the PGN tag and enabling the BBCode filter for the Gutenberg format, allows pasting PGN code directly in the Gutenberg editor; there is even no need to insert a 'custom HTML' block.

    For an example, see https://www.rokadewesterlo.be/website-update

    For further details, please contact Steven from his rokadewesterlo.be site.

     

Log in to post a comment.

Want the latest updates on software, tech news, and AI?
Get latest updates about software, tech news, and AI from SourceForge directly in your inbox once a month.