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 .'" />';
  }
?>
up vote 19 down vote accepted

You are not providing a correct attachement ID. Replace:

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

Note: I assume that $image->id is correct because you use it later in your code and you get the expected result. Unfortunatley $image->id can not be tested because it involves WPGRADE_PREFIX.'homepage_slide_image meta field which you have not provide any information.

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

  • 1
    Could you explain a bit more how this would answer OP's question? – cjbj Jan 2 '17 at 16:47
  • 1
    @cjbj sorry for being vague , edited the post – Benn Jan 3 '17 at 13:55

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>

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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