Frequently Asked Questions

­

Go
Reset

Visual

Sorry, but the Pinterest waterfall layout is not available in Justified Image Grid. It's horizontal and is without columns. It might get added as part of a future update, though. Why, what's wrong with it, you might ask... let's see a comparison.

Defining the masonry layout

With so many grid styles and plugins, it's hard to grasp what the difference is. There could be a misconception about what is considered masonry. By the JIG developer's definition, masonry is a strictly horizontal grid where thumbnails align just like bricks in the wall. After all, masons are a craftsmen who lay bricks. They don't do it vertically. It's often confused with the waterfall grid layout that Pinterest uses.

Eye movement and thumbnail flow direction

The natural reading direction of most countries is horizontal, either left-to-right or right-to-left. When you tell a story with pictures, you do it in your reading order. For example, wedding photos. Can you imagine that in a vertical layout? How can you tell which image is next? There is no natural flow except a sense of infinity by scrolling and scrolling. Indeed, it's good for galleries where the order is not important, that's why it works so well for Pinterest and Tumblr. When you look at a JIG gallery, your eye movement is the same as during reading, it's what your eyes are programmed to. Do you think it's a coincidence that Flickr (the largest photo site), Shutterstock, Google image search, Google+, Google Photos, 500px front page all use this horizontal layout?

Photo orientation balance

The usual argument is that (in the horizontal layout) portrait images get diminished among many landscape shots. Think about it, why would this be any different in the vertical layout? Orientation roles would simply get switched. Landscape shots would have small surface area in comparison to "huge" portrait photos. Justified Image Grid makes an effort to increase row height where a portrait photo is present, while decreasing row height for landscape-only rows. This results in a balanced grid. Applying the same logic to a column-based gallery would be problematic as they consist of a predefined, relatively small number of columns with many thumbnails in each. Any of them can contain a portrait. Therefore column widths can't be juggled so well, unlike row heights in a horizontal masonry layout (JIG).

Permalink ·  Deeplink · Helpful?  Yes  No 71% found this satisfactory.

Yes it's possible, although there is no dedicated setting for this yet as it's just like a recipe. The components of this layout are variable and are specific to your theme and photos.

Most likely you need this for mobile devices. The guidelines are these:

  • Target row height in the range of 360 to 640.
  • Row height max deviation is irrelevant only when you use the Disable cropping setting (which is recommended).
  • For a more compact look, use a moderate row height with the same amount of height deviation, e.g. 360 for both settings. Do not disable cropping in this case.
  • Please note that the device in landscape orientation has less available height than a portrait thumbnail this way, but JIG will limit the thumbnail height to the screen height!
  • Consider disabling the lightbox.

For desktops only, things are different:

  • Set a very large row height, in the range of 800-1200 with 0 height deviation (irrelevant due to disabled cropping). The exact value depends on how thin your portrait images are, and how wide your content area can be. It's open to experimentation, there is no one size fits all magic value.
  • Always disable cropping.
  • Disable the lightbox, it will not be very useful in this setup.
  • Disable TimThumb unless your source images are large (above 1200px on average).

It's recommended to use the mobile versions of the core settings: Mobile row height and Mobile row height deviation because the recommended values are highly tailored to separate device types. Alternatively, create custom presets and use one for desktop and another for mobile devices.

Permalink ·  Deeplink · Helpful?  Yes  No 100% found this satisfactory.

If your theme is not responsive, then by all means: yes. Say, you have 900px wide content area to work with. You'd like 3 thumbnails at 300*200, with no spacing. Even if your photos have different aspect ratios, you can force-crop them using the Thumbnail aspect ratio setting. You'd enter 3:2 or 300:200 or 1.5, as they would do the same thing. Also, you'd just set Target row height to 200 with Row height max deviation set to 0.

However, your site is most likely responsive. In the responsive world, there is no such thing as x images per row. Why? Imagine that (in text) the optimal number of characters per line is 50-60. Would it still be comfortable to read on a small mobile screen? Indeed, it would be too small to read. So, if 5-6 images fit comfortably in a row on desktop, would they be fine on a mobile screen? Again, no. So the x images per row idea is flawed at this point, unfortunately. Let Justified Image Grid do its job and determine that 1-2 thumbnails per row is the most optimal on mobile devices. Still, it'll all depend your Target row height values. In practice, you can influence it to fit only 1 thumbnail per row, or force it to squish in many small thumbnails.

The fixed thumbnail size has a conceptual problem. It could be guaranteed on a mobile device, but no other image at that size would fit next to the first one. In the end, it would be impossible to have a justified layout that way. Therefore, an aspect ratio value is introduced, which can be fixed or inherited naturally from the original picture.

Permalink ·  Deeplink · Helpful?  Yes  No 15% found this satisfactory.

Sorry, but Justified Image Grid has rows, not columns. This is a redirect entry as the question can be answered in multiple ways.

Do you mean...

Permalink ·  Deeplink · Helpful?  Yes  No 0% found this satisfactory.

Primarily, thumbnail size is controlled through the Target row height and Row height max deviation (+-) settings. Justified Image Grid calculates the optimal size for your thumbnail within the range you set. It respects the original aspect ratio and only crops if the range you set is not high enough to make the justified layout mathematically possible.

The aspect ratio can be the original, or overridden by your custom, fixed Thumbnail aspect ratio value. It's not possible to directly set a fixed thumbnail size in pixels, but the aspect ratio control is the next best thing.

The Randomize thumbnail width is available to spice up a grid of similar aspect ratio photos.

Learn more about the plugin:

Permalink ·  Deeplink · Helpful?  Yes  No 34% found this satisfactory.

No, a thumbnail cannot span over two or more rows, at least not yet. All thumbnails are contained within the boundaries of rows. Since the layout is automatic, there is no way to mark an image to behave differently than the rest. In the future this may likely change.

Yes you can. There is a setting called Spacing between the thumbnails which lets you set a distance in pixels, which is applied between every thumbnail. For technical reasons this cannot be % based nor changed with the screen size dynamically. However, it's possible to set a different spacing for mobile devices. Any setting can have a mobile specific value. You can create a custom preset and choose it to be used for mobile devices only.

Permalink ·  Deeplink · Helpful?  Yes  No 25% found this satisfactory.

Yes, of course it's possible. On this site, most demos feature photos that all have different aspect ratios by design. So the grids look nicely random. However, when you create your first gallery that consists of, say, 15 landscape shots and 3 portraits, it's not going to look that random. Obviously, false advertising is off limits, so there is a built-in solution called Randomize thumbnail width that will intelligently crop to an extent limited by your threshold. It will always crop the same amount from a given thumbnail at a specific row height, meaning it's a seedable random (just in case a photo is cropped in an undesirable way). It will not create an infinite number of thumbnails on your server. Furthermore, you can depend on the fact that the result grid will always look the same for your visitors. Of course, the lightbox version will remain untouched.

It's really simple, just go to JIG Settings > Custom CSS and paste this code:

Change the numbers 16 and 14 to have different text sizes. The first rule is for the main line of the lightbox caption, the second rule with the smaller font-size is for the small text.

