ocPortal Tutorial: Providing galleries
Written by Chris Graham, ocProductsA gallery system is provided for the storage, organisation and viewing of images and videos. The gallery serves much like a gallery in reality: as a direct presentation medium. This tutorial describes the basic gallery features, and how to use them.
Table of contents
Viewing a gallery that has a subgallery
Galleries may have 'representative images' (rep-images). When a user views a gallery with sub-galleries, the sub-galleries are actually shown with their rep-images, so as to make them look more attractive and give an impression of the contents. Rep-images may be chosen when adding or editing a gallery, or when adding an image to a gallery it can be chosen that that image shall also become the rep-image.
A gallery in flow mode
Galleries are given a name, and a title. The name should be a code-name that can easily be typed in a URL, rather than a cleanly readable name. For example, 'holiday2004' would be a good gallery name for a gallery with title, 'Holiday Pictures, 2004 (Sweden)'.
A gallery in multi-page mode
- Flow mode – this mode allows you to see all the entries in the gallery at the same time as viewing one of the entries. This makes navigation more efficient
- Multi-page mode – this mode provides page browsing features so as to be able to browse through a large numbers of entries
From the gallery, the user can choose any of the available entries (images or videos), and the chosen entry will be presented to the user on a full wide page.
Gallery indexA gallery index is provided that lists all galleries in the system. Galleries that are empty are omitted from this list.
The index is not linked onto the menus by default but may be added via the entry-point finder in the menu editor if you want it.
WatermarkingWhen you add or edit a gallery you may choose watermarks to be automatically added to any of the 4 corners of any added images that you select to be watermarked. A watermark is just a semi-transparent image that is overlaid across images as an official mark, or to prevent unauthorised reproduction. If you wish to place a watermark on an edge, you simply make a corner watermark image that includes enough transparency to change the location for the main image to be placed.
Watermarks are actually 'inherited' in the tree structure: in other words, when adding an image, watermarks will be chosen from the first gallery back down towards the root gallery that actually defines watermarks.
Viewing a gallery image
VideosGalleries have powerful video support. ocPortal will analyse the file types of uploaded videos and use carefully crafted templates that use browser plug-ins that are most appropriate to that file type. For example, QuickTime files will be displayed with HTML to use the QuickTime plugin.
ocPortal can usually auto-detect video widths, heights and lengths, from the actual video files.
Adding an image to a gallery
The rule is very simple: ocPortal will order by filename if when taking all numbers out of all filenames in the gallery, the filenames are all the same.
For example, a gallery with the following named files would not be ordered according to a scheme:
Slide-showsWhen viewing an image or video visitors will be able to start moving through all the subsequent images/videos in the gallery automatically. This is referred to as a slide-show. Visitors may pause the slide-show via a click or keypress, which could be triggered via a hand-held USB control device (as such devices can be mapped to such input actions).
If you would like to change the speed of the slide-show you can do it via editing the GALLERY_ENTRY_SCREEN template.
On some browsers, alt-clicking on the slideshow will activate the browser full screen mode.
e-cardsWhen viewing an image visitors will have an option (if the 'recommend' addon is installed) to send the image as an e-card. This is a good form of website promotion, as the e-card also functions as a kind of website recommendation.
If you don't want this feature you can remove it by editing the GALLERY_ENTRY_SCREEN template.
Video formatsocPortal supports most video formats, but video on the web is fraught with complexity.
The following formats are best to use:
- mp4 (with h.264 aac encoding)
- webm (the new [at time of writing] Google-sponsored format, supported natively in all web browsers except IE and Safari, but available in those via normal system codec plugins)
The following are almost as good:
- mov (with h.264 aac encoding – this modern QuickTime format is identical to mp4)
- flv (works as long as Flash is installed)
The following common formats are not safe:
- avi (could be many different codecs, no consistent support even for the MPEG-compatible encodings like DivX or XVid or MS-Video, plus your browser might not load the correct plugin)
- wmv/asf (requires Windows Media Player plugin, only properly supported on Windows)
- ogv (Ogg video, essentially replaced by WebM)
- mpeg/mpg (old MPEG formats, no consistent plugin support, plus your browser might not load the correct plugin)
- rm/ram (requires RealPlayer plugin, not available on Linux)
- qt (Old quicktime format)
You can set it up so that any video format is 'transcoded' to MP4 by setting the FFMPEG executable path in the configuration. For this to work, 'FFMPEG' needs to be installed on the server. The default transcoder settings are set to produce MP4 h.264 DVD-quality movie files.
Unfortunately FFMPEG does have some major problems with audio/video synchronisation, mixed bit-rates, and lack of adaption to corrupt files, and incompatibilities between versions. It's a sad situation but there's no real cheap solution to it for now, other than to focus on supporting WebM to become a dominant universal standard.
- A category for images and videos
- An image chosen to represent a category, when a box for it is displayed
- Teaser page
- A page that only shows gallery rep-images and details, intended for sites where the gallery requires subscription (stock art sites, auction sites, etc.)
- A standard mark shown on an image to mark its identity, often done for a number of different reasons
- Flow mode
- The gallery view mode intended for attractive display of small galleries
- A gallery placed beneath another gallery