¿Cómo cambiar/modificar la salida HTML de the_post_thumbnail();?

Question

¿Cómo cambiar/modificar la salida HTML de the_post_thumbnail();?

9 feb 2014, 22:45:07

Vistas: 32.1K

Votos: 11

Estoy trabajando en la construcción de un tema personalizado y he estado luchando con esto por un tiempo. Estoy tratando de modificar la salida HTML de la función the_post_thumbnail();. Necesito hacer esto porque estoy intentando dar soporte a imágenes retina en mi sitio y preferiría incorporar la funcionalidad en mi tema en lugar de cargar un plugin en el backend.

Por defecto, the_post_thumbnail(); simplemente llama a get_the_post_thumbnail(); que encontré aquí. Mi primer pensamiento fue conectarme al filtro 'post_thumbnail_html', pero no logro hacerlo funcionar. Entonces...

Así es como estoy llamando a mis miniaturas de entrada en el loop:

<?php the_post_thumbnail('custom-thumbnail-size', array('class' => 'unique-class-here', 'title' => 'unique-title-here')); ?>

Este es el código que necesito que se genere cuando llamo a the_post_thumbnail();...

<img src="" alt="" data-src="image.png" data-alt="Alt text" class="retina unique-class-here" />

Y el código siguiente es lo que tengo actualmente en mi archivo functions.php:

<?php
function modify_post_thumbnail_html($html, $post_id, $post_thumbnail_id, $size, $attr) {
    $src = wp_get_attachment_image_src(get_post_thumbnail_id(), $size);
    $html = '<img src="" alt="" data-src="' . $src['0'] . '" data-alt="" class="retina" />';
    return $html;
}
add_filter('post_thumbnail_html', 'modify_post_thumbnail_html', 99, 5);
?>

Algunas cosas a tener en cuenta. No estoy seguro de cómo pasar el texto de metadatos apropiado en el atributo 'data-alt'. Además, necesito poder pasar el tamaño específico de post_thumbnail que necesito ya que uso tamaños personalizados de post_thumbnail en todo mi tema. Por último, puede ver que el array de atributos necesita pasar clases además de la clase 'retina' por defecto, así como cualquier otro atributo en ese array.

Gracias de antemano por cualquier ayuda. Realmente no hay mucho en línea sobre este tema y pensé que mi pregunta era lo suficientemente diferente para justificar una publicación adicional en esta comunidad. Por favor, háganme saber si tienen algún pensamiento, solución y/o necesitan alguna aclaración.

kaffolder

455

php funciones miniaturas de publicación html imágenes

Todas las respuestas a la pregunta

solución poco elegante:

dado que WordPress añade muchas clases por defecto a la etiqueta <img>, si no modificas ese comportamiento por la fuerza, siempre puedes 'inyectar' algo mediante str_replace antes de la cadena class=. En código:

$image = get_the_post_thumbnail( $post->ID, 'medium', array( 'class' => 'mi-clase' ) );
$moreattrs = 'data-fullimg= "imagen-completa.jpg"';

$image = str_replace('class=', $moreattrs.' class=', $image );

Es bastante seguro asumir que si algo comienza con "class=", es lo que buscas. Por supuesto, podría verse afectado por nombres de archivo extraños que contengan class=, pero especialmente con WordPress, eso es muy poco probable.

También podrías buscar <img y reemplazarlo; pensándolo bien, supongo que sería un poco más seguro.

Sebastian Schmid

199

2 abr 2015 18:16:44

Comentarios

¿Hay alguna manera de hacer esto para todas las imágenes automáticamente? ¿algún hook que se pueda ejecutar justo antes de que se renderice el HTML de la página?

vsync

11 abr 2018 22:35:35

Quizás podrías engancharte al filtro wp_get_attachment_image_attributes:

function my_custom_image_attributes( $attr, $attachment ) {
  remove_filter('wp_get_attachment_image_attributes','my_custom_image_attributes');
  $image = wp_get_attachment_image_src( $attachment->ID, 'full' );
  $attr['data-src'] = $image[0];
  $attr['data-alt'] = $attachment->post_title;
  $attr['class'] .= ' retina';
  return $attr;
}
add_filter('wp_get_attachment_image_attributes','my_custom_image_attributes');

