[Support request] Featured Image Badge

[Nikolas]

Hi,

Is it possible to have the image caption posted inside the featured image container, with a “badge” -style like this?
https://pasteboard.co/JV0hPzQ.jpg

We have a lot of featured images where the photographer has to be mentioned.

[David]

Hi there,

first add this PHP Snippet:

add_action( 'post_thumbnail_html', 'db_auto_single_featured_description', 10 );
function db_auto_single_featured_description( $html ) {
    $get_description = get_post(get_post_thumbnail_id())->post_excerpt;
    if ( is_single() && !empty($get_description) ){
      $html .= '<div class="wp-caption">'. $get_description . '</div>';
    }
    return $html;
}

Adding PHP: https://docs.generatepress.com/article/adding-php/

Then add this CSS:

.featured-image {
    position: relative;
}
.featured-image .wp-caption {
  position: absolute;
  right: 20px;
  bottom: 20px;
  line-height: 1.2em;
  padding: 5px;
  background-color: #000;
  color: #fff;
}

[Nikolas]

That’s perfect!!

The only problem now is that if there is no caption added, you can still see a small black box.

Is it possible to hide the element if no caption is added?

[David]

Updated the PHP Snippet here:
https://generatepress.com/forums/topic/featured-image-badge/#post-1715146

That should fix that

[Nikolas]

That’s perfect! Thank you so much. Really appreciate it 🙂

[David]

Glad to be of help.

[Author]

Posts