Skip to main content

Theater Add-on Presentations

The Theater Add-on packs in a variety of different presentation types, used for various purposes.

Here's the rundown ...

Blank​

It's blank. Just an empty box. You can set an aspect ratio for the box, or not. And you can use PHPlugins to do things on the page.

There's not much to it, and most people probably won't use this.

Compare: Juxtapose​

With Juxtapose, you can present images in "Before & After" image pairings. This is also a great way to compare differently processed versions of the same image, or for whatever other reason you like.

Example

Edit an existing album template, or create a new one using the Theater Add-on. In the designer, under Presentation, set:

Presentation Type: Compare: Juxtapose

You will have several options you can configure, mostly self-explanatory.

Create an album and assign the Juxtapose template. Drag images into the collection. The album MUST have an even number of images, i.e. images in pairs. Publish when ready.

Filmstrip​

An inline, horizontal-scrolling presentation.

Example

Flexstrip​

A sort of accordion like presentation, best suited to small image collections.

Panorama​

The Panorama presentation utilizes Paver JS, allowing ultra-wide images to be panned horizontally using mouse or touch gestures.

View our new Panorama demonstration, featuring images by Rod Barbee.

Usage Tips​

For best results, under Image Renditions => Photos, set Width to its maximum value, then use the Height slider to manage the size of your exported images. Because of high-resolution displays, such as Apple's "Retina" displays, you should choose a rendition height 2x your desired display height. For example, if setting Presentation Height as 480px, export your photos with a height of 960px.

Thumbnails are only used to represent the album in the parent Album Set; choose your thumbnail sizes accordingly.

Pym Embedded iFrame​

The Pym Embedded iFrame presentation type uses Pym.js to embed iframe content responsively, managing both the iframe's width and height. We consider this an advanced topic, and using the Pym Embedded iFrame will require some coding by the end user.

You may find it useful to review the Pym.js documentation.

To use this in Backlight:

  • Edit or create a new album template using the Theater Add-on.
  • Under Album Setup, set Presentation Type as "Pym Embedded iFrame".
  • When creating an album in Lightroom's publisher, fill the Video ID with the full URL to your iframe source.

The content for your iframe will be a standard HTML document. Before closing the HTML body, you'll need to include the Pym script and initialization:

...
        <script src="/backlight/modules/pangolin-theater/static/js/pym.v1.min.js"></script>
        <script>
            var pymChild = new pym.Child();
        </script>

    </body>
</html>

We have included a sample file with Backlight. Find it in the following location of your Backlight installation:

/backlight/modules/custom-resources/pym-example/index.html

This provides basic markup for your HTML page, with the necessary Pym JS script built-in. You may edit the page as you like, or copy-and-paste the script bits from the bottom of the file into your existing project.

I recommend putting these in a pym folder, under backlight/custom/pym.

Still Images​

The Still Images presentation type allows you to put one or more images on a page. Simple.

Edit an existing album template, or create a new one using the Theater Add-on. In the designer, under Presentation, set:

Presentation Type: Still Images

There are no options to worry about. Go to Lightroom, create a collection, choose this template, and publish.

Vegas Slideshow​

The Vegas Slideshow presentation type can be used to create an inline slideshow, or a full-screen slideshow in the page background.

Example

The slideshow supports auto-play, next/previous image navigation, and a variety of other options, and makes for an excellent splash screen for visitors to your website.

To create a full-screen slideshow, you should first create a full-screen page template.

Then, edit an existing album template, or create a new one using the Theater Add-on. In the designer, under Album Setup:

  • Inline Slideshow

    • Set Presentation : Vegas Slideshow
    • Set Type : Inline

  • Full-screen Slideshow

    • Set Page Template : select your full-screen page template
    • Set Presentation : Vegas Slideshow
    • Set Type : Full-screen

At this point, you should probably publish a few images so that you have something to look at, then return to Backlight to set your preferences as you like.

As a Home / Splash Screen​

After creating a Vegas Slideshow gallery, as above, return to Lightroom's Publish Services and edit the album's settings thus:

  • Under the Features tab:
    • Enable "Hide from Album Set".
    • Enable "Hide from Search".

Return to Backlight. In Backlight's menu, go Designer => Pages.

  • Click "Design" for your Home page.
  • For full-screen, set Page Template : select your full-screen page template
  • Under Insert Album, set Insert Album: On.
  • Select your Vegas Slideshow album as the album to insert.
  • Save.

Your Vegas Slideshow is now your Home page!

Video Embedding​

Theater allows embedded of locally host video via HTML5, or video from Vimeo or YouTube. Because hosting your own video can be difficult and costly, we recommend the latter.

Example

Vimeo, YouTube​

Edit an existing album template, or create a new one using the Theater Add-on. In the designer, under Album Setup:

  • Set Presentation Type: Video
  • Set Video Source: "Vimeo" or "YouTube"

