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:
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:
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_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
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:
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.