Image caption in Media & Text block

[Fturttle]

I have not been able to find a way to add an image caption in the ‘Media & Text’ block. I looked at it through the code editor and there’s no <figcaption></figcaption> tags. Yes, my image has a caption set in the media library. If I add

tag manually it returns an “HTML Error” and messes up everything. Can anyone explain this?

[youknowriad]

I think this block was not meant to be used with a captioned image, if you'd like to do so, you can use the columns block and have an image in one column and text in the other.

Resizing columns is tracked separately.

Thanks.

[Fturttle]

I understand. Still think it's a shame to not have at least the option available. I will try the column block. Thank you for your help, @youknowriad

[youknowriad]

Noted @Fturttle thanks for the feedback. I'll keep it in my mind and if we noticed that it's something people are asking for we'll reconsider.

[bwoester]

I'd like to have the option as well. :)

[fosterTerence]

I would like the option to show image caption as well

[Taruks]

Hi, because of copyright laws in Europe, especially Germany it is necessary to mention the creator e.g. of a picture directly at the picture. So it's not the question if people ask for it, it's necessary by law and would greatly facilitate the work of the webdesigner having it in all Gutenberg image-blocks.

And generally - thanks for your great development work!

[cr0ybot]

I'd like to add my support for this request.

I would expect anywhere that an image can be embedded that it would act similarly to the standard image block, which is to say that it would include an optional caption.

WordPress core blocks should be as flexible as possible, and also act predictably. If there's an option to add an image, I assume the image interface would be similar to, if not actually, the core image block. Are there several different yet similar image components in use under the hood?

[AlternNO]

I need this too.

[woodz-]

Required! Why are you closing this? It's not only the image caption. It's also the percentual resizing which is missing. The image gets cropped instead. On lower resolutions this will cut heads and feet. I would expect full responsive images like the bootstrap's .img-fluid class.

[jennsuzhoy]

I would like to see captions added to the Media & Text block as well. As stated above, images should have the same options anywhere they are embedded for consistency.

[youknowriad]

I'm reopening this issue for potential consideration. It's still unclear to me how this would work... HTML wise it might not make sense because of the nesting... But let's see.

[clarklab]

Another vote for this option. I've got a client that very specifically needs in-page photo credits for every photograph. They've got a bunch of the Media & Text blocks and now I need to figure out a way to get a little text caption underneath.

Would love if it worked a bit more like a regular image object.

[clo123]

I'd like this feature as well :)

[timnolte]

I was unpleasantly informed my our theme developer and QA that this doesn't exist. The solution to use columns is a workaround yes, but it seems to me it pretty much makes this block value questionable altogether.

[SkipperPit]

I would like the option to show image caption as well

[alinekeller]

I would like this option as well. As it was previously mentioned, this feature is highly needed in order to add copyright information to the pictures.

[ToniSHernandez]

We are having this very issue right now where we need a caption below an image. We have specific styles applied to the block so when attempting to change the block type, it creates a style issue there. Adding a caption directly below the image would allow a clickable link to open the image in a new tab.

[danwpc]

Noted @Fturttle thanks for the feedback. I'll keep it in my mind and if we noticed that it's something people are asking for we'll reconsider.

There are a few things that make mimicking media + text by using columns clunky:

1. Once columns are set, resizing the image by dragging does not resize the adjacent column as it does in Media + Text
2. Vertical alignment is easy in Media + Text, whereas it has to be done by adding a class and manipulating css when using column + text
3. Same with text sizing within columns. Text sizing is unpredictable when selecting a block and using the Gutenberg text resize controls inside columns.

Altogether, this adds up to a very time-consuming process. All this could be avoided by adding captioning to Media + Text blocks.

[samrhein]

Hi folks, you can just filter the output of the media & text block to add an image caption. The following snippet displays the image's caption text which is editable in the Media Library. I haven't tested the following code extensively, but it's working for me in Wordpress version 5.5.1. Add this code to your theme's functions.php file:

//filter Media & Text block output to add image caption
function media_block_caption( $block_content, $block ) {
    if ( $block['blockName'] === 'core/media-text' ) {
        $mediaId = $block['attrs']['mediaId'];
        if($mediaId){
            $image = get_post($mediaId);
            $image_caption = $image->post_excerpt;
            if($image_caption){
                $content = str_replace('</figure>', '<figcaption>' . $image_caption . '</figcaption></figure>', $block_content);
                return $content;
            }
        }
    }
    return $block_content;
}

add_filter( 'render_block', 'media_block_caption', 10, 2 );

[fosterTerence]

Hi Samrhein I tested your solution and it works well. It will show the caption from the image caption field in the front-end and not in the admin. Still I suggest Wordpress to provide the admin with an option to show the caption per image-text block and to display it in the admin also.

[Taruks]

Thank you samrhein! It works. I will use it until this handsome function finds its way to Gutenberg Core.

[imsimplyellie]

Hi folks, you can just filter the output of the media & text block to add an image caption. The following snippet displays the image's caption text which is editable in the Media Library. I haven't tested the following code extensively, but it's working for me in Wordpress version 5.5.1. Add this code to your theme's functions.php file:

//filter Media & Text block output to add image caption
function media_block_caption( $block_content, $block ) {
    if ( $block['blockName'] === 'core/media-text' ) {
        $mediaId = $block['attrs']['mediaId'];
        if($mediaId){
            $image = get_post($mediaId);
            $image_caption = $image->post_excerpt;
            if($image_caption){
                $content = str_replace('</figure>', '<figcaption>' . $image_caption . '</figcaption></figure>', $block_content);
                return $content;
            }
        }
    }
    return $block_content;
}

add_filter( 'render_block', 'media_block_caption', 10, 2 );

