Agregar nombre de clase a la miniatura de entrada

6 jun 2013, 23:16:31
Vistas: 110K
Votos: 27

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>
0
Todas las respuestas a la pregunta 4
4
67

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

6 jun 2013 23:20:34
Comentarios

Pero esto eliminará la clase attachment-$size.

fuxia fuxia
6 jun 2013 23:21:35

Pero ¿puedes agregar la clase "attachment-$size my-class-name"?

Simon Cooper Simon Cooper
7 jun 2013 08:45:59

@SimonCooper Lo hice y ahora la clase tiene attachment- sin el tamaño.

Zhianc Zhianc
27 abr 2015 13:33:12

Esta es generalmente una solución mala y no genérica. Incluso codificar de forma rígida attachment-$size, elimina todas las posibles inyecciones de clases futuras.

Fusion Fusion
18 feb 2019 13:18:11
5
15

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.

7 jun 2013 17:59:59
Comentarios

¿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 Simon Cooper
7 jun 2013 18:17:07

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 s_ha_dum
7 jun 2013 18:23:20

¿Por qué estás añadiendo un filtro que se elimina a sí mismo?

AlxVallejo AlxVallejo
29 sept 2013 15:36:52

@AlxVallejo : Para que solo se ejecute una vez en la circunstancia particular en la que deseas que se ejecute.

s_ha_dum s_ha_dum
29 sept 2013 17:11:02
0

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 } ?>
6 jul 2021 15:44:49
3

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.

4 may 2021 07:40:33
Comentarios

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 Howdy_McGee
4 may 2021 08:24:37

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 Dexter
4 may 2021 08:50:24

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 Howdy_McGee
4 may 2021 17:14:52