Display a deactivatable caption below the featured image

Hi Hugo,

David's function should be added using one of these methods:
Adding PHP: https://docs.generatepress.com/article/adding-php/

There isn't a shortcode involved in that solution.

Please revert the content-single file back to the original state:
https://github.com/tomusborne/generatepress/blob/master/content-single.php

Hi Leo,

I used my functions.php file to add the caption function, and called this function in the content-single file.
Here is the function added to functions.php, as given by David:

add_shortcode( 'featured_caption', 'db_featured_image_caption' );
function db_featured_image_caption() {
    ob_start();
    $get_description = get_post(get_post_thumbnail_id())->post_excerpt;
    if(!empty($get_description)){    
        $content = '<div class="featured-caption">' . $get_description . '</div>';
        ob_end_clean();
        return $content;
    }
}

And here is the code added in the content-single file to display the caption below the image:
echo do_shortcode( '[featured_caption]' );

I don't know if this is the correct method, but it has worked well so far. Except that by disabling the display of the featured image, the caption remains displayed. So I think the call to the shortcode should not be written in the content-single file, but where in this case?

Hi there,

you should never edit the Theme files, any changes you make will be lost when the Theme is updated.

Instead of using a Shortcode, add this PHP Snippet to your site:

add_action( 'post_thumbnail_html', 'db_auto_single_featured_caption', 10 );
function db_auto_single_featured_caption( $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;
}

It will automatically add the caption to the featured image. If there no featured image then no caption will be displayed.

This article explains how to add PHP:

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

Hi David,

Ok, I understand a lot better, and I didn't think it was that easy. I used to use a free theme, and you had to rack your brains for hours to solve a problem.
I had seen this piece of code on the other subjects but did not understand that it was enough to add it to the site to add the caption.
I was protected for updates because I am using a child theme. But as I understand it, GeneratePress is designed so that we don't need to edit files other than functions.php?
By inserting the piece of code, the legend is found astride the image. Just add a margin in wp-caption CSS or is there another better solution to fix it?

In any case, thank you for this first part of explanations.

By inserting the piece of code, the legend is found astride the image. Just add a margin in wp-caption CSS or is there another better solution to fix it?

CSS is the correct method for fixing that. Looks like you fixed that :)

The GP theme is filled with Action Hooks and the majority of its output has Filter Hooks. So theres very few instances where a theme template would need copying/editing within a child theme. So yes, you can make most changes from within the child theme functions.php.

For Action Hooks ( inserting code / content ) you can also use the Elements Module > Hooks:

https://docs.generatepress.com/article/hooks-element-overview/

Glad to be of help.

Perfect, I understand much better! Indeed, I had made the CSS modification. It's perfect !
Indeed, the theme is really very well-designed, and I am very happy to have invested in your product. Well done to the whole team and especially for the very responsive support you provide.
Looking forward!

Thank you for the great feedback - it is much appreciated :)

Hello,
I allow myself to reopen this topic because when I use the caption feature, the text straddles the image. With a "margin-top" in the CSS, I peel off the caption from the image.
But when the legend text is on two lines (on mobile, for example), the two legend lines are superimposed ... Is there a solution to that?
Thank you in advance!
Hugo

It requires some line-height in your CSS eg.

.featured-caption {
    color: #757575;
    text-align: center;
    font-size: 0.7em;
    margin-top: 1em;
    line-height: 1.1em; /* Add this rule */
}

Am I stupid, that was the easy solution! Thank you so much!

Glad to be of help