The website is written using the Bootstrap Version 3, HTML5/CSS3 framework, which was written by a couple of geeks at Twitter. The design is based on the Slate theme with the photographer's 'touch of red' in the ACC lettering. I also considered Skeleton, which seemed to simple, and Foundation, which seemed too complex. It was a kind of 'Mother Bear' strategy.
I was thinking about using a CMS system such as Joomla!, which I had played extensively with it, but again there was far more in it than we'd need to use and I'm not a database enthusiast. Mother Bear played here also, as Wordpress and Drupal also bracket Joomla in terms of complexity. But I like to know as much as I can about what's going on under the hood, so Bootstrap seemed best.
It was still a bit of a wrestling match and took about 100 hours to code, but there's help on the web, especially in the Stackoverflow forums and assorted tutorial sites such as Coder's Guide, W3Schools and Tutorial Republic.
The gallery display uses the ekko-lightbox extension (see cms and js file references in person-name-gallery.htm files). Clicking on any image shows the gallery in a modal box, starting with the selected image. I looked at using a full-screen carousel but couldn't find any system that would sensibly handle images of different aspect ratio (the best you get is part of a picture with the rest falling off the side of the screen). The css and js files for this are still in the relevant folders.
The overall folder system uses a nest factor of one for all active .htm files, which means all references to such as css or other files is of the format '../folder/file.htm'. The master template is in the 'test' folder, where other experimental junk is also stored. Deeper folders are for such as documents and images. The home page is 'home.htm' in the '/club' folder. 'index.htm' files simply redirect to this file.
| Folder | Files |
|---|---|
| /bin | PHP scripts for mailing. |
| /blog | Blog files. Main blot items are in yymmdd-blog.htm format. There's a file named this to use as a template. |
| /club | General files of interest to club members or are about the club, including 'about', 'contact', for-sale, etc. |
| /club/club-docs | Official files, often in Microsoft Office format, such as committee roles and responsibilities. |
| /committee | Pages for committee documents, including meeting list, roles and responsibilities, and 'who is who'. |
| /committee/meeting-minutes | Minutes of committee meetings, in Microsoft Office format (referenced in committee-meetings.htm). |
| /competitions | Competition rules, notes, and (perhaps) results. |
| /css | CSS files. These define formats for fonts, paragraphs and so on. Most come from libraries, including the version of Bootstrap being used and other 'plugin' extensions. The only exception is the 'ds-stylemod.css' file which is loaded last to adjust styles to suit the |
| /fonts | Fonts as supplied in the bootstrap package and any extensions. |
| /galleries | Gallery files per person (person-name-gallery.htm) and 'inspiration' page. |
| /galleries/person-name-gallery | One folder per person, containing their gallery images. Also, 'thumb.htm' is a small image to use in the overall galleries.htm page and 'person.htm' is a 150 pixel high picture of the person. |
| /galleries/person-name-gallery/competition-entries | One folder per person, containing their competition images. Filenames are YYMMDD-image-title.jpg. The images are reduced to a maximum of 1024 horizontally and 768 vertically (VGA standard) to contain download speeds. |
| /help | General pages of interest to others, such as 'join us' and information about photography. |
| /img | Image files. Note that most personal files are in the galleries folder. |
| /js | Javascript files as supplied by bootstrap package and extensions. |
| /programme | The main programme page plus any related files. |
| /test | Not generally visible. Contains assorted experimental pages and basic TEMPLATE.htm used as a starter to create other files. |
The images sizes are as follows:
| Page(s) | Width | Height | Notes |
|---|---|---|---|
| Home page | 770 | 393 | Jumbotron slides need to be wide rather than high, and big enough to scale for desktop 'col-lg'. 'slide-n.jpg' files in /img folder. |
| About | 1400 | ˜435 | Always full-width. Wide images to scale in desktop 'lg-col' format. 'Wallpaper' images in /img folder. |
| Blog | ˜400 | ˜200 | Big enough to scale at various settings, including phone 'xs-col'. 'yymmdd-blog.jpg' in /img folder. |
| Gallery main page | 150 | up to 150 | Uses a file in each person-name-gallery folder called 'thumb.jpg' that is shrunk version a good example of the person's work. |
| person-name-gallery.htm thumbnail files. | Up to 400 | up to 400 | These are thumbnail images to display for members' galleries.The HTML allows for a smaller thumbnail to be used which are these files. |
| person-name-gallery.htm full files. | Up to 1024 | up to 768 | These are main images to display for members' galleries in the 'slide-show' format. |
| Committee whos-who | 200-300 | 200-300 | Photos of committee members. Kept in /img folder. Format: 'committee-name.png' (or jpg). |
| Member whos-who | ˜100 | 150 | Photos of members. Kept in /galleries/person-name-gallery folders. File name is 'person.jpg'. |
The system allows for the site home page to be saved on the main mobile device home screen on Apple IOS, Google Android and Microsoft Windows phones. In other words, it will look just like a regular app, with a cool 'ACC' button. (Note that this works only for the site home page).
You can add the ACC site to the home screen on your iPhone or iPad as follows:
Now go to your home screen to use the ACC icon.
You can add the ACC site to the home scren on your Android phone or tablet as follows:
Now go to your home screen to use the ACC icon.
You can add the ACC site to the home screen on your Windows phone as follows:
Now go to your home screen to use the ACC icon.
The club uses Fasthosts to host the website. They don't seem to allow parsing of PHP within .htm files, which is a nuisance as I wanted to dynamically include headers and footers.
I use Filezilla to upload the site. This is a fairly straightforward activity as it's an easily-managed-and-backed-up flat file structure (another reason to avoid CMS).
I edit the files of the site using Visual Studio, which is a modern and very widely-used code editor, written by Microsoft.
The club uses Dicentra to run digital-image competitions. It's specifically for club competitions and is written by photographers and former computer professors.
The site author and Webmaster is Dave Straker, who is also the club Programme Secretary.
Copyright 2004- Abergavenny Camera Club. The copyright of images on this website belongs solely to the photographer. Images may not be copied, downloaded or used in any way without the specific written permission of the photographer.