[Resolved] Add HTML on the right side of the featured image

Home Forums Support Add HTML on the right side of the featured image

This topic contains 5 replies, has 3 voices, and was last updated by  David 1 week, 3 days ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1210120

    Bas

    Hi support team,

    Is it possible to add HTML (via a hook or anything) to the right side of a blog posts featured image?
    Below is an example of what I’m trying to achieve.

    Container is 1000px wide. Featured image is 600px wide and aligned to the left, above the post title. Now the added HTML would be 400px wide to fill the gap.

    Hope this can be done 🙂

    #1210194

    Tom Lead Developer

    Hi there,

    Would this be on single posts or the archives? It’s likely possible with a filter.

    Let us know 🙂

    #1210328

    Bas

    Hi Tom,

    That would be on single posts.

    Would it be possible to show custom fields inside that html?

    My goal is to create a small (400×400 px) window next to the featured image with some ratings in it.

    #1210583

    David Customer Support

    Hi there,

    so this should get you started:

    add_filter( 'generate_single_featured_image_html', 'featured_image_custom_columns',25,1 );
    
    function featured_image_custom_columns($image_html) {
    
        // Get the Custom Field
        $your_custom_field = get_post_meta( get_the_ID(), 'your_custom_field', true );
    
        // If no featured image return default HTML
        if( $image_html == '' ) {
            return $image_html;
        } else {
            // else return custom content
            $custom_feature = 
            '<div class="feature-grid">
                <div class="feature-item">' . $image_html . '</div>
                <div class="feature-item">' . $your_custom_field . '</div>
            </div>';
        }
        return $custom_feature;
    }

    Then a little CSS to create the columns:

    @media (min-width: 769px) {
    	.feature-grid {
    		display: flex;	
    	}
    }
    #1210638

    Bas

    Hi David,

    Working as intended.
    Top notch support as always. many thanks !

    Have a good day and stay safe.

    #1210652

    David Customer Support

    Awesome – glad to be of help 🙂

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.