[Resolved] Filter the featured image in the single page to add an overlay

[Mathieu]

Hi Tom,

I wonder if it is possible to filter the main image output in a single page. I want to add a CSS overlay. I don’t want to do it in jQuery as I want the data to be in clear.

<div class="featured-image  page-header-image-single ">
_ADD_CODE_HERE
			<img width="1140" height="855" src="..." />
_OR_THERE_
</div>

There doesn’t seem to be anything but I am trying. Maybe Tom has a magic trick or he could add it like he did on archive page with generate_inside_featured_image_output.

Kindest regards,

[David]

Hi there,

try this PHP snippet:

add_filter( 'post_thumbnail_html', 'db_featured_image_before_after_content',10,5 );
 
function db_featured_image_before_after_content($html, $post_id, $post_thumbnail_id, $size, $attr) {
    
    // If not single or no featured image return
    if( ! is_singular() || $html == '' ) { 
        
        return $html;
    
    } else {
        
    // define before and after image elements

        $before_img_html = '<span class="before-featured"><!-- i come before image --></span>';

        $after_img_html = '<span class="after-featured"><!-- i come after image --></span>';
    
        return $before_img_html . $html . $after_img_html;
    }

}

[Mathieu]

Wow, thanks! I didn’t think there was a solution for this.

MERCI !

[David]

You’re welcome 🙂

[Author]

Posts