How to fix the missing captions from the gallery without re-selecting each image
Have you noticed that after the most recent WordPress upgrades you might have lost the captions on the images rendered in the galleries? See below the PHP snippet that fixes this programmatically, in just a few lines of code.
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.
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!
Click the heart.
If you would like to support my work, consider making a donation, buy me a coffee, or share this on your feed.
A huge thanks in advance!
Are you interested in more programming tips and tricks?
How to Automatically Set a Specific Template to New WordPress Posts – Snippet Included
Applying by default a specific…
How to Integrate Google reCAPTCHA v3 in Forms that Use AJAX Validation
I recently had to update one of the sites that is…
How to display related posts on your WordPress site
Most of the time we want to keep the visitors more on our websites, by…
How to fix translation in multi-language website + WooCommerce + AJAX checkout
I have been working recently on a multi-language…