Here are a couple of techniques for displaying submitted images with the alt attribute. Including the alt attribute when displaying images is considered useful for good SEO.

Related: You may also want to check out the video tutorial on Displaying Linked Thumbnail Images →

Define alt attribute using Post Tags

If your form enables users to submit Post Tags, you can use them as the value of the alt attribute for any submitted images. Here is a quick example (see popout box below for help with adding custom code to WordPress):

<?php $image_url = get_post_meta(get_the_ID(), 'user_submit_image', true);
if (!empty($image_url)) : ?>

	<img src="<?php echo $image_url; ?>" alt="<?php the_tags('Tags: ', ', ', ''); ?>">

<?php endif; ?>

Here we are grabbing the submitted image URL from the post meta (custom fields), and then checking to see if it exists. If so, we display the image using typical <img> markup, using the Post Tags as the value of the alt attribute.

New to WordPress? Check out this tutorial on how to add custom code to your WordPress site.

Define alt attribute using Custom Field

Similar to the previous technique, we can display submitted images using a Custom Field for the value of the alt attribute. Here is an example: 

<?php $image_url = get_post_meta(get_the_ID(), 'user_submit_image', true);
$alt_text = get_post_meta(get_the_ID(), 'usp-alt-1', true);
if (!empty($image_url)) : ?>

	<img src="<?php echo $image_url; ?>" alt="<?php echo $alt_text ?>" title="<?php the_title(); ?>">

<?php endif; ?>

Here we could grab any custom field, but we specifically are using the Alt Field for Media Uploads, which is designed for this purpose.

FYI, the Alt value also is displayed in the Media Library when viewing any single image. For more information check out Custom Metadata for Submitted Files. That tutorial explains how to include fields to collect Alt, Caption, Title, and more for uploaded images and files. Ideal for optimizing SEO.

Related Infos