Previous Page

Page 3 of 4

Next Page

Table of Contents [ Show]


Anatomy of an Article

Each article on the site is defined by a sub-directory which is not directly fetched by the base URL. The URL string has a "topic=" argument which tells the PHP code which sub-directory to load the content from and it dutifully does so. The sub-directory consists of two main files, the "meta.php" file used for the list page and the "content.php" file used to provide the bulk of the text content. There is at least one thumbnail for the banner but there can also be another for each block of text as well as larger images and galleries of images. I will describe the purpose of each further.

foreach ($content as $item)

Given the "topic" argument, the "article.php" page will simply load everything it needs from a directory with that name. The most important of these files is "content.php". This is another associative array which stores the content of the entire article in a fairly human readable format. I'm considering moving article content into an actual database system, but that adds an extra level of complexity and security considerations that isn't really necessary at this point. There are some additional steps to load the content of the page, but primarily the "article.php" page just loops through all of the elements of that array and prints them.

It has a few options when loading each array element. There is the article banner, a block of text like this one, a thumbnail and text combo that flip-flops sides depending on the array counter, and then there is an under-utilized gallery. The banner is always and only used for array element 0. The thumbnails are used if there is a description defined in that array element with "thumb"=>"description". It then also loads a lightbox with a large image if there is a description for that larger image with "img"=>"description". If the "thumb" is not defined then it is treated as a block. The images use the same glob search as is used for the list pages except that they look for a thumb or image file with the array element number before the extension. Thus "thumb.jpg" is the preview thumb, "thumb0.jpg" is the thumb used for the banner, "thumb1.jpg" is the thumb for the block immediately after the banner and so on. If there is not a thumbnail for that block there simply is not a file with that name and no description is provided in the array.

The banner in general doesn't have much in the "content.php" file because it takes its attributes from "meta.php" where possible. For a couple of hidden articles those might be manually defined in the absense of "meta.php". The gallery sections also don't contain much content. It simply has a "gallery" attribute used for the gallery name, and "content" for the text used for the gallery link. The gallery name is used to fetch the images, their descriptions and to generate a set of lightboxes with these. Again, this is done with a glob search of that directory for "gallerynameN.ext". However, there is also a "galleyname.php" file for each gallery in the article directory which contains the description for each image as an array where the array position matches the "N" of the image filename. These are sorted and the lightboxes are loaded in a similar manner to others except that it has forward and back buttons and the image description gets a counter of where the viewer is in the gallery.

Table of Contents

Each array item in the content.php file has an optional "heading" attribute for that section. That attribute defines the content of the heading while one called "size" defines it's heirarchy in terms of an HTML tag. These attributes are then used to generate the Table of Contents which provides links to the appropriate section the article. The table of contents is generated once per page any time that the array counter is greater than 0. This means either after the banner or at the start of any other page. The code simply looks for any defined "heading" attribute and populates a set of unordered lists. The "size" is used to determine how deeply nested that item needs to be depending on the size of the previous heading. As is discussed in the Easter Eggs section, the link to the particular content is simply provided by adding an "offset=N" attribute to the url.

Pagination

The "offset=N" tells the page generation code to skip to the Nth elements of the array before starting the print loop. The generator then has a separate variable that tells it how many loops to run for that page. This is normally hard-coded at 10 but can be overridden - again, this discussed in Easter Eggs. If there is currently any offset greater than 0, then the very first thing that is added to the main "Content" section of the page is a pagination tool to go back to the previous content. Likewise, if the loop finishes before the entire array has been printed then a pagination section will be added to the bottom with a link to the next page. In both cases, if there is content in the other direction then a link is also added for that direction for convenience. Both will have a page counter if the current offset is a multiple of the number of elements displayed per-page. For instance, given the default of 10, this means that "2 of 3" will be displayed if the offset is 10 and there are between 21 and 30 elements total. If you use the Table of Contents you may land on a page that is not an even multiple and so the page count is not shown.

A similar section gets added at the bottom when the end of the array has been reached. This allows the reader to jump to the next or previous article of the same type as the one being read. This is done using the same technique as is used to generate the lists of articles but it only uses those that fall immediately before or after the current article in the sorted array. This also directs the reader back to the list of articles of that type. Facebook taught me that you've gotta keep users on the site for them sweet, sweet page views (although I'm not sure how I'm going to monatize those...).

Miscellaneous Pages

Some pages of the site are fairly stand-alone. They have all had as many elements as possible abstracted away to remove code duplication and to make it easy to replicate the same behaviours elsewhere but, in general, much of that has not been used elsewhere, nor is there a very automated way of replicating behaviour like exists for the articles and list pages. That said, each has something interesting to discuss.

The Homepage

A homepage of almost any website is a special case. It's meant to provide easy and clear access to the information visitors might actually want without cluttering the page with much of that information directly. As such this is the only page that currently uses the "banner" code, regardless of my having made the code as modular as possible. It otherwise just provides links to things that seem sensible to highlight. Those blocks load in much the same way as the articles where each is an element of an associative array which is looped through. However this is the only place where that particular text block formatting is used.

One kind of neat thing on the homepage is the weather data. This is only useful to folks in Ottawa, but I actually use it directly or indirectly on a daily basis. All of the data is sourced using Darksky.net's API which allows for 1000 free calls per day, enough to update the data every 5 minutes. I have a simple shell script that fetches the data and translates it into another PHP associative array using standard UNIX utilities. It requires the API key as an arguments, but can then easily be run as a cronjob. The basic data is provided in a reasonably compact "widget" and the more complex data is hidden until various parts of the visible blocks are clicked. My Magic Mirror project actually fetches the same data file from the website in order to provide me with my current weather and the forecast information discussed next.

Previous Page

Page 3 of 4

Next Page