1

I'm trying to add the attribute data-featherlight with a value of 'mylightbox' to all my post featured images. I believe this is the code I need, but I do not know where I put it. I'm working with the baseline twentyseventeen theme.

if ( has_post_thumbnail() ) {
the_post_thumbnail();
the_post_thumbnail('post_thumbnail', array('data-featherlight'=>'mylightbox'));
} 

Thanks!

1

You can try like this:

if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
        the_post_thumbnail( 'full', array( 'class'  => 'responsive-class' ) ); // show featured image
    } 
0

post_thumbnail_html

To alter the html output, you need to hook the filter post_thumbnail_html

From Codex:

apply_filters( 'post_thumbnail_html', string $html, int $post_id, string $post_thumbnail_id, string|array $size, string $attr )

Filters the post thumbnail HTML.

This filter is called by get_the_post_thumbnailon line 177 of post_thumbnail_template.php after $html has been set with:

$html = wp_get_attachment_image( $post_thumbnail_id, $size, false, $attr );

Filter in context:

/**
* Filters the post thumbnail HTML.
     * @param string       $html              The post thumbnail HTML.
     * @param int          $post_id           The post ID.
     * @param string       $post_thumbnail_id The post thumbnail ID.
     * @param string|array $size              The post thumbnail size. Image size or array of width and height values (in that order). Default 'post-thumbnail'.
     * @param string       $attr              Query string of attributes.
*/
return

 apply_filters( 'post_thumbnail_html', $html, $post->ID, $post_thumbnail_id, $size, $attr );

Adding data-featherlight="mylightbox" example:

So adding your data-featherlight="mylightbox" would perhaps be something like:

add_filter('post_thumbnail_html', 'my_thumbnail_filter_method', 10, 5 );
function my_thumbnail_filter_method($html, $post->ID, $post_thumbnail_id, $size, $attr) {
     $id = get_post_thumbnail_id();
     $src = wp_get_attachment_image_src($id, $size); 
     $alt = get_the_title($id); /
     $class = $attr['class'];

    $html = '<img src="' . $src[0] . '" alt="' . $alt . '" class="' . $class . '" data-featherlight="mylightbox" />';
}

Two other action hooks are present on either side of $html being set within get_the_pos_thumbnail.

  1. begin_fetch_post_thumbnail_html
  2. end_fetch_post_thumbnail_html

but both are only passing $post->ID, $post_thumbnail_id, $size. So, it looks like filtering post_thumbnail_html is the best way to access the <img> html string.


A note on has_post_thumbnail(), since it seems to come up often: this method will return true if any images are attached to post, not specifically for the post thumbnail (aka featured image).

  • About your note: this is not true. The function has_post_thumbnail only uses the function get_post_thumbnail_id which itself ONLY looks for the specific meta value that is used by the "Featured Image", itself being _thumbnail_id. It DOES however filter the response by using the filter "has_post_thumbnail", so if you use a theme or plugin that uses this filter to return true if there are any images attached to the post, your statement would be correct for this theme/plugin. However, that is not the "vanilla" state of wordpress. – kuchenundkakao Mar 8 at 8:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.