Gallery Image Captions (GIC) Wordpress Plugin - Rating, Reviews, Demo & Download

Gallery Image Captions (GIC) Preview Wordpress Plugin - Rating, Reviews, Demo & Download
No ratings yet
Free
Follow for free plugins, new theme releases and theme news

Plugin Description

With GIC, we can display the title, caption, and description image attributes. We can also change/filter the rendering HTML to whatever we want.

After installing and activating GIC, simply write your filter and add the WordPress gallery shortcode to your page. That’s it!

Motivation

The default WordPress gallery shortcode will only display the caption from the media’s attachment property. Sometimes it’s nice to display more like the title—even the description.

The GIC plugin overrides the WordPress gallery shortcode function to create a hook. With this hook we can do a little bit more than just displaying the caption.

Some premium themes hide the caption completely. This leaves photography lovers like me scratching their head and spending precious time cobbling together makeshift caption blocks.

Usage

Custom Filter

The crux of this plugin is the ability to filter the gallery image caption. The gallery_image_caption hook makes this possible.

For the usage examples below, this is the filter used.

/**
 * Custom Filter for Gallery Image Captions
 */
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.
     */
    return "<{$captiontag} class='wp-caption-text gallery-caption' id='{$selector}-{$id}'>" .
            "Title: " . $my_image_meta['title'] . "<br>" .
            "Caption: " . $my_image_meta['caption'] . "<br>". 
            "Description: ". $my_image_meta['description'] . 
        "</{$captiontag}></{$itemtag}>";

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

Feel free to use this filter code as a starter template. After activating the GIC plugin, add the code above to your child theme’s functions.php file. Rename the function and tweak the return string to suit your needs.

Usage Example 1

Shortcode

For starters, let’s use a <p></p> tag for the caption tag.


Styling

Let’s override the generated styles with our own style for one particular image.

/* Targeting a Specific Image */

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

/* Add some moody background with typewriter font. */
#gallery-1 .gallery-item {
    color: whitesmoke;
    background-color: black;
    font-size: 1.25rem;
    font-family: Courier, monospace;
    text-align: left !important;
}

Usage Example 2

Shortcode

Did you notice that <blockquote></blockquote> is used in the second shortcode. Let’s give it try just for kicks.

Styling

/* 1. Style the H4 Used in the Caption Example */
h4 {
    color: #777777 !important;
    font-size: 1.2rem !important;
    font-family: Helvetica, Arial, sans-serif !important;
}

/* 2. Help Align the Blockquote */
#gallery-3 .gallery-caption {
    margin-left: 40px !important;
}

Responsive CSS Example

I recommend adding the following media queries if you use galleries with more than one image. The two media queries below will stack 1×2 and 1×3 galleries into an nx1 or nx2 column as needed.

/* Media Queries for Responsive Galleries */

/**
 * 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-2 .gallery-item,
    .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; 
  }
}

Screenshots

  1. Default WordPress Gallery Image Caption Example 1

    Default WordPress Gallery Image Caption Example 1

  2. Default WordPress Gallery Image Caption Example 2

    Default WordPress Gallery Image Caption Example 2

  3. Custom Gallery Image Caption Example 1

    Custom Gallery Image Caption Example 1

  4. Custom Gallery Image Caption Example 2

    Custom Gallery Image Caption Example 2

  5. Inserting Links to the Image File and Attachment Page

    Inserting Links to the Image File and Attachment Page


Reviews & Comments