Plugin Planet

In this tutorial, we’ll look at an example of conditional template code that can be used to display post thumbnails in Posts and Pages.

Different ways to display images

USP Pro provides several built-in ways of displaying images:

• Auto-display Post Thumbnails (aka Featured Images)
• Auto-display uploaded/submitted images
• Display submitted images via template tag
• Display submitted images via shortcode
• Display submitted images via user shortcodes

In this post, I want to share a basic example for displaying images via template tag. This method provides the most in terms of flexibility, as you have complete control over the output via the theme template.

Display images via theme template

This technique requires that your form includes a field to collect at least one image. All submitted images are uploaded to the Media Library and attached to posts as custom fields. In this example, we’ll say the name of the custom field is usp-file-1.

Now equipped with the name of our custom field, we can open single.php in our theme (or whichever template file is required) and add the following code to the Loop:

<?php // display post thumbnail

// default image
$default_url = get_template_directory_uri() .'/img/default.jpg';

// submitted image
$image_url = usp_get_meta(false, 'usp-file-1');

// display the image
if (has_post_thumbnail()) {
    the_post_thumbnail();

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

} else {
    echo '<img src="'. $default_url .' alt="" />';

} ?>

Here we are doing the following (in order):

1. Setting a default image to use as the Post Thumbnail
2. Grabbing the submitted image (usp-file-1)
3. Checking if the Post has a post thumbnail, and if so display it
4. Otherwise, if no post thumbnail, we check for the submitted image and display it if exists
5. Otherwise we display the default image as a fallback

Once you get everything in place, you can customize as needed with CSS. Also note that the_post_thumbnail() accepts two parameters, $size and $attr, which are both explained in the WP Codex.

Notes

If you are seeing duplicate images, make sure that the following settings are disabled:

• Uploads ▸ “Auto-Display Images”
• Uploads ▸ “Featured Images”

Remember, this technique is specific to the technique for displaying images via template tag. If you would rather not fuss with any code, just leave the setting for Uploads ▸ “Featured Images” enabled and let the plugin do the work for you.

Bonus Snippet

As a bonus, here is another snippet that uses the uploaded image, this time as an avatar. Just include a file-upload field on the form and ask the user to upload their avatar or whatever. Then the user can choose their own avatar from their local machine. You could then display the avatar in the user’s post by adding something like this to the Loop:

<?php if (usp_is_submitted()) : // is a submitted post ?>

    <div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
        <h2><?php the_title(); ?></h2>
        <?php the_content(''); ?>
    </div>

    <?php $avatar = get_post_meta(get_the_ID(), 'usp-file-1', true);
        if (!empty($avatar)) echo $avatar; // display avatar ?>

<?php else :

    // not a usp post
    continue;

endif; ?>

That’s rough, but gives you a sense of all that would be required to do the job, and/or some further coding examples to combine with the previous snippet. For example, in the post-thumbnail snippet, you can use usp_is_submitted() to check first if the post is a user-submitted post. Hopefully it gives you some ideas.