You may set native video dimensions, but it's honestly not very important; you may keep the defaults if you'd like, and that will probably be fine. If there's any problem, you can always come back!

Set your preferences for the video presentation, then save your template.

With a template ready to use, go to Lightroom.

Under Publish Services, create a new album:

  • Under Base Settings => Template, select your template.
  • Under Page Content => Video ID, supply the video ID as below.

Vimeo

To embed video from Vimeo, get the video ID from the video's web address. For example, the typical Vimeo URL will look like this:

https://vimeo.com/47564100

And you would just need to copy the ID –- 47564100 -– from the end, then paste it into the Video ID field.

YouTube

To embed video from YouTube, get the video ID from the video's web address. For example, the typical YouTube URL will look like this:

http://www.youtube.com/watch?v=nGsTi05YPms

And you would just need to copy the ID –- nGsTi05YPms -– from the end, then paste it into the Video ID field.

HTML5 Video​

Video playback is supported on all modern devices, and video pages are responsive, suitable for desktop and mobile browsers alike.

HTML5 video embedding allows you to host video locally in your own space; it's also the most complicated to setup. The Vimeo and YouTube options are much easier to implement, but require that your video be hosted on either the Vimeo or YouTube website, respectively. HTML5 video ...

  • ... requires some one-time server-side setup to set appropriate MIME types for the video files, and ...
  • ... because each of the major browsers has different file support for video, it is necessary to create identical video files in a variety of formats.

Server-side Setup for HTML5 Video​

To get running with HTML5 video, we must add MIME type directives to a .htaccess file so that browsers are able to properly recognize the video files. This is a one-time setup that you will not need to repeat when adding new video to your site.

Access the root of your website using an FTP client; if hosting with [[http://www.bluehost.com/track/theturninggate/wiki|Bluehost]], that's your /public_html/ folder. Make sure your FTP client is configured to show invisible files, because .htaccess is usually invisible.

If you have a preexisting .htaccess file, edit it. If there is no .htaccess file, create a new file and name it ".htaccess", then edit it.

Add these lines to your .htaccess file to set the video MIME types:

<IfModule mod_mime.c>
    AddType video/mp4 mp4 m4v f4v f4p
    AddType video/ogg ogv
    AddType video/webm webm
    AddType video/x-flv flv
</IfModule>

Save the .htaccess file.

Preparing the Video Files​

Full HTML5 video support requires identical video files in three formats:

  • An h.264 MP4 file for Webkit browsers (Chrome, Safari, etc.)
  • An OGV file for Firefox and Opera
  • A WebM file for Internet Explorer

For older browsers lacking HTML5 video support, or browsers for which a video file is not supplied (i.e. if the OGV or WebM files are missing), then the h.264 video file will be played back using a Flash-based browser.

So while the ideal setup is the combination of MP4, OGV and WebM files, it is possible to supply only the MP4 file and to use the Flash fallback for other browsers. This is not recommended, however; if you are unwilling or unable to supply OGV and WebM video files, then please choose either the Vimeo or YouTube video methods above.

The easiest way to create the necessary video files is using a utility such as [[http://easyhtml5video.com/|EasyHTML5Video]] (Mac/Win, commercial) or [[http://www.mirovideoconverter.com/|Miro Video Converter]] (Linux/Mac/Win, free).

Your video files and the poster image should be named identically, for example:

my_awesome_video.mp4 \ my_awesome_video.ogv \ my_awesome_video.webm \ my_awesome_video.jpg

Your life will be easier if you ensure a human-readable title for your files.

Upload your files into a folder named "videosrc" in the main domain of your Backlight installation, i.e.:

%%/backlight%% \ %%/galleries%% \ %%/%%videosrc

Configure the Template for HTML5 Video​

Edit an existing album template, or create a new one using the Theater Add-on. In the designer, under Album Setup:

  • Set Presentation Type: Video
  • Set Video Source: "HTML5 Video"

You may set native video dimensions, but it's honestly not very important; you may keep the defaults if you'd like, and that will probably be fine. If there's any problem, you can always come back!

Set your preferences for the video presentation, then save your template.

With a template ready to use, go to Lightroom.

Under Publish Services, create a new album:

  • Under Base Settings => Template, select your template.
  • Under Page Content => Video ID, supply the video ID; the name of the video should then be entered into Lightroom without a file extension, i.e. "my_awesome_video".

But SHOULD I be using HTML5 Video?​

Just because you can, does not necessarily mean that you should. For example, if you're on a shared hosting plan such as those offered by Bluehost, then HTML5 Video is probably not for you. Serving video directly from your site will chew through your bandwidth quickly.

If you're serious about video privacy, delivery and platform scalability, then [[https://vimeo.com/pro|a Vimeo Pro account]] is worth serious consideration. Otherwise, check [[https://vimeo.com/help/faq/vimeo-membership|Vimeo's other membership options]] to find the level that's right for you.