Post thumbnail alt title

admin管理员组

文章数量:1122846

i wanted to know if "Alt title" is needed like "Title" for post thumbnails and how can add it in my related post query... i'm using this code to get the post thumbnail:

<div class="td-module-thumb">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php if (has_post_thumbnail()) {
the_post_thumbnail(array(324,235));
} else {
echo '<img src="' . get_bloginfo('template_directory') . '/images/no-thumb/td_324x235.png" />';
}
?>
</a>
</div>

i wanted to know if "Alt title" is needed like "Title" for post thumbnails and how can add it in my related post query... i'm using this code to get the post thumbnail:

<div class="td-module-thumb">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php if (has_post_thumbnail()) {
the_post_thumbnail(array(324,235));
} else {
echo '<img src="' . get_bloginfo('template_directory') . '/images/no-thumb/td_324x235.png" />';
}
?>
</a>
</div>

• post-thumbnails

Share Improve this question edited Jul 9, 2018 at 15:21 Johansson 15.4k1111 gold badges4343 silver badges7979 bronze badges asked Jun 19, 2017 at 0:50 Hank ScorpioHank Scorpio 14922 gold badges22 silver badges1111 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 7

It is necessary to set an alt value for all of your images, in case a browser can not load the image or the visitor is using screen reader.

You have two options. Either use the featured image's caption (which can some times be blank) or use the post's title as alt.

You can get the caption by using get_post_meta(). Using it is as simple as this:

$alt = get_post_meta ( $image_id, '_wp_attachment_image_alt', true );
echo '<img alt="' . esc_html ( $alt ) . '" src="URL HERE" />';

It should be used in the loop though, or be passed the $post object or ID.

The alternative method is to use post's title as alt text. To do so, you can use:

echo '<img alt="' . esc_html ( get_the_title() ) . '" src="URL HERE" />';

You can set up a conditional and check if the thumbnail has a caption, and use it instead of post title, if available:

if ( $alt = get_the_post_thumbnail_caption() ) {
    // Nothing to do here
} else {
    $alt = get_the_title();
}

echo '<img alt="' . esc_html ( $alt ) . '" src="URL HERE"/>

UPDATE

If you wish to add the alt attribute directly to get_post_thumbnail(), you can pass it as an array to the function:

the_post_thumbnail( 'thumbnail', [ 'alt' => esc_html ( get_the_title() ) ] ); 

This example uses the alt text as it set in the media library. I prefer it because the behavior is more consistent for users who enter alt text using the typical WordPress media upload options.

$thumbnail_id = get_post_thumbnail_id( $post->ID );
$alt = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true);   
the_post_thumbnail( 'full', array( 'alt' => $alt ) );

The simplest solution is the following code.

$thumbnail_id = get_post_meta( $post->ID, '_thumbnail_id', true );
$img_alt = get_post_meta ( $thumbnail_id, '_wp_attachment_image_alt', true );

echo $img_alt;

Or to complete the code:

$thumbnail_id = get_post_meta( $post->ID, '_thumbnail_id', true );
$img_alt = get_post_meta ( $thumbnail_id, '_wp_attachment_image_alt', true );

if(! $img_alt){
    $img_alt = get_the_title();
}

You can use the following code in your WordPress Theme:

<div class="td-module-thumb">
    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
        <?php if (has_post_thumbnail()) {
            echo '<img src="' . the_post_thumbnail_url( array(324,235) ) . '" alt="any thing you want" title="Some Text" />';
        } else {
            echo '<img src="' . get_bloginfo('template_directory') . '/images/no-thumb/td_324x235.png" alt="any thing you want" title="Some Text" />';
        }
        ?>
    </a>
</div>

本文标签： Post thumbnail alt title