USP Pro provides an option to automatically display submitted images (located under the Uploads tab). It works great for most cases, but it may be necessary to customize things to suit your needs. This quick tutorial explains a technique that can be used to display a custom loop of images via your theme template.
Ways to display submitted images
When you enable users to submit posts that include images, you have several ways of displaying those images on the front-end of your site.
- Auto-Display Images — (option located under Uploads tab) automatically displays all submitted images in post content
- Featured Images — (option located under Uploads tab) automatically use submitted images as Featured Images for posts
- [usp_image] — check out the Shortcode Guide for various shortcodes that may be used to display submitted images
- usp_get_images() — check out the Template Tags Guide for various tags that may be used to display submitted images
Also check out this post for even more ways to display and customize submitted images.
Use your own HTML/markup to display submitted images
If your USP Form enables users to submit images, the URL of each image will be attached to the submitted post as a custom field. So for example if you visit the “Edit Post” screen for any submitted post, you can view the URLs of all images attached to the post.
Having the URLs of the attached images makes it easy to display custom loops of images, using whatever markup is necessary. Here is a simple example to give you an idea of what’s possible:
$images = array();
while ($i <= 10) {
$key = 'images-'. $i;
$image = get_post_meta(get_the_ID(), $key, true);
if (!empty($image)) $images[] = $image;
$i++;
}
foreach ($images as $url) {
echo '<img src="'. $url .'" alt="">';
}Add that code to any WordPress Loop (e.g., single-post view, archive view, etc.) and check the results in a browser. Once you see how that basic example works, you have a starting point to customize the markup (and other logic) however is desired.