USP Pro makes it easy to use your lightbox script to display submitted images. This quick tutorial explains the steps. Estimated reading time is about 15 minutes.

Step 1: Add Lightbox script

First you will need to provide the lightbox script. This can be a lightbox script that is provided via your theme template, or it could be added via most any lightbox plugin. The only requirement is that you know which selector (e.g., class="lightbox") needs to be added to your images to display them via lightbox.

Step 2: Add the shortcode

Once your lightbox script is in place and loaded on the page (via plugin or theme), you can display any attached images as a gallery of linked thumbnails by adding this shortcode to the submitted post content:

[usp_image link="file"]

That shortcode will add the necessary markup to display the images via lightbox. By default, each linked image will have the following markup (simplified for clarity):

<a href="https://example.com/wp-content/uploads/2020/04/example.jpg" class="lightbox" rel="lightbox">
	<img class="usp-image" src="https://example.com/wp-content/uploads/2020/04/example.jpg">
</a>

Notice the most common lightbox selectors are added to the image link by default: class="lightbox" and rel="lightbox". So this step may be all that is required to display your images via lightbox. Try clicking on one of your image thumbnails. If the lightbox pops up, then you’re done here. If the popup doesn’t happen, proceed to the next step.

Step 3: Customize

If the lightbox popups are not working at this point, you may need to change the default markup to include some other selector. To do this, you can add either the link_att or link_class attributes. Here are some examples:

// lightbox requires data-lightbox added to the image link
[usp_image link="file" link_att="data-lightbox='value'"] (use single quotes around the attribute value)

// lightbox requires whatever class added to the image link
[usp_image link="file" link_class="whatever"]

To get a better idea of what’s happening, inspect the source code of your submitted images on the front-end. You will find the added attribute and/or class on the image link. Check out the documentation for more details about available attributes for the [usp_image] shortcode.

Pro Tip: If your submitted posts are displaying duplicate sets of images on the front-end, try disabling one or both of the automatic display settings, “Auto-Display Images” and “Featured Images” (located under the USP Uploads tab).

Tricks & Tips

To automate things. If you don’t want to add the [usp_image] shortcode to every post, you can modify your theme template by adding the equivalent template tag:

usp_get_image()

It does the same thing as the shortcode but works via the theme template. Here is more information about usp_get_image().

Alternate method: Instead of using the template tag above, you can add the [usp_image] shortcode directly in your theme template using WordPress’ do_shortcode() function.