Over twenty sample backdrop images are supplied, a couple of which are demonstrated below. Alternatively you can supply your own custom backdrop image; as either a dragged and dropped image or an image stored at a warehoused location. Therefore you can build a completely custom Filmset.

You can either display Filmset in the normal page flow or embed it somewhere else, such as a theme ExtraContent container. Multiple Filmset stacks can be safely used on the same webpage, if you need to display content within different devices.

The content you 'frame' within the backdrop can either be layered behind or front of the backdrop cutout. Layering in front has the advantage of allowing users to continue interacting with content, like video. Filmset support several different content types, including HTML5 video, images, iFrames, YouTube and Vimeo.

Filmset solves the problem of needing to do extensive image editing in software like Photoshop. And for video presentation, you no longer have to edit the video to include the frame; therefore significantly reducing the file size of the video and making playback more accessible for end users. The convenience of keeping the backdrop separate to the content also brings the benefit of allowing you to easily change the backdrop image in future.

Examples

Here are a couple of examples of what's feasible to create with the Filmset stack in a matter of seconds. You can download the free demo version of this stack to experiment with all the available backdrops and practice setting up your own.

Setup

This is a stack element and therefore requires RapidWeaver and the Stacks plugin. Filmset has been carefully designed with the novice RapidWeaver user in mind, however there are enough features and customisable options to satisfy expert RapidWeaver users too. Follow these instructions to get started.
  1. Download and install the stack in the normal way. Open the Stacks Library and search for Filmset.
  2. Drag and drop a copy of the Filmset stack into your webpage.
  3. From the first Filmset setting, use the option menu to choose a backdrop design or load your own backdrop image.
  4. Scroll-down the settings to the Content setting. Use this option menu to change the type of content you want to display.
  5. If you want to toggle content being layered in front or behind of your backdrop, use the Content Layering options.
  6. Preview your webpage to see the result. Save, export or publish, once done.

As always, mousing over the settings displays a small informational tooltip about what each one does. Filmset requires RapidWeaver and the Stacks plugin. This stack will not function with other publishing platforms like Wordpress.

Multiple Filmset stacks can be safely used within the same webpage. However careful attention should be directed towards keeping a watchful eye on page loading speeds and file sizes. Lots of video could result in slower loading webpages.

Custom Backdrops

From the Backdrop Design option menu, choose Custom Image; either a dragged-and-dropped image or a warehoused image.

Two inputs are shown for the regular resolution image and the retina resolution image. The retina resolution image is optional; typically an image double the width and height of the regular resolution image. Ideally the regular resolution image should be no greater than 400 KB, to help keep webpages loading quickly. Use standard JPG images for backdrops requiring no cutout regions or PNG images for backdrops that need a cutout. All images must be 72 DPI to prevent certain web browsers resizing them.

The image ALT attribute is optional. If your custom backdrop image conveys important information, then it is recommended you supply a short description that explains what the image is about. This will be used by accessibility screen reading software and some search engines. If the backdrop image is purely for decoration, then there is no requirement to provide an ALT attribute (leave this setting blank).

Once your custom backdrop image is added, use the Content Top, Content Left, Content Height and Content Width sliders. These position a red-bordered boundary box over the backdrop in edit mode. The red-bordered boundary box provides visual guidance for the positioning of your content. The content will be stretched to fill this box.

Notes on video setup

If using your own HTML5 video, aim towards keeping video clips as small as possible. Typically video will only autoplay in most web browsers if the Mute option is simultaneously enabled. MP4 is the most common and widely supported video format. You can use free software like Miro Video Converter or Handbrake to prepare your video for the web. OGG and WebM video formats are optional, and can be supplied for web browsers that prefer these formats instead.

Youtube and Vimeo video setup requires that you supply the ID of the video, not the whole video URL or share link. The video ID is easy to take from the browser address bar and is normally formed as a string of random letters, numbers and other characters. Where supported, a couple of checkbox options are provided for you to customise the presentation of the embedded video.

In the case of HTML5 video you host yourself, it may be desirable to include on-screen captioning or subtitling. This can be accomplished by enabling the Video Captions / Subtitles setting. You are then presented with an HTML code box, to provide the details for each 'track':

<track label="English" kind="subtitles" srclang="en" src="captions/vtt/sintel-en.vtt" default>
<track label="Deutsch" kind="subtitles" srclang="de" src="captions/vtt/sintel-de.vtt">
<track label="Español" kind="subtitles" srclang="es" src="captions/vtt/sintel-es.vtt">

This code follows the normal guidelines for captioning or subtitling. We use the <track> element. You can refer to this webpage link for the details:
https://www.html5rocks.com/en/tutorials/video/basics/