Andrew Stannard Photography

Web Design

If you're not interested in web design then this page isn't for you, but if you're interested in how this site it put together and how the galleries work then please read on...

Basic Construction

One of the reasons that this site was put together was that I wanted to learn about web design and teach myself some HTML. As such the site has been built completely from scratch. All the code has been hand-written, and I haven't made use of any GUI editor. This has probably made my life harder, but it does mean that I know the purpose of every line of HTML and what it is doing.

The site uses Cascading Style Sheets (CSS) and HTML. The idea of CSS is that the graphical design of the site is separated from the content. This means that it is possible to change the style and design of the site by modifying just a single file.

For instance, the entire menu structure could be moved to the right of the page, all the fonts changed and all the colours of the site changed, just by modifying the CSS style file. This results in very 'clean' HTML, that is easy to edit and maintain - look at the HTML source for this page and you will see what I mean.

The Galleries

The photo gallery pages themselves do not rely upon just HTML. They use a combination of PHP scripts and a mySQL database to produce dynamic pages that are easy to update with new images and information

MySQL is a database format that allows the storage of data in any means you wish. In the case of this site, a mySQL database stores information about each of the images - such as the filename, shoot location, image description and category. To add a new photographs into the website is first a matter of exporting them from Lightroom at the correct size - with populated IPTC and EXIF data. The images are then uploaded to the site at which point a PHP script is used to pull the IPTC and EXIF data into the mySQL database.

Once this is done the PHP scripts ensure that the image will appear in the appropriate gallery. To achieve this the PHP script queries the database to find out all the images in a particular category (e.g. Norfolk or Lancashire). From this list it can then generate all the thumbnails and display information about the currently selected photo, together with the file itself. At the same time it can setup the 'next' and 'previous' links to move onto the next photo in the list.

The beauty of this system is that there is no need to change any HTML when a new image is added- the PHP and mySQL do all the hard work for you. If you are interested in creating your own site and have the necessary skills then I would definitely recommend considering a system similar to this.