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) {
Simon Cooper
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')
s_ha_dum
http://codex.wordpress.org/Function_Reference/add_filter#Notes
s_ha_dum
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.
Howdy_McGee
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)
Dexter
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í.
Howdy_McGee