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

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

Home Forums Support Filter the featured image in the single page to add an overlay

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1162230
    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,

    #1162349
    David
    Staff
    Customer Support

    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;
        }
    
    }
    #1162671
    Mathieu

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

    MERCI !

    #1162795
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.