Esto necesita ser probado y quizás ajustado, encontré la idea aquí Añadir nombre de clase al thumbnail del post (revisa el código fuente de vwp_get_attachment_image al final).

Necesitas añadir el hook justo antes de llamar a the_post_thumbnail() en tu tema.

Además, no sé qué necesitas usar como data-alt, en mi opinión podrías usar un campo del attachment que pasa con el filtro (podría ser un campo personalizado).

Simon

1.22K

10 feb 2014 00:09:12

Comentarios

Hola @Simon. ¡Gracias por tu respuesta! Desafortunadamente, no he podido hacer que lo anterior funcione. Una búsqueda rápida en Google revela que casi todos están teniendo problemas con el hook 'wp_get_attachment_image_attributes'. ¿Tal vez haya otro hook que funcione? Por eso opté por la ruta 'post_thumbnail_html', simplemente no puedo descubrir cómo hacer que los atributos pasen correctamente desde mi llamada the_post_thumbnail('custom-thumbnail-size', array('class' => 'unique-class'));. ¿Alguna otra idea?

kaffolder

10 feb 2014 00:39:27

No de inmediato. Necesito hacer algunas pruebas primero, pero creo que es factible. A primera vista, necesitas usar $attr['class']

Simon

10 feb 2014 01:05:21

Publiqué una solución funcional arriba. No estoy seguro si es la mejor práctica o no. Avísame si encuentras una solución mejor/alternativa. ¡Gracias!

kaffolder

10 feb 2014 01:53:14

kaffolder 455 · Accepted Answer · 2014-02-10T01:52:21Z

Bien, creo que he llegado a una solución. No parece tan bonita y fácil como me gustaría, pero de nuevo, las modificaciones importantes a la funcionalidad predeterminada de WordPress a veces requieren medidas drásticas. :)

Esta es mi solución funcional para reescribir el HTML de salida para las miniaturas de publicaciones en todo mi sitio, para que funcione con el plugin Retinise.js. Por supuesto, este código puede adaptarse para otras manipulaciones del HTML de las miniaturas.

En mi archivo functions.php, creé esta función:

<?php
function modify_post_thumbnail_html($html, $post_id, $post_thumbnail_id, $size, $attr) {
    $id = get_post_thumbnail_id(); // obtiene el id de la miniatura actual (en el loop)
    $src = wp_get_attachment_image_src($id, $size); // obtiene la URL de la imagen según el tamaño especificado (ej. tamaño personalizado)
    $alt = get_the_title($id); // obtiene el título de la miniatura
    $class = $attr['class']; // obtiene las clases pasadas a la miniatura, definidas aquí para un acceso más fácil

    // Verifica si existe una clase 'retina' al llamar "the_post_thumbnail()", si es así, genera un HTML de <img/> diferente
    if (strpos($class, 'retina') !== false) {
        $html = '<img src="" alt="" data-src="' . $src[0] . '" data-alt="' . $alt . '" class="' . $class . '" />';
    } else {
        $html = '<img src="' . $src[0] . '" alt="' . $alt . '" class="' . $class . '" />';
    }

    return $html;
}
add_filter('post_thumbnail_html', 'modify_post_thumbnail_html', 99, 5);
?>

Luego, cuando llamo a the_post_thumbnail(); en un loop de WP, uso este código:

<?php the_post_thumbnail('custom-thumbnail-size', array('class' => 'retina additional-class')); ?>

Este código debería funcionar (con pequeñas modificaciones, obviamente) si estás trabajando fuera de un loop de WP. ¡Espero que esto le ahorre tiempo y frustración a alguien más! Tal vez cuando tenga tiempo, publique una guía completa de preguntas y respuestas sobre cómo integré soporte para retina en mi tema. ¡Sin usar plugins!

¡Aquí hay algunos enlaces para orientar a alguien en la dirección correcta si está interesado!