This tutorial shares some examples of auto-displaying images using User Shortcodes. User Shortcodes work like regular WP shortcodes and can be added by the user to their post content before submission. That way they can specify where/which images are displayed in their post.

Related: USP Pro – Displaying Images »

Display any image based on URL

To display any URL on the Web, add the following shortcode to the submitted post content:

[image url="http://example.com/image.jpg"]

Display uploaded images

Let’s say that your form enables users to upload three images. These images can be displayed anywhere in the post content using the following shortcodes:

[img-1], [img-2], [img-3]

Here is an example of the post content field displayed on the USP Form:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Praesent eget orci sit amet massa luctus pulvinar at at turpis. 
Curabitur luctus magna ac ullamcorper viverra. Lorem ipsum dolor 
sit amet, consectetur adipiscing elit. 

[img-1]

Fusce posuere quis lorem a congue. Etiam convallis id tortor semper. 
In sit amet tempor sem, ultrices lacinia elit. Cras porttitor 
ultricies lorem vel pharetra. Fusce in lectus eget lorem ornare 
venenatis in at nisi. 

[img-2]

Fusce mollis scelerisque tellus non efficitur. Nam interdum magna 
ante, id porttitor ipsum facilisis nec. Suspendisse potenti. 
Etiam quis sem mauris. Fusce nec eleifend mauris. 
Pellentesque porta nibh dui. 

[img-3]

Suspendisse luctus sapien molestie, imperdiet mauris placerat, 
bibendum elit. Nullam tempor arcu eget enim convallis imperdiet. 
Nulla cursus, nunc ac tempus aliquam, mi diam fermentum enim, 
ut sodales sapien massa eget velit.
Pro Tip: to enable HTML tags like paragraphs, strong, em, and so forth in post content, you can enable Post Formatting.

Display links to uploaded files

Another User Shortcode worth mentioning is the file-n shortcode:

[file-1], [file-2], [file-3]

When included in submitted post content, these shortcodes display the full URL of their respective file. So for example, if your form enables users to upload three files (say a PDF, Word document, and ZIP file), you can create download links for each of them, like so:

<a href="[file-1]">Download PDF File</a>
<a href="[file-2]">Download Word Doc</a>
<a href="[file-3]">Download ZIP File</a>

Of course, this is a dead-simple example; feel free to customize and embellish as desired.

References