Archived topic
Filter the featured image in the single page to add an overlay
3 replies · Started by Mathieu on February 11, 2020
Viewing posts 1–4 of 4
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,
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;
}
}Wow, thanks! I didn't think there was a solution for this.
MERCI !
You're welcome :)
This archived topic is closed to new replies.
