Shutter Stack causing issues with JQuery


Im having problems with the Shutter stack causing issues with other stacks. Im using batch mode. When the batch folder is empty other stacks will not load on the page. When there is an image in the folder then they seems to work fine.

I am using foundation 6 for the site and other developers stacks. So I have changed one of the pages with the foundry theme and the foundry control panel but Im still getting the same issues.

The screenshot above is from the inspect element on the page
http://simondanby.com/gallery/old-stars/

Adam: Please can you help and I really need to be able to use Shutter with other stacks

From just your screenshot that seems to be an error with a stack called Magic Grid. Perhaps what stack cannot use the version of jQuery that Shutter requires. If so it may be throwing an error, which is cascading and stops the rest of your javascript from loading. You might test by simply removing this Magic Grid from the page and republishing to test the results.

Your description makes it sound like it doesn’t work with an empty batch images folder. Is this correct (this seems weird to me, but perhaps it is a problem)? If so, does it work if you add images to the batch folder you’ve setup for your gallery? If so for the time being, I would suggest adding folders to the batch location (as the stack is of course designed for that).

If you’d like to provide me with a ZIP file that contains the following I can look at it when I’m in the office next. The ZIP file should contain:

  • a copy of your project file
  • copies of any non-Elixir stacks and themes you’re using in this project
  • a folder containing your original images you’re adding to the batch folder

You can use WeTransfer to create a download link for me using that ZIP file and email the link to me at adam at elixirgraphics dot com

I’m out of the office today and tomorrow, but if I see if pop in to my inbox and can get into the office I’ll try to take a look tomorrow. If not, first thing Tuesday.

Thanks for the reply.

There is nothing else on the page other than BWD’s Header Pro

And yes I meant this occurs when there are NO images in Shutter

@elixirgraphics Im confused … i can’t remove Magic Grid as it is the js library that is in the Shutter stack!!

As I said above I have changed the page to Foundry (From F6), added a Foundry Control stack, removed all stacks other than Header Pro and Shutter. There are NO images on the page. The issue goes away as soon as I add images.

And yes if I remove Magic Grid - ie remove Shutter - of course the js query goes away lol!

IMHO it seems that magic-grid.js is an open source library that you use to lay out the thumbnails in Shutter. Here is a finder view of the shutter stack.

Could you create a complete new foundry project and try again, please?

https://scrappad.alstonwebweavers.com/shutter2/

Sorry tried answering your support email on a weekend, holiday evening while tired. Provide the requested items I asked for in my post and I’ll have a look next I’m in the office.

Also please reply to this section:

the error goes away and any stack that has been clobbered comes back.
I’ll send you the project but as I said there is NOTHING in it except your stacks - Foundry Control and Shutter and a BWD Header Pro.

Thank you. The project file, third-party stacks and images allows me to diagnose exactly what you’re using and seeing without guessing at building a page or site that replicates yours. I’m sorry if it is an inconvenience but it does help.

I have sent you the project file. Its not an inconvenience and thanks for your help.

But as I have now said several times there is NOTHING in it except your stacks and Header Pro. I am using Foundry theme. I changed it all deliberately so that there only was your stuff in it to see if it was a third party issue and obviously it wasn’t, unless its Header Pro. But I can’t see that it can be. Can you? Do you need me to send you BWD’s Header Pro stack?

Thank you. When I’m back in the office I’ll check to make sure I can open it and take a look.

Please, there is no need for the all-caps response. I know what you’ve said, and I’ve stated why I want the project file as well as the other items. It allows me to not have to try and recreate any and all settings, layouts, configurations, etc, etc that you’ve already built. It takes the guessing game out of things as I’m not imagining what might be on your test page vs my test page.

I don’t know. I am unfamiliar with the stack you’re talking about as I don’t have or use it. If it is a third-party stack that is non-Elixir, and you’re using it on the test page, I will need it as well.

https://www.bigwhiteduck.com/stacks/headerpro/

Thanks for the ZIP files. Received them and opened them up this morning when I sat down to start the work week.

So your project file did in fact help me out. It showed me the exact settings you were using and how your project file was setup. It also narrowed down where I needed to look for your problem.

The Masonry grid javascript is just not happy that there are no images in the layout for it to work with, because obviously you’ve not put any images into the folder. So it is throwing an error to tell us it has no images to work with. Makes sense.

This only relates to the Masonry layout. The other three do not offer up such protestations because you’ve left the batch image folder empty.

This is a pretty corner case problem that I wouldn’t have likely found without your bug report, as I’d say 99.9% of users put images in the batch image processing folder, as that is its purpose.

I’ll look at a tweak to have it hopefully not complain about an empty batch images folder. Once I get something built and tested I’ll send out an update.

Until then you have three options as quick fixes:

  1. Populate the batch images folder with your images.
  2. If you still want to keep the batch images folder empty (:man_shrugging:) you can use the Justified layout
  3. Likewise, if you’re looking to keep that folder empty (:woman_shrugging:) you could opt for the Grid layout

Thanks again for sending your files over, it was a big help.

3 Likes

Thanks Adam
Could you give me a timescale as to when this issue will be fixed please?

I can’t, sorry. I have to not only fix it, but it will need to also be tested to make sure it does not break anything else.

Is there a reason that you don’t want images in an image gallery stack? I’m not understanding the use case.

My client wishes to be able to change the images on a regular basis and sometimes will not have any images in depending on the topic/date.

My problem is if the stack was just causing a couple of JS errors on the page that would possibly be acceptable - for now, but the stack crashes anything else on the page that uses JS. For instance: the menu that I had intended to use doesnt show up. This of course is not ok, as the page in itself needs to be stable.

If this was my own site well I could make sure there is always a image in it, but it isn’t its for a client.

What a shame. In the meantime I will have look for a alternative solution as this stack in its current form isn’t 100%

I look forward to a solution asap

Why not make your client an image, 1x1px in size, the same colour as the background, and have them add that to the folder whenever they don’t want any images displayed?

1 Like

You should not have a stack like this on the page if there are no images in it. You’re loading a lot of overhead in the form of javascript and CSS for nothing by having it on the page not doing anything.

It is not designed around being on a page with no images in the Batch folder. As I said I will look at skirting this for your particular corner case, but the stack is designed to have images in it.

I have a few other things on my plate currently, and as soon at those are cleared off I will look at this corner case scenario and get a workaround in place. Once I do that and get some testing on it done I will push out the update.

That said, if you switch to the Justified layout instead of the Masonry layout for the time being you’ll be good to go.

I would like to thank Adam for fixing this issue. He actually did it really quickly and sent it me for testing. It worked fine. Since then he has put an update thru so no issues!!

Thanks Adam

3 Likes