Conflict with the Divi Gallery module

Resolved

(@bg17aw)

Hi there,

I discovered there is an issue with Divi and the Gallery module, when pressing on Update Images button in Divi Editor/Gallery Module Settings/Content/Update Images doesn’t work (nothing happens). I am NOT on WP 5, I am still on the latest 4.xx version. Any ideas?

Uncaught TypeError: Cannot read property 'selection' of null
    at n.render (gallery-settings.js?ver=20181220-150217:22)
    at wp.Backbone.Subviews.<anonymous> (load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:404)
    at load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:59
    at Function.m.each.m.forEach (load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:59)
    at wp.Backbone.Subviews._attach (load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:404)
    at wp.Backbone.Subviews.set (load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:404)
    at wp.Backbone.Subviews.add (load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:404)
    at n.set (media-views.min.js?ver=4.9.9:2)
    at n.<anonymous> (media-views.min.js?ver=4.9.9:2)
    at load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:59
render @ gallery-settings.js?ver=20181220-150217:22
(anonymous) @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:404
(anonymous) @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:59
m.each.m.forEach @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:59
_attach @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:404
set @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:404
add @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:404
set @ media-views.min.js?ver=4.9.9:2
(anonymous) @ media-views.min.js?ver=4.9.9:2
(anonymous) @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:59
m.each.m.forEach @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:59
set @ media-views.min.js?ver=4.9.9:2
gallerySettings @ media-views.min.js?ver=4.9.9:1
_ @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:401
m @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:401
f @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:401
u.trigger @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:401
c.(anonymous function) @ media-views.min.js?ver=4.9.9:1
trigger @ media-views.min.js?ver=4.9.9:1
render @ media-views.min.js?ver=4.9.9:1
mode @ media-views.min.js?ver=4.9.9:1
render @ media-views.min.js?ver=4.9.9:1
c.(anonymous function) @ media-views.min.js?ver=4.9.9:1
_postActivate @ media-views.min.js?ver=4.9.9:1
_ @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:401
m @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:401
f @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:401
u.trigger @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:401
setState @ media-views.min.js?ver=4.9.9:1
render @ media-views.min.js?ver=4.9.9:1
(anonymous) @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:404
(anonymous) @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:59
m.each.m.forEach @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:59
_attach @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:404
(anonymous) @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:404
(anonymous) @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:59
m.each.m.forEach @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:59
render @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:404
render @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:404
attach @ media-views.min.js?ver=4.9.9:2
open @ media-views.min.js?ver=4.9.9:2
c.(anonymous function) @ media-views.min.js?ver=4.9.9:1
edit @ load-scripts.php?c=1&load[]=hoverIntent,common,admin-bar,heartbeat,autosave,wp-ajax-response,jquery-color,wp-lists,jquery-query,admin-comments,suggest,postb&load[]=ox,jquery-ui-position,jquery-ui-menu,wp-a11y,jquery-ui-autocomplete,tags-suggest,tags-box,word-count,post,editor-expand,media-ed&load[]=itor,media-audiovideo,mce-view,imgareaselect,image-edit,svg-painter,wp-auth-check,wp-api,jquery-ui-draggable,jquery-ui-slider,jq&load[]=uery-touch-punch,iris,wp-color-picker&ver=4.9.9:66
(anonymous) @ builder.js?ver=3.18.9:10399
dispatch @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:3
r.handle @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load[]=e,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload&ver=4.9.9:3

Viewing 14 replies - 1 through 14 (of 14 total)

Plugin Author Sayontan Sinha
(@sayontan)

5 years, 4 months ago

Try disabling Photonic for the Visual Editor (Photonic → Settings → Generic Options → Generic Settings → Disable shortcode editing in Visual Editor). It will still work on the text editor via the “Add / Edit Photonic Gallery” button.

Thread Starter bg17aw
(@bg17aw)

5 years, 4 months ago

Tried that and seems to work thank you. So this will disable the visual image selector?

Plugin Author Sayontan Sinha
(@sayontan)

5 years, 4 months ago

Kind of. Basically if you are editing a post in the “Visual Editor”, and create a Photonic gallery you will see “No items found” in the gallery. Your gallery will be fine on the front-end though. And if you go to the “Text Editor” you will still see the correct shortcode. You can then select the shortcode as a whole and click on “Add / Edit Photonic Gallery” – it will work normally.

It is just a conflict with some other plugins that have their own version of gallery insertion – I offer the option so that people can resolve the conflicts without having to change code.

Thread Starter bg17aw
(@bg17aw)

5 years, 3 months ago

And if you go to the “Text Editor” you will still see the correct shortcode. You can then select the shortcode as a whole and click on “Add / Edit Photonic Gallery” – it will work normally.

It doesn’t work, on the Choose type of gallery step, if I select “Photos from Media Library” and press Next, the pop-up still stays open and the media library loads in the background.

Here is a screenshot: https://imgur.com/a/m4aAcjB

Any ideas? Thanks

Plugin Author Sayontan Sinha
(@sayontan)

5 years, 3 months ago

I assumed from your previous post that this was working for you. Did something change recently? I have not modified this aspect of Photonic since the past couple of months. Also, with a non-Divi theme this seems to work fine.

Plugin Author Sayontan Sinha
(@sayontan)

5 years, 3 months ago

In any case, if you have to make it work with your theme I am not sure if there is a way around it without modifying code.

If you open the file wp-content/plugins/photonic/include/css/admin-form.css, line 3 you will see this:

#TB_window.photonic-tb {z-index: 155000; }

Try deleting this line and see if it makes a difference.

This is not an edit I can put into the plugin as it is likely to impact users of plugins such as Elementor.

Thread Starter bg17aw
(@bg17aw)

5 years, 3 months ago

I assumed from your previous post that this was working for you. Did something change recently?

No, sorry for the late comeback, it dis this from the first time I applied the fix (checking the conflict setting in Settings). I just didn’t have time to test more.
No changes recently. I updated both your plugin (you released about 4 new versions) and the theme (Divi) hoping for an improvement but no luck

Also, with a non-Divi theme this seems to work fine.

With a non-Divi theme, there would have been no need for the conflict-avoiding setting in the first place. If it is not too much too ask, I think it would be a good idea if you could install Divi to test. Divi is one of the most popular themes right now.

About other plugins: I have a very basic website, almost no plugins (except Yoast SEO)

Try deleting this line and see if it makes a difference.

No difference, unfortunately.

Plugin Author Sayontan Sinha
(@sayontan)

5 years, 3 months ago

If it is not too much too ask, I think it would be a good idea if you could install Divi to test.

This is in fact too much to ask! Divi costs $89 at least, and while popular, it is really not worth the money for an experienced WP developer – it is a huge memory hog (it requires 256MB RAM to keep its back-end running) and has a litany of script conflicts.

As I keep saying, Photonic is free, but Divi comes with a hefty price tag. Ideally, since you are paying for the theme, your request should be directed to them asking them to download the plugin and test with it (as you are a paying customer they have to support you) 🙂

Anyway, give me a few days. Let me see if I can find an installation of the theme that I can test on.
Plugin Author Sayontan Sinha
(@sayontan)

5 years, 3 months ago
In the meanwhile, here is another suggestion for you to try:
1. Go to wp-content/plugins/photonic/include/scripts/admin/gallery-settings.js, line 22. You will see this:
  if (tinymce !== undefined && tinymce.activeEditor !== undefined && tinymce.activeEditor.selection !== undefined) {
2. Change the line to this:
  if (tinymce !== undefined && tinymce.activeEditor !== undefined && tinymce.activeEditor !== null && tinymce.activeEditor.selection !== undefined) {
3. Now, go back to the setting you changed, and unselect Photonic → Settings → Generic Options → Generic Settings → Disable shortcode editing in Visual Editor. Save.
My guess is that you should be able to now use the Divi Gallery module as well as the Add / Edit Photonic Gallery in the regular text editor.

Let me know if it works.
Thread Starter bg17aw
(@bg17aw)

5 years, 3 months ago

Divi comes with a hefty price tag. Ideally, since you are paying for the theme, your request should be directed to them asking them to download the plugin and test with it (as you are a paying customer they have to support you)

Yes, I did that, but they just say “there are millions of different plugins, we cannot test every individual one etc etc”

I can give you access to a brand new instalation with a Divi theme, I have an unlimited license so I can install Divi on as many websites as I need to.

I know it is a lot to ask, but I am only doing this thinking that you might benefit as well by making the plugin more compatible with a very popular theme (or so is my impression, seems like it is a lot of buzz around it).

Not sure about the requirements and performance of Divi, but they do release one update about every 2 days or so, and each iteration has speed improvements. Most themes include a visual builder/composer of some type, so what can we do… heavy javascript seems like the way forward

Plugin Author Sayontan Sinha
(@sayontan)

5 years, 3 months ago

Yes, I did that, but they just say “there are millions of different plugins, we cannot test every individual one etc etc”

🙂 This is indeed funny as it seems like the culprit here is Divi, not Photonic. If I were to guess, they have changed the style definition of the #TB_window element, which is a standard WP element. Instead they should have added a custom class to their instance of #TB_window (e.g. add a divi-builder class) and styled that instead.

If that is what they have done, it is the wrong way to do things, as there are thousands of plugins that interact with the #TB_window element. If you observe my post where I suggested editing the CSS file, I have ensured that only the Photonic window is targeted, i.e. I have added a class photonic-tb whenever I am creating my interactive flow, and my CSS is ensuring that I don’t change settings for elements. That is how they should target their definitions too (assuming they haven’t done that).

I can give you access to a brand new instalation with a Divi theme, I have an unlimited license so I can install Divi on as many websites as I need to.

Thank you for the offer, however the forum rules here do not permit sharing of login details / email addresses.

In the absence of a site for me, please try the fix I proposed in the above. I am almost certain it will fix the original issue you had (you will need to reverse the setting that you changed and re-insert the line of code too). It will take me a couple of days longer to get access and I can release the fix after that.

Plugin Author Sayontan Sinha
(@sayontan)

5 years, 3 months ago

Please try with the latest version – I have put in the change that I have listed above. You should be able to turn back the original setting and not see the original JS conflict either.

Thread Starter bg17aw
(@bg17aw)

5 years, 3 months ago

Reporting back:

– gallery falling behind when conflict buton activated, seems to be fixed!

– conflicts with Divi with default settings (conflict checkbox deactivated): seems to be fixed!

Thanks a lot, you rock!

_beatrice_
(@_beatrice_)

5 years, 2 months ago

@bg17aw would you mind sharing a test link with what you are building? I have a site that will require embedding Smugmug galleries. I’d love to see this in action on a Divi theme site!

Viewing 14 replies - 1 through 14 (of 14 total)

The topic ‘Conflict with the Divi Gallery module’ is closed to new replies.