Captions not showing – Media & Text

Hi All,

Captions work fine when I’m using an image block. But if I insert a “Media & Text” block (image and text), the captions don’t show. Please let me know?

Example post of media & text blocks, without captions showing: https://rareparenting.com/gift-guide-for-kids-with-disabilities-holiday-2023/

Thanks!

Hi Bettina,

I referred to the media & text blocks, not the featured image. I have captions for some of the images in the post, and they aren’t displaying.

Thanks!

Hi Bettina,

Yes I know that. The captions work fine on all images across the site (images in posts as well as featured images), EXCEPT for the media & text blocks. Captions have been inserted, correctly, on some of those images in the link I included in this post, yet they do not display. Please let me know.

Thanks.

Hi bettina,

In the video you can see I created captions for both the featured image and the image & text block. Only the featured image caption displays. The image & text block does not show captions, across the whole website.

https://www.loom.com/share/e39a500da26a401f894b8ec8b774d4b4?sid=d4f54530-97f8-4234-8b0c-73becd46bb28

Thanks,

Megan

Hi Bettina,

It’s not possible to display a simple image with text to its side. Let me know if you know something I don’t?

As far as I know, that is the very purpose of Gutenberg blocks, to provide this possibility.

Newspaper should work with Gutenberg.. it’s pretty standard?

Having an image appear next to text is crucial. Otherwise you’re suggesting all images live in their own row, always.

Please let me know?

Thank you!

Hi Bettina,

Just to follow up, I found the below code and added it to the functions.php file, and captions now work, for future reference for anyone else! 🙂

To find the functions.php file:
Go to Appearance -> Theme file editor -> functions.php appears on the right.
Instructions:
Copy and past the below at the bottom of the code.

//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 );

Yes, because I added the code (see above) so now it works. 🙂

Thanks, Bettina!

Hi Bettina,

Following up on this, how to I change the margins under the photo? Do you know by chance? Thanks!

https://imgur.com/zzmXrIN

Hi Bettina,

The editor doesn’t fix the space between the image and captions. For the Live CSS, I inputted this:

[class^=”wp-block-“]:not(.wp-block-gallery)
figcaption{
color: grey;
font-style: normal;
font-size: 11px !important;
text-align: left;
padding: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}

Everything you see above works, except for the margins. Do you know what the correct text should be to make the margins adjust using the live CSS? Thanks!

Hi Bettina,

I was able to figure this out by adding in CSS for the image specifically, instead of the caption. For anyone reading, here is what I used:

[class^=”wp-block-“]:not(.wp-block-gallery)
figcaption{
color: grey;
font-style: normal;
font-size: 11px !important;
text-align: left;
padding: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}

[class^=”wp-block-“]:not(.wp-block-gallery)
img{
padding: 0px !important;
margin-top: 0px !important;
margin-bottom: 2px !important;
}

Thanks!