Agregar nombre de clase a la miniatura de entrada
Estoy usando miniaturas de entradas para enlazar a una página.
¿Es posible agregar un nombre de clase a la imagen de la miniatura de entrada?
<li><a href="<?php the_permalink(); ?>" ><?php the_post_thumbnail(); ?></a></li>

Sí - puedes pasar la clase que quieras usar a the_post_thumbnail()
como parte del argumento de atributos, por ejemplo <?php the_post_thumbnail('thumbnail', array('class' => 'tu-nombre-de-clase')); ?>
Ref: http://codex.wordpress.org/Function_Reference/the_post_thumbnail#Styling_Post_Thumbnails

Puedes filtrar esas clases.
function alter_attr_wpse_102158($attr) {
remove_filter('wp_get_attachment_image_attributes','alter_attr_wpse_102158');
$attr['class'] .= ' nueva-clase';
return $attr;
}
add_filter('wp_get_attachment_image_attributes','alter_attr_wpse_102158');
Añade el filtro justo antes de llamar a the_post_thumbnail
. El filtro se eliminará automáticamente.
Es un poco complicado llegar hasta allí, pero the_post_thumbnail
utiliza get_the_post_thumbnail
que a su vez usa wp_get_attachment_image
que aplica ese filtro.

¿El nombre de la función 'alter_attr_wpse_102158' tiene un significado particular? ¿Podría llamarse esta función myClass - function myClass($attr) {

El nombre es algo descriptivo y el sufijo hace referencia a esta pregunta. Aparte de eso, no tiene un significado particular. Desde dentro de una instancia de clase - digamos una clase de plugin - puedes usar array($this,'methodname')
y puedes usar clases estáticas con filtros usando array('ClassName','methodname')

http://codex.wordpress.org/Function_Reference/add_filter#Notes

Para la mayoría de las imágenes en mis sitios web, agrego un elemento figure alrededor de las imágenes como se muestra a continuación. De esta manera mantengo todo intacto y aún puedo llamar al elemento con una clase en el CSS.
<?php if ( has_post_thumbnail() ) { ?>
<figure class="your-class">
<?php echo get_the_post_thumbnail(); ?>
</figure>
<?php } ?>

Mayo 2021
Probado y funcionando en WordPress 5.7 ✔
Por defecto
Por defecto, the_post_thumbnail()
generará todos los atributos requeridos por WordPress.
<?php the_post_thumbnail(); ?>
<!-- DOM -->
<img
src="http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1.jpg"
class="attachment-post-thumbnail size-post-thumbnail wp-post-image"
alt=""
loading="lazy"
srcset="http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1.jpg 1500w,
http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-300x160.jpg 300w,
http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-1024x546.jpg 1024w,
http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-768x410.jpg 768w"
sizes="(max-width: 1500px) 100vw, 1500px"
width="1500"
height="800"
>
Usando el atributo class
Usar class
sin el parámetro $size
o con $size
como thumbnail
eliminará completamente el atributo srcset
. ¿Por qué necesitarías imágenes responsivas cuando el tamaño es solo de 150 x 150
?
<?php the_post_thumbnail(array('class' => 'classname')); ?>
<?php the_post_thumbnail('thumbnail', array('class' => 'classname')); ?>
<!-- DOM -->
<img
src="http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-150x150.jpg"
class="classname wp-post-image"
alt=""
loading="lazy"
width="150"
height="150"
>
srcset
estará disponible para tamaños distintos a thumbnail
. Los tamaños disponibles son thumbnail
, medium
, large
, full
. Los tamaños pueden ajustarse en 'Escritorio > Ajustes > Medios' de WordPress.
thumbnail: 150px
medium: 300px
large: 1024px
full: Tamaño original subido
Usando el tamaño medium
.
<?php the_post_thumbnail('medium', array('class' => 'classname')); ?>
<!-- DOM -->
<img
src="http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-300x160.jpg"
class="classname img-fluid wp-post-image"
alt=""
loading="lazy"
srcset="http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-300x160.jpg 300w,
http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-1024x546.jpg 1024w,
http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-768x410.jpg 768w,
http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1.jpg 1500w"
sizes="(max-width: 300px) 100vw, 300px"
width="300"
height="160"
>
Usando una función
Puedes usar una función para incluir la clase en las entradas (función proporcionada por @s_ha_dum). Aquí añado la clase de Bootstrap img-fluid
. ¡Atención! Lee completamente.
// usando función para añadir clase a `the_post_thumbnail()`
function alter_attr_wpse_102158($attr) {
remove_filter('wp_get_attachment_image_attributes','alter_attr_wpse_102158');
$attr['class'] .= ' img-fluid';
return $attr;
}
add_filter('wp_get_attachment_image_attributes','alter_attr_wpse_102158');
Observa que la clase de Bootstrap img-fluid
se añade al atributo de clase.
<?php the_post_thumbnail(); ?>
<!-- DOM -->
<img
src="http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1.jpg"
class="attachment-post-thumbnail size-post-thumbnail img-fluid wp-post-image"
alt=""
loading="lazy"
srcset="http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1.jpg 1500w,
http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-300x160.jpg 300w,
http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-1024x546.jpg 1024w,
http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-768x410.jpg 768w"
sizes="(max-width: 1500px) 100vw, 1500px"
width="1500"
height="800"
>
La class
de la función desaparece en el segundo post
Al usar una función, la class
solo funciona en el primer post y desaparece en el segundo.
Usa la clase directamente en the_post_thumbnail()
.
<?php the_post_thumbnail('full', array('class' => 'img-fluid')); ?>
Recuerda que el atributo srcset
no tiene utilidad para el tamaño thumbnail
.

Llamar a algo como the_post_thumbnail(array('class' => 'classname'));
en realidad generará un montón de advertencias de PHP. Si el primer parámetro es un array espera parámetros de ancho y alto. También sigue generando valores srcset si la imagen tiene otros tamaños.

En WordPress 5.7.1 no lo hará. Además, el parámetro $size es opcional - (https://developer.wordpress.org/reference/functions/the_post_thumbnail/#parameters)

He probado esto en la versión 5.7.1 y obtuve srcsets como se esperaba. El parámetro $size
puede ser opcional, pero eso no significa que puedas omitirlo y pasar al siguiente parámetro. Si sigues la documentación a través de the_post_thumbnail()
-> get_the_post_thumbnail()
-> wp_get_attachment_image()
pasa ese array como $size
todo el camino ya que es el primer parámetro dado. Siéntete libre de unirte a The Loop Chat para una discusión más amplia de la que puede ocurrir en los comentarios aquí.
