Get the ALT text of Featured Image

Question

I'm just starting to learn WP coding stuff. Please don't be too hard on me.

I always see most of the answers for this question are something like or close to this:

$thumbnail_id = get_post_thumbnail_id( $post->ID );
$alt = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true);
<img src="<?php the_post_thumbnail_url('post-thumbnails-home-page'); ?>" alt="<?php echo $alt; ?>" />

I find it hard to convert <?php echo $alt; ?> <?php echo $alt; ?> to something that fits to my code:

// Featured Items
function display_featured_item($atts, $before = '', $sep = '', $after = '')
{
    
    $atts = shortcode_atts(array(
        'post_id' => 0,
    ), $atts, 'display-featured-item');
    
    $id = $atts['post_id'];
    $tag_list = get_the_term_list( $id, 'post_tag', $before, $sep, $after );
    
    if ($id == '0') return '';

    $data = '<div class="promotion-wrapper">';
    $data .= '<h2><a href="' . get_permalink($id) . '">' . get_the_title($id) . '</a></h2>';
    $data .= '<p>' . get_the_excerpt($id) . '</p>';
    $data .= '<p><a href="' . get_permalink($id) . '" class="reg-link">Learn more</a></p>';
    $data .= '<p><img src="' . get_the_post_thumbnail_url($id, 'full') . '" alt=""/></p>';
    $data .= '<p>' . apply_filters( 'the_tags', $tag_list, $before, $sep, $after, $id ) . '</p>';
    $data .= '</div>';
    return $data;
}
add_shortcode('display-featured-item', 'display_featured_item');

I've been searching all over the internet for a couple of hours now and hoping to find answers that could possibly work to my code but I still got no luck.

If some of you know how to do this, it will definitely make my day. TIA! :)

Answer 1

From https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

The alt attribute holds a text description of the image, which isn't mandatory but is incredibly useful for accessibility — screen readers read this description out to their users so they know what the image means. Alt text is also displayed on the page if the image can't be loaded for some reason: for example, network errors, content blocking, or linkrot.

Answer 2

After checking my other code snippets, I noticed this different way of using variables.

All I had to do was to change: $data .= '<p><img src="' . get_the_post_thumbnail_url($id, 'full') . '" alt=""/></p>'; to: $data .= get_the_post_thumbnail($id, 'full');

---

This will be the final code to display WordPress Posts [Title, Excerpt, Learn more (link), Thumbnail/Featured Image, and Tags] using a Shortcode :

// Featured Items
function display_featured_item($atts, $before = '', $sep = '', $after = '')
{
    $atts = shortcode_atts(array(
        'post_id' => 0,
    ), $atts, 'display-featured-item');
    
    $id = $atts['post_id'];
    $tag_list = get_the_term_list( $id, 'post_tag', $before, $sep, $after );
    
    if ($id == '0') return '';

    $data = '<div class="promotion-wrapper">';
    $data .= '<h2><a href="' . get_permalink($id) . '">' . get_the_title($id) . '</a></h2>';
    $data .= '<p>' . get_the_excerpt($id) . '</p>';
    $data .= '<p><a href="' . get_permalink($id) . '" class="reg-link">Learn more</a></p>';
    $data .= get_the_post_thumbnail($id, 'full');
    $data .= '<p>' . apply_filters( 'the_tags', $tag_list, $before, $sep, $after, $id ) . '</p>';
    $data .= '</div>';
    return $data;
}
add_shortcode('display-featured-item', 'display_featured_item');

Then, add this shortcode [display-featured-item] to any of your page/post.