If you want customise your gallery captions using any of the image meta data, follow these instructions as an example how-to.
On 20 February 2020, I proposed a pull request for this enhancement.
As of March 2020, this code is now available as a plugin on the WordPress.org plugin directory! The plugin name is Gallery Image Captions or GIC.
- Place the contents of the
custom_gallery_image_captions_functions.php
file in your child theme'sfunctions.php
file. - Copy
/wp-includes/media.php
gallery_shortcode()
function to your child theme'sfunctions.php
file. - Rename copied function. E.g.
my_gallery_shortcode
- In the renamed function, replace the existing code block that creates the captiontag markup with the contents of the
custom_image_caption_filter_hook_media.php
into your copy ofgallery_shortcode()
function. Grep/search on captiontag to find where the code should go. See snippet below of the code to overwrite. - Add the following above your new custom function in functions.php.
/**
* Override the WordPress core media.php gallery_shortcode().
*/
remove_shortcode('gallery', 'gallery_shortcode');
add_shortcode( 'gallery', 'my_gallery_shortcode' );
- Use the classic or Gutenberg editor or your fave page builder to create an HTML block. Add your classic gallery shortcode e.g.,
[gallery size="medium" columns="3" link="file" ids="29,30,31"]
or[gallery size="large" columns="3" link="file" ids="29,30,31" captiontag="h4"]
Find this snippet in your copy of the gallery_shortcode()
function and replace it with the contents of custom_image_caption_filter_hook_media.php
.
if ( $captiontag && trim( $attachment->post_excerpt ) ) {
$output .= "
<{$captiontag} class='wp-caption-text gallery-caption' id='$selector-$id'>
" . wptexturize( $attachment->post_excerpt ) . "
</{$captiontag}>";
}
$output .= "</{$itemtag}>";
Styling can be specified a couple ways. First, in the shortcode.
[gallery itemtag="div" icontag="span" captiontag="p"]
More details in the Codex.
Second, using custom CSS to override the default class attributes.
/**
* Styling based on article "How To: Style Your WordPress Gallery"
* by Par Nicolas.
*
* https://theme.fm/how-to-style-your-wordpress-gallery/
*/
/* Mobile Portrait Breakpoint - 1 column */
@media only screen and (max-width: 719.998px) {
.gallery-columns-3 .gallery-item {
width: 100% !important;
}
}
/* Mobile Landscape and Tablet Breakpoints - 2 columns */
@media only screen and (min-width: 720px) and (max-width: 1024px) {
.gallery-columns-3 .gallery-item {
width: 50% !important;
}
}
Tested on WordPress 5.3.2 running on PHP 7.3.5.
Now Available as a Plugin!
I'm excited to announce the release of the official Gallery Image Captions (GIC) plugin!
GIC is a minimalist low footprint plugin that created the
gallery
shortcut override for you. All you have to do after activating GIC is write your filter.If you decide to use the GIC plugin, I'd appreciate your feedback. Either post to the support forum or write a review.