I am having trouble with the alt text on my wordpress website. I am using a theme I coded myself. From what I recall, if I added alt text to an image in the Media Library it would insert into the DOM. Whether I'm mistaken or not, I do know no alt text is being added to the DOM now. Below is a code sample of a image I am calling. I do not call alt because I believed WordPress automatically added it, and if it doesn't I do not know what to put in it's place. Clarification is appreciated.

Edit: To resolve a flag of a duplicate, my question revolves around using the_post_thumbnail to call the image. I am indeed using the_post_thumbnail_url which I need to change to the_post_thumbnail but this causes the images to disappear. In the suggested duplicate question, the alt needs to be called manually where-as I am looking for it to be called automatically.

Image code sample

<img src="<?php the_post_thumbnail_url(); ?>" class="img-responsive">

I tried adding this code to functions.php during my research but it did not work:

function add_img_title($attr, $attachment = null) {
$img_title = trim(strip_tags($attachment->post_title));
$attr['alt'] = $img_title;
$attr['title'] = $img_title;
return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'add_img_title', 10, 2);

Update

After receiving feedback to change the_post_thumbnail_url to the_post_thumbnail I have decided to include the wp_query and the loop as I am having trouble calling images via the_post_thumbnail

<?php 
 $query1 = new WP_Query(array(
      'cat' => 162,
      'post_type' => 'page',
      'posts_per_page' => 1
  ));

  $query2 = new WP_Query(array(
      'cat' => 162,
      'post_type' => 'post',
      'posts_per_page' => 1
  ));

  $wp_query = new WP_Query();
  $wp_query->posts = array_merge( $query1->posts, $query2->posts );
  $wp_query->post_count = $query1->post_count + $query2->post_count;
?>
<?php while( $wp_query->have_posts() ): $wp_query->the_post(); ?>
  <?php  $id = get_the_ID(); ?>
  <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'post-thumbnail', array( 'class' => 'img-responsive' ) ); ?></a>
<?php endwhile; ?>

I am having trouble with the alt text on my wordpress website. I am using a theme I coded myself. From what I recall, if I added alt text to an image in the Media Library it would insert into the DOM. Whether I'm mistaken or not, I do know no alt text is being added to the DOM now. Below is a code sample of a image I am calling. I do not call alt because I believed WordPress automatically added it, and if it doesn't I do not know what to put in it's place. Clarification is appreciated.

Edit: To resolve a flag of a duplicate, my question revolves around using the_post_thumbnail to call the image. I am indeed using the_post_thumbnail_url which I need to change to the_post_thumbnail but this causes the images to disappear. In the suggested duplicate question, the alt needs to be called manually where-as I am looking for it to be called automatically.

Image code sample

<img src="<?php the_post_thumbnail_url(); ?>" class="img-responsive">

I tried adding this code to functions.php during my research but it did not work:

function add_img_title($attr, $attachment = null) {
$img_title = trim(strip_tags($attachment->post_title));
$attr['alt'] = $img_title;
$attr['title'] = $img_title;
return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'add_img_title', 10, 2);

Update

After receiving feedback to change the_post_thumbnail_url to the_post_thumbnail I have decided to include the wp_query and the loop as I am having trouble calling images via the_post_thumbnail

<?php 
 $query1 = new WP_Query(array(
      'cat' => 162,
      'post_type' => 'page',
      'posts_per_page' => 1
  ));

  $query2 = new WP_Query(array(
      'cat' => 162,
      'post_type' => 'post',
      'posts_per_page' => 1
  ));

  $wp_query = new WP_Query();
  $wp_query->posts = array_merge( $query1->posts, $query2->posts );
  $wp_query->post_count = $query1->post_count + $query2->post_count;
?>
<?php while( $wp_query->have_posts() ): $wp_query->the_post(); ?>
  <?php  $id = get_the_ID(); ?>
  <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'post-thumbnail', array( 'class' => 'img-responsive' ) ); ?></a>
<?php endwhile; ?>

• images
• post-thumbnails
• accessibility

Share Improve this question edited May 21, 2019 at 21:43 user5854648 asked May 21, 2019 at 17:10 user5854648user5854648 1631717 bronze badges 3

• 3 Possible duplicate of How to get image title/alt attribute? – norman.lol Commented May 21, 2019 at 18:39
• Still not getting image alt with the update? – norman.lol Commented May 22, 2019 at 5:57
• " I am having trouble calling images via the_post_thumbnail" Are you getting the image at least? If you're getting an image but no alt text then it means you haven't provided any alt text in the media library. – Jacob Peattie Commented May 23, 2019 at 11:27

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

You're not outputting any attributes besides the src and class. Try using the_post_thumbnail() instead.

<?php the_post_thumbnail( 'post-thumbnail', array( 'class' => 'img-responsive' ) ); ?>

This will include all attributes and supports responsive image markup by default.