Gallery Image Captions Demo

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

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 end of this page.
3. Add your GIC filter to your child theme’s functions.php file.
4. Write your GIC 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 not 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 exact PHP filter hook used for this demo.

<?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;
}

/* 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;
}

Get the Plugin

Get the GIC plugin on WordPress.org.

Visit the GitHub repo and fork your own copy.