Archived topic
Add HTML on the right side of the featured image
5 replies · Started by Bas on March 25, 2020
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 :)
Hi there,
Would this be on single posts or the archives? It's likely possible with a filter.
Let us know :)
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 (400x400 px) window next to the featured image with some ratings in it.
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;
}
}Hi David,
Working as intended.
Top notch support as always. many thanks !
Have a good day and stay safe.
Awesome - glad to be of help :)
