This quick tutorial explains how to use USP Pro to submit and display and via its URL. For example, if you have an external site that provides a bunch of images, you can enable users to submit the image URLs via your USP Form. Then you can display the images on your site by adding simple bit of code to your theme template.

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

Step 1

First define a custom field for your form. Here is an example:

field#input|name#image-url|for#image-url|type#text|label#Image URL|placeholder#Image URL

Once this custom field is defined, add it to your form via its corresponding shortcode. This will display a field that enables users to enter an image URL. Then when the post is submitted, the post will have the custom field attached. This enables you to display the image in your theme (see next step).

Step 2

To display the submitted images on the front-end, add this template code to your theme template (anywhere inside the WP Loop):

<?php $image_url = get_post_meta(get_the_ID(), 'usp-custom-image-url', true);

if ($image_url) {

	echo '<img src="'. esc_url($image_url) .'" alt="" />';

} else {

	// fallback image

} ?>

Here we are checking if the image URL is available. If so, we display the image. If not, you can use get_the_post_thumbnail() (or any other suitable code) to display a fallback image. That’s the basic idea, meant to be used as a starting point for further customization.

Important: if the images are from another site, make sure that you have permission to display them. Otherwise, you’re hotlinking, which is frowned upon according to current convention. Basically, unless you have permission to display content from some other site, you’re stealing resources (content, bandwidth, memory, etc.).