this is amazing, thank you! do you know if theres a way to do this for image titles as well?

[gregoirenoyelle]

Thanks a lot @samrhein your hook works well. @youknowriad It will be very usefull to have it in core 🙌🏼 The column block is not flexible like the Media text block

[eriwm]

Thanks @samrhein I have tried this using wordpress 5.7 and it worked fine. Is there a way to format and position the text below the image. None of the css code solutions that I have added to my child theme for centering caption have worked.

[eriwm]

Following the above I have pasted this code into my child theme css file and it seems to be working ok. I can manipulate fonts alignment etc. / Captions / [class^="wp-block-"]:not(.wp-block-gallery) figcaption{ font-family:"Helvetica Neue", Helvetica, Arial, sans-serif !important; color: black; font-style: normal; font-size: 12px !important; text-align: center; padding: 0 !important; margin-bottom: 0 !important; } So some success thanks to Catch Themes

[matthiasballreich]

Same here. The default block should have this option to enable or disable the image caption or maybe a second block for this. And it should have the Lightbox options, too. (but i think this is not needed). @cr0ybot has said it:

WordPress core blocks should be as flexible as possible, and also act predictably. If there's an option to add an image, I assume the image interface would be similar to, if not actually, the core image block. Are there several different yet similar image components in use under the hood?

[ajmaurya99]

I actually tried something like this.

/**
 * Add captions to the Media of Media and Text block.
 *
 * @param string $block_content the media and text block markup
 * @param array  $block detail about the block content
 * @return string $block_content updated block markup
 */
function add_image_caption_to_media_text_block( $block_content, $block ) {
    if ( 'core/media-text' === $block['blockName'] ) {
        if ( ! empty( $block['attrs']['mediaId'] ) ) {
            $media_id = $block['attrs']['mediaId'];
            $caption  = wp_get_attachment_caption( $media_id );
            if ( $caption ) {
                $content = str_replace( '</figure>', '<figcaption class="wp-caption-text">' . esc_html( $caption ) . '</figcaption></figure>', $block_content );
                return $content;
            }
        }
    }
    return $block_content;
}

add_filter( 'render_block', 'add_image_caption_to_media_text_block', 10, 2 );

[random-pixels]

Wow, four years later and still not implemented! The columns workaround is not viable for me because it is not possible to switch the order of the columns responsively (so that the image will go on top of the text on mobile, but to the right of the text on desktop/tablet). The Media & Text block is the only one that orders the items correctly responsively. I don't want to add a filter function since I need to be able to toggle the captions on and off like the Image block. Please implement this request!

[nicktrosnant]

Just to add a further voice to the request for this to be implemented. It is an expected feature of all images.

[ellatrix]

I needed this too. :)

[davidoclubb]

I would also like this functionality, thanks :pray:

[cparkinson]

Another request for image captions in the Media+Text block. @samrhein 's solution is working for me in WP 6.4.1

[eilarva]

Thank you @samrhein This worked perfect!! My client is in Canada, and we needed this for legal reasons. It is all a good way to keep people on site longer, as well as a way to give credit where needed.

[NolanDolce]

Hi all,

This all worked great, however, I still had significant padding above the caption. Nothing worked. Finally, we added code for the image, which worked! Here is our code for anyone who needs it:

figcaption{ color: grey; font-style: normal; font-size: 11px !important; text-align: left; padding: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }

img{ padding: 0px !important; margin-top: 0px !important; margin-bottom: 2px !important; }

[JohanVNR]

I need also this functionality. Thanks.

I tried the above suggested code on WP 6.4.2. : the code of @samrhein is doing fine, even taking into account the html code (href) in the caption on my image. The code of @ajmaurya99 is also doing fine, but doesn't process the html code, so in my caption <a href="..."> is displayed.

The only annoying thing is that I have also an audio block in this media&text block. Now this audio block also gets the caption of the image, as this audio block is also a <figure>. And that is something I don't want to have. So this workaround only works fine if there is only one <figure> in the media&text block. Another argument to implement this functionality soon?

By the way, it would also be nice to have the possibility to add a caption on an audio block: for the same reason: it must be possible to indicate a copyright on the audio. Thanks.

I searched a bit to cope with the fact that the code of @samrhein adds the caption to every figure tag in the block. I modified the code so that in case the media is on the left side only the first figure tag gets the caption and when the media is on the right side, the caption is added to the last figure tag. The modified code looks like:

//filter Media & Text block output to add image caption, only on the media image
function media_block_caption( $block_content, $block ) {
    if ( $block['blockName'] === 'core/media-text' ) {
        $mediaId = $block['attrs']['mediaId'];
        if($mediaId){
            $image = get_post($mediaId);
            $image_caption = $image->post_excerpt;
            if($image_caption){
        $lrpos=strpos($block_content,'has-media-on-the-right'); /* check if the media is left or right */
        if ($lrpos == false) { 
            $w=strpos($block_content,'</figure>'); /* left: insert caption on first <figure> tag */
        } else { 
            $w=strrpos($block_content,'</figure>'); /* right: insert caption on last <figure> tag */
        } 
        if ($w !== false){
                       $content = substr($block_content,0,$w) . '<figcaption>' . $image_caption . '</figcaption>' . substr($block_content,$w);
                    return $content;
        }
            }
        }
    }
    return $block_content;
}

add_filter( 'render_block', 'media_block_caption', 10, 2 );

Hopes this could help some of you.

[androos]

Almost all of my clients still use the Classic Editor. It is difficult for us to understand why such decisions have been made with the Block Editor. Copyright is important for professional websites. The image block can do it too and it is also editable in the editor. I see no reason why every media element, regardless of type, should not have the option of adding a caption.