Are happy with the default font-sizes, but for some reason the text (could be the only text) you wish to show is displayed with the second, smaller caption line? It is because your text is placed on the link title attribute, and not on the img alt. To fix this:

  1. Go to the Lightboxes tab > What text to show inside the lightbox section > WP field for link title (anchor tag's title attribute) and select the Description option. This will put the longer text (the description) to the small part of the PhotoSwipe caption.
  2. Also, go to the Lightboxes tab > What text to show inside the lightbox section > WP field for img alt (image tag's alt attribute) and select the Title option. This will place the shorter text (the title) to the large part of the PhotoSwipe caption.

While these are the default options, switching to a preset that brings a different lightbox, can change these values.

Permalink ·  Deeplink · Helpful?  Yes  No 50% found this satisfactory.

Mind you that this familiar effect requires the thumbnail to be slightly larger than shown. This is not always the case with JIG. Therefore, the zoomed-in state might show upscaling. If that's ok, then add this to Custom CSS:

 

Behavior

You need the "Classic" block. When adding a new block, search for classic and insert that block. It's under the Formatting section. You'll get the same old toolbar, at the end of which you'll find the purple Shortcode Editor button, as usual. Remember, the shortcode is only needed when you want to use special features and sources. Starting from JIG v3.9.2, JIG can automatically take over the regular Gutenberg gallery block (that's just a WordPress gallery).

Permalink ·  Deeplink · Helpful?  Yes  No 30% found this satisfactory.

This article assumes you already use CloudFlare, but it's not caching your thumbnails. If you don't have CloudFlare yet, follow their guides. Activating CloudFlare on your site in itself doesn't have anything to do with JIG and it's a major site-level change. It's worth it though.

  1. Log in to your CloudFlare
  2. Select your site
  3. Go to Page Rules
  4. Click Create Page Rule
  5. Add this to the If the URL matchesWhere you replace justifiedgrid.com with your own domain of course.
  6. Click Add a Setting
  7. Choose Cache Level and set it to Cache Everything
  8. Hit Save and Deploy
To verify it works
  1. Open a page on your site that has JIG, in a browser like Chrome
  2. Right click and Inspect
  3. Choose the Network tab
  4. Refresh the page
  5. Find a link that begins with timthumb and click it
  6. On the right, find Response Headers > cf-cache-status:HIT

If cf-cache-status is not there, it is not working. If it's there but says MISS, it just means it's CloudFlare's first time encountering that image for your region and with subsequent page loads it'll turn to HIT (for you and anybody else in your region).

 

Permalink ·  Deeplink · Helpful?  Yes  No 100% found this satisfactory.
The problem

Up to an extent yes, JIG does serve scaled images. But "close enough" is not enough for performance analyzers such as GTmetrix. When you set up a gallery, you have a Target row height value and a Row height deviation (+-) value. The sum of these will give you the largest a thumbnail can appear at normal resolution screens, therefore this size will get generated and served to visitors. If you choose to use no deviation then of course your thumbnails will be shown at the target height, scaled to that exact size and the GTmetrix or other analyzer "errors" will disappear. However, in the world of responsive design, things are not so simple, as your website elements will get moved and scaled depending on many factors...

You could serve perfectly scaled images, but...

Having no deviation means heavy cropping on the sides of thumbnails to make them fit in rows on the screen. You'd rather opt to have slightly larger images served as thumbnails but with some freedom to appear non-cropped, right? Though so. It's possible to serve perfectly scaled images even then, but JIG prefers to avoid that. It would mean a new thumbnail for the same image would be created for just about every other visitor. Even a slightly different screen and resolution can create a differently aligned grid. Which in turn, results in a new row height (within your desired range), for which a new set of thumbnails would be generated. This cannot be done on a cheap shared hosting that the majority of people use.

Images from the cloud

Enter the cloud image resizing services or image CDNs. JIG aims to support solutions where your image resizing and serving tasks are outsourced to 3rd party (instead of being done locally by TimThumb). They have the necessary resources to serve unique and perfectly scaled images to every visitor (often for a price of course). This is not yet a feature but you can expect it sometime in the future. Google Photos already does this, because they have the resources to do so.

Conclusion regarding GTmetrix

In essence, you'll need to disregard "serve scaled images" recommendations of analyzers. It's simply unavoidable unless you have the resources. They have a perfectly valid point to show you this warning though. There is nothing worse than a large image being used as a thumbnail. For example, a 1280*1920 90% quality JPG image shown as 320*480 on non-retina desktop screens. There is no excuse for that, and the warning of GTmetrix would be spot-on.

Bonus: Retina @4x example

But even that scenario can have arguments for it, once you replace "non-retina desktop" with "high resolution mobile device". Take, for example a modern phone which has a 2560*1440 screen. Obviously, things are scaled up (4 times) in order for things like text to be readable. This means that phone still reports 640*360 screen size. Otherwise, a whole website in desktop view could be shown on the screen but elements would be too small to read. Now, imagine that thumbnail (320*480) shown on your site, on these phones. With 20px margins on each side. Perfectly everyday scenario. If the image is in fact served as a 320*480 image (as it would be by blindly following GTmetrix and not caring about retina revolution), it would appear heavily pixelated and downright ugly. Therefore JIG serves 1280*1920 image as thumbnail (silly as it sounds) because these devices actually physically require this. The result is beautiful, even if the image is severely compressed (down to 20-30% quality instead of 60-90%). More info about why this is preferable and how it carries minimal bandwidth cost, can be found at the Retina ready feature demonstration page.

Introduction to translation

Translate your site and create multilingual galleries using WPML and Justified Image Grid. Every text that appears on the frontend (even the back-end) is made with the possibility of translation in mind. There are over 1500 strings that can be translated, most of this is the admin area. For example, you can basically rewrite certain labels to your client's language, to make it easier for them. WPML takes care of managing the translation of all texts using a nice interface that is easy to use if you follow this article. The best thing is that you can create multilingual galleries without having to upload the same images multiple times.

What are the requirements for translation?

Please make sure you have the latest version of all plugins at all times. You'll need the following for the complete experience:

  • WPML Multilingual CMS - WPML combines multilingual content authoring with powerful translation management. Obtain a "Multilingual CMS" or "Multilingual CMS Lifetime" version at WPML.org.
  • WPML String Translation - WPML add-on: Allows translating texts in the theme, in other plugins and in the WordPress Admin.
  • WPML Media - Turns the WordPress Media management into multilingual and allows showing the same images on translated galleries.
  • WordPress content (posts, pages, images to translate) and Justified Image Grid v2.3 or newer.
Getting started with translation

Read the getting started guide at WPML first. You need to install the plugins in the above order. Justified Image Grid is ready for translation out of the box.

How to create multilingual galleries?
Translating WordPress media
  1. Check out the workflow with WPML media
  2. Upload a photo to the Media Library: Media >  Add New
  3. Set the image metadata fields such as title in your default base language, such as English.
  4. Switch the current language in the dashboard admin bar (at the top) to another.
  5. Provide the image's information in the other language as well.

Note: WPML does not duplicate the image on the server, so it does not take up extra space! However, it makes a copy of the image in the library as assigns a new, language-specific ID.

Workflow with Justified Image Grid
  1. Create a gallery containing translated content in your post, using your default, main language. Use the Shortcode Editor to do this. Use images attached to the post/page (attribute-less shortcode), IDs or even categories, tags.
  2. When providing the translation in other languages, you can just use the same JIG shortcode with IDs, categories or tags from the default language.

Note: In case you use WordPress galleries without JIG shortcodes you would normally re-create the gallery with the translated images. Just by looking at the WordPress gallery preview in the visual editor, you will only see preview images when the dashboard set to your default language. However, when JIG is taking over WordPress galleries automatically, the translated version appears on the frontend without any extra effort.

In JIG shortcodes:

  • Default language image IDs or categories, tags work for all languages, they show the translated version automatically.
  • Don't use language-specific image IDs or translated categories, tags.
Recent Posts

Justified Image Grid only shows posts that are in the selected language. If a post doesn't have a translation in that language, it is hidden. In other words, you will not see a mixed language Recent Posts grid. Translate (or duplicate to fill, in the meantime) the content you wish to see in other languages.

Translating NextGEN image metadata
  1. Insert a JIG gallery containing NextGEN content into the translated post/page.
  2. Once you view that page at least once, go to WPML > String translation > Select strings within domain and choose plugin_ngg where your captions are prepared.
  3. Provide translation (check the box that says the translation is complete).

Learn more about WPML translation management and translation workflow:

How to translate user-changeable frontend texts of Justified Image Grid?
Admin texts

Go to WPML > String translation > Select strings within domain and choose the admin_texts_plugin_justified-image-grid option. These are the user-changeable settings which you can translate to your desired languages. If you don't see a setting, set a value for it in your default language in JIG settings first.

Shortcode editor

When providing translation for a post or page, you can change settings in the JIG shortcode, just for the translated post/page. This includes user-changeable texts such as the text for Load More button and everything else that may have a global version as well. This allows a more custom and local translation, following the "every instance can be different" mindset of Justified Image Grid.

How to translate built-in strings of Justified Image Grid?
Text on the back-end (admin areas)
  1. Go to WPML > Theme and plugins localization
  2. Choose Translate the theme and plugins using WPML's String Translation and save. Re-visit this page, more options will show up.
  3. Scroll down until Strings in the plugins and check the box next to Justified Image Grid.
  4. Hit Scan the selected plugins for strings at the very bottom.
  5. After it finished scanning, check out the row of JIG again. You'll see a new total for translatable strings (> 1500). Click the View strings that need translation button.
  6. Search for the desired text, then translate it (check the box that says the translation is complete).
  7. You'll only see the change if the WordPress dashboard itself is set to that language, not your WPML language. Go to Users > Your Profile and change your language.
Lightbox texts

It's best to use universal words such as "X" instead of "Close" and "/" instead of "of". Some lightboxes are this way out of the box, others can be set up to be so. Lightboxes get their words from their JavaScript files.

Conclusion

If you wish to create multilingual galleries, it's best to use the WordPress source with WPML and Justified Image Grid. Most of the work happens outside JIG, using WPML's standard media workflow that teaches you how to translate with native WordPress solutions. NextGEN source is also compatible but less convenient to work with. Other image sources are not translatable as they are not managed inside WordPress. To change admin texts and settings on a nice interface you'll need the String Translation module of WPML. Aided with these tools you'll be able to translate just about anything Justified Image Grid shows from WordPress.

Learn more about WPML String Translation and changing plugin strings:

In case you need any of the following, the answer is most certainly yes. Learn more about it on the Custom links demo page.

  • Click on a thumbnail to open a website or a page on your site (in the same tab or new tab). Please note that you can automatically link to posts, pages, products, etc. using the Recent posts source which is better suited for this purpose.
  • Open YouTube, Vimeo or self-hosted videos in the lightbox. However, the RSS feed feature may be better suited to set up YouTube and Vimeo video galleries automatically.
  • Load HTML content such as a contact form in the lightbox.
  • Show a few random photos from a gallery as a home page or sidebar teaser, but have them link to the main page for this gallery. This is achieved by automatically applying a custom link to every photo in a grid, using the Shortcode Editor > General tab > Settings that affect the entire grid > Custom link override setting.
Permalink ·  Deeplink · Helpful?  Yes  No 20% found this satisfactory.

Unfortunately no, it's not possible to open a non-JIG thumbnail or text link to open in a lightbox of JIG. Assuming you mean prettyPhoto and/or PhotoSwipe. The technical explanation is provided so you can better understand why.

The lightboxes in Justified Image Grid are not meant to replace your theme's solution, nor they should extend beyond JIG. This is to avoid conflicts such as opening double lightboxes and to allow a closer symbiosis with JIG's proprietary layouts. Certain lightboxes, especially the main ones (prettyPhoto and PhotoSwipe) have been customized for better social sharing with smart deeplinking. These require the thumbnails to be set up in a particular way (including the content ID and image size information) and server side support from JIG itself. The benefits of these customizations would not be available outside JIG, in other words the lightboxes would not work the way you want them to.

If you wish to use a 3rd party lightbox then by all means yes, you can have it open from JIG thumbnails and as also from single images in your content. These include:

  • FooBox
  • Social Gallery
  • Jetpack Carousel
  • Your theme's built-in lightbox could be used as a custom lightbox in JIG, provided you set up the custom class, rel and/or data-attributes for the thumbnail link. Thes are available at the Lightboxes tab > Link attributes (also for custom lightbox) section.
  • Most other separately installed lightbox plugins. These may include Magnific Popup or ColorBox.
Permalink ·  Deeplink · Helpful?  Yes  No 50% found this satisfactory.

No, Justified Image Grid by itself is not a source and it's not another gallery management plugin. It uses Sources you know and probably use. Album-gallery relationships are already available using excellent solutions without much to improve upon, thus JIG didn't intend to re-invent the wheel.

To have Album-gallery relationship, you need to use:

Unfortunately there is no pagination available currently, but it's planned for a future release in an update. You can use Load more or Infinite scroll features as an alternative.

For advanced users

To have pagination at the moment, replace the output of a plugin or theme (that has pagination) with JIG. For example the Posts page or category archives have built-in pagination by WordPress and your theme. The list of post IDs on a page can be created with PHP and passed to a JIG template tag to its Recent posts > Post IDs attribute. This would take place in a PHP file of the theme that is responsible for the view you wish to change.

Permalink ·  Deeplink · Helpful?  Yes  No 50% found this satisfactory.

Currently it's just disabled for performance reasons. PrettyPhoto would load all large-sized images and scale them down to be shown as the thumbnail strip. A modification is underway to use the small thumbnails that are already loaded by JIG.

To re-enable this feature, go to JIG settings > Lightboxes tab > PrettyPhoto settings > prettyPhoto JS settings and change this line:

Normally, when captions appear under the thumbnails, they are separate from the link area that covers the thumbnail. This allows links inside the caption itself. In some cases you expect a click on any part of the caption to do the same thing as the thumbnail's link. You can use this trick to "redirect a click":

Add this to Custom JS:

Altenatively, you can try this too:

And this to Custom CSS:

 

Content sources

During 2019 this feature broke and instead of seeing a mosaic thumbnail for Flickr Collections, we got 12 gray boxes. Flickr commented on the issue but kept us waiting:

"Collections: Mosaic cover images in Collections are currently unavailable." - Flickr

Now they are back, but in an unfortunate way. The Flickr API still can't serve the mosaic as a single image like it used to. Only via an authenticated call (adds complexity to setting up Flickr in JIG) would it be possible to get the list of images that make up your mosaic, but they would still need to be stitched together. Else, JIG would just pick one of the photos in the mosaic. That's only slightly better than what we have now.

Starting with JIG v4, the grid will pick the cover from a random album found in the collection you are showing, if that collection has any albums. Still, the collections in a collection scenario will result in box with 12 squares.

Here is how you can change the cover of an album. It's not necessarily the first photo in it.

That's the best we could do that is performant and doesn't require changes to how you use the Flickr feature. 

Update to at least v3.9 of JIG. Check that your Facebook app is created in accordance with the "Quick instructions for setting up a Facebook App" on the Facebook tab of JIG settings. Do NOT create a new app (or your existing shortcodes will have to be re-done as the ID numbers in them are app-scoped), but do the "Valid OAuth Redirect URIs" step. It's vital to continue using this source.

The change does not affect loading content from profiles or other user's profiles, they continue working the same way.

Due to changes to the Facebook platform, it's no longer possible to load any random Facebook page with JIG. So you can't select the page of a company, public figure, or your favorite actress unless you actually have something to do with them. Now, there is a requirement that you are an administrator of such page. If you created the page you are automatically the admin. For other pages, you can request administrator rights from the owner. Therefore:

  • Your own page? It'll get added or refreshed to JIG automatically when you click "Add current Facebook user (and all administered pages)". Just perform this action today (and once every 2 months), then everything will be fine.
  • 3rd party page you are the admin of? Treated the same way as your own, it's automatically added.
  • 3rd party page you have something to do with? Request an administrator role from the owner of the page.
  • Not getting the admin role? Try just adding the user profile (as "other user") who owns that page. The user needs to be a test user of your app, however, they don't need to give you admin rights to their pages. Perhaps they are OK with you getting access to their pages by using their profile, who knows.
  • Any random page you like? There is likely no chance you can show that with JIG anymore :(

It's no longer possible to manually add a page because the pages you can actually use get added automatically from now on. In essence, for those that use their own content one way or the other, things even became easier. Those that operate a fan page or business listings from many partners, this is a negative change. Remember, the platform is subject to change. With some creativity and connections you can still reach the page you need, but if you have nothing to do with them you are out of luck. Please understand this is out of our control, and Facebook decided to make things this way.

See the struggles or read more background information about this (an older entry): 

Due to recent changes after Facebook's scandal, the Facebook source in JIG is impaired. Many of you are receiving notices that your apps should be reviewed. Let's take a look at your options.

Currently, if you use JIG with the Facebook source for a long time (especially with an old FB app), you may continue to do so without any changes. This site uses this ideal scenario, that's why all the examples are working, and that's why most users are still not affected. This is subject to change though, and we intend to bring a more solid solution to the problem (see below).

If you are new to the Facebook feature or you are having problems, your current options are:

Set your FB app up in a way that you can access your own personal profile's content

Particularly, if you received this dreader message in red when trying to add the current user: "Can't Load URL: The domain of this URL isn't included in the App's domains. To be able to load this URL, add all domains and subdomains of your app to the App Domains field in your app settings." There is an unintuitive solution, provided you already set up your app's domains in the basic setting...

  1. In your app's administration interface on Facebook, click Facebook Login on the left sidebar, under Products.
  2. Choose Settings as it appears.
  3. For the setting called Valid OAuth Redirect URIs add this URL, but replace yoursite.com with the real domain:
    https://yoursite.com/wp-admin/admin-ajax.php?action=jig_fb_auth
  4. Click Save Changes button at the bottom.

The reason you need to do this is that for new apps, the "Use Strict Mode for Redirect URIs -
Only allow redirects that use the Facebook SDK or that exactly match the Valid OAuth Redirect URIs." is toggled on and cannot be changed.

Wait for a JIG update that'll solve all of this at once

Unfortunately, this is no immediate solution, and we are aware of that. The changes didn't come with much grace period. Usually, a certain FB API version is good for at least two years with no changes to what's already working. Hence the delay as this happened too suddenly. We intend to create a single Facebook app that'll serve everyone at once. You'll connect to that, but some of the requests in this process will need to pass through us. Therefore we need to set up a service on our server. That is a big change, even if it means that it'll be easier to use the Facebook source in JIG (just one click setup for anything you wish to show). However, we need to get this one app reviewed (accepted by FB), and judging by how Instagram (also owned by Facebook) disapproves of this kind of use, and some complications might delay or even rule out this approach.

Get your app reviewed, as all notices say so. There is no user feedback that it solved anything, but it should.

With an unreviewed app, Pages cannot be accessed, even if they are your own. In a nutshell, an unreviewed app should still be able to access the pages owned by you, if you are also the owner of the app. Even with some changes to the code (using Page Access Tokens), or by even using the Graph API Explorer, this is not possible - perhaps it's a bug. Therefore, our "create your own FB app" approach is currently not applicable in any way for showing Pages' content on your site.

Possibilities of using Facebook Page source in the near future?

It's under consideration that - using one's unreviewed own app - it'll be possible to show Pages. The flow will require adding the current user first (who is the admin of the Page), then JIG'll get your managed pages and even auto-add them next to your Profile. The pages will have access via the profile you added (probably your own) - much like how alcohol and country-restricted pages required a user who can "see" that content. It'll still not allow loading any public page, just your own, but this is probably what most are after. If this method works, you can expect an update in 1-2 weeks. 

Permalink ·  Deeplink · Helpful?  Yes  No 34% found this satisfactory.

Starting with JIG v4, the Instagram feature has been completely disabled until further notice. While it still functioned for years in a limited way for some people, Instagram eventually made another round of changes to it in 2020. We didn't want to keep around a broken source that appeared as a tab and getting people's hopes up that they found a "bonus content source the developers failed to mention on this site" (you might have noticed we stopped advertising this feature a long time ago). The idea of Instagram in JIG is not completely off the table yet, we are looking for ways to still access Instagram content, even unofficially. The rest of this entry is no longer relevant.

Instagram's announcement

Instagram Platform and documentation update. Apps created on or after Nov 17, 2015 will start in Sandbox Mode and function on newly updated API rate-limits and behaviors. Prior to going Live, and being able to be used by people other than the developers of the app, these apps will have to go through a new review process. Please read the API documentation or the Change Log for more details.

Any app created before Nov 17, 2015 will continue to function until June 2016. After June 2016, the app will automatically be moved to Sandbox Mode if it wasn't approved through the review process.

What does it mean for JIG?

New users, or existing users who wish to setup the Instagram source for the first time:

If you register a client now, you'll only be able to use it live after Dec 3 and only if they approve your review request. Their review process will only allow apps to pass through that comply with their new rules, obviously. Unless you can convince them that you are not trying to replicate Instagram's native capabilities, they will likely not approve the app. JIG does bring unique capabilities such as showing photos from a location, which is not possible otherwise. However, Instagram wishes to display ads and they can't if people view content through 3rd party software such as JIG. For your information, keeping the app/client in Sandbox Mode (which you can do with Facebook apps) is not a good solution here as it only lets access to your own content and only the most recent media.

Existing users who already set up an app and have JIG galleries working with Instagram content:

Existing users who already created an app will be able to continue using the Instagram source until June 2016 (you are fine until this date). However, you'll need to have your Instagram client approved to use it beyond that date. This may prove to be a difficulty, as mentioned above.

So what will happen to this source?

If Instagram won't approve users' clients, the Instagram source may eventually get removed or no longer advertised as part of JIG. As long as it works for existing users, it'll remain in the plugin.

How does this affect other plugins? Is there any alternative?

Eventually, it will affect every Instagram plugin or 3rd party app that fetches content from Instagram.

  1. If a software (plugin, mobile application) uses its own Instagram app and lets customers and users connect to it through its own middleman server:
    The developer willl need to have the app reviewed and approved, else it'll cease to function but only after June 1st, 2016. Getting it approved will prove to be difficult since they've just changed their standpoint and no longer allow apps to replicate Instagram's features. Also, they are removing the feed endpoint and who knows what more. What will happen to all the Instagram gallery plugins? And presently how come these solutions don't hit the API rate limits, while it's basically just one app for all users? They all depend on the developer's single client.
  2. If a solution requires every user to set up their own Instagram apps (JIG is like this):
    New apps already start in sandbox mode, meaning that they are useless. Instagram's sillines shines here that you can't even have your new app reviewed and approved before Dec 3 but they made the change on Nov 17 out of the blue. Previously created apps will function only until June 1st, 2016 unless reviewed and approved for use.

Depending on how strict their review process is, this could mean the end of an era. It's like how Twitter changed their mind about their API some time ago, giving custom Twitter widgets a very hard time. Yet many themes still use those today. So maybe their approval is as easy to get as applying for a Flickr API key? Or more serious like Facebook's apps?

Read more about this topic:

Permalink ·  Deeplink · Helpful?  Yes  No 50% found this satisfactory.

This is only for Justified Image Grid v3.8 or newer.

The simplest and cheapest way would be getting this plugin in addition to JIG:

It costs just $9 for a single license and it'll take care of all your needs regarding opening a quick view for your products, all from our justified grid.

JIG can work with it just fine just by changing a few settings. These are:

  1. Go to JIG settings / Shortcode Editor > Lightboxes tab and there:
  2. Change Lightbox type set it to Custom
  3. Set Link class to xoo-qv-button
  4. Set Custom attribute name to qv-id
  5. Enter *content* to Custom attribute value. This will add the product ID to each product thumbnail, letting the Quick View plugin know which product's data to show in the lightbox.
  6. Then you need to point clicks away from the product page and to the lightbox. This is achieved by Shortcode Editor > Recent posts > Click on a thumbnail links to and choose The image.

From this point, every JIG thumbnail will open the product's quick view in the lightbox. Currently, it's not possible to have two separate links on the thumbnail (one to open the lightbox and another to open the product page without a lightbox).

The solution below only works on existing Google Photos albums
On February 9th 2017, Google has changed it’s API and removed support for some basic functionality.
Unfortunately this means that RSS feeds cannot be generated anymore for newly created Google Photos albums.
The RSSerator can only generate RSS feeds for private and public albums created before February 9th. Casper Baghuis is reviewing other options, but Google has not provided an API for accessing Google Photos albums yet.

Yes! With Picasa recently discontinued and the Photos tab missing from Google+, all your photos are now just on Google Photos. You can easily access them via RSS feeds and put that into JIG.  Feeds from Google have excellent apabilities because the feed's photo count is not limited (unlike other sites' feeds), and photos come at a decent size! However, automatically figuring out the RSS feed URL based on a Google Photos album URL is not possible. Casper Baghuis (a valued customer) wrote an excellent article and how-to about Picasa and Google photos on your WordPress site all using Justified Image Grid. Recently, he also contributed a small tool to make your life easier and get access to your albums' RSS feed URLs!

September 27 update: This new method by Casper is confirmed to be working and is better and quicker than ever to get your RSS feed URLs!

Get your JIG gallery based on a Google Photos RSS feed
  1. Go to Google Photos RSSerator
  2. Click Sign in button
  3. After approving the permissions and having been logged in, you can choose the album you wish to show with JIG by clicking the blue RSS feed icon in its row on the right. Copy the URL of the feed. Your URL should look something like this:

    https://picasaweb.google.com/data/feed/base/user/112290004776472583114/albumid/5995482558738492129?alt=rss&kind=photo&hl=en_US&imgmax=1152

  4. Use the Shortcode Editor to create your JIG gallery, now that you know the RSS feed URL. The result will be like this:
[$justified_image_grid rss_url=https://picasaweb.google.com/data/feed/base/user/112290004776472583114/albumid/5995482558738492129?alt=rss&kind=photo&hl=en_US&imgmax=1152 rss_links_to=image]
Tip

Change the &imgmax=1152 value at the end of the RSS feed URL to change what size your images will appear in the lightbox. For example, if you replace 1152 with 2000, you'll have images with 2000 px on the longer side.

References
Permalink ·  Deeplink · Helpful?  Yes  No 28% found this satisfactory.

In short, no. Sources cannot be combined with each other. It's only possible to create galleries with one source at a time. The primary reason is that the date information is not standardized across sources, therefore interleaving distinct entries by date would likely be problematic. The future may hold the possibility of merging multiple sources. However, the following ways are available already:

  • Combine multiple RSS feeds together. It will automatically sort the entries by date. For example, a YouTube and a Vimeo channel's combined video gallery. Create a combined portfolio from your most recent 500px content and the latest deviations from DeviantArt.
  • Different sources can be used in subsequent instances on the same page. There is nothing stopping you from placing multiple JIG galleries under each other. They'll appear to seamlessly merge where they touch, especially if you use the JIG settings > General tab > Incomplete last row setting's Hide option - for a gapless look.

It's not possible yet. The way Flickr integration works is that you only need an API key to add any user. While this may change in the future,  currently there is no OAuth authentication, unlike for Facebook source. This is a simpler, 1-click way, but it only allows public content to be shown on your site. Photos marked with private/family privacy option or those that are age-restricted: "unsafe" are not available. Since Flickr offers a very large amount of storage space, it would be widely open for abuse by hosting content privately and for free, leveraging their CDN. It's not what Flickr is for, hopefully you agree.

The point where Justified Image Grid is open for extensibility is the RSS feeds source. They are basically just XML documents. It's possible to craft such document manually or using PHP. Stay tuned for more detailed tutorials on these subjects.

With a relatively simple markup, you'd add source URL and title/description/date to include any external photo in a list. You could even make the photos link to somewhere specific. After that, JIG would take them and display a beautiful gallery. It'll determine the size of each photo then fetch and process corresponding metadata. The result can open in the lightbox or have clicks directed at your custom links.

For a more automatic way, one would use PHP to scan an FTP folder and generate an RSS feed of it. Maybe such script already exists, or else you could hire a freelancer to create it for you according to your specific needs. While you may not require metadata such as title and description info, it's always a nice addition to a gallery. Since the filenames can be less meaningful using letters and numbers, it's worth noting that PHP could read IPTC metadata from the files for the "ultimate FTP to RSS feed script".

Permalink ·  Deeplink · Helpful?  Yes  No 40% found this satisfactory.

Yes, both! The Recent posts feature is not limited to recent content. It's very versatile and can even be used to create post galleries for specific authors. The currently logged in option will detect the user and display their own posts in a Justified Image Grid.

Purchasing and licensing

Most likely you've moved from development or production, or wish to use JIG on another site. Or you've recently switched on SSL (https).

This idea is in accordance with the CodeCanyon regular license terms, which allow you to use the plugin on one site per license. So you've asked support to reset your license. Here's what happens. It's a manual process to prevent abuse, but your license is no longer bound to a specific domain. What to do now?

  1. Please ensure that the JIG Settings > Purchase Code setting is empty on the old site (if it's still active).
  2. Add the purchase code to the new site.
  3. WordPress checks for updates every 12 hours and on demand. Go to Dashboard > Updates and click the Check Again button. You might need to click it again or refresh a couple of times.
  4. You can now update the plugin on the new site, as usual.

The license will be bound to the new host once an update check is performed. You can request a reset again anytime (within reason). If your other site is a development version, you can keep both updated:

  • Sites that include any of these in their URL pass through the "second site check": 
    • Are on a host with an IP containing "192.168"
    • Are on "localhost"
    • Have the word "staging" 
    • Have the word "wpengine"
    • End in "dev" or "dev/"
    • Contain "dev."
    • Have .test TLD
  • If your staging/development site doesn't match the above, feel free to recommend it to be added as a pattern.
  • These don't bypass license verification, you must still have a valid license. The pattern just tries to avoid a limit on reasonable second site usage.
  • Alternatively, place development area in a subfolder and not on a different host.
  • Or you can always just update JIG on the other site manually.
Permalink ·  Deeplink · Helpful?  Yes  No 63% found this satisfactory.

Due to CodeCanyon item promotion guidelines a policy is in effect to avoid a race to the bottom scenario, thus no additional incentives for the purchase can be offered. The only incentive JIG has is itself! It already has a low and competitive price, at which you get a product with years of focused development time and polish, continuous lifetime updates and limited warranty (support).

Unfortunately, there is no such license. The extended license does not cover multiple uses either. Please refer to the License page where it's explained in a simplified, easy to understand manner. CodeCanyon license details may be hard to understand at first.

There is no such thing, sorry. Due to CodeCanyon exclusive author arrangements it's not permitted to distribute the plugin for free. If you need to ensure that the plugin will work on your site, simply rely on pre-purchase support or the plethora of demos on this site. You'll have all the assistance needed to make an educated decision whether or not to use this product.

Technical

Type

Go for lesser-known small companies that have a track record of high reputation, reliability and fast support. Justified Image Grid proudly uses MDDhosting since 2011, long before development has started. Their 24/7/365 ticket-based support's response time is insane, it's always just a couple of minutes to half an hour maximum. They are positioned in the middle of the USA, with their speedy servers placed in the Handy networks data center in Denver, Colorado. They offer a discount for new users and regular promotions for existing customers in form  of a credit balance system with deposit bonus.

Location

Decide the physical location of your hosting, it's also important. Does the majority of your target audience reside in the same country as you? Consider which is more important to you, the server placed at a central location or fast route between you and the server? If your server is on another continent, then copying lots of small files or merely navigating on the FTP will be slow. Similarly, serving lots of small files such as thumbnails may come with delays. The reason for that is the high ping - round trip time it takes to communicate. In case neither are you or your audience is in the USA, there is even less reason to go for large US hosting companies. Choose a local company with a small user base. Your speeds shall be lightning fast for both you and your visitors. You can always use a CDN or the free Cloudflare to speed things up for international visitors.

Avoid
  • Popular hosting companies and their cheap shared hosting packages. It may sound harsh, but these include Bluehost, Dreamhost, Hostgator, GoDaddy (by the way they bought Media Temple but continue to operate independently). With possibly millions of customers (gained through aggressive affiliate marketing), more and more sites need to share resources provided by a finite number of servers. They start to introduce superfluous security measures, connection rate limiting, tight memory and resource limits, to protect themselves and neighbor users. This makes your site prone to errors and a bumpy overall experience. To give you a metaphor, assuming the pricing was similar, where would you live? In New York City's projects or in a private gated community in Los Angeles...
  • Any company that claims unlimited speed, disk space, monthly bandwidth. It's much better to use the service within your known and realistic limits than to be penalized for hidden "fair use" limits. The mindset behind "unlimited" is that not all of the customers would use all of the allocated resources anyway. There are quite a few things that can be truly unlimited though, such as add-on domains, email addresses, MySQL databases, FTP accounts etc.
  • Packages labelled WordPress optimized or similar, especially WP Engine. It's usually marketing nonsense, WordPress doesn't need anything special except a solid foundation and a modern environment.
Permalink ·  Deeplink · Helpful?  Yes  No 50% found this satisfactory.

Whenever you see this box under gallery examples, there are a few things to look out for...

[$justified_image_grid preset=19 last_row=center ng_pics=603,604]

  • Copy/paste it to the Shortcode Editor first. It's always best to pass the example through that tool.
  • Change the content source - you most likely don't want to show "NextGEN pics with the ID 603 and 604" from the above example. The source is not removed from the example shortcode, so you can see what is used for that specific example.
  • There are some additional settings that are only included for the example's sake and it's very likely that you don't need them. They make the examples short and compact by using a Limit, Max rows or Incomplete last row etc. If the example includes these, you might want to check them.
Permalink ·  Deeplink · Helpful?  Yes  No 35% found this satisfactory.

Thumbnail creation is necessary for the various needs of the plugin and here you can read a full technological explanation that should cover all your concerns. Please note that you are free to disable it any time, however there would be a performance hit as the large or original images would be used as thumbnails, letting the browser resize them.

No alternative for this kind of use

After looking at plenty of other solutions, it seems that there is no proper alternative besides Jetpack Photon. Thumbnail creation for JIG needs to fulfill this needs:

  • Works with external images from various sources, such as Facebook, Flickr, RSS feeds (YouTube, Vimeo, 500px, DeviantArt and so on).
  • The retina ready feature needs thumbnails to be created on demand at an optimal size for different pixel densities.
  • Any change in row height settings (or presets) requires a thumbnail with a new size.
  • Works on past galleries, for which the thumbnails haven't been built.
  • Does not upscale.
  • Caching with a way to easily clean up.
Problems with the built-in WordPress thumbnail creation

Articles often bash TimThumb and cite the the availability of tools and functions that rely on the built-in image handling of WordPress. Yes, it's suitable for themes where the developer knows what thumbnail sizes they will require across the various layouts. However, there are several problems with it when used for a plugin like JIG:

  • Does not work with external images.
  • Thumbnails would need to be pre-built, but the row height you may desire in the future is not known in the present.
  • Normally, thumbnails are generated on image upload only. Hence the many "thumbnail rebuild" plugins.
  • It clutters your /wp-content/uploads/ folder, wasting space with no way to easily clean up. Without intervention, the different and often unnecessary sizes are saved at a high quality too high, often causing the thumbnail to be larger (or at least disproportionate) in filesize than the original, hopefully optimized, originally uploaded version. Take a look at /wp-content/uploads/ directory, isn't there 10 copies of every picture, just because your theme defined various thumbnail sizes carelessly? Often this is the case.
Security and discontinuation

One could argue that TimThumb is allegedly not secure and is discontinued by its developer.

  • It wasn't actively developed since 2012 anyway, as it has reached maturity. Since then, very few updates have been released that only consist of little fixes. So in that sense, it doesn't make much difference that it's discontinued.
  • It is customized for JIG and the developer keeps a close eye on the script regarding its security. The last exploit found (webshots) wasn't even enabled or used by JIG, however since then it's been fixed either way. In general, whenever a security exploit is found in any script, it's done via ethical hacking where a possible solution is also proposed. It's expected that JIG will include community fixes should any security issue would occur.
What about the future, how do you make thumbnail creation sustainable?

As part of planned development, JIG will come up with diversified ways to create or access thumbnails:

  • It would depend less on TimThumb and offer options to use thumbnails sizes already available. Sources often create thumbnails at pre-defined sizes JIG could make use of. These would be a close enough match to your row height settings (which directly influence thumbnail size).
  • The possibility of better caching that would not cause any PHP script to run, just to access a cached thumbnail.
  • Nicer thumbnail URLs without visible query string parameters.
  • Superfluous blocks of code will eventually get removed from TimThumb, making it smaller, more compact, less prone to security issues.
Permalink ·  Deeplink · Helpful?  Yes  No 58% found this satisfactory.

Advanced use

Yes. There is no built-in setting for this but you can achieve this easily anyway. This is only for WordPress Media Library source, though.

  1. Go to the Captions tab > What text to show on the thumbnails or the Lightboxes tab > What text to show inside the lightbox section in the Shortcode Editor. The process is the same for both.
  2. Choose Custom field option for the desired caption location setting.
  3. Enter an arbitrary field name for the Caption custom field setting. Use a field name that doesn't exist yet.

Now, instead of actually setting the same value over and over again on your photos, let PHP simulate that by hijacking the value of this field. You are not even going to create this field. Just add this to the functions.php of your (child) theme:

Change your_field_name and Hello world! to your values.

Permalink ·  Deeplink · Helpful?  Yes  No 67% found this satisfactory.

Leveraging the facts that:

  • JIG can detect and show images attached to a post automatically...
  • You can create a PHP template tag and place it anywhere in the theme...

It's clear that if you use plenty of pictures throughout your posts, an automatic gallery at the beginning or end of articles is a good idea.

Add a gallery of attached images automatically
  1. Locate the file of your theme that's for showing single posts, products etc. Depending on your theme and custom post type, it may be different but it's usually the /wp-content/themes/Avada/single.php file. It's recommended to use child themes though.
  2. Find the line that contains:
  3. Add this where you need the gallery:
  4. Some posts might not have images, so hide the JIG error message: "There are no photos with those IDs or post X does not have any attached images!" Add this to JIG settings > General tab > Custom CSS setting:
Pro tip: Create a related posts gallery at the bottom of your articles
It works by finding posts that are at least in one category of current one. You can replace the word category with your custom taxonomy or use other shortcode attributes. Instead of step 3 above, your code should be based on this:

There would be three types of search:

  • Live searching in a JIG gallery much like filtering (with JavaScript). This is not yet possible.
  • Creating galleries based on pre-defined search terms that you set up in the shortcode. This is possible with NextGEN search or Flickr search. This lets you create galleries based on a search.
  • Connecting a user's search query to JIG, instead of pre-defining it. This lets users search for things and display the results with JIG. It's considered advanced use, but can learn it from this tutorial.
The anatomy of search.php file of the theme

What complicates things is that the file, such as /wp-content/themes/Avada/search.php contains lots of extra code: for sidebars, different search layouts, displaying content (posts) so it's not possible to precisely predict what you need to modify and where. Therefore, some PHP and WordPress knowledge is needed to know what your theme's code does and where should you inject custom search code.

Furthermore, the search.php is universal, it's used for your general site search, but also for any other search type.

WordPress Media Library image search on the frontend

WordPress has no way to search the Media Library on the frontend. However there is a free plugin that helps you do just that.

  1. Install Media Search Enhanced.
  2. Add this shortcode to place the plugin's media search box (in a sidebar widget, for example). It'll point to the WordPress search page with a specialized setup.
    [$mse-search-form]
  3. Wherever you see a search form in the code, it means to give a chance to refine search when undesirable or no results are found. Change it to the media search box, else it'll revert search to normal WP posts, confusing the visitor. For example, in Avada you'll need the following. The form is the original code, and the customization is wrapped around it:
  4. Add the actual JIG display right before the theme begins to show posts. In Avada, it's in a div with the posts-container class. The snippet attempts to use CSS to hide results that display without JIG.
  5. If results are duplicated below JIG using the style of the theme, you'll need a little extra code. Find where the loop begins with:
    Then add this immediately after that:

Please note that there is a possible limitation of this search when using WPML Media. The Media Search Enhanced plugin may show duplicates in the results due to the different language versions.

Search NextGEN Gallery or Flickr from the frontend

It's a little bit tricky, but here is how to do it:

  1. Create the ability to use the search page for something custom, it's done with a shortcode of the search box. Locate the functions.php file of your theme or the child theme, and add this:
  2. Add one of the following shortcodes to a widget or similar to place the search box. It'll initiate a specialized search in the specified source:

     [$jig_custom_search_form source=nextgen]

     [$jig_custom_search_form source=flickr]

  3.  Add the following code to your theme's search.php file, after the line where the content wrapper div starts, before any result gets shown with a loop. For your information, the JIG shortcodes will do the following:
    • NextGEN: searches for images in the NextGEN Gallery, whererever it matches any part of the filename, title, description, tags.
    • Flickr: searches for photos in a specific Flickr user and show up to 200 results (just a feasible limit).
  4. Fine tune this. The switch has 3 sources that can be searched. First, comment out the lines that you don't need. Put double slashes in front of the line like this:
  5. Generate your shortcode in the Shortcode Editor then export as a template tag. You must create yours to allow search in your profiles, but follow the examples closely. For security, do not use this to search the entire Flickr, only content in your own profile! Check out how pre-defined search works to get an idea: NextGEN search or Flickr search. This is the same thing but we are replacing the pre-defined value with an user-submitted one. Make sure the value is dynamic for any of the ng_search_query, flickr_search_text, flickr_search_tags settings:
  6. The snippet attempts to hide and prevent the theme's original search (among posts), but you should verify that nothing shows below JIG on the search results page. The custom CSS hides the area that has the post-content class, but if your theme is not Avada, this is likely different.
Permalink ·  Deeplink · Helpful?  Yes  No 40% found this satisfactory.

This solution is not an official thing yet. It uses JIG's Custom links feature. By using this method you lose the ability to custom link. Retina Ready feature will be essentially off, as it depends on TimThumb. Furthermore it's only available for images of the WordPress Media Library.

  1. Go to the Lightboxes tab > Maximum size for lightbox (the image will link to this size) and choose the smallest possible size. This will be used for thumbnail. If your desired size is not there, you need to add the name of the image size by hand to the shortcode, such as:
  2. Go to the General settings > Custom link's target and choose Lightbox: video / iframe / different image option to open the automatically custom-linked full size image in the lightbox.
  3. Go to TimThumb & CDN tab > U and choose 
  4. What actually does the magic is the following code, that you add to the functions.php of your (child) theme:
This automatically sets a custom link on every image to the full size.

Please note that this workaround is known to cause problems with PhotoSwipe lightbox, limiting the size of the photo in it.

Permalink ·  Deeplink · Helpful?  Yes  No 67% found this satisfactory.

Developer hooks

These filters were added so advanced users can influence how JIG works, without:

  • Changing core code, so JIG updates don't break the changes.
  • JIG getting cluttered by new options that only 1% would use.

However, the power is there in case you need it! The examples are based on real-world needs of beta testers and other customers just like you.

I wrote about how to add snippets to your site. If you are taking it seriously, I recommend the small plugin approach as you can easily toggle it and know what that piece of snippet was for (after looking at it months after). Whereas if you put these into functions.php, that file could get big and chaotic.

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

Permalink ·  Deeplink · Helpful?  Yes  No -200% found this satisfactory.

This is the jig_media_library_query_args filter for developers.

It allows advanced users to influence the query for various sources based on media library. It filters the four Media Library queries in JIG, these are:

  • Normal galleries with a list of IDs.
  • Galleries based on tags, categories, or custom taxonomies, including the ones from Media Library Assistant.
  • Real Media Library galleries.
  • Images from multiple posts at the same time.

A helpful use case would be switching comma-separated terms (tags, categories, custom taxonomies) to the AND operator, meaning all terms must be present on an image for it to be displayed. There is no other way to do that presently (nor shortcuts based on plus signs instead of commas). Currently, media library queries use IN operator (match any of the listed terms). Another use would be showing grids based on custom meta keys such as those created with ACF. The filter uses the query arguments $args, and the shortcode attributes $atts to enable identifying a single grid.

Grids based on custom meta key/value on the images
Let's narrow down to only a JIG with a gallery ID. This assumes you created a grid already in JIG -> Create New Grid, and have an ID at hand. This is used so the code won't affect any grid, just the one you want to modify. Replace the example value with yours.

Then, we insert our additions to the meta_key and meta_value. If you omit the latter you can get images that have any value but they must have the key. Sometimes the key starts with an underscore, other times it doesn't, so try both.

Depending on what you are trying to achieve, consider creating grids based on tags, categories, custom taxonomies, those are usually easier to handle and set up.

Switching tags, categories, and custom taxonomies to AND operator
This assumes you use a shortcode like this in the first place:

[$justified_image_grid image_categories=humans,animals]

And you want to show images that have human and an animal in them, but not a lone wolf.

The code is very similar to how you'd add the AND to the recent posts queries. All taxonomies, both native and custom ones use the tax_query behind the scenes of JIG, for media library content. It doesn't have a default value, so the only thing in it should be your choice to include humans and animals. By inserting the operator in index 0, we can be sure that we are connecting humans and animals using an AND word. The index changes from 0 to 1 or 2 if you utilize more than one taxonomy at the same time. You could use tags, categories and a custom taxonomy, all three at the same time. The more you use, the less images you'll see in the grid, and between these there is an AND relation by default, which is meaningful in most cases. However, on their individual levels of comma separated terms, you can further narrow the query by using this method.

This is the jig_recent_posts_query_args filter for developers.

It allows advanced users to influence the recent posts query. For example, you could show grids based on custom post meta key and value pairs, or remove the default "only in stock" WooCommerce behavior, add an AND relationship between your custom taxonomy terms, etc. It uses the query arguments $args, and the shortcode attributes $atts to enable identifying a single grid.

Grids based on custom post meta key/value
Let's narrow down to only a JIG with a gallery ID. This assumes you created a grid already in JIG -> Create New Grid, and have an ID at hand. This is used so the code won't affect any grid, just the one you want to modify. Replace the example value with yours.

Then, we insert our additions to the meta_query and we are making an assumption it exists. It often does, if you are not using a placeholder image for recent posts (it's a setting), and/or when using WooCommerce to show only in-stock items (more on that below). If it doesn't exist, just remove the [] from it and create an array of arrays (two opening and closing squery brackets instead of one, around the key value pair). Replace key value pair's example strings with your own.

Depending on what you are trying to achieve, consider creating grids based on tags, categories, custom taxonomies, those are usually easier to handle and set up.

Showing WooCommerce products that are out of stock
Since JIG includes a meta query for _stock_status being equal to instock, it can only show products that are in stock by default. This is fine for most people as it's the expected behavior. However, by overriding the meta query with just the other usual option that restricts the grid to products with photos, the stock status "filter" can be eliminated.

Using an AND relationship operator with your custom taxonomy terms

This assumes you use a shortcode like this in the first place:

[$justified_image_grid recent_posts=yes recents_filter_tax=animals recents_filter_term=cat,dog]

And you want to show posts that are about a cat and a dog, but not those that only have one of these animals.

We are no longer bothering the meta_query as previously seen, rather this is the tax_query. It doesn't have a default value, so the only thing in it should be your choice to include cats and dogs. By inserting the operator in index 0, we can be sure that we are connecting cats with dogs with an AND word, behind the scenes.

Please note that if you are using the native category or tag taxonomies, you don't need the custom code! You can just use a + (plus sign) between them instead of the commas, and JIG will handle the rest and pass them on to WP Query in the appropriate way. This is only for the Recent posts feature, and not for normal media library image queries.

This is the jig_ng_pure_request_uri_for_recent_galleries filter for developers.

A very tiny addition to your site, but it could have a nice impact. It lets you redirect the NextGEN Recent galleries feature's links (on the thumbnails) to a central page where you already show your albums or galleries, /albums/ - instead of adding the /nggallery/... parts to any page the original JIG happens to be on. This makes the Recent galleries feature usable in sidebar or footer without "straight to lightbox" mode.

The way you use it is really simple. Just return the path to the page you normally use for your albums and galleries. It needs to have a JIG in a primary, above the fold position on the page in question. Leading and trailing slashes are mandatory. Do not specify your host/domain.

The name - request URI - comes from PHP $_SERVER variables.

You receive the original $uri, which is very similar to what you'd return but it could be any page your Recent galleries JIG appears on. You'd get /contact/ or similar from a contact form. As you see, this information is not too important.

This is the jig_recent_posts_title filter for developers.

There are two ways you can customize what shows up as post title in JIG with Recent posts. First, using the Title override custom field setting, which takes a custom post meta to be used instead of the normal title. If you don't use that, here is another way.

It's a simple filter that gets the original $title and the post's $id, allowing you to make your own title for a certain post, or fetch different data from the database based on this ID.

Achievable via 3rd party plugins

JIG works quite fine with custom lightboxes, usually a single line is all that's needed, like in the case of iLightBox in the Avada theme.

  1. Choose Custom Lightbox in JIG Settings > Lightboxes tab > Lightbox type (also for mobile) (screenshot).
  2. Add this to the Custom lightbox JS call setting:
Permalink ·  Deeplink · Helpful?  Yes  No 25% found this satisfactory.

Yes, but please note that it's not Justified Image Grid that handles frontend uploading. It's not a source by itself and does not manage images, but shows content from various sources. With that said, it simply uses the fact that certain frontend upload solutions are clever enough to attach images to posts. JIG can automatically show all photos that belong to a post

Here are some steps for a very simple solution, which of course can be tweaked further or replaced with another frontend upload solution:

  1. Install the free Frontend Uploader plugin.
  2. Go to or create a post on which you'll accept user uploads.
  3. Insert this shortcode:
    [$fu-upload-form]
  4. And also add this shortcode, where you wish to show a gallery of uploaded photos:
    [$justified_image_grid]
  5. You'll need to approve uploaded entries by default. You can do so in the Media > Manage UGC screen. This approval process can be turned off at Settings > Frontend Uploader Settings screen.
  6. Approved content will show up on the page automatically, it's that simple.

If you need something different or better, it's up to you to find a middleman plugin that does exactly what you need. In order for it to work with JIG, it'll need to meet these requirements:

  • Mandatory:
  • At least one of these is required:
    • Photos attached to the post or any specific post.
    • Photos tagged with a certain tag or category.

Pro tip: An excellent out-of-the-box way is asking your audience to upload content to a Flickr group. For example, when hosting a contest this provides a more solid foundation and a platform that photographers are familiar with. This also allows them to enter with a photo which already exists in their Flickr portfolio with a chance of added exposure for them. JIG can show Flickr Group pools with ease.

Permalink ·  Deeplink · Helpful?  Yes  No 0% found this satisfactory.

No, because Justified Image Grid adapts to the font used by your theme. It's best to be consistent about fonts. Let the theme manage the content font and subsequently, how the gallery captions look like. There are no font-family CSS rules in JIG.

In case your theme doesn't come with an option to use Google Fonts, here is how you do it:

  1. Install Easy Google Fonts plugin (it's free).
  2. Go to Settings > Google Fonts screen.
  3. Add JIG to the Control name field and hit Enter.
  4. Add .jig-caption CSS selector then click Save Font Control.
  5. Go to the Customizer as it suggests. It's at Appearance > Customize by the way.
  6. Navigate to a page or post that has a JIG gallery (with captions).
  7. Go to Typography > Theme Typography and click Edit Font under JIG.
  8. Select a nice font under Font Family, such as Roboto or Source Sans Pro.
  9. Click Save & Publish once done.

Note: Set all other aspects such as color, background color, opacity, size, align, shadow, CSS rules such as font-weight in JIG, as it's unlikely to override those styles with Easy Google Fonts.

Permalink ·  Deeplink · Helpful?  Yes  No 34% found this satisfactory.

Justified Image Grid itself doesn't offer any bulk upload tools. There is a simple reason, this is not a gallery management plugin, but a display. On the other hand, it uses content sources where FTP upload in bulk is possible or can be achieved easily.

WordPress Media Library

WordPress doesn't have an out of the box solution to bulk import photos to the Media Library or detect images in a directory. However, with a good old plugin it quickly becomes child's play.

  1. Install the free Add From Server plugin. It's old but works well.
  2. Upload photos via FTP to a folder inside the /wp-content/uploads/ directory.
  3. Go to Media > Add From Server screen.
  4. Navigate to your folder and tick the checkbox next to the File column label.
  5. Click the Import button. Your images are now in the Media Library.
  6. The plugin called Media Library Assistant is recommended to categorize or tag these in bulk, so it's easier to select them for display.
NextGEN Gallery

It's incredibly easy.

  1. Create a new gallery by going to Gallery > Manage Galleries > Add new gallery button.
  2. Add a name such as cats then click OK button. It'll create a folder for you.
  3. Click Edit gallery in the notification at the top.
  4. Upload photos via FTP to /wp-content/gallery/cats/ folder.
  5. On the gallery edit screen click Scan Folder for new images. Thumbnails will be created and it's done.