Hyperframe flatfile CMS

Gallery Plugin

picture browser and slideshow

Hyperframe includes a plugin which allows any directory containing images in jpg, png or gif format to be turned into a full-featured gallery, without the need for any manual inventorying of images or form box-ticking. New images added to the gallery location by FTP or by using the Hyperframe uploader automatically become part of the gallery browser page. As such this represents a significant saving in webmaster donkey-work over systems which require each newly uploaded image to be registered in a database to make them visible to the gallery.

A slideshow function allows for automatic timed display of gallery images, and includes an intelligent zoom capability which displays large images to the best possible advantage within the available screen space, whilst maintaining their correct aspect ratio. Images can be of moderately larger pixel dimensions than the viewing screen without this causing problems, thus a single size of uploaded image file will suit most client computers.


1;image 2;image 3;image 4;image 5;image 6;image

A small sample of images of varying sizes and aspect ratios.

In line with Hyperframe policy there are no annoying gimmicks like expanding popups, dissolves or fades. Instead the image change is as near to instantaneous as it can be made, which we think creates a more satisfying, more professional look and feel than animated changes. Preloading avoids any 'venetian blind' loading effect, even on slow Internet connections. 

The gallery is subdirectory-aware, and presents a whole directory tree to the viewer such that it appears to be a single list of images. This has significant advantages where several photo-shoots containing same-named images need to be included in one gallery. If there is the risk of a file naming clash or over-write, just upload to separate directories and the clash is avoided.

Galleries would normally be created under the img/ base directory of the website, but this need not be the case.

To use the plugin, include the following php in your page sourcecode:


Where "img/gallery" is the location of the pictures in relation to the root of the Hyperframe website. Note that it is a relative path with no leading slash. 10 is the slideshow interval. "80px" is the maximum height of the browser thumbnails, and "250px" the maximum width. That is genuinely all there is to it. Apart from styling the gallery to suit your website, of course.

The gallery display is freeform and floating, and attempts to fit the most suitable number of images into the available screen space. It is not necessary for images to be of identical size or aspect ratio. In general it is best to set the thumb height to be the limiting factor and allow for some latitude on width, as this achieves more even rows in situations where images are a mix of  landscape and portrait.

Thumbnails are created in a 'thumb' directory under each picture directory. If images are replaced with newer files,  then the thumbs are automatically recreated. Note however that if you want to change the thumbnail size, you need to manually delete the existing thumbs, otherwise they will not be updated until the fullsize images are changed.

On first use after an upload, there will be a delay whilst thumbnails are created. The browser may seem unresponsive during this time. For very large galleries, several page refreshes may be needed to create all of the thumbnails.

As of v2.5 the following improvements apply: 

  • Images are now sorted into alphanumeric order instead of only alphabetic order. That is, numbered images will be displayed as 1,2,10,20 and not 1,10,2,20. Thus, there is no longer any need to (re) number images 1,2,10  as 0001, 0002, 0010 etc to avoid this issue.
  • A webpage may now contain multiple galleries. Each gallery should refer to a separate collection of images. The slideshow function will encompass all galleries on the page, in the order in which they appear on the page, starting from whichever image was first selected. Aside from the obvious photo gallery application this is an extremely handy way of displaying links to explanatory images in a research paper or the like, and avoids all the usual donkey-work of creating small and large copies, placing them in a tabular layout, hyperlinking them, etc.