9

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 .'" />';
  }
?>
4

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];
  • I don't get the difference in your answer and the others. The problem in the question was that the attachment ID was not correct, and that is the answer. Additionally, in your answer, you get the ID for the thumbnail of the current post, but not for the desired attachment. so it doesn't answer/solve the question of the OP. – cybmeta Mar 20 at 11:14
  • Where you get your image ID from is up to you. But thanks for the downvote anyways. Especially nice of you to paste my answer into yours. – leymannx Mar 26 at 16:05
23

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 );
2
$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.

2

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>
1

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.