JIG image list, change the input for the grid – jig_images and jigHookItems


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
First, let's narrow down to only a JIG with a custom class. That is a setting in the Shortcode Editor / Grid creation interface -> General tab -> Settings that affect the entire grid. It gives the grid a class in HTML, to be targeted with CSS, but we can also leverage it here in the custom code, only for identifying a single JIG so the code doesn't apply to every single grid at once.

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
In this case, shortcode attributes are not used/checked, but they are still available. The code checks the image's class, a JIG-specific string which looks like this: jig-contentID-NG-1234 where NG means it's a NextGEN image, and the numbers correspond to the ID. If your source is the regular WP Media Library, change these letters to ML. The ID gets isolated so it can be passed to a contact form where the customer could inquire about a painting or a photo, or buy them. This link is crafted and placed automatically in the description of each photo, most likely to be shown in the lightbox only. Each photo will have its unique link with its ID in it.

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!

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). 

Helpful?  Yes  No -200% found this satisfactory.
This FAQ entry was posted in Developer hooks on December 20, 2020