Plugin Planet

Premium WordPress Plugins

Here is an example of template code that may be used to display video submitted with USP Pro. Update: now you can use the free Helper plugin to display custom fields, images, and video automatically.</update>

Related: You may also want to check out the video tutorial on Displaying Linked Thumbnail Images →

Scenario: let’s say that your users submit an image and a video with each form. This means that each submitted post will have attached to it the following custom fields:

  • usp-file-1
  • usp-file-2

So to display conditionally the image and video for each post, we can add the following snippet anywhere in the Loop of the relevant theme template file (e.g., single.php):

<?php // display image and video from USP custom fields

$file1 = usp_get_meta(false, 'usp-file-1'); // image
$file2 = usp_get_meta(false, 'usp-file-2'); // video

$image_types = array('gif', 'jpg', 'png'); // image types
$video_types = array('mp4', 'ogv', 'webm'); // video types

$files = array($file1, $file2);

foreach ($files as $file) {
	$file_parts = pathinfo($file);
	if (in_array($file_parts['extension'], $image_types)) { ?>

		<div class="image-class"><img src="<?php echo $file; ?>" alt="" /></div>

	<?php } elseif (in_array($file_parts['extension'], $video_types)) { ?>

		<video autoplay="autoplay" loop="loop" muted="muted" preload="auto">
			<source type="video/mp4"  src="<?php echo $file; ?>">
			<source type="video/webm" src="<?php echo $file; ?>">
			<source type="video/ogg"  src="<?php echo $file; ?>">

	<?php }
} ?>

This technique works out of the box, but may be customized and fine-tuned to suit your needs. For example, you may need to change the file types, custom field names, and so forth to match your setup.