ACC Technical Notes

Here are a few techical notes from the site webmaster and club techie.

The system on which the site is based

The website is written using the Bootstrap 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.

Folder structure

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.

Image sizes

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'.

Icons on mobile devices

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).


Apple IOS

You can add the ACC site to the home screen on your iPhone or iPad as follows:

  • Start Safari.
  • Get up the site home page.
  • Touch the 'share' icon (probably to the left of teh URL box).
  • Touch the 'Add to Home Screen' option.

Now go to your home screen to use the ACC icon.


Google Android

You can add the ACC site to the home scren on your Android phone or tablet as follows:

  • Start Chrome
  • Get up the site home page.
  • Touch the star icon next to the long URL.
  • Touch Save (perhaps after deciding where you want to save it.
  • You should now return to the main web browser, viewing the website.
  • touch the line of three dots on the top right. This will cause a set of options to drop down.
  • Touch 'Bookmarks'.
  • Find where you saved the ACC item. It should be clear, with the ACC icon being visible.
  • Touch and hold the ACC icon. A set of options will appear, including 'Add to home screen'.
  • Touch 'Add to home screen'

Now go to your home screen to use the ACC icon.


Microsoft Windows Phone

You can add the ACC site to the home screen on your Windows phone as follows:

  • Start Explorer.
  • Get up the site home page.
  • Touch the row of dots at the bottom right. A set of options should appear.
  • Touch 'pin to start'. A 'pinning' message will appear.

Now go to your home screen to use the ACC icon.

Other tech notes

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 Brackets, which is a modern open-source code editor (though written by Adobe) that can show the dynamically-changing page in another window, has auto-complete, and flags HTML errors as you go.

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-2015 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.