About This Site

Because of persistent errors in how Microsoft's Internet Explorer renders webpages using stylesheets, this page will probably not display correctly, even with the newest version of IE. Use Firefox, Opera, Netscape (version 7 or later) or Safari.

This page discusses the basic structure of underthehoodster.gayauthors.org. This is a dynamically created website, making extensive use of xhtml and php scripting to generate the document served to the user. In all but a few cases the page the user sees is generated anew each time the page is accessed.

The php scripts should not be altered without first understanding their purpose and nature. Site administrators should have a good understand of php, cascading stylesheets and xhtml before attempting to create documents for this site.

Site Structure

The Pages

Below is the menu structure as of 1/15/06. The menu is created by a php script, menu.php, which is included in the file generating the page.

Home The site home page (index.php) contains the school's mission statement.
President's Welcome (welcome.php) is a message from Father Marlen, President of St. Boniface and the driving force behind the school. Actually, underthehoodster writes a bit about his journey in writing the Perry & Jesse stories.
Library The Library (/story/index.php) is the index to the Perry and Jesse stories accessible through this site. The library index is created (generate_index.php called by /story/index.php) by scaning the files in subdirectories of the /story/ directory.

Clicking on a Library Index link will call showstory.php to display the selected page.
Meet the Staff (credits.php) lists the people responsible for this site.
Academics (acad.php) is under construction, which means we haven't figured out what to put there, yet.
Gallery is the showcase for user submitted art related to the stories. The gallery is organized into subdirectories for specific characters or themes. The gallery page has links to the subdirectories, and each subdirectory has an index page with thumbnails of available art. The thumbnails are 150 px by 180 px.

The list of folders for character galleries and the thumbnails on the index page for each gallery are generated by scripts that scan the relevant subdirectories to build a list of folders or files.
Extracurricular Activities (act.php) is the obligatory page of links.
Parents, Teachers & Students Guild Links to the underthehoodster forum at gayauthors.org.
Contact us (shoutout.php) is the form to use to send an e-mail message to us. The form is processed by mail.php. We use this method to send e-mail so that we can hide our e-mail addresses from spambots.

Directories on the server

<Root directory>
/gallery/ User submitted image files, organized by subject into subdirectories, with each subdirectory holding the images for that gallery page.
/images/ Image files used on the site, including images seen in some of the chapters. Gallery pictures are not found here.
/private/ this page
/story/ is the top level for the subdirectories containing the story. Scripts that generate the Library Index are found here.
- /ochapters/ The original Perry & Jesse stories are stored at the Nifty Archives (nifty.org). There is redirection page for each original chapter that will send the user there.
  
  Whenever a revised chapter is uploaded, the redirection page for the original chapter can be eliminated. While not mandatory—the Library Index script will ignore any original chapters when a revised chapter exists— deleting the no longer needed file will save a little space on the server.
- /rchapters/ The revised Perry & Jesse stories are stored in /story/rchapters as .inc files, meaning that they are a part of a webpage which will be included in a script file that will generate the page send to the user. Each chapter is in a separate text file formatted with xhtml tags. .inc files are not intended to be served as independent xhtml documents, but rather used as part of a larger document. The file will be read by a php script that will incorporate the chapter into an appropriately styled web page.
- /nchapters/ New chapters (after Part V, Chapter 40) are mythical creatures that live in /stories/nchapters. They are (or will be) structured, in terms of HTML, identically to the revised chapters.

Formatting the Chapters

The revised and new chapter files are actually "fragments" of a webpage; they are the part of a web page that appears between <body> and </body>. (The complete XHTML page is created by the showstory.php script.)

Each chapter must be formatted using valid XHTML tags. Everything before, after and including the "body" tags should be left out. Look at one of the .inc files now to see what this means.

Each paragraph must be enclosed between <p> and </p>. Generally avoid using the break (<br> or <br />) tag. Note: all XHTML tags must be in lowercase.

Setting font properties, colors, border, margins, etc. should be done through the use of stylesheets. Font tags, if present, should be removed.

Reformatting HTML files received from underthehoodster

The rewritten chapters require some tweeking before being uploaded to the site. I use HTML-Kit from Chami, which incorporates HTML Tidy, a tool that automatically converts and corrects HTML/XHTML files. Of course, you may use any text editor or other HTML editor that meets your fancy. In that case, I suggest downloading a freestanding version of HTML Tidy. A graphical interface for Windows is available, as is a version for Macs. Here is an explanation of what HTML Tidy is all about.

