WPreso Video Flow
WPreso Video Flow is a WordPress plugin that allows you to create a Cover Flow of Videos from your video posts or video category.
It looks through the post, finds the video, gets the image for the video and displays this image along with an excerpt of the post.
All images are cached and if one of the other video plugins from WPreso is used, the same image cache is used, to save space and speed up performance.
Installation
- Upload the whole plugin folder to your
/wp-content/plugins/folder. - Go to the Plugins page and activate the plugin.
- Activate the plug-in as usual.
- Click the Settings link to customize the settings.
Documentation
Options
All options are optional and when set will override the defaults set in the settings page.
| cat | Takes the category ID number, separate multiple category IDs by comma (,). If you wish to exclude a category, add a minus sign in front (-1). If it is not set, all categories will be used. |
| num | Takes the number of posts you would like to check for videos. If a post does not contain a video, it will be excluded, but will still count as one of these numbers. So lets say you want the Video Flow to show the last 5 posts, but post number 3 does not have a video, it will then only show 4 posts in the Video Flow. |
| off | Takes the offset number that you would like the Video Flow to start at. Lets say you are using one of the other WPreso Video Plugins to display the first 5 video posts of a category. Then you can exclude the first 5 posts from that category in the Video Flow by setting an offset. |
| ran | Can be set to “true” (lowercase) and will display random posts from the selected categories. |
| rfl | Can be set to “true” (lowercase) and will enable image reflection, using transparent PNG images. |
| sld | Can be set to “true” (lowercase) and will enable a slider bar and a previous and a next button for easy navigation. |
| cap | Can be set to “true” (lowercase) and will enable image caption, using the post title. |
| exi | Takes the ID numbers of posts that you would like to exclude. Lets say you have a special post or you know that this post will not contain a video, you can exclude it by adding the posts ID number here. To exclude multiple posts, separate them by comma (,). |
Shortcodes
To add the WPreso Video Flow inside a post or page, use the shortcode
[wpvf].
All options are optional and when set will override the defaults set in the settings page.
Here is how the options will look when using shortcodes.
| cat | [wpvf cat="1,-2,4"] will display posts with videos from category 1 and 4 but exclude posts with videos from category 2. |
| num | [wpvf num="5"] will display 5 post with videos, if one of the 5 posts does not contain a video it will be skipped and it will then only display 4 posts. |
| off | [wpvf off="5"] will display posts starting from the sixth post. |
| ran | [wpvf ran="true"] will enable random posts. |
| rfl | [wpvf rfl="true"] will enable image reflection, using transparent PNG images. |
| sld | [wpvf sld="true"] will enable a slider bar and a previous and a next button for easy navigation. |
| cap | [wpvf cap="true"] will enable image caption, using the post title. |
| exi | [wpvf exi="1,2,10"] will exclude the posts with the IDs 1, 2 and 10. |
Theme functions
To add the WPreso Video Flow inside Theme, use the function
<?php echo wpreso_videoflow();?>.
All options are optional and when set will override the defaults set in the settings page.
Here is how the options will look when using the function.
| cat | <?php echo wpreso_videoflow("1,-2,4");?> will display posts with videos from category 1 and 4 but exclude posts with videos from category 2. |
| num | <?php echo wpreso_videoflow("","5");?> will display 5 post with videos, if one of the 5 posts does not contain a video it will be skipped and it will then only display 4 posts. |
| off | <?php echo wpreso_videoflow("","","5");?> will display posts starting from the sixth post. |
| ran | <?php echo wpreso_videoflow("","","","true");?> will enable random posts. |
| rfl | <?php echo wpreso_videoflow("","","","","true");?> will enable image reflection, using transparent PNG images. |
| sld | <?php echo wpreso_videoflow("","","","","","true");?> will enable a slider bar and a previous and a next button for easy navigation. |
| cap | <?php echo wpreso_videoflow("","","","","","","true");?> will enable image caption, using the post title. |
| exi | <?php echo wpreso_videoflow("","","","","","","","1,2,10");?> will exclude the posts with the IDs 1, 2 and 10. |
CSS
These are the default CSS rules, but you may override them at any time via your own CSS rules.
.imageflow{overflow:hidden; position:relative; text-align:left; visibility:hidden; width:100%}
.imageflow img{border:none; position:absolute; top:0px; visibility:hidden; -ms-interpolation-mode:bicubic}
.imageflow p{margin:0 auto; text-align:center}
.imageflow .loading{border:1px solid white; height:15px; left:50%; margin-left:-106px; padding:5px; position:relative; visibility:visible; width:200px}
.imageflow .loading_bar{background:#fff; height:15px; visibility:visible; width:1%}
.imageflow .navigation{z-index:10000}
.imageflow .caption{font-weight:bold; position:relative; text-align:center; z-index:10001}
.imageflow .scrollbar{border-bottom:1px solid #b3b3b3; position:relative; visibility:hidden; z-index:10002; height:1px}
.imageflow .slider{background-image:url('../images/slider.png'); background-repeat:no-repeat; height:14px; margin:-6px 0 0 -7px; position:absolute; width:14px; z-index:10003}
.imageflow .images{overflow:hidden; white-space:nowrap}
.imageflow .button{cursor:pointer; height:17px; position:relative; width:17px}
.imageflow .previous{background:url('../images/button_left.png') top left no-repeat; float:left; margin:-7px 0 0 -30px}
.imageflow .next{background:url('../images/button_right.png') top left no-repeat; float:right; margin:-7px -30px 0 30px}
Cache
The Video Images are cached for improved performance. The Video Image Cache directory is located in the wp-content folder and is called wpreso-video-cache. The reason it is located there is to have one cache folder for all WPreso video plugins, that is not deleted when the plugins are updated.
Localization
The plugin is currently available in:
- English
- Danish
If you have a translation for this plugin, please send it to trans[at]wpreso.com and mark it with the videoflow and your name, so that you may get credit for your work.
Demo
You can see this plugin in action at the showcase site WPVideoTutorialSite.com.
Screenshots
Requirements
Has been tested with WordPress 2.8+.
Requires the <?php wp_head(); ?> hook for the css and javascript to be loaded.
Works well with Viper’s Video Quicktags.
Only works with the following video sites:
- Blip.tv
- Dailymotion
- Google Video
- Metacafe
- Myspace
- Viddler
- Vimeo
- Youtube
Changelog
0.3 Fixed an error with a call to a function that belonged to WPreso Video FeatureBox.
0.2 Removed dependency on deprecated function mime_content_type() for CSS inclusion.
0.1 Initial release.
Download
License
My part in the plugin is released under the X11 (MIT) License.
imageFlow has a free and commercial license, please visit imageFlow’s license page to find the license that suits your needs.
Credits
- WordPress for their software, which is awesome.
- Viper’s Video Quicktags for a superb and easy to use video plugin.
- ImageFlow for a sweet javascript cover flow script. Commercial sites need a license to use the script.
- Ozh for a great tutorial on option pages.
- Smashing Magazine for a smashing tutorial on shortcodes.
- Youtube, Google Video, Blip.tv, Vimeo, Dailymotion, Metacafe, Viddler and Myspace for making it simple to extract video image information.


