OK, without getting into a lot of details – Using Media Library Assistant I give all my most recently added images a custom taxonomy of “Pic” so when I create a gallery with filters “Pic” shows up as a button. I thought it would be cool to change the text “Pic” to something else like “Latest Packers Images” or “Recently Added Colts Pictures” depending on what the respective gallery is about. Am I making sense?

I checked and for now the PHP filters can’t be used to change filters at that point of setting up the Grid. However, if you only have one of these special galleries on a given page, this Custom CSS might work:

.page-id-2331 .jig-filterButtons .jig-filterButton[data-filter-slug=pic]:after {
    content: "Recently Added Colts Pictures";
    font-size: 1rem;
}

.page-id-2331 .jig-filterButtons .jig-filterButton[data-filter-slug=pic] {
    font-size: 0;
}

Where you’d change 2331 to the ID of your page the gallery is on. WP has other different body classes to identify certain pages. Change 1rem to your desired font size if it doesn’t match the “All” button.

Well Thanks! I’ll give that a try.

If you are using a consistent look all around the site, you only ever need to set up a global look once, skip the grids interface, and just create the JIGs as standard WP galleries for example in Gutenberg, they will be taken over by JIG.

Until a fine-grained control arrives that controls who can see JIG in the menu, of course. Thanks for noticing this.

Thanks for a quick reply! We’ll be looking forward to that future control feature!

Do you think the current control that just affects the shortcode editor button’s visibility being tied to a role, should double down and control this as well? Or would it only make sense as a separate setting. Considering that less and less people actually see that button since the classic editor might not be that popular anymore (and I’m working on adding blocks to the popular builders/themes).

Thanks. This plugin is working at www.forever1995.com and www.paulpetch.co.nz Just a heads up with another problem that was resolved by turning off timthumb.

For a about a week now I was getting an error when uploading images to the gallery or even adding into a new page.

“Post-processing of the image failed likely because the server is busy or does not have enough resources.”

Today with timthumb off- this error has disappeared.

Have you checked if the settings are as recommended?

Hi, yes and your thumbnails have too large intrinsic sizes: https://i.justifiedgrid.com/2t42kdm1.png

While it does not generate any load on your server due to Jetpack Photon, it’s wasted data for visitors. Can you choose a smaller size in this setting? https://i.justifiedgrid.com/2t42kdrd.png

The error you mention disappeared because your server’s resources weren’t drained anymore. Your upload and subsequent postprocessing of the images were impaired by a concurrent visitor for whom the thumbnails had to be generated, but the event had nothing to do with your freshly-uploaded images at that time.

More info on the Jetpack thing: https://jetpack.com/support/site-accelerator/ It’s meant to replace TimThumb as it acts the same way. I can’t test at the moment but iirc the TimThumb setting itself should stay on even when you use Photon from JetPack, (TimThumb will not be used anyway), as that setting tells JIG to use some kind of thumbnail creation.

Hi, do you mean something like this? https://justifiedgrid.com/sources/flickr/collections-multi-level/

Currently not, but thanks for the idea I’ll check it out. I’m only familiar with AWS, and there is a workflow that syncs or offloads wp media library content to S3, then you put CloudFront in front of it. Do you imagine the azure workflow as images still managed in the wp media library but hosted on azure, or using it as a remote source as if it were some kind of FTP folder?

Their plan is to use it as remote source.

Yes all of that.

1 Yes it’s the same look.

Note, for #2, it’ll take up as much space as anything else can. Drop long text in the space that you will place it in to see. So it will not go above boundaries set by CSS.

Points 3, 4, 5, 6 of course.

Thank you. Client asked me to double check the following before we buy it: “Lets say we have 100 images in the gallery, but only 20 are displayed on the page due to infinite scrolling settings. Client clicks on the first image and the lightbox is opened – will he be able to browse all 100 images in the lightbox, or only 20 ones that are currently displayed on the page? “

Yes they can browse all 100 through the lightbox even if they did not scroll down one bit. The list of all images is prepared, and only the image loading is delayed by the lazy loading. There is no further list of images to fetch on scroll that would prevent someone from seeing all of them in the lightbox. So you are all good.

Hi, the video only plays when you click/tap the thumbnail (and it goes into the lightbox). The thumbnail is just an image which does not move or become a video by scrolling. Thanks for the suggestion, I’ll consider it when building better video gallery support!

Update: something else buggy that I forgot about, because it’s the backend, but maybe same issue. When I open a grid and click to Edit Gallery almost always some of the images don’t load, random white boxes. I had the network tab open, Chrome inspector, and watched all the error 500s show up.

Damn, so close to launching! Thanks!

500 is an internal server error, about which not much information is available just by looking at the site. Try disabling timthumb and choosing a WordPress-generated image size in its place.

I think it has to do with concurrent connections, this page might load more images than usual. Browser refresh with enabled cache can fix it as your browser will not request already-encountered images again on subsequent page loads.

Freezing the GIF relies on JIG’s own thumbnail creation as it alters the source image (actually just breaks the animation). Unfreezing makes it use the original image as-is. I was not aware that Jetpack can do something with the GIFs so they don’t appear frozen, regardless if their resize was successful. So this freezing was only tested or meant to be used without Jetpack. I’ll support more cloud resizers/CDNs but I likely have no control over what they do with animated GIFs, unfortunately. What could be better if the freeze functionality didn’t rely on thumbnail creation actually breaking the image, but if the first frame was extracted somehow so the freeze could be guaranteed, and optionally play the GIF on mouse over or tap (perhaps even avoiding the lightbox). Do you agree?

Actually resizing or modifying the GIF while retaining all the frames is akin to video transcoding.

I would imaging since “Photon” is creating and delivering thumbs to the browser it’s “bypassing” JIG’s animation break. It’s being sent to the CDN as “broken” but still sending the entire GIF so what comes back is the unbroken GIF. Does that sound plausible?

As a still photographer for many many years the days of large print jobs are less and less, it’s all about online. So, GIFs have gone from kittens playing to an actual valuable media form. I don’t have many GIFs on my site yet so haven’t seen an issue, but, selecting the first frame as the thumb would probably leave some people a little flustered. Agan, for kittens it’s OK but showing a product is different.

If it’s possible, the way youtube does it would be great, might even be a little easier with GIFs. Open any GIF in Photoshop and you can see all the frames, and, GIFs are usually pretty short so pulling 2 frames a second from a long 5 second GIF would only be 10 frames and give a good selection to choose from as the thumbnail. Also, probably don’t need to add the “upload thumb” feature since the extraction process would yield frames from start to finish. OR, .... keep it as is but allow a thumb version to be uploaded using a naming convention similar to retina images: logo.png = logo@2x.png | silly-kittens.gif = silly-kittens@gif_thumb.gif

GIFs are actually kinda large compared to an image, maybe lazy loading full GIFs after the thumbs load so hover or tap is “instant.” Anyway, something to think about like you don’t have enough. Been using and loving the plugin for years!!! I think I even did a testimonial for you way back then.

Yup! https://justifiedgrid.com/reviews/firsh-you-are-the-man/

Well that goes a bit beyond what a gallery display should do at a first glance, but perhaps as a module/plugin for enhanced GIF galleries I could implement something like that. The images should and can be processed upon upload to take only a few frames, but what if a customer already has them uploaded and then install the plugin later? That brings up more questions WP supports setting a featured image for content that normaly doesn’t have, like PDFs or videos, but GIFs are treated as just images. So I presume the GIF excerpt creation should be just an automatic process by a subfeature of JIG. Good talk.

Ok, captions work again using Chrome. But they still don’t appear using Edge. Maybe there’s a problem just with it.

I could not reproduce the problem in any of my browsers with your site. Has this been resolved by any chance?

Hello Fresh, I finally fixed it. The problem was due to an Edge extension. Thank you for your help.

JIG, Overlay effects, first few settings control that color layer. A hiccup when combined with pure CSS stuff can happen because of the JS-based animation in JIG plays the entire animation from off/on/off even when briefly crossing an item with the mouse. With CSS the transitions immediately return toward off state. JIG’s is a bit more playful and resemble the classic Flash sites’ mouse effects.

Yellow is that CSS does: http://www.2meter3.de/code/hoverFlow/ Orange is what JIG has.

Hi, your images do come from a CDN, the host is like i0.wp.com which means Jetpack plugin’s image module (Photon) is active. It’s probably better than TimThumb the default thumbnail creation, but it does mean the special effects are not working because of a remote origin. There are workarounds but they are not implemented in the plugin.

What effect would you like to use? Perhaps they can be replacicated with CSS.

Hi, sorry for the late reply. You were right, I didn’t realize Jetpack image optimization was on and turning the option off solved the problem. I was trying to get the images to desaturate and show colors only on hover by the way. Is there an easy way to get that effect with CSS?

Thank you!

A quick something, Custom CSS:

.justified-image-grid img {
    filter: grayscale(1);
    transition: filter 1s;
}
.justified-image-grid .jig-imageContainer:hover img {
    filter: none;
}

Thank you so much for your help, setting background-color solved it! I had changed .jig-caption-wrapper height because I didn’t want so much whitespace under the captions with little text, but I’ve set it now to 90px as a compromise so that it doesn’t look too bad and longer captions are visible (to reduce whitespace I’ve also decreased margin-bottom). But yes, it would be great to have a max height instead of fixed!

Since JIG for now uses floats, if there were uneven caption heights, things would fall apart so it’s not as easy as tweaking a few CSS properties. Furthermore, since everything is or will be positioned by knowing the dimensions of elements, adding the measurement of text in to the mix is another complexity, but I’ll figure something out.

Yes, you’re absolutely right, this does seem like a very difficult thing to implement. In its current form JIG is still the best gallery plugin out there in my opinion so thanks a lot for your hard work. Any other functionalities will be a cool bonus but I love it the way it is!

That’s great. I’m more used to php , html, where can I find the other versions? I just wanna stay away from Wordpress

Sorry I didn’t see the “no” there..

At the core it’s a JS thing, but it needs to get the image dimensions from somewhere before they begin loading, that’s where WP helps out. If you really like the plugin you can take the JS out of it, I can show you the init script (how the config looks like) that you could craft yourself with PHP, but it expects the image dimensions for aspect ratio calculations which can be a problem.

I managed to accomplish what I wanted – and it turned out to actually be pretty simple. Just used the custom taxonomy I created with the Attachment_Category of MLA in the following format: [justified_image_grid image_taxonomy=THE_CUSTOM_TAX image_tax_term=”THE_CUSTOM_TAX,THE_MLA_ATTACHMENT_CATAGORY“]

Works great. And no, I couldn’t do it with the settings. Had to just play with the shortcode. I’ve never used the query mods. I might have to look at that. And I know I’ve told you this before but that Grids creation tool was extremely helpful.

Thanks for the feedback. Without inspecting your usage closer I don’t know why and how your solution works for you, but if you get the result you need then it’s all good! Yeah I plan to take the Grids interface to the next level, because it started out from the Shortcode Editor, just with more visual space for it. Now it became the core since people use Gutenberg or other builders and they just pick the JIG they created earlier.

Looking forward to it.

Hi,

Divs are used in the JS-generated output. Lis are in the noscript tag pure HTML version that Google sees. You are not supposed to see the list unless you view the source.

THanks millions Firsh

Does this help? https://justifiedgrid.com/support/faq/one-image-per-row-one-column-possible/

It should make no difference that you are showing recent posts vs any other gallery mode. There is some weird scaling going on at mobile sizes, but I’m not sure how your theme is interacting with the gallery.

Have you tried disabling TimThumb? On mobile devices, it may generate completely new thumbnails that don’t exist yet since they respond to the visitor’s phone’s pixel density which is not just 2 anymore, there are various values between 1 and up to around 4. So if a new phone comes out with even greater density and it’s used to visit your site, it might generate a new set of thumbs just for that. This won’t explain the media browser (not sure what’s up with that, JIG doesn’t alter it), but disabling timthumb would help the resources against mobile.

Disabling Timthumb causes the site to basically ground to a halt. The images are so slow to load its as bad as the page not loading at all. I’ve noticed the issue is more of an issue on the pages that are blogs with multiple JIG’s to load.

For example https://forever1995.com/blog/

For example https://outdoorphotography.co.nz/blog/

Try using Jetpack plugin with its image enhancement module (Photon). Otherwise if you disable TimThumb you need to choose an appropriately small, already existing WP-generated thumbnail size (adjacent setting), then it should be faster (but less beautiful on mobile) than TimThumb.

Use the row height and deviation settings on the first tab. Currently there is no way to style the album view differently from the gallery view, they are controlled by the same shortcode, how did you do that?

Load more or Max rows could interfere with it. Try choosing a preset, then enabling the hidden limit on top of that, since the preset choice acts as a soft reset. Also, a limit value that is higher than the hidden limit could render it useless. I believe some settings got mixed in with your intention to use hidden limit.

Yes, it was the Load More feature. When turned OFF I get the Limit/Hidden feature back. I can see the confusion, Load More is set to 20 initial but Limit is set to 6. Maybe that’s why in the plugin’s Preview it was not loading/showing my whole gallery of 39. But in the gallery page all the thumbs were showing. I guess for now it’s one or the other, OK with me. Thanks for the fast reply!