Diagram Designer

Once you have designed your diagram, get the URL from the diagram image, or copy the HTML displayed below, but do not copy the URL in the address bar. That URL is for this page, not for your diagram.

While some people have used the drawdiagram.php script to display individual pieces, that is not its intended purpose, and it ends up putting the piece on a colored space with a border around it. Here are some simpler options for just displaying pieces.

Display Pieces with Shortcodes

Within comments or member-submitted pages, you may display pieces with the [set] and [pc] shortcodes. Note that shortcodes go between square brackets. First, use [set] to indicate the set you wish to use. The use [pc] for each individual piece, identifying it by the label used for it in the set.

The [set] shortcode takes one parameter, which is the name of the set. If you used the Diagram Designer to produce your diagram, the URL it gives you will be to a PHP script with a query string describing the board. One of the parameters should be of the form set=something. Use that as your set name. For example, if it was set=alfaerie, use the short code [set alfaerie]. If set does not appear in your diagram's query string, it is using the default value of abstract1. For that, use the code [set abstract1]. This shortcode will determine which set is used to display pieces with the [pc] shortcode

Next, for each piece, use the [pc] shortcode. Within the square brackets, follow the pc by a space and then by the same piece label used in the FEN code. You should already be familiar with which letter matches each piece if you used the Diagram Designer. If not, look in your diagram's query string for the value of code. To display the name with the piece, follow the label by another space, and enter the name before the closing bracket. To include a piece description, write it between the opening [pc] tag and a closing [/pc] tag.

Display Pieces with the showpiece.php script

Like the shortcodes above, this script will let you identify a piece by its set and label. Unlike the shortcode, it will also work on .html pages, and it provides the option of recoloring the piece. It is a script that outputs an image, and like a regular image file, it should be provided as the value of SRC in an IMG tag. Unlike a regular image, it accepts a query string with values for options. Here are the options. To use them, add them to the query string.

Note that there are two ways to identify a piece image. One is to name the set and piece label separately, such as /play/pbm/showpiece.php?set=magnetic&piece=q, and the other is to give it the relative URL of the image, such as /play/pbm/showpiece.php?image=/graphics.dir/magnetic/BQueen.gif. This allows you to shorten the query string, such as /play/pbm/showpiece.php?image=magnetic/BQueen.gif, and it prevents the use of external images.

To recolor a piece, it has to know which color in the image to target and which color to change it to. It will often know the original color of the piece, either from its set or its filename. If not, there are three options for telling it what the original color is. You would want to use originalblack and originalwhite mainly when you don't know ahead of time if the piece is black or white, such as when creating query strings for use with Interactive Diagrams. Likewise for white and black. If you already know which side the piece is on, you can use color to define its color.

Display Pieces with HTML

If you wish to include piece graphics on your page, you may modify the code shown below. For each piece, it creates a block of HTML code, enclosed in DIV tags of the piece class. Since each piece may be represented twice in your diagram with different colors, each piece may be represented twice in the code below. To use it, copy it to your page, delete the portion you don't want to use, replace the label between FIGCAPTION tags with the piece's name, and insert the description of your piece between the P tags. You may rearrange pieces by cutting and pasting DIV blocks. Let the whole section end with <BR CLEAR=ALL>.

Unlike Game Courier, this can be used for movement diagrams. To mark a space a piece may move to, use a pound symbol (#) or an exclamation mark (!) for a piece label. The pound will show up as a dot in the color of the border, and an exclamation mark will show up as a dot in the color of last color. If the color you want is not already listed, you can add it to the end of the color list. If you enter a digit between braces, such as {3}, it will display a box with the digit as its color index. Additionally, you use braces to put multiple images on the same space, which is useful for showing the ability to capture a piece. Within braces, separate each symbol with a space, and it will draw them in the order it finds them. So, if you want a dot over a piece, list the piece first, such as {n #}. If you use a digit, it will draw a box.