HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

ocPortal Tutorial: Providing galleries

Written by Chris Graham, ocProducts
{!DOC_GALLERIES} This tutorial describes the basic gallery features, and how to use them.



Gallery structure

Thumbnail: Viewing a gallery that has a subgallery

Viewing a gallery that has a subgallery

Galleries are organised in a hierarchical (tree) structure. For more information of these tree structures, see the 'Providing downloads' tutorial, as the download system is the perfect clean example of an ocPortal tree-structured system. The gallery structure is more complex than that of the download structure, and additional information on it is given in the 'Advanced galleries' tutorial.

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.

Galleries

Thumbnail: A gallery in flow mode

A gallery in flow mode

A gallery is a category of the gallery system, and is used to hold images and videos (together, gallery entries). Galleries can also hold audio files which are treated in the same way as videos.

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

Thumbnail: A gallery in multi-page mode

A gallery in multi-page mode

There are two display modes for galleries:
  • Flow mode - this is intended for galleries that don't have a large number of entries.
  • Multi-page mode - this mode provides page browsing features, with the images presented in vertical sequence.

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 index

A gallery index is provided that lists all galleries in the system. Galleries that are empty are omitted from this list.

Watermarking

When 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. You do not need to specify any watermarks at all if you do not want to.

Teasers

Thumbnail: Viewing a gallery image

Viewing a gallery image

For various kinds of website, such as expert photography communities, galleries provide a place to position premium or important content. ocPortal forms a 'teaser' system, whereby you can encourage users to join a certain user-group (perhaps, via some form of subscription) that has access to view certain galleries, by 'teasing' them about them - you can define 'teaser' text for each gallery, and use the :tease page to display it, other details, and the rep-image, to them.

Videos

Galleries have powerful video support. ocPortal will actually look at 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.

In addition, ocPortal has a unique (to our knowledge) feature, whereby video widths, heights and lengths will, where possible, be automatically detected from the file itself. This is made possible by special code we developed that actually reads the main video file formats.

Ordering

Thumbnail: Adding an image to a gallery

Adding an image to a gallery

Gallery entries are ordered according to the order they were added to the system. If you are batch importing (covered in the Advanced Galleries tutorial), then you may want to define a custom ordering. To do this, you just need to give all the images in the batch names that are consistent with a numbering scheme of your choice. ocPortal will detect numbering schemes automatically, and order by them.

The rule is very simple: ocPortal will order by file-name if when taking all numbers out of all file-names in the gallery, the file-names are all the same.

For example, a gallery with the following named files would not be ordered according to a scheme:
  • foo.png
  • foo1.png
  • foo2.png
  • foo2something.png
But without the last image, the contents would be ordered by file-name.

FLV files

ocPortal can also support FLV files. To do this, extract FLVplayer to the data directory.



Concepts

Gallery
A category for images and videos
Rep-image
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.)
Watermark
A standard mark shown on an image to mark it's identity, often done for a number of different reasons
Flow mode
The gallery view mode intended for attractive display of small galleries
Subgallery
A gallery placed beneath another gallery

See also