How-To Embed ChessieDB Pages

A Sample Website Page

The following document was written for website owners and admins. If you haven't written or published your own web pages yet, you may find these instructions a little confusing. Aside from basic knowledge of HTML tags, you should probably first explore the potential framing issues and the frame tag section on Wikipedia. The TAG Index website also has a good reference on using Frames with CSS.

The ChessieDB Dog Info page (among others) can be embedded within another web page -- on a completely different website. This may be useful for owners or breeders that have their own website, and would like to simplify the maintenance of their dog records -- by keeping the ChessieDB database accurate, and using some pages from ChessieDB on their website.

The http://chessiedb.org/dog/{dogname} page used in the IFRAME has a transparent background. You can use the background of your own web page, or a different background for the IFRAME window. All links on the Dog Info page will either load into another window / tab (like the Kennel Club and OFA links), or lead to another Dog Info or Pedigree page, staying within the IFRAME.

The IFRAME code for this example is listed bellow. You can also view the page source to see how we've included it within a table to control placement. The IFRAME attributes can be entered in a CCS template, to give you even more control over it's layout.

We've chosen an IFRAME height of 1480 to avoid a vertical scrollbar. Depending on the "Notes" section on the Dog Info page, the page may be longer or shorter for different dogs. Using a scrolling=auto setting will show the IFRAME scrollbar only when necessary -- for example, if you click on the [Pedigree] link, the scrollbar will be displayed.

Note that the {dogname} part of the URL must be properly encoded, as shown in the example bellow. There are several pages available from a Google search that will encode a string or URL for you.

Here is the IFRAME code used to embed the Dog Info web page above.

<iframe style="background-color: #FFF8DC;" allowtransparency="true" scrolling="auto"
    frameborder="0" width="740" height="1480" src="http://chessiedb.org/dog/Donnett%27s%20Pepper%20Pete">
    <p>Sorry, your browser does not support frames, is configured not to display frames, 
    or the included content is not available.</p>
</iframe>

You can also include a five generation Pedigree page by using the http://chessiedb.org/ped/{dogname} URL. And like the Dog Info page, all links will lead to other Pedigree or Dog Info pages, remaining within the IFRAME window. The total height of a Pedigree page will depend on the number of thumbnail images it contains, especially in the last generations. We've chose a width of 100% for the IFRAME, which places the scrollbar on the right side of this table.

Here is the IFRAME code used to embed the Pedigree web page above:

<iframe style="background-color: #FFF8DC;" allowtransparency="true" scrolling="auto"
    frameborder="0" width="100%" height="1400" src="http://chessiedb.org/ped/Donnett%27s%20Pepper%20Pete">
    <p>Sorry, your browser does not support frames, is configured not to display frames, 
    or the included content is not available.</p>
</iframe>

And lastly, you can include a list, sorted by date-of-birth, of dogs associated with a ChessieDB Owner and/or Breeder contact ID (number 64 in this example) by using the http://chessiedb.org/lst/{id#} URL. This is the same list you will find when viewing a contact's Profile page on ChessieDB, minus the contact's details. In the IFRAME style attribute, we've chosen a different background color, and used an extra 10px padding around the page, to create a kind of flat border. When sizing and placing this page, keep in mind that links will lead to Dog Info pages, which in turn lead to Pedigree pages.

Here is the IFRAME code used to embed the owner / breeder list above:

<iframe style="background-color: #FFF9ED; padding: 10px;" allowtransparency="true" scrolling="auto"
    frameborder="0" width="740" height="800" src="http://chessiedb.org/lst/64">
    <p>Sorry, your browser does not support frames, is configured not to display frames, 
    or the included content is not available.</p>
</iframe>

The examples above should give you a pretty good idea of how embed pages work, and how they can enhance your website. There are several more ChessieDB web pages available for embedding, including some URL parameters to modify their output:

http://chessiedb.org/lst/{id#}

The list of dogs associated with a contact ID number, both as owner and breeder.

http://chessiedb.org/dog/{dogname}

The Dog Info page, minus the contact information.

http://chessiedb.org/ped/{dogname}

A four generation Pedigree page. There are a few parameters that you can use to modify the Pedigree output:

  • gens=# to specify an alternate number of generations.
  • simple=yes to keep only the essentials (no thumbnails, registration numbers, etc.).
  • links=no to output a Pedigree without hypertext links.

For example, to create a simple, five generation text Pedigree, you would use:

http://chessiedb.org/ped/{dogname}?gens=5&simple=yes&links=no

http://chessiedb.org/rev/{dogname}

A four generation Reverse Pedigree page.

http://chessiedb.org/bre/{dogname}

The complete Breeding list for a dog.