Here are the steps I use:

Load the file into your editor.
Do a global search and replace to change <br> to <p>.
Use HTML Tidy to convert the file to XHTML and correct the markup. If you are running HTML Tidy as a stand-alone application, you will first need to save the file in the editor, start HTML Tidy, and load the file into HTML Tidy. Use this configuration for HTML Tidy, either stand-alone or integrated version.
Saved the "Tidied" file. (Reload into your editor, if needed.)
The original file will have some unnecessary font tags scattered throughout the text. "Font-style" and "font-weight" are sometimes used instead of simple <i> and <b> tags. Tidy will convert them to styles. These will need to be dealt with.

Here is what the Tidy-generated style section in the document's <head> might look like (this varies with each file):
<style type="text/css"> /*<![CDATA[*/ span.c7 {font-style: italic;} span.c6 {font-weight: bold;} h2.c5 {font-family: trebuchet ms; color: rgb(0, 0, 0);} h1.c4 {font-family: trebuchet ms; color: rgb(0, 0, 0);} ol.c3 {font-family: trebuchet ms; color: rgb(0, 0, 0);} p.c2 {font-family: trebuchet ms; color: rgb(0, 0, 0);} h3.c1 {font-family: trebuchet ms; color: rgb(0, 0, 0);} /*]]>*/ </style>
- Any style that contains "font-family" should be eliminated. Search the entire document for the "classes" corresponding to font-family styles. The styles for Heading tags ("h1.", "h2.","h3.", etc.) can be ignored for now, so in this example we want to search for class "c2", which will be in a paragraph tag, and class "c3" which will be in a list tag (<ol>). Remove the class identifier from the tag (e.g., <p class="c2">) leaving the base tag intact (e.g., <p>).
- Now we need to convert the "spans." The first one, in this case span.c7, creates italicized text. Search for <span class="c7"> and replace it with <i>. You will need to find the end tag (</span>) and replace it with </i>.
- Repeat for span.c6, which sets bold text, replacing it with <b>.
Do any special formatting (using styles defined in main.css) the chapter may require.
Delete all text from the beginning of the file (the doctype declaration) through the first two Headings (e.g., "<h1 class="c1">Perry and Jesse</h1>
<h3>The Incredibly Romantic (and slightly kinky) Adventures of Two Boys In Love</h3>"). These will be inserted by the script displaying the chapter.
A Heading2 (<h2>) tag with the Part Title should now be the first line in the file. Change the tag's class identifier to "lessertitle". A Heading3 (<h3>) tag with the Chapter Title should come next. Change the tag's class identifier to "head1". See Tagging Part and Chapter Titles for a little more information.
Insert the following between the Heading2 and Heading3 tags:
<p class="cright">Copyright © 2003–2006</p>
Go to the end of the file. Replace the solid line with <hr />.
Delete the </body> and </html> tags.
Save the file, using our naming conventions, and upload it to /story/rchapters.

Styles Typically Used

"lessertitle": Style for the Part Title at the top of the page
"cright": Copyright notice style at top of page
"head1": Chapter Title style for top of page
"hndwrt": This is used to present Jesse's stories, as well as notes from other characters.
"blue": This a blue font color version of "hndwrt."

Chapter Illustrations

Pictures specific to each new or revised chapter are displayed on the left side of the page, below the menu. The list of pictures for a chapter is kept in an .inc file with a filename based on the chapter name (see below). Please see an existing pix list file to see how it is set up.

All pictures are kept in the /images/ folder.

The images must be resized so that they are 215 pixels wide. Larger images will "break" the page layout.

Tagging Part and Chapter Titles

When the php script generates the Library page, it examines each chapter file looking for the Part Title and the Chapter Title. The script allows for multiple Chapter Titles, such as a Prologue and Chapter 1. The Chapter and Part titles must follow a specific format.

The Part Title must be tagged as <h2 class="lessertitle">Part Title Here</h2>
The Chapter Title must be tagged as <h3 class="head1">Chapter Title Here</h3>
The text that appears between the <h2> and <h3> tags can be anything, but the heading tags themselves must be exactly as shown above.
You may include more than one chapter (or Prologue and a Chapter) in a file, if the <h3> tags are within the first 5 kB of the file. This can be changed by altering the value of the $readsize constant in the script.

Naming chapter and picture list files.

The php script that generates the list of books and chapters in the library depends upon following a specific file naming scheme.

Revised or new chapter file names begin with "pj-", followed by the part number expressed as a Roman numeral and the chapter number, with the two separated by a hyphen. The file extension is .inc

Thus, the file for Part 3, Chapter 6 would be named pj-III-3.inc

This file must be saved as an ASCII text file without any of the propietary goodies generated by word processing programs.

The list of pictures associated with a chapter is contained in an .inc with the same name as the chapter file with pix added to the name. For instance, the Part I Chapter 2 file, pj-I-2.inc has an associated list of images in pj-I-2pix.inc.

Maintaining the Galleries

underthehoodster provides pictures in various sizes. So far, these have all been in jpg format, but the galleries can host any picture format supported by web browsers (e.g., GIF, PNG). These files should be uploaded by ftp to the appropriate gallery. (Log onto underthehoodster.gayauthors.org site via ftp, and open the "gallery" folder. You will see a list of the individual character galleries. Upload the pictures to their appropriate gallery.)
Next, you need to create a "thumbnail" version of the picture. ALL thumbnails must be 150 pixels wide by 180 pixels high. If the thumbnail is not that size, the web browser will stretch/shrink it to those dimensions, distorting the picture, so you need to resize/crop the picture to 150x180.
Upload the thumbnail file using the same filename as the original with _thumb inserted before the file extension. For example, an original file called "perry-xyz.jpg" would have a thumbnail named "perry-xyz_thumb.jpg". Important note: the original file and the thumbnail must have the same file extension. Some of under...'s pictures have ".jpeg" as the extension. Windows-based photo editors tend to save JPEG files with ".jpg" as the extension by default. The case used for the filename.extension must also match for original and thumbnail, and "_thumb" must be lowercase.
And that's it! Each character gallery web page is dynamically generated by a script running on the server. The script reads the filename of each thumbnail file in the folder and generates a web page showing the thumbnail with a link to the larger version.

Here's is how I resize pictures:

Open the original picture file in your photo editor (I use Corel PhotoPaint). In most cases, the picture will be too large in at least one dimension for a thumbnail and must be cropped and/or resized.
If both picture dimensions are equal to or larger than thumbnail size (greater than or equal to 150 pixels wide and/or greater than or equal to 180 pixels high), attempt to resize (or resample) the picture to a smaller size.
- Typically, you will be able to successfully resize in only one dimension, since the pictures are unlikely to have the same aspect ratio (ratio of width to height) as that needed for the thumbnails. Try to resize the width to 150 pixels. In most cases, the resulting height will be more than 180 pixels. If the resulting height is less than 180 pixels, reset the image to its original size, and resize the height to 180 pixels. In that case, the resulting width will be greater than (or equal to) 150 pixels.
- You want to make certain that the resizing (or resampling, depending on your software) operation maintains the aspect ratio. This is generally the default setting.
- Pictures from under... come in a variety of resolutions. The maximum resolution you need for the thumbnails is 96 dpi. Some software may require you to change the resolution as a separate operation. If so, do this before resizing the picture. In PhotoPaint, you change resolution in the same operation as resampling. The resolution setting must be set before changing dimensions.
If one or both dimensions are smaller than thumbnail size, try to resize the picture to a larger size. In some cases, this may not be feasible because of a poor quality original. In that case, change the "paper size" to 150x180. ("Paper size" is the term used by PhotoPaint.) Optionally, copy the original picture, create a new image with a size of 150x180, and paste the original image into the new, blank image. This will become the thumbnail file."
You may now have a picture in which one dimension is correct, but the other is too large. (If both dimensions are correct, skip this step) Using the photo editor's crop tool, crop the picture to 150 x 180 pixels. It's up to you what part to keep and what to throw out.

How the Library Works

The script generate_index.php builds the Library page listing of hyperlinks to the various chapters. generate_index.php is called each time story/index.php is called. The link text is extracted from header tags in each chapter (.inc) file.

Files in /story/rchapters will be scanned and listed first, followed by original versions in /story/ochapters. Original files having the same part and chapter numbers scanned for revised chapters will be ignored, the revised chapters replacing the original.

NEW chapters, that extend the story beyond the original "books" (through Part V Chapter 40) are stored in /story/nchapters. The files will be listed last in the index.