In this tutorial, you’ll see one way to let users select a file from an existing set of files on your server. This is an alternate way of associating images with submitted posts, user registrations, and contact forms. So instead of users uploading files, they can choose from an existing set of files that you provide.

Add the markup

The first step is to add the markup to your form:

<img src="http://example.com/path/to/image-1.jpg" alt="Image 1"> 
<label><input name="usp-custom-image[image-1]" type="checkbox" value="http://example.com/path/to/image-1.jpg"> Image 1</label>

<img src="http://example.com/path/to/image-2.jpg" alt="Image 2"> 
<label><input name="usp-custom-image[image-2]" type="checkbox" value="http://example.com/path/to/image-2.jpg"> Image 2</label>

<img src="http://example.com/path/to/image-3.jpg" alt="Image 3"> 
<label><input name="usp-custom-image[image-3]" type="checkbox" value="http://example.com/path/to/image-3.jpg"> Image 3</label>

Some notes:

  • Make sure that the specified images are available on the server
  • Make sure to edit each of the URLs for your images
  • Apply CSS to line things up and style the field as desired

Display the image

Once some posts have been submitted, you can display the chosen image using the following code:

<?php $images = get_post_meta(get_the_ID(), 'usp-custom-image'); 
if (!empty($images)) {
	foreach ($images as $image) echo '<img src="'. $image .'" alt="">'; 
} ?>

This snippet should be placed in your theme template, anywhere in the WordPress Loop. Once in place, this code will check the current post for any attached images and display them if present. Some notes:

  • This is very basic PHP code; best to customize further as needed to fit your theme, design, goals, etc.
  • Make sure that usp-custom-image is the name of the custom field that contains your images (it should if you follow this tutorial, but if you make any changes remember to check that the field names all match up)
  • Use CSS to style things as you like, and maybe add a template tag and/or some text to flesh out the image alt attribute

Radio Field

As written, this technique uses checkbox fields to enable users to select multiple images. To allow users to select only one image, the technique could be adapted to use radio fields.

First, add the markup to your form:

<img src="http://example.com/path/to/image-1.jpg" alt="Image 1">
<label><input name="usp-custom-image" type="radio" value="http://example.com/path/to/image-1.jpg" checked="checked"> Image 1</label>

<img src="http://example.com/path/to/image-2.jpg" alt="Image 2">
<label><input name="usp-custom-image" type="radio" value="http://example.com/path/to/image-2.jpg"> Image 2</label>

<img src="http://example.com/path/to/image-3.jpg" alt="Image 3">
<label><input name="usp-custom-image" type="radio" value="http://example.com/path/to/image-3.jpg"> Image 3</label>

<input name="usp-custom-image-required" value="1" type="hidden">

As before, make sure that the URLs of your images align with their actual locations on the server. Add CSS as needed to make it shine. Notice that here we are requiring the field by adding the following line:

<input name="usp-custom-image-required" value="1" type="hidden">

Lastly, to display the image(s) for each submitted post, add the following code anywhere in the WP Loop:

<?php $images = get_post_meta(get_the_ID(), 'usp-custom-image'); 
if (!empty($images)) {
	foreach ($images as $image) echo '<img src="'. $image .'" alt="">'; 
} ?>

Same deal as before, make sure that everything lines up and that you are operating within the bounds of reality. Style to taste et al.

Related