{"id":118164,"date":"2020-03-06T23:06:16","date_gmt":"2020-03-06T23:06:16","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/gallery-image-captions\/"},"modified":"2022-12-18T07:30:57","modified_gmt":"2022-12-18T07:30:57","slug":"gallery-image-captions","status":"publish","type":"plugin","link":"https:\/\/tg.wordpress.org\/plugins\/gallery-image-captions\/","author":14816408,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.4.0","stable_tag":"1.4.0","tested":"6.1.10","requires":"5.3.2","requires_php":"7.2","requires_plugins":"","header_name":"Gallery Image Captions","header_author":"caught my eye","header_description":"Creates a filter to customise WordPress gallery image captions.","assets_banners_color":"717171","last_updated":"2022-12-18 07:30:57","external_support_url":"","external_repository_url":"","donate_link":"https:\/\/ko-fi.com\/marklchaves","header_plugin_uri":"https:\/\/github.com\/marklchaves\/gallery-image-captions","header_author_uri":"https:\/\/www.caughtmyeye.cc","rating":5,"author_block_rating":0,"active_installs":100,"downloads":3612,"num_ratings":1,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"mlchaves","date":"2020-03-06 23:08:50"},"1.0.1":{"tag":"1.0.1","author":"mlchaves","date":"2020-08-16 07:40:53"},"1.1.0":{"tag":"1.1.0","author":"mlchaves","date":"2020-10-25 15:17:42"},"1.2.0":{"tag":"1.2.0","author":"mlchaves","date":"2020-11-18 08:37:03"},"1.3.0":{"tag":"1.3.0","author":"mlchaves","date":"2022-03-05 11:26:00"},"1.4.0":{"tag":"1.4.0","author":"mlchaves","date":"2022-12-18 07:30:57"}},"upgrade_notice":{"1.4.0":"

You can now display any custom fields you've got in your gallery image captions.<\/p>","1.2.0":"

Look for the Image ID column in you Media Library's list view.<\/p>","1.0.1":"

