[Resolved] Display a deactivatable caption below the featured image

Home Forums Support [Resolved] Display a deactivatable caption below the featured image

Home Forums Support Display a deactivatable caption below the featured image

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1648391
    Hugo

    Hi all,
    I open another subject concerning the caption of the featured image because I did not find the answer in the other subjects.
    I was able to add my caption under the featured image thanks to the code provided right here: https://generatepress.com/forums/topic/cant-display-featured-image-captions/#post-854633.
    I then added the [featured_caption] shortcode in the “content-single” file. But because of this, when I deactivate the featured image in my back-office for some articles, the caption does not disappear.
    In which file and where could I enter the call to the caption function so that the caption is deactivated at the same time as the image on the front page?
    I thank you in advance!
    Hugo

    #1648517
    Leo
    Staff
    Customer Support

    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

    #1648880
    Hugo

    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?

    #1649193
    David
    Staff
    Customer Support

    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/

    #1649234
    Hugo

    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.

    #1649289
    David
    Staff
    Customer Support

    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.

    #1649334
    Hugo

    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!

    #1649547
    David
    Staff
    Customer Support

    Thank you for the great feedback – it is much appreciated ๐Ÿ™‚

    #1654190
    Hugo

    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

    #1654534
    David
    Staff
    Customer Support

    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 */
    }
    #1654569
    Hugo

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

    #1654650
    David
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.