Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

Video Addon

Share This Post!

The Video Addon for Envira Gallery allows you to display Youtube, Vimeo, Wistia or self-hosted videos in an Envira Gallery’s Lightbox.

Requirements

Installation

Please follow our instructions on how to install and activate addons.

In this instance, you’ll be activating the Envira Video Addon.

Setup

Once the Addon is activated, you can configure default settings in the new Videos tab that appears in the gallery edit screen.

You can configure how your videos function in the new Videos tab when editing your gallery.

You can add videos to your Envira Gallery in two ways:

  1. Insert from Other Sources
  2. Specifying a Video URL for an Existing Image


Insert from Other Sources

This method works with YouTube, Vimeo, Wistia or self-hosted videos, and will attempt to automatically grab the thumbnail image for the video from the video’s source.

First, select the Select Files from Other Sources button:

Choose the Select Files From Other Sources button to begin adding videos to your gallery.

Next, select the Insert Videos link:

Select the Insert Videos tab when adding files to your gallery to begin adding videos.

To add a video, select the Add Video button; you’ll see a list of fields appear for each video you want to add to your gallery. Specify a Title, Caption and Alt Text. Then specify a YouTube, Vimeo, Wistia or self-hosted URL, per the formats listed on screen, for the Video URL field:

Add the Title, Video URL, Caption and Alt you want to use for each video.

To add more than one video select the Add Video button and repeat the process for as many videos as you wish to add to your gallery.

Insert multiple videos into your gallery at the same time.

Finally, select the Insert into Gallery button to add the Video(s) to your gallery. You’ll see Envira’s auto-generated thumbnails for each video in the Images tab.

Once you've added videos to your gallery you'll see their auto-generated thumbnails appear in the Images tab.


Specifying a Video URL for an Existing Image

This method works with YouTube, Vimeo, Wistia and self-hosted videos, and can be used if you want to manually choose which image to use as the thumbnail image for your video.

First, as you normally would, add some images to your gallery that you want to use as thumbnail images for your videos.

Next, from the Images tab, select the pencil icon for a thumbnail image to edit its metadata:

To edit the metadata for each gallery image select the pencil icon for that image's thumbnail.

This will open the Edit Metadata lightbox where you can modify the image’s metadata.

In the URL field, enter your YouTube, Vimeo, Wistia or self-hosted video URL you want connected to this image. Finally, select the Save Metadata button:

You can manually change the URL field for any image's metadata to a video URL to load a video in lightbox view.

When you view your Envira Gallery, selecting the image your video belongs to will then display that video in the Lightbox view.

Videos will play in lightbox view when visiting the gallery you've added videos to.

That’s it! You’ve successfully created a Video Gallery!


FAQs

Q: Can I remove the black bars above/below my 16:9 videos?

A: Yes! To do this you’ll want select the pencil icon for the thumbnail image that links to any 16:9 ratio videos in your gallery. This will open the Edit Metadata lightbox where you can enable the Is 16:9 Video? option.

You can configure special metadata options for individual videos in your gallery.

Save the changes and your 16:9 ratio videos will now appear properly in lightbox view with no black bars!


Q: Can I make videos play in the gallery grid view instead of Lightbox?

A: Yes! To do this you’ll want select the pencil icon for the thumbnail image that links to any video URL in your gallery. This will open the Edit Metadata lightbox where you can enable the Display Video in Gallery? option.

You can configure special metadata options for individual videos in your gallery.

Save the changes and your video will now play in the gallery view instead of opening in Lightbox.


Configuration Options

This table describes the available configuration options for your Envira Galleries when using this Addon.

The Programmatic Name and Programmatic Values columns are used when configuring the Dynamic Addon’s shortcode or template tag, or when overriding the default settings for creating a new Gallery.

Config Item Description Options Programmatic Name Programmatic Values
Autoplay Videos? (All): Automatically begins playback of videos when they are displayed in the Lightbox view. Enabled/Disabled videos_autoplay 1,0
Show Play/Pause Controls? (YouTube, Wistia, Self Hosted): Display play and pause controls on videos in the Lightbox view. Enabled/Disabled videos_playpause 1,0
Show Progress Bar? (Wistia, Self Hosted): Display the progress bar on videos in the Lightbox view. Enabled/Disabled videos_progress 1,0
Show Current Time? (Self Hosted): Display the current playback time on videos in the Lightbox view. Enabled/Disabled videos_current 1,0
Show Video Length? (Self Hosted): Display the video length on videos in the Lightbox view. Enabled/Disabled videos_duration 1,0
Enable Volume Controls? (Wistia, Self Hosted): Display the volume controls on videos in the Lightbox view. Enabled/Disabled videos_volume 1,0

Developers

Filters

FileFilter NameArguments
/includes/global/common.php
 envira_videos_self_hosted_supported_filetypesapply_filters( 'envira_videos_self_hosted_supported_filetypes', $file_types )
 envira_videos_get_video_typeapply_filters( 'envira_videos_get_video_type', $result, $url, $item, $data )
 envira_videos_youtube_argsapply_filters( 'envira_videos_youtube_args', $args, $data )
 envira_videos_vimeo_argsapply_filters( 'envira_videos_vimeo_args', $args, $data )
 envira_videos_wistia_argsapply_filters( 'envira_videos_wistia_args', $args, $data )
 envira_videos_embed_argsapply_filters( 'envira_videos_embed_args', $args, $data, $url )
/includes/global/shortcode.php
 envira_videos_get_content_typeapply_filters( 'envira_videos_get_content_type', $content_type, $item, $ext )
 envira_videos_gallery_embedapply_filters( 'envira_videos_gallery_embed', $html, $result, $output, $id, $item, $data, $i )
/includes/admin/ajax.php
 envira_videos_is_hosted_videoapply_filters( 'envira_videos_is_hosted_video', $is_hosted_video, $video_type )
 envira_videos_get_thumbnail_urlapply_filters( 'envira_videos_get_thumbnail_url', '', $result, $video )
 envira_gallery_crop_image_argsapply_filters( 'envira_gallery_crop_image_args', $args )

Actions

FileAction NameArguments
/includes/global/shortcode.php
 envira_videos_enqueue_scriptsdo_action( 'envira_videos_enqueue_scripts' )

Changelog

1.2.8 (02-01-2017)

  • Fix: Minor bug fixes.

1.2.7 (01-19-2017)

  • Fix: Minor bug fixes.

1.2.6 (2016-12-08)

  • Fix css with captioned theme
  • Fix: Cases where youtube and vimeo videos display white screen
  • Fix: CSS loading when videos aren’t used

1.2.5 (2016-11-07)

  • Fix: Wistia Options not properly setting.
  • Fix: Output not filling lightbox.

1.2.4 (2016-11-03)

  • Fix: Pagination addon ( load all in lightbox ).
  • Fix: Various minor bugs.

1.2.3 (2016-10-04)

  • Fix: Conflict causing social buttons outside of lightbox with video addon resolved.

1.2.2 (2016-08-25)

  • Updated: Spanish translations
  • Fix: Conflict causing social buttons outside of lightbox with video addon resolved.
  • 1.2.1 (2016-05-05)

    • Added: Is 16:9 Video option to Edit Metadata when editing an image; allows video to be displayed in 16:9 format without black bars in the Lightbox view.
    • Updated: Standardised edit screen titles and descriptions

    1.2.0 (2016-04-21)

    • Updated: Spanish translation

    1.1.9 (2016-03-31)

    • Added: Documentation and Video Help Links
    • Updated: Moved image editing modal descriptions inline with fields

    1.1.8 (2016-03-10)

    • Updated: Spanish Translations

    1.1.7 (2016-02-25)

    • Added: Option to display play icon over image in gallery
    • Updated: Spanish Translations

    1.1.6 (2016-02-18)

    • Added: Attempt to get self-hosted video width and height to ensure Lightbox maximum dimensions are accurate, and do not cause black banding / scrollbars to display
    • Added: Option to Display Videos in Gallery (videos can be played in line within the Gallery)

    1.1.5 (2016-02-04)

    • Fix: Prevent undefined index on image thumbnail
    • Fix: Generate Lightbox thumbnail, if enabled, when inserting a new video to a gallery. Improves performance ensuring the thumbnail does not need to be generated when viewing the front-end gallery for the first time

    1.1.4 (2016-01-28)

    • Fix: Supersize self-hosted videos displaying scroll bars

    1.1.3 (2015-12-23)

    • Fix: Remove query parameters from Vimeo placeholder images so WordPress can import them correctly
    • Updated: Spanish translations

    1.1.2 (2015-12-17)

    • Added: Standardised return errors as WP_Error for better error reporting

    1.1.1 (2015-12-10)

    • Added: Spanish Translation
    • Added: Inserting self hosted videos now asks for an image placeholder
    • Added: Validatin on inserting videos to prevent errors
    • Fix: Display errors when inserting videos instead of throwing JS error

    1.1.0 (2015-12-03)

    • Added: Compat with Envira Gallery 1.4.0+ new media view / selection tool
    • Fix: Incorrect text domain for some strings

    1.0.4 (2015-11-26)

    • Added: Album Video settings
    • Fix: Gallery in Album Lightbox with Video works

    1.0.3 (2015-07-23)

    • Fix: getimagesizefromstring() compat for PHP 5.3-

    1.0.2

    • Fix: Supersize Addon compatibility

    1.0.1

    • Fix: Updated Helpful Tips in Metabox to reflect local video support

    1.0.0

    • Initial release of the addon.
    Share This Post!