Here is a basic example of template code that may be used to display video submitted with USP Pro. Provided to give you an idea of where to begin, how things work, etc. An example and a starting point to help you visualize what’s happening, etc.

Update: now you can use the free Helper plugin to display custom fields, images, and video automatically.
Related: You may also want to check out the video tutorial on Displaying Linked Thumbnail Images »

Display images via theme template

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. Note that this is just an example, the actual custom field names may be different depending on your form and so forth.

  • 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.

Related Resources