Plugin Planet

Premium WordPress Plugins

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.

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:

<?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.

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