Go to the first, previous, next, last section, table of contents.
The urlalpha catalog displays the entries of the table urldemo in alphabetical order, based on the comment field. Using the browse link in the control panel, you will see the following screen:
Each letter and digit is shown. If there is at least one record for which the comment field starts with a specific letter (case insensitive), the letter becomes an hypertext link and the number of records is appended. If there is no record for which the comment field starts with a specific letter, the letter alone is shown.
When you click on a letter, the following screen is shown:
Two templates are used : calpha_root.html for the first page and calpha.html to display a specific letter.
The default calpha_root.html template is as follows:
<title>Alphabetical Navigation</title> <h3>Alphabetical Navigation</h3> _A_ _B_ _C_ _D_ _E_ _F_ _G_ _H_ _I_ _J_ _K_ _L_ <p> _M_ _N_ _O_ _P_ _Q_ _R_ _S_ _T_ _U_ _V_ _W_ _X_ <p> _Y_ _Z_ _0_ _1_ _2_ _3_ _4_ _5_ _6_ _7_ _8_ _9_ <p>
What we want is a nice GIF for each letter instead of the ugly text and that the GIF files used be different (grayed) if there are no records for a specific letter. In short we want this:
The modified template (calpha_root.html) is quite long and we only show a few relevant lines:
<body bgcolor=#ffffff> <title>Alphabetical URL catalog</title> <h3>Alphabetical URL catalog</h3> <table border=1> <tr> <td> <a href=_AURL_> <img src=_HTMLPATH_/images/letter_ALETTER_.gif border=0> </a> <font size=-1>_ACOUNT_</font> </td> <td> <a href=_BURL_> <img src=_HTMLPATH_/images/letter_BLETTER_.gif border=0> </a> <font size=-1>_BCOUNT_</font> </td> . . . </tr> </table>
We have done two things : put the letters in a table and expand the default _A_ style tags. By default these tags are replaced by an hypertext link if appropriate. Since we want to show images, we have to control the expansion of the hypertext link. For this purpose we have three tags:
The lines specifying the display for one letter must be duplicated for each letter. Note that we use the _HTMLPATH_ tag to locate the images installed by Catalog. If you are using your own GIF file you will not need this tag.
The customization of the page displaying the records for a specific letter (calpha.html) is much simpler. The default template is as follows:
<title>Alphabetical Navigation _LETTER_</title> <h3>Alphabetical Navigation _LETTER_</h3> <table border=1> <!-- start entry --> <tr>_DEFAULTROW_</tr> <!-- end entry --> </table> <!-- start pager --> Number of pages _MAXPAGES_ <p> _PAGES_ <!-- end pager -->
It contains a part that should now be familiar (entry) to display the records. We modify it to be compliant with the templates created so far:
<body bgcolor=#ffffff> <title>URL catalog letter _LETTER_</title> <h3>URL catalog letter _LETTER_</h3> <dl> <!-- start entry --> <dt><a href='_URL-QUOTED_'>_COMMENT_</a> <dd> <a href='_URL-QUOTED_'>_URL_</a> <dd> <i><font size=-1>Created _CREATED_</font></i><br> <p> <!-- end entry --> </dl> <!-- start pager --> Number of pages _MAXPAGES_ <p> _PAGES_ <!-- end pager -->
Note that the _LETTER_ tag is substituted with the letter being displayed, in uppercase. It may be used to display a GIF file, for instance.
Go to the first, previous, next, last section, table of contents.