Alt y title en miniaturas de entrada

Question

Alt y title en miniaturas de entrada

19 jun 2017, 03:50:56

Vistas: 51.5K

Votos: 10

Quería saber si el atributo "Alt" es necesario al igual que "Title" para las miniaturas de entradas y cómo puedo añadirlo en mi consulta de entradas relacionadas... Estoy usando este código para obtener la miniatura de la entrada:

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

Hank Scorpio

159

miniaturas de publicación

Todas las respuestas a la pregunta

Este ejemplo utiliza el texto alternativo (alt text) tal como está configurado en la biblioteca multimedia. Lo prefiero porque el comportamiento es más consistente para los usuarios que ingresan texto alternativo utilizando las opciones típicas de carga de medios de WordPress.

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

Tom Woodward

414

14 jun 2018 18:06:54

Comentarios

Esto debería ser aceptado como la respuesta correcta

WordPress Speed

15 jul 2019 10:30:22

La solución más simple es el siguiente código.

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

O para completar el código:

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

Mohammad Shiralizadeh

1

6 abr 2021 21:24:07

Comentarios

Eso es lo mismo que el de Tom excepto sin usar get_post_thumbnail_id(). ¿Qué hay de malo con get_post_thumbnail_id()?

Rup

7 abr 2021 02:41:18

@Rup No hay diferencia. Solo que esto es más simple y corto.

Mohammad Shiralizadeh

8 abr 2021 20:07:05

Puedes usar el siguiente código en tu Tema de WordPress:

<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="Texto alternativo" title="Título de la imagen" />';
        } else {
            echo '<img src="' . get_bloginfo('template_directory') . '/images/no-thumb/td_324x235.png" alt="Texto alternativo" title="Título de la imagen" />';
        }
        ?>
    </a>
</div>

Peyman Naeimi

97

19 jun 2017 09:13:37

Comentarios

Bienvenido a WPSE. Por favor, agrega una explicación a tu respuesta: ¿por qué podría eso resolver el problema? ¿Qué hay del título alternativo (alt) solicitado para la miniatura de la entrada?

Sven

19 jun 2017 11:09:29

Johansson 15.4K · Accepted Answer · 2017-06-19T04:14:07Z

Es necesario establecer un valor alt para todas tus imágenes, en caso de que un navegador no pueda cargar la imagen o el visitante esté utilizando un lector de pantalla.

Tienes dos opciones. Puedes usar el título de la imagen destacada (que a veces puede estar vacío) o usar el título de la publicación como alt.

Puedes obtener el título usando get_post_meta(). Usarlo es tan simple como esto:

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

Sin embargo, debería usarse dentro del loop o recibir el objeto $post o su ID.

El método alternativo es usar el título de la publicación como texto alt. Para hacerlo, puedes usar:

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

Puedes configurar una condición para verificar si la miniatura tiene un título y usarlo en lugar del título de la publicación, si está disponible:

if ($alt = get_the_post_thumbnail_caption()) {
    // Nada que hacer aquí
} else {
    $alt = get_the_title();
}

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

ACTUALIZACIÓN

Si deseas agregar el atributo alt directamente a get_post_thumbnail(), puedes pasarlo como un array a la función:

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