This is the jig_images filter for developers.
It lets you edit the list of images JIG is about to show and allows other creative ways to influence and create automatic captions, etc. It uses the image list $images, and the shortcode attributes $atts to enable identifying a single grid.
Influencing captions - basic
1 2 3 4 5 6 7 8 9 10 11 12 13 | add_filter('jig_images', 'change_jig_captions', 10, 2); function change_jig_captions($images, $atts) { if (!empty($atts['custom_class']) && $atts['custom_class'] == 'whatever') { foreach ($images as &$image) { if (stripos($image['title'], 'frozen') !== false) { $image['title'] = "This will override the caption containing frozen."; } } } return $images; } |
Second, we are looking for the word frozen in the title of an image. Whenever that is encountered, let's replace the entire title with something else. Automatic captions like this can save you a lot of time where you'd otherwise copy paste something endlessly or face hours of manual labor. There are multiple ways to influence captions on the fly, this is just one approach, one that has JIG-only effects.
Using image IDs to craft inquiry links - advanced
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | add_filter('jig_images', 'change_jig_captions', 10, 2); function change_jig_captions($images, $atts) { foreach ($images as &$image) { if (empty($image['extra_class']) || strpos($image['extra_class'], 'jig-contentID-NG-') === false) { break; } if (preg_match('/(\d)+/i', $image['extra_class'], $regs)) { $id = $regs[0]; } else { break; } $querystring = 'photo-inquiry='.$id; $image['description'] = esc_attr( '<a href="https://www.example.com/contact?'.$querystring.'">Inquire About This Photo</a>' ); } return $images; } |
The JavaScript-based jigHookItems filter for client-side changes (WebP example)
This is useful where caching plugins or staticized versions of the site don't allow for client-specific image list changes via PHP. One of these use cases is changing URLs to pre-generated WebP images without TimThumb. The following detects WebP browser support and replaces the extension of any URL ending with .jpg in the image list to .webp - this means you need to ensure the WebP versions exist AND disable TimThumb!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | function jigHookItems(items) { var elem = document.createElement('canvas'); if (!!(elem.getContext && elem.getContext('2d'))) { if(elem.toDataURL('image/webp').indexOf('data:image/webp') !== 0){ return items; } } else { return items; } var pattern = /\.jpg$/img; var newExtension = ".webp"; for (var image of items) { if (typeof image.link !== "undefined") { image.link = image.link.replace(pattern, newExtension); } if (typeof image.photon !== "undefined") { image.photon = image.photon.replace(pattern, newExtension); } if (typeof image.unencoded_url !== "undefined") { image.unencoded_url = image.unencoded_url.replace(pattern, newExtension); } if (typeof image.url !== "undefined") { image.url = image.url.replace(pattern, newExtension); } } return items; } |
Add this to JIG Settings -> General tab -> Custom JS. If you have dual extension like .jpg.webp, then you can add it in the newExtension var. The hook works based on the simple principle of passing the items var through the jigHookItems global function, if it is defined. You must always return the items variable which is an array of image objects (feel free to console.log how it looks like, but it's equivalent to what you see in the source, it's the "items" in JS initialization script tag for JIG).