Media Integration

Integrated image lightbox, responsive videos, and audio player.

Integrated Lightbox

Poster Stack has an inbuilt and easy to use lightbox. This lightbox can be enabled or disabled per Poster Item. It will take all images inside one item and, by clicking on it, display the image in a lightbox.

To enable, select the "Enable Lightbox" checkbox on the Poster Item stack settings.

On the Poster main stack, you are able to define the lightbox background color and lightbox animation. In addition, select "Show Captions" to display the image alt tag as caption.

Lightbox
Lightbox
Lightbox
Lightbox

In order to create a small gallery of images, take a multi column stack (e.g. the inbuilt layout stacks inside Stacks plugin, or a column stack from Foundry or Foundation) and place images inside.

If you want to have image thumbnails automatically generated, optionally as square thumbnail, use the Poster Image Stack. This stack will create a thumbnail for you.

The inbuilt lightbox also works with images located on external sources, also know as warehoused images.

Example Image
Example Image
Example Image
Example Image
Example Image
Example Image
Example Image
Example Image

Responsive Video

In order to add videos to items so that they are responsive, just take the iframe embed code generated by all video platforms like YouTube or Vimeo and add this code inside an HTML stack to the Poster Item. Example:

<iframe src="https://player.vimeo.com/video/168925275" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Following general settings on the Poster main stack enables or disables responsive video:

Responsive Video
Responsive Video

HTML5 Audio (MP3) and Video (MP4) Player

Poster comes with an own audio and video player, allowing you to play audio (MP3) and video (MP4) files.

Back
< Previous Post
Next Post >