Site logo

Archived topic

Featured Image Badge

5 replies · Started by Nikolas on March 30, 2021

Viewing posts 1–6 of 6

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.

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;
}

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?

That's perfect! Thank you so much. Really appreciate it :)

Glad to be of help.

This archived topic is closed to new replies.