Minor release only. No code changes. Feel free to upgrade for Readme documentation updates and the new author URI in PHP source file. Also tested on PHP version 7.2.18.<\/p>"},"ratings":{"1":0,"2":0,"3":0,"4":0,"5":1},"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":2255886,"resolution":"128x128","location":"assets","locale":""},"icon-256x256.png":{"filename":"icon-256x256.png","revision":2255886,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-1554x500.jpg":{"filename":"banner-1554x500.jpg","revision":2255886,"resolution":"1554x500","location":"assets","locale":""},"banner-772x250.jpg":{"filename":"banner-772x250.jpg","revision":2255886,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0","1.0.1","1.1.0","1.2.0","1.3.0","1.4.0"],"block_files":[],"assets_screenshots":{"screenshot-1.jpg":{"filename":"screenshot-1.jpg","revision":2255886,"resolution":"1","location":"assets","locale":""},"screenshot-10.jpg":{"filename":"screenshot-10.jpg","revision":2264514,"resolution":"10","location":"assets","locale":""},"screenshot-11.png":{"filename":"screenshot-11.png","revision":2414306,"resolution":"11","location":"assets","locale":""},"screenshot-12.jpg":{"filename":"screenshot-12.jpg","revision":2728803,"resolution":"12","location":"assets","locale":""},"screenshot-13.png":{"filename":"screenshot-13.png","revision":2728803,"resolution":"13","location":"assets","locale":""},"screenshot-2.jpg":{"filename":"screenshot-2.jpg","revision":2255886,"resolution":"2","location":"assets","locale":""},"screenshot-3.jpg":{"filename":"screenshot-3.jpg","revision":2255886,"resolution":"3","location":"assets","locale":""},"screenshot-4.jpg":{"filename":"screenshot-4.jpg","revision":2255886,"resolution":"4","location":"assets","locale":""},"screenshot-5.jpg":{"filename":"screenshot-5.jpg","revision":2255886,"resolution":"5","location":"assets","locale":""},"screenshot-6.jpg":{"filename":"screenshot-6.jpg","revision":2264514,"resolution":"6","location":"assets","locale":""},"screenshot-7.jpg":{"filename":"screenshot-7.jpg","revision":2264514,"resolution":"7","location":"assets","locale":""},"screenshot-8.jpg":{"filename":"screenshot-8.jpg","revision":2264514,"resolution":"8","location":"assets","locale":""},"screenshot-9.jpg":{"filename":"screenshot-9.jpg","revision":2264514,"resolution":"9","location":"assets","locale":""}},"screenshots":{"1":"WordPress Gallery Before GIC","2":"WordPress Gallery Before GIC","3":"Displaying title, caption, and description with moody styling using GIC","4":"More styling examples using GIC: centre justified text and even using blockquote styling","5":"With GIC, you can even insert links to the image file and attachment Page!","6":"Write media queries to control how to display captions for different devices","7":"Responsive for mobile displays","8":"Another example of displaying title, caption, and description with moody styling using GIC","9":"Washington Post style captions using GIC","10":"Vogue style captions using GIC","11":"Media Library Image ID column to help with writing GIC shortcodes. Since in v1.2.0.","12":"Custom field support. New in v1.4.0.","13":"Media attachment details with 2 custom fields for photographer credits."},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[356,2236,210,246,80],"plugin_category":[43,50,59],"plugin_contributors":[182726],"plugin_business_model":[],"class_list":["post-118164","plugin","type-plugin","status-publish","hentry","plugin_tags-css","plugin_tags-filter","plugin_tags-gallery","plugin_tags-html","plugin_tags-shortcode","plugin_category-customization","plugin_category-media","plugin_category-utilities-and-tools","plugin_contributors-mlchaves","plugin_committers-mlchaves"],"banners":{"banner":"https:\/\/ps.w.org\/gallery-image-captions\/assets\/banner-772x250.jpg?rev=2255886","banner_2x":false,"banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/gallery-image-captions\/assets\/icon-128x128.png?rev=2255886","icon_2x":"https:\/\/ps.w.org\/gallery-image-captions\/assets\/icon-256x256.png?rev=2255886","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/gallery-image-captions\/assets\/screenshot-1.jpg?rev=2255886","caption":"WordPress Gallery Before GIC"},{"src":"https:\/\/ps.w.org\/gallery-image-captions\/assets\/screenshot-2.jpg?rev=2255886","caption":"WordPress Gallery Before GIC"},{"src":"https:\/\/ps.w.org\/gallery-image-captions\/assets\/screenshot-3.jpg?rev=2255886","caption":"Displaying title, caption, and description with moody styling using GIC"},{"src":"https:\/\/ps.w.org\/gallery-image-captions\/assets\/screenshot-4.jpg?rev=2255886","caption":"More styling examples using GIC: centre justified text and even using blockquote styling"},{"src":"https:\/\/ps.w.org\/gallery-image-captions\/assets\/screenshot-5.jpg?rev=2255886","caption":"With GIC, you can even insert links to the image file and attachment Page!"},{"src":"https:\/\/ps.w.org\/gallery-image-captions\/assets\/screenshot-6.jpg?rev=2264514","caption":"Write media queries to control how to display captions for different devices"},{"src":"https:\/\/ps.w.org\/gallery-image-captions\/assets\/screenshot-7.jpg?rev=2264514","caption":"Responsive for mobile displays"},{"src":"https:\/\/ps.w.org\/gallery-image-captions\/assets\/screenshot-8.jpg?rev=2264514","caption":"Another example of displaying title, caption, and description with moody styling using GIC"},{"src":"https:\/\/ps.w.org\/gallery-image-captions\/assets\/screenshot-9.jpg?rev=2264514","caption":"Washington Post style captions using GIC"},{"src":"https:\/\/ps.w.org\/gallery-image-captions\/assets\/screenshot-10.jpg?rev=2264514","caption":"Vogue style captions using GIC"},{"src":"https:\/\/ps.w.org\/gallery-image-captions\/assets\/screenshot-11.png?rev=2414306","caption":"Media Library Image ID column to help with writing GIC shortcodes. Since in v1.2.0."},{"src":"https:\/\/ps.w.org\/gallery-image-captions\/assets\/screenshot-12.jpg?rev=2728803","caption":"Custom field support. New in v1.4.0."},{"src":"https:\/\/ps.w.org\/gallery-image-captions\/assets\/screenshot-13.png?rev=2728803","caption":"Media attachment details with 2 custom fields for photographer credits."}],"raw_content":"\n

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

After installing and activating GIC, write your filter and add the WordPress Gallery shortcode<\/a> to your page.<\/p>\n\n

If you've been dreaming<\/em> of writing a filter to customise the gallery image captions, then this plugin is for you.<\/p>\n\n

Visit the live demo page.<\/a><\/p>\n\n

Motivation<\/h4>\n\n

The default WordPress gallery shortcode will only display the caption<\/strong> from the media's attachment metadata. Sometimes it's nice to display more like the title—even the description.<\/p>\n\n

The GIC plugin<\/strong> overrides the WordPress gallery shortcode function to create a hook<\/a>. With this hook<\/em> you can do a little bit more than just displaying the caption.<\/p>\n\n

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.<\/p>\n\n

Usage<\/h3>\n\n

Custom Filter For Displaying Captions<\/h4>\n\n

The crux<\/strong> of this plugin is the ability to filter the gallery image caption. The galimgcaps_gallery_image_caption<\/code> hook makes this possible.<\/p>\n\n

For the usage examples below, this is the filter used.<\/p>\n\n

\/**\n * Custom Filter for Gallery Image Captions\n *\n * Note: Avoid altering captiontag, selector, and itemtag.\n *\/\nfunction mlc_gallery_image_caption($attachment_id, $captiontag, $selector, $itemtag) {\n\n    $id = $attachment_id;\n\n    \/\/ Grab the meta from the GIC plugin.\n    $my_image_meta = galimgcaps_get_image_meta($id);\n\n    \/**\n     * Here's where to customise the caption content.\n     * \n     * This example uses the meta title, caption, and description. \n     * \n     * You can display any value from the $my_image_meta array. \n     * You can add your own HTML too.\n     *\/\n    return \"<{$captiontag} class='wp-caption-text gallery-caption' id='{$selector}-{$id}'>\" .\n            \"Title: \" . $my_image_meta['title'] . \"<br>\" .\n            \"Caption: \" . $my_image_meta['caption'] . \"<br>\". \n            \"Description: \". $my_image_meta['description'] . \n        \"<\/{$captiontag}><\/{$itemtag}>\";\n\n}\nadd_filter('galimgcaps_gallery_image_caption', 'mlc_gallery_image_caption', 10, 4);\n<\/code><\/pre>\n\n
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<\/code> file. Rename the function and tweak the return string to suit your needs.<\/p>\n\n
New Filter To Get Custom Fields<\/h4>\n\n
\/**\n * New GIC 1.4.0 filter for custom meta fields.\n *\/\nfunction gic_add_custom_fields( $image_meta, $attachment ) {\n\n    \/\/ This is how you add a custom fields to the array that\n    \/\/ GIC uses to display captions.\n    $image_meta['credit_text'] = $attachment->credit_text;\n    $image_meta['credit_link'] = $attachment->credit_link;\n\n    return $image_meta;\n}\nadd_filter( 'galimgcaps_image_meta', 'gic_add_custom_fields', 10, 2 );\n<\/code><\/pre>\n\n
To use these two custom fields, your galimgcaps_gallery_image_caption<\/code> would look something like this.<\/p>\n\n
function mlc_gallery_image_caption($attachment_id, $captiontag, $selector, $itemtag) {\n\n    $id = $attachment_id;\n\n    \/\/ Grab the meta from the GIC plugin.\n    $my_image_meta = galimgcaps_get_image_meta($id);\n\n    \/\/ If there's credit, give it where it's due complete with link.\n    $credit = $my_image_meta['description'] ? \n        \"<br><strong>Credit<\/strong>: <a style='display: inline;' href='\" . \n        $my_image_meta['credit_link'] . \n        \"'>\" . $my_image_meta['credit_text'] . \"<\/a>\" . \"<br>\" : \n        '';\n\n    \/**\n     * With GIC 1.4.0 you can also add custom media attachment fields\n     * to your captions.\n     *\/\n    return \"<{$captiontag} class='wp-caption-text gallery-caption' id='{$selector}-{$id}'>\" .\n            \"<strong>Caption<\/strong>: \" . $my_image_meta['caption'] . \"<br>\" . \n            $credit .\n            \"<\/{$captiontag}><\/{$itemtag}>\";\n\n}\nadd_filter('galimgcaps_gallery_image_caption', 'mlc_gallery_image_caption', 10, 4);\n<\/code><\/pre>\n\n
Since v1.2.0<\/strong>, GIC automatically adds an Image ID<\/strong> column to your WordPress Media Library. This is to help you add the image IDs to your GIC shortcodes.<\/p>\n\n
See where GIC automatically adds an Image ID column to your WordPress Media Library.<\/a><\/p>\n\n
New in v1.4.0<\/strong>, GIC support custom media attachment fields.<\/p>\n\n
Usage Example 1<\/h3>\n\n
Shortcode<\/h4>\n\n
For starters, let's use a<\/p>\n\n
<p><\/p> \n<\/code><\/pre>\n\n
tag for the caption tag.<\/p>\n\n
[gallery size=\"full\" columns=\"1\" link=\"file\" ids=\"114\" captiontag=\"p\"]\n<\/code><\/pre>\n\n
Styling<\/h4>\n\n
Let's override the generated styles with our own style for one particular image.<\/p>\n\n
\/* Targeting a Specific Image *\/\n\n\/* Add some padding all around. *\/\n#gallery-1 .gallery-item, \n#gallery-1 .gallery-item p {\n    padding: 1%;\n}\n\n\/* Add some moody background with typewriter font. *\/\n#gallery-1 .gallery-item {\n    color: whitesmoke;\n    background-color: black;\n    font-size: 1.25rem;\n    font-family: Courier, monospace;\n    text-align: left !important;\n}\n<\/code><\/pre>\n\n
Usage Example 2<\/h3>\n\n
Shortcode<\/h4>\n\n
A 2 column x 1 row gallery with large size images using an H4 for the caption.<\/strong><\/p>\n\n
[gallery size=\"large\" columns=\"2\" link=\"file\" ids=\"109,106\" captiontag=\"h4\"]\n<\/code><\/pre>\n\n
A 3 column x 1 row gallery with medium size images using a blockquote for the caption.<\/strong><\/p>\n\n
[gallery size=\"medium\" columns=\"3\" link=\"file\" ids=\"109,106,108\" captiontag=\"blockquote\"]\n<\/code><\/pre>\n\n
Did you notice that we are using<\/p>\n\n
<blockquote><\/blockquote> \n<\/code><\/pre>\n\n
in the second shortcode? Let's give it try just for kicks<\/em>.<\/p>\n\n
Styling<\/h4>\n\n
\/* 1. Style the H4 Used in the Caption Example *\/\nh4 {\n    color: #777777 !important;\n    font-size: 1.2rem !important;\n    font-family: Helvetica, Arial, sans-serif !important;\n}\n\n\/* 2. Help Align the Blockquote *\/\n#gallery-3 .gallery-caption {\n    margin-left: 40px !important;\n}\n<\/code><\/pre>\n\n
Responsive CSS Example<\/h3>\n\n
I recommend adding the following media queries if you use galleries with more than one image. The two media queries below will stack 2x1 and 3x1 galleries into a 1 column x n rows or 2 column x n rows  as needed.<\/p>\n\n
\/* Media Queries for Responsive Galleries *\/\n\n\/**\n * Styling based on article \"How To: Style Your WordPress Gallery\"\n * by Par Nicolas.\n * \n * https:\/\/theme.fm\/how-to-style-your-wordpress-gallery\/\n *\/\n\n\/* Mobile Portrait Breakpoint - 1 column *\/\n@media only screen and (max-width: 719.998px) {\n    .gallery-columns-2 .gallery-item,\n    .gallery-columns-3 .gallery-item { \n     width: 100% !important; \n  }\n}\n\n\/* Mobile Landscape and Tablet Breakpoints - 2 columns *\/\n@media only screen and (min-width: 720px) and (max-width: 1024px) {\n  .gallery-columns-3 .gallery-item { \n     width: 50% !important; \n  }\n}\n<\/code><\/pre>\n\n\n
    \n
  1. Upload the plugin files to the \/wp-content\/plugins\/PLUGIN-NAME<\/code> directory, or install the plugin through the WordPress Plugins<\/strong> page directly.<\/li>\n
  2. Activate the plugin through the Plugins<\/strong> page in WordPress.<\/li>\n<\/ol>\n\n\n
    \n
    What media metadata can I insert into my captions?<\/h3><\/dt>\n
    Here's the list of metadata with their array index you can insert into your captions.<\/p>\n\n