Images with missing captions?
The WordPress core/gallery block is very easy to use and provides the basic start for displaying great galleries on our websites. If you used it for a while, and have lots of content already set up, you might have noticed that after the most recent upgrades (that were also including changes in the way the Gutenberg block also functions), you might have lost the captions on the images rendered in the galleries.
It happened to me too and searched for a solution. What I could find at that point was that the only way to make it work again meant to actually redo all the galleries, by selecting each image one by one 🤦🏻♀️. When having many galleries with lots of images each, this process would take a lot of time and is prone to errors (it would be easy to miss some of the images, change the order, etc.).
How to bring back image captions to WordPress gallery
The solution would be to hook into the core/image block render function and check if the block output lacks the expected figcaption markup. Then attempt to retrieve the image caption at that point and append that to the block final output.
The PHP snippet
Here is a simple snippet that makes the captions pop right back into the galleries, without having to change the existing content.
declare( strict_types = 1 );
namespace IuliaCazanSnippets\GalleryFix;
\add_filter( 'render_block', __NAMESPACE__ . '\\block_wrapper_image', 30, 2 );
/**
* Fix the old gallery captions.
* Snippet by Iulia Cazan - https://iuliacazan.ro.
*
* @param string $block_content Block content.
* @param array $block Block attributes.
* @return string
*/
function block_wrapper_image( string $block_content, array $block ): string {
if ( 'core/image' !== $block['blockName'] ) {
// Fail-fast, this is not the block we are targetting.
return $block_content;
}
if ( empty( $block['attrs']['id'] ) ) {
// Fail-fast, the image ID is missing, we cannot do anything about it.
return $block_content;
}
if ( ! substr_count( $block_content, '<figcaption' ) ) {
// The block output lacks the expected markup.
$caption = \wp_get_attachment_caption( $block['attrs']['id'] );
if ( ! empty( $caption ) ) {
// We could get the image caption, let's use it in the output.
$block_content = str_replace( '</figure>', '<figcaption>' . $caption . '</figcaption></figure>', $block_content );
}
}
return $block_content;
}
Most of the time, the easiest way to add a snippet on your website is inside your child theme’s functions.php file.
I hope this snippet comes in handy. Check out other tips & tricks and stay tuned for more in my future posts.
Happy coding!
If you find the article useful and would like to support my work, please consider making a donation / buy me a coffee, or share this article on your feed.
Thank you very much!
