Gallery Image Captions Demo

Welcome to the Gallery Image Captions (GIC) demo page.

Support for custom fields (v1.4.0) is out right now! You can it in action below. Look for the Credit and Store links in the image captions.

The gallery above uses the Gallery Image Captions (GIC) plugin.

GIC pulls in captions directly from your media library’s images. Manage all of your image’s captions in 1 place—at the source image—the way it should be.

Usage #

1. Install and activate GIC.
2. Write your GIC filter. See the filter example at the further down.
3. Add your GIC filter to your child theme’s functions.php file.
4. Write your standard WordPress Gallery shortcode and add it to your page or post.

Using Gutenberg #

This page is built with the Gutenberg block editor. The GIC shortcode that makes the gallery possible is inside a Gutenberg Shortcode block. Here’s the exact shortcode used for this page.

Not using Gutenberg? #

You can also place the GIC shortcode in your page builder using a text element or inside the visual or text tab of the classical editor. Just make sure the shortcode is on one line by itself.

How do I find the Image IDs? #

Beginning with version 1.2.0, GIC automatically adds an image ID column in your WordPress Media Library. This is to help you with adding the image IDs to your GIC shortcodes.

How GIC Works with Themes #

I designed GIC as an alternative/replacement for the Avada theme gallery because of Avada’s shortcomings with image captions. So, please use GIC as a standalone solution.

GIC isn’t meant to work inside or to enhance a page builder gallery element. It won’t add image captions to another gallery. It’s basically a supercharged version of WordPress’ original Gallery shortcode.

GIC Filter #

Here’s the original PHP filter hook (before 1.4.0).

<?php

/**
 * Custom Filter for Gallery Image Captions
 *
 * Note: Avoid altering captiontag, selector, and itemtag.
 */
function mlc_gallery_image_caption($attachment_id, $captiontag, $selector, $itemtag) {

    $id = $attachment_id;

    // Grab the meta from the GIC plugin.
    $my_image_meta = galimgcaps_get_image_meta($id);

    /**
     * Here's where to customise the caption content.
     * 
     * This example uses the meta title, caption, description, 
     * and link to the media file. 
     * 
     * You can display any value from the $my_image_meta array. 
     * You can add your own HTML too.
     */
    return "<{$captiontag} class='wp-caption-text gallery-caption' id='{$selector}-{$id}'>" .
            "<strong>Title</strong>: " . $my_image_meta['title'] . "<br>" .
            "<strong>Caption</strong>: " . $my_image_meta['caption'] . "<br>" . 
            "<strong>Description</strong>: ". $my_image_meta['description'] . "<br>" .
		    "<a href='" . $my_image_meta['src'] . "'>Download</a>" .
        "</{$captiontag}></{$itemtag}>";

}
add_filter('galimgcaps_gallery_image_caption', 'mlc_gallery_image_caption', 10, 4);

CSS #

This is the CSS used for this demo.

/** Gallery Image Captions */

/* Moody style */

/* Add a moody background color. */
#gallery-1 {
  background-color: black;
  max-width: 90vw;
}

/* Add some padding all around. */
#gallery-1 .gallery-item,
#gallery-1 .gallery-item p {
  padding: 1%;
}

/* Kick in some typewriter font and left justify the caption. */
#gallery-1 .wp-caption-text.gallery-caption {
  font-family: Courier, monospace;
  padding-top: 3%;
  text-align: left;
}

GIC 1.4.0 Filter Changes for Custom Fields #

Here’s the exact filter that displays the captions in the gallery above.

<?php

/**
 * Custom Filter for Gallery Image Captions
 *
 * Note: Avoid altering captiontag, selector, and itemtag.
 */
function mlc_gallery_image_caption($attachment_id, $captiontag, $selector, $itemtag) {

    $id = $attachment_id;

    // Grab the meta from the GIC plugin.
    $my_image_meta = galimgcaps_get_image_meta($id);

    /**
     * Here's where to customise the caption content.
     * 
     * This example uses the meta title, caption, and description. 
     * 
     * You can display any value from the $my_image_meta array. 
     * You can add your own HTML too.
     * 
     * With GIC 1.4.0 you can also add custom media attachment fields
     * to your captions.
     */
    return "<{$captiontag} class='wp-caption-text gallery-caption' id='{$selector}-{$id}'>" .
            "<strong>Title</strong>: " . $my_image_meta['title'] . "<br>" .
            "<strong>Caption</strong>: " . $my_image_meta['caption'] . "<br>" . 
            "<strong>Description</strong>: ". $my_image_meta['description'] . "<br>" .
		    "<a href='" . $my_image_meta['src'] . "'>Download</a>" . "<br>" .
		    "<strong>Credit</strong>: <a style='display: inline;' href='" . $my_image_meta['credit_link'] . "'>" . $my_image_meta['credit_text'] . "</a>" . "<br>" . // 2 custom fields
		    "<strong>Store</strong>: <a style='display: inline;' href='" . $my_image_meta['ask_store_link'] . "'>" . $my_image_meta['ask_store_link'] . "</a>" . // 1 custom field used twice
        	"</{$captiontag}></{$itemtag}>";

}
add_filter('galimgcaps_gallery_image_caption', 'mlc_gallery_image_caption', 10, 4);

/**
 * New GIC 1.4.0 filter for custom meta fields.
 */
function gic_add_custom_fields( $image_meta, $attachment ) {
	
	// This is how you add custom fields to the array that
	// GIC uses to display captions.
	$image_meta['credit_text'] = $attachment->_credit_text; // The custom field name is _credit_text but we're using just credit_text for the array key.
    $image_meta['credit_link'] = $attachment->_credit_link; // Similarily as above.
	$image_meta['ask_store_link'] = $attachment->ask_store_link; // The custom field name and meta array is is the same: ask_store_link.

	return $image_meta;
}
add_filter( 'galimgcaps_image_meta', 'gic_add_custom_fields', 10, 2 );

---