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

Home Forums Support [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 has 5 replies, 3 voices, and was last updated 4 years ago by David.
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
    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
    Staff
    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
    Staff
    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.