Composr Tutorial: Providing galleries

Gallery structure and settings

Viewing galleries

Images

Image formats

The following image formats can be used:

• .jpg/.jpeg – highly compressed, but loses image accuracy. Great for photos because the accuracy loss is hard to notice for natural scenes.
• .png – well compressed, with no accuracy loss. My personal favourite choice if bandwidth is not generally constrained. Soon will be able to do animation too via APNG.
• .gif – useful if you need animation, but limited to 256 colours and poor compression. Generally a poor choice, use video or APNG instead.

Nuance of using a File/Media Library image

If you choose a 'File/Media Library' image to add to a gallery (or on the edit image screen), Composr will not use this file directly. Instead, it will be copied to uploads/galleries. This is so Composr can apply cleanup tools to the image (such as adding watermarks) without editing the original file in your file/media library.

If you were to go back and edit this image, the 'Image' field will have a 'URL' file pointing to uploads/galleries instead of the File/Media library image you chose. This is because Composr is using the copied and edited version of the image and not the one from the file/media library.

Videos

Galleries have powerful video support. Composr will analyse the file types of uploaded videos and use carefully crafted templates that use the best way to display that file type. For example, h.264 files will be displayed with a HTML5 video player.

Composr can usually auto-detect video widths, heights and lengths, from the actual video files.

Video formats

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

The following are somewhat usable:

• .mov (with h.264 aac encoding – this modern QuickTime format is identical to mp4)
• .webm (the Google-sponsored format, supported natively in all web browsers except Internet Explorer/Microsoft Edge and Safari, but available in those via normal system codec plugins)

The following common formats are not usable anymore:

• .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, Windows QuickTime plugin no longer maintained and insecure)

Further documentation is provided in the Supplementary web technologies (media, social networking, etc) tutorial.

At the end of the day it may be best just to use the galleries on your site as a wrapper around Vimeo or YouTube. Read on.

Transcoding

Composr does not have inbuilt transcoding support, so you either need to:

1. just use Vimeo or YouTube. You can post videos on Vimeo/YouTube, then add a video in Composr using the normal Vimeo/YouTube URL as the video URL. Composr will then automatically embed the Vimeo/YouTube player.
2. install the hybridauth addon, configure for YouTube provider syndication – to automatically use YouTube as a transcoder.
3. just post in h.264 .mp4 to start with. It has become the standard and is supported in all browsers. The only down-side is having to learn how to set your codec settings right when you make the video file.

We did previously have native inbuilt transcoding support, but due to the bugginess of transcoders, the server overhead, and because the world has standardised on h.264, it's been removed.

Audio (and more)

Audio is supported as specialisation of video support if the "Allow audio(+) as videos" configuration option (Admin Zone > Setup > Configuration > Content editing options > Media) is on.

Naturally a gallery must also have video files enabled for it, for audio files to be supported.

In fact, virtually any kind of media, including random things like URLs to Google Maps, may be posted as a video. The media rendering system Composr uses is quite extensive.

If you would rather the system said 'multimedia' instead of 'video', you can set the "Allow audio(+) as videos" configuration option in a way to do that.

Length, width, and height

Composr can sometimes automatically detect width/height/length of uploaded videos/audio.

If it can't be auto-detected then you should enter it manually, as it can cause various issues, such as misreported lengths in podcasts.

However, if you install the non-bundled getid3 addon then this can work much more consistently.

Ordering

Gallery entries are ordered in the same 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. Composr will detect numbering schemes automatically, and order by them.

The rule is very simple: Composr 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:

• foo.png
• foo1.png
• foo2.png
• foo2something.png

But without the last image, the contents would be ordered by filename.

Slide-shows

When 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.tpl template.

On some browsers, alt-clicking on the slideshow will activate the browser full screen mode.

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.

It is very important to note that watermarks will appear on your full image everywhere it is displayed. Composr will not save any copies of your image without the watermarks being applied; they are applied permanently when you add/edit new image files. You will therefore want to ensure you keep the original files without the watermarks in your own archive should you wish to change how you do watermarking later on. There is one exception to this; if you select a File/Media Library image, Composr will copy that image into 'uploads/galleries' and apply the watermark on that image. That way, your original file in the file/media library is preserved.

Watermarks are applied using a reverse tree structure. That means for each corner, Composr will start from the immediate child gallery and navigate up to each parent until it finds a watermark for that corner (or determines none of the galleries have one set). For example, let's say you have a gallery called 'Parent gallery', which has a top-left watermark set. You also have a sub-gallery under that called 'Child gallery', which defines a top-right watermark. When you add an image into 'Child gallery', it will have both the 'Child gallery' watermark in the top-right corner and the 'Parent gallery' watermark in the top-left corner. Let's say 'Parent gallery' and 'Child gallery' both define a top-left watermark. When you add an image under 'Child gallery', it will have the 'Child gallery' watermark since children take priority (but if you added an image under 'Parent gallery', it would have the 'Parent gallery' watermark instead).

Note that watermarks cannot be added to animated images.

e-cards

When 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.tpl template.

See also

• Featuring content
• Providing downloads
• Advanced galleries
• Supplementary web technologies (media, social networking, etc)

Feedback

Have a suggestion? Report an issue on the tracker.