On my own Omega 4 based theme, the images are not loading, but the module is otherwise working.

It works fine on the standard Omega 4 theme. I also know that the JS is loading (did a console.log).

It seems that a bunch of HTML is not getting inserted into the page. In the screenshot here, you can see the inspector for it working on Omega (top) and for it not working in my Omega based theme (bottom).

I appreciate the help.

CommentFileSizeAuthor
#3 Screen Shot 2016-09-19 at 7.19.16 PM.png322.78 KBkosher
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

helbent created an issue. See original summary.

rjacobs’s picture

It's quite possible that the galley field markup is there but the gallery is being hidden due to some CSS properties of parent divs. This scenario has come up from time-to-time, for example:

Anyway, the easiest way to confirm if your situation is similar to this is to temporarily switch to a core theme, such as Bartik, just long enough to see if everything works after that. If so you can at least isolate the issue to the theme and look a bit deeper at some CSS specifics with your Omega subtheme that might be getting in the way.

kosher’s picture

As I noted in my original post, the gallery is working fine in Omega, but not in my subtheme. So, yes, I have isolated the issue to my subtheme.

It does not seem to be a CSS issue because, as shown in the screenshot that I provided in the original post (see attached file), using the inspector, I can see that the pertinent HTML, which is clearly present in Omega, is not being inserted in my subtheme. If it was a CSS issue, the HTML for the galley images would be the same in both.

rjacobs’s picture

Ok, well, it's good to know things are isolated to the theme as that rules out quite a few other issues.

The screenshots that you've attached are very useful but they are only showing markup that's dynamically generated client-side by the Juicebox javascript library. Note that everything inside the div with class "juicebox-container" is written by this 3rd party JS library and is not actually controlled directly by this module. The fact that both your screenshots contain this dynamic markup inside this "juicebox-container" div indicates that the module's core business logic and XML handling are working as expected, which helps to further isolate things to client-side rendering behaviors. So given that the distinction that you are seeing is deep within client-side generated markup I'm guessing that you may have some form of conflict between your subtheme and the juicebox javascript library. Can you try disabling some JS that may be unique to your subtheme and see if that has any impact?

kosher’s picture

I had two JS files - behaviors and another that included a few random directions - identified in my .info file for the theme. I removed both lines from the .info file, cleared the cache, made sure those two JS files were no longer operational, and then checked the gallery. Unfortunately, I was still not seeing images, and the markup was still the same as before.

Are there other JS files that I should check? Other ideas? Thanks.

rjacobs’s picture

If you have any developer tools installed in your browser it will be good to check the console logs there for any errors. That can certainly provide more specific clues about javascript conflicts and errors.

Also, can you share a URL to a publicly accessible version of a page that demonstrates the problem? Though it sounds a bit unlikely that your issue is linked specifically to this integration module I might still be able to provide additional insights if I can have a direct look.

kosher’s picture

I have looked at it with the console open, and I am getting no JS errors. I do not really know where else to look or what else to try.

You can access the site here: http://testing.jeffreykosiorek.com/juliets/james-bond-bay-colony
"Test User" with the password "1999"

rjacobs’s picture

Thanks for the direct link, that helps quite a bit. I think your issues is actually the same as what's described here:

#2312037: There is whitepspace in your Juicebox XML that causes problems, is there something you can/should do about it?

I had a look at the raw XML for your gallery (http://testing.jeffreykosiorek.com/juliets/juicebox/xml/field/node/34/fi...) and it's clear that there is a line of whitespace at the top of it. Most browsers do not parse this very well, which can lead to lots of strange issues. Older versions of the Juicebox library were more explicit on the error shown when this happens, but it seems like newer versions just fail silently and act like there are no images.

Since you've already isolated the issue to your sub-theme it's quite likely that you just have some whitespace at the top of one of it's included php files (e.g. an extra carriage return at the top of template.php). If you can find and remove this whitespace it's likely everything will be fine. As far as I can see all the other pieces of the integration are working as expected in your setup.

kosher’s picture

Thank you so much. It was a simple extra line at the top of my template.php file in the theme. Sorry I did not see that page that you linked to; I felt like I had looked through everything related. Again, many thanks.

rjacobs’s picture

Status: Active » Fixed

Glad to hear that fixed it. When that whitespace problem comes up often the hardest part is tracking down which component is causing the issue, so it's great that you had already isolated things to the sub-theme as that made it pretty easy.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.