How to get image title/alt attribute?

Question

In my white theme, there is no alt attribute configured for the home slider post. I added the alt text for the image through the media library interface. I added the following code to display the alt text/attribute. But it does not display:

<img class="homepage-slider_image" src="http://www.blabla.com/wp-content/uploads/2013/06/cms-website4-1800x800.jpg" alt="" />

Here is the code:

<?php
  $image = get_post_meta(get_the_ID(), WPGRADE_PREFIX.'homepage_slide_image', true);
  if (!empty($image)) {
    $image = json_decode($image);
    $image_alt = get_post_meta( $attachment->ID, '_wp_attachment_image_alt', true);
    if ( empty( $image_alt )) {
      $image_alt = $attachment->post_title;
    }
    if ( empty( $image_alt )) {
      $image_alt = $attachment->post_excerpt;
    }
    $image_title = $attachment->post_title;
    $image_id = $image->id;
    $image = wp_get_attachment_image_src( $image_id, 'blog-huge', false);
    echo '<img class="homepage-slider_image" src="'.$image[0].'" alt="'. $image_alt .'" />';
  }
?>

Answer 1

Came here as this post is among the top hits on the search engine when looking for WordPress image alt and title. Being rather surprised that none of the answers seem to provide a simple solution matching the question's title I'll drop what I came up with in the end hoping it helps future readers.

// An attachment/image ID is all that's needed to retrieve its alt and title attributes.
$image_id = get_post_thumbnail_id();

$image_alt = get_post_meta($image_id, '_wp_attachment_image_alt', TRUE);

$image_title = get_the_title($image_id);

As a bonus here's how to retrieve an image src. With the above attributes that's all we need to build a static image's markup.

$size = 'my-size' // Defaults to 'thumbnail' if omitted.

$image_src = wp_get_attachment_image_src($image_id, $size)[0];

Answer 2

Your problem is that you are not providing the correct attachment's ID to get_post_meta() and get_the_title() functions.

This is your code to get the alt of the image:

$image_alt = get_post_meta( $attachment->ID, '_wp_attachment_image_alt', true);

And it is correct, but $attachment->ID is not defined in your code, so, the function does not return anything.

Reading your code, it seems that you store the ID of the image as a meta field and then you get it with this code:

$image = get_post_meta(get_the_ID(), WPGRADE_PREFIX.'homepage_slide_image', true);

So, assuming that $image->id is correct in your code, you should replace this:

$image_alt = get_post_meta( $attachment->ID, '_wp_attachment_image_alt', true);

With:

$image_alt = get_post_meta( $image->id, '_wp_attachment_image_alt', true);

That is for getting the alt, to get the title:

 $image_title = get_the_title( $image->id );

Answer 3

I use a quick function in all my themes to get image attachment data:

//get attachment meta
if ( !function_exists('wp_get_attachment') ) {
    function wp_get_attachment( $attachment_id )
    {
        $attachment = get_post( $attachment_id );
        return array(
            'alt' => get_post_meta( $attachment->ID, '_wp_attachment_image_alt', true ),
            'caption' => $attachment->post_excerpt,
            'description' => $attachment->post_content,
            'href' => get_permalink( $attachment->ID ),
            'src' => $attachment->guid,
            'title' => $attachment->post_title
        );
    }
}

Hope this helps!

Answer 4

$image = get_post_meta(get_the_ID(), WPGRADE_PREFIX . 'homepage_slide_image', true);
if (!empty($image)) {
    $image          = json_decode($image);
    $image_id       = $image->id;
    $img_meta       = wp_prepare_attachment_for_js($image_id);
    $image_title    = $img_meta['title'] == '' ? esc_html_e('Missing title','{domain}') : $img_meta['title'];
    $image_alt      = $img_meta['alt'] == '' ? $image_title : $img_meta['alt'];
    $image_src      = wp_get_attachment_image_src($image_id, 'blog-huge', false);

    echo '<img class="homepage-slider_image" src="' . $image_src[0] . '" alt="' . $image_alt . '" />';

}

please note that I did not test your $image->id , just assumed that you have the right attachment ID. The rest comes from $img_meta. If alt is missing we are using image title, if title is missing you will see "Missing title" text to nudge you to fill it in.

Answer 5

Ok I found the answer that no one has on the net I been looking for days now. Keep in mine this only works if your theme or plugin is using the WP_Customize_Image_Control() if you are using WP_Customize_Media_Control() the get_theme_mod() will return the ID and not the url.

For my solution I was using the newer version WP_Customize_Image_Control()

A lot of posts on the forums have the get_attachment_id() which does not work anymore. I used attachment_url_to_postid()

Here is how I was able to do it. Hope this helps someone out there

// This is getting the image / url
$feature1 = get_theme_mod('feature_image_1');

// This is getting the post id
$feature1_id = attachment_url_to_postid($feature1);

// This is getting the alt text from the image that is set in the media area
$image1_alt = get_post_meta( $feature1_id, '_wp_attachment_image_alt', true );

Markup

<a href="<?php echo $feature1_url; ?>"><img class="img-responsive center-block" src="<?php echo $feature1; ?>" alt="<?php echo $image1_alt; ?>"></a>

Answer 6

The true WordPress way would be to use provided function get_image_tag() to obtain image tag, providing id and alt arguments to the function. Other answers already explain how to get alt attribute.

It also takes care of srcset and sizes attributes, which you should otherwise provide manually using wp_get_attachment_image_srcset, in order to have modern browser - optimized image loading.