WordPress at Your Fingertips

How to automatically add alt text to uploaded image

By default, WordPress does not fill in the "Alt attribute" field when uploading images, resulting in an empty attribute when such an image is inserted into content.

NOTE: The code in this article fits both the classic editor and the Gutenberg block editor.

Ideally, the alt attribute should contain text describing the image. This is important for people who, for any reason, are unable to view the image (in which case the alt attribute text will be displayed instead), and for SEO, as it is a way to communicate to search engines what is depicted in the photo.

The following code resolves this issue. When creating a post and selecting an image from the media library to insert into content, the alt field (if empty) will be automatically filled based on the title.

Insert the code into the functions.php file of your theme or format it as a plugin.

/**
 * Fills the alt attribute field based on the image title when it is inserted into a post content.
 *
 * @param array $response
 *
 * @return array
 */
function change_empty_alt_to_title( $response ) {
	if ( ! $response['alt'] ) {
		$response['alt'] = sanitize_text_field( $response['title'] );
	}

	return $response;
}

add_filter( 'wp_prepare_attachment_for_js', 'change_empty_alt_to_title' );

The advantage of this method is that we dynamically replace the information at the time of image selection and insertion into the post, so it is not stored in the database, saving space.

Similar data (content of the variable $response) passes through the filter:

Array
(
	[id] => 291
	[title] => boxed seed potatoes
	[filename] => boxed-seed-potatoes.jpg
	[url] => http://wp-test.com/wp-content/uploads/2019/02/boxed-seed-potatoes.jpg
	[link] => http://wp-test.com/post-4/boxed-seed-potatoes/
	[alt] =>
	[author] => 1
	[description] =>
	 =>
	[name] => asd
	[status] => inherit
	[uploadedTo] => 253
	[date] => 1553934323000
	[modified] => 1553934323000
	[menuOrder] => 0
	[mime] => image/jpeg
	[type] => image
	[subtype] => jpeg
	[icon] => http://wp-test.com/wp-includes/images/media/default.png
	[dateFormatted] => 30.03.2019
	[nonces] => Array
		(
			[update] => 1b5fa93d47
			[delete] => ac1bd4e05d
			[edit] => 1cfee6cba3
		)

	[editLink] => http://wp-test.com/wp-admin/post.php?post=291&action=edit
	[meta] =>
	[authorName] => campusboy
	[uploadedToLink] => http://wp-test.com/wp-admin/post.php?post=253&action=edit
	[uploadedToTitle] => Реклама 4
	[filesizeInBytes] => 41842
	[filesizeHumanReadable] => 41 KB
	[context] =>
	[height] => 451
	[width] => 600
	[orientation] => landscape
	[sizes] => Array
		(
			[thumbnail] => Array
				(
					[height] => 150
					[width] => 150
					[url] => http://wp-test.com/wp-content/uploads/2019/02/boxed-seed-potatoes-150x150.jpg
					[orientation] => landscape
				)

			[medium] => Array
				(
					[height] => 226
					[width] => 300
					[url] => http://wp-test.com/wp-content/uploads/2019/02/boxed-seed-potatoes-300x226.jpg
					[orientation] => landscape
				)

			[full] => Array
				(
					[url] => http://wp-test.com/wp-content/uploads/2019/02/boxed-seed-potatoes.jpg
					[height] => 451
					[width] => 600
					[orientation] => landscape
				)

		)

	[compat] => Array
		(
			[item] =>
			[meta] =>
		)

)

Based on this information, not only the alt attribute can be changed, but any other image data at the time of its insertion into the post content.

One of the use cases is to substitute the post title for an empty alt:

/**
 * Fills the alt attribute field with the post title for the image when added to the content.
 *
 * @param array $response
 *
 * @return array
 */
function change_empty_alt_to_title( $response ) {
	if ( ! $response['alt'] ) {
		$response['alt'] = sanitize_text_field( $response['uploadedToTitle'] );
	}

	return $response;
}

add_filter( 'wp_prepare_attachment_for_js', 'change_empty_alt_to_title' );

1 comment
    Log In