Gallery Image Captions (GIC)

Gallery Image Captions (GIC)

Wordpress plugin

Install on Wordpress

App Details

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

After installing and activating GIC, write your filter and add the WordPress Gallery shortcode to your page.

If you’ve been dreaming of writing a filter to customise the gallery image captions, then this plugin is for you.

Visit the live demo page.

Motivation

The default WordPress gallery shortcode will only display the caption from the media’s attachment metadata. 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 you 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 For Displaying Captions

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

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

/** * 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. */ 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.

New Filter To Get Custom Fields

/** * New GIC 1.4.0 filter for custom meta fields. */ function gic_add_custom_fields( $image_meta, $attachment ) { // This is how you add a custom fields to the array that // GIC uses to display captions. $image_meta['credit_text'] = $attachment->credit_text; $image_meta['credit_link'] = $attachment->credit_link; return $image_meta; } add_filter( 'galimgcaps_image_meta', 'gic_add_custom_fields', 10, 2 ); 

To use these two custom fields, your galimgcaps_gallery_image_caption would look something like this.

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); // If there's credit, give it where it's due complete with link. $credit = $my_image_meta['description'] ? "<br><strong>Credit</strong>: <a style='display: inline;' href='" . $my_image_meta['credit_link'] . "'>" . $my_image_meta['credit_text'] . "</a>" . "<br>" : ''; /** * 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>Caption</strong>: " . $my_image_meta['caption'] . "<br>" . $credit . "</{$captiontag}></{$itemtag}>"; } add_filter('galimgcaps_gallery_image_caption', 'mlc_gallery_image_caption', 10, 4); 

Since v1.2.0, GIC automatically adds an Image ID column to your WordPress Media Library. This is to help you add the image IDs to your GIC shortcodes.

See where GIC automatically adds an Image ID column to your WordPress Media Library.

New in v1.4.0, GIC support custom media attachment fields.

Usage Example 1

Shortcode

For starters, let’s use a

<p></p> 

tag for the caption tag.

[gallery size="full" columns="1" link="file" ids="114" captiontag="p"] 

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

A 2 column x 1 row gallery with large size images using an H4 for the caption.

[gallery size="large" columns="2" link="file" ids="109,106" captiontag="h4"] 

A 3 column x 1 row gallery with medium size images using a blockquote for the caption.

[gallery size="medium" columns="3" link="file" ids="109,106,108" captiontag="blockquote"] 

Did you notice that we are using

<blockquote></blockquote> 

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 2×1 and 3×1 galleries into a 1 column x n rows or 2 column x n rows 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; } } 

Pricing

Starting from $0 per month.

Check Out the Progress Bars Widget

By Common Ninja

Progress BarsTry For Free!

App Info

Rating

Reviewers

1 reviews

Tags

css
filter
gallery
html
shortcode

Developed By

mark l chaves

Quick & Easy

Find the Best Wordpress plugins for you

Common Ninja has a large selection of powerful Wordpress plugins that are easy to use, fully customizable, mobile-friendly and rich with features — so be sure to check them out!

Testimonial

Testimonial plugins for Wordpress

Galleries

Galleries plugins for Wordpress

SEO

SEO plugins for Wordpress

Contact Form

Contact Form plugins for Wordpress

Forms

Forms plugins for Wordpress

Social Feeds

Social Feeds plugins for Wordpress

Social Sharing

Social Sharing plugins for Wordpress

Events Calendar

Events Calendar plugins for Wordpress

Sliders

Sliders plugins for Wordpress

Analytics

Analytics plugins for Wordpress

Reviews

Reviews plugins for Wordpress

Comments

Comments plugins for Wordpress

Portfolio

Portfolio plugins for Wordpress

Maps

Maps plugins for Wordpress

Security

Security plugins for Wordpress

Translation

Translation plugins for Wordpress

Ads

Ads plugins for Wordpress

Video Player

Video Player plugins for Wordpress

Music Player

Music Player plugins for Wordpress

Backup

Backup plugins for Wordpress

Privacy

Privacy plugins for Wordpress

Optimize

Optimize plugins for Wordpress

Chat

Chat plugins for Wordpress

Countdown

Countdown plugins for Wordpress

Email Marketing

Email Marketing plugins for Wordpress

Tabs

Tabs plugins for Wordpress

Membership

Membership plugins for Wordpress

popup

popup plugins for Wordpress

SiteMap

SiteMap plugins for Wordpress

Payment

Payment plugins for Wordpress

Coming Soon

Coming Soon plugins for Wordpress

Ecommerce

Ecommerce plugins for Wordpress

Customer Support

Customer Support plugins for Wordpress

Inventory

Inventory plugins for Wordpress

Video Player

Video Player plugins for Wordpress

Testimonials

Testimonials plugins for Wordpress

Tabs

Tabs plugins for Wordpress

Social Sharing

Social Sharing plugins for Wordpress

Social Feeds

Social Feeds plugins for Wordpress

Slider

Slider plugins for Wordpress

Reviews

Reviews plugins for Wordpress

Portfolio

Portfolio plugins for Wordpress

Membership

Membership plugins for Wordpress

Forms

Forms plugins for Wordpress

Events Calendar

Events Calendar plugins for Wordpress

Contact

Contact plugins for Wordpress

Comments

Comments plugins for Wordpress

Analytics

Analytics plugins for Wordpress

Common Ninja Apps

Some of the best Common Ninja plugins for Wordpress

Browse our extensive collection of compatible plugins, and easily embed them on any website, blog, online store, e-commerce platform, or site builder.

Progress Bars for Wordpress logo

Progress Bars

Show progress clearly with animated progress bars that visualize goals, highlight achievements, and keep visitors engaged and motivated.

Petition Form for Wordpress logo

Petition Form

Gather supporter signatures with a petition form that collects entries, saves submissions, sends notifications, and helps you drive meaningful change efficiently.

Highlighted Headlines for Wordpress logo

Highlighted Headlines

Enhance titles with highlighted headlines that use custom colors, animations, and styles to draw attention and help visitors notice key messages.

App Store Reviews for Wordpress logo

App Store Reviews

Show Apple App Store reviews to build trust, strengthen credibility, and help visitors make confident download decisions that support app growth.

YouTube Feed for Wordpress logo

YouTube Feed

Show YouTube videos in a customizable YouTube feed that keeps content fresh, boosts watch time, and helps visitors explore more of your channel.

Airbnb Reviews for Wordpress logo

Airbnb Reviews

Show Airbnb reviews to build trust, improve credibility, and help visitors make confident booking decisions that support higher property sales.

Tripadvisor Reviews for Wordpress logo

Tripadvisor Reviews

Show Tripadvisor reviews to build trust, improve credibility, and help visitors make confident booking decisions that support higher property sales.

Scroll to Top for Wordpress logo

Scroll to Top

A scroll to top button that helps visitors move back to the top of long pages quickly, improving navigation and overall browsing flow.

Bluesky Feed Slider for Wordpress logo

Bluesky Feed Slider

Show Bluesky posts with a Bluesky feed slider that scrolls updates and keeps content visible while keeping visitors engaged.

Podcast Player for Wordpress logo

Podcast Player

Add a podcast player to your site to embed and organize episodes, provide responsive playback, and keep listeners engaged.

Image Hover Effects for Wordpress logo

Image Hover Effects

Use image hover effects to add animations, highlight key visuals, and keep visitors engaged with dynamic image reveals.

Section Builder for Wordpress logo

Section Builder

Create structured layouts with a section builder that lets you design custom website sections, customize styles, and organize content for a clearer user experience.

More plugins

plugins You Might Like

Discover Apps By Platform

Discover the best apps for your website

WordPress
Wix
Shopify
Weebly
Webflow
Joomla
PrestaShop
Shift4Shop
WebsiteX5
MODX
Opencart
NopCommerce

Common Ninja Search Engine

The Common Ninja Search Engine platform helps website builders find the best site widgets, apps, plugins, tools, add-ons, and extensions! Compatible with all major website building platforms - big or small - and updated regularly, our Search Engine tool provides you with the business tools your site needs!

Multiple platforms