Support » Plugin: FooGallery Image Gallery – Responsive Photo Gallery » FooGallery Not working (part2)

  • Resolved LiSkynd

    (@liskynd)


    @phillcoxon regarding to FooGallery not working topic
    https://wordpress.org/support/topic/foogallery-not-working-4/

    I think i made changes to that site, because i had to move on.
    Anyway, i created a new test site for this purpose only, and found out that it’s not the FooGallery after all … i think. I tested it so that i created 3 different type of pages, and used the same gallery on every page:
    1. default WP post
    http://www.2xtemp.jirina.fi/uncategorized/foogallerytest1/
    2. Page with SiteOrigin page builder.
    http://www.2xtemp.jirina.fi/foogallerytest2/
    3. default WP page, with no page builder.
    http://www.2xtemp.jirina.fi/foogallerytest3/

    The one that doesnt work is number 2 Page with SiteOrigin page builder. BUT it’s not that simple. That page started to work just fine when i changed the theme. The theme that i was using is “Customizr” By nikeo so i tested with a few random themes, like
    “Twenty Seventeen” By the WordPress team, and “Sydney” By aThemes, and everything started to work with both themes. So it wasnt FooGallery and not SiteOrigin page builder either …
    Then i disabeled all the plugins, except FooGallery, and deleted all the custom CSS, and cleared all caches, but nothing seemed to help.

    To make it even more weird, everything worked with old version of FooGallery with the same theme:
    FooGallery version : 1.2.17
    WordPress version : 4.4.2
    Activated Theme : “Customizr” Version: 3.4.17

    Thanks in advance 🙂

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Support phillcoxon

    (@phillcoxon)

    Hi @liskynd,

    In the test page you’ve provided I can see you are using W3 Total Cache.

    Caching plugins are the number one cause of things breaking so that would be my first thought to look at. Would you please try disabling any javascript minimisation, clear W3 Total Cache and view the page again? Let me know if that makes any difference.

    Thanks in advance,

    Phill

    @phillcoxon Thanks for the quick reply 🙂

    I installed the W3 Total Cache to clear the cache (like said in the “After update – plugin is not working!” to see if that would help, so nope, i dont think thats the problem, but i deactivated it now, and nope, it didnt help.

    I dont know what “disabling any javascript minimisation” means? I dont remember having any that kind of plugins installed …do i? 😀

    @phillcoxon
    Hey, the theme provider now replied and said:

    http://www.2xtemp.jirina.fi/foogallerytest2/ don’t work, there are javascript error for foogallery in the developer console.=> I’d recommend reporting the issue to foogallery developers

    How can there be a javascript error on that page only cause i used the same gallery on every page? :/ And what is “developer console”?
    Also, like i said, all the pages work if i change the theme. I will do it now to re check …
    BAM! now it works:
    http://www.2xtemp.jirina.fi/foogallerytest2/
    Everything is exactly like they were 1 minute ago, except the theme is different.

    • This reply was modified 5 months, 1 week ago by LiSkynd.
    Plugin Support phillcoxon

    (@phillcoxon)

    Hi @liskynd,

    As you’ve noted FooGallery appears to work fine with other themes and it’s only breaking when you try to use your original theme. That suggests that it’s a conflict with your original theme that most likely needs to be taken care of by the theme developers.

    Your site is currently set to the twentyseventeen theme and is working fine so I can’t see any errors in the developer console (accessed via browser developer tools, for example in Chrome it’s right mouse button -> inspect and click on the “Console” tab).

    If you’re able to switch back to the theme that is breaking I can take another look at the console errors and see if there’s something that indicates it’s on the FooGallery side or something that the theme developer needs to fix.

    LiSkynd

    (@liskynd)

    @phillcoxon I contacted the theme developers, after i noticed it might be the theme, and not FooGallery, but guess what they said?

    http://www.2xtemp.jirina.fi/foogallerytest2/ => don’t work, there are javascript error for foogallery in the developer console.=> I’d recommend reporting the issue to foogallery developers

    lol 😀

    Oh and that developer console … my browser is in Finnish language so i didnt get what you mean, and i thought there is a developer console somewhere in WordPress. Thanks for pointing that out. 🙂

    I now switched the theme back to the Customizr and found the errors. Then switched back to Twenty Seventeen and the errors were gone. Its really weird because i didnt change anything else except the theme.
    Also, no errors in developer console on the other pages with the Customizr theme activated.

    If you wanna take a look, the non working theme is now activated.
    And thanks for you time 🙂

    Plugin Support phillcoxon

    (@phillcoxon)

    Hi @liskynd,

    Thank you for the update. I’ve looked at the console and yes I can see an error:

    “FooGallery Error: Invalid HTML markup. Check the item markup for additional elements or malformed HTML in the title or description”

    This doesn’t necessarily mean that FooGallery has broken, only that there is something wrong with the HTML passed to it.

    @steveush – are you able to review this for us please and confirm whether it’s something the Site Origin page builder is doing or if there’s something we can address here?

    Plugin Author steveush

    (@steveush)

    Hi @liskynd,

    This is simply the theme developers not checking out the cause of the error. It’s fine though as I will gladly explain it so you can get them to fix their issue.

    Firstly FooGallery outputs the HTML for its’ items and the JavaScript expects that HTML to be in a certain format. In this case most notably for parsing of the items so we can work with them on the front end. To parse an item the JavaScript loops through the HTML output by the server and queries it for the various elements it needs. It does this using CSS selectors to find those elements. If all the required elements are not found then it reports the error you’re seeing in the console letting us know that it can not parse the current item and as such does not know how to handle it.

    Now onto the issue.

    The primary cause of the problem here is that the <a/> element within a FooGallery item no longer has the CSS class of fg-thumb. The thumbnail is required and so parsing fails as it can’t find the <a class="fg-thumb"/> element.

    If you view-source of your page and check the <a/> elements within the gallery markup they all now only have a single CSS class, grouped_elements. As this is in the page source received from the server this means that somewhere in the PHP someone is hooking into the rendering pipeline and simply replacing all CSS classes on anchors instead of adding there own CSS classes to them. Quite simply the result should be <a class="fg-thumb grouped_elements"/> instead of the current <a class="grouped_elements"/>.

    Now you may ask how do I know it’s the theme doing this and not some other plugin? Well quite simply I went through all the JavaScript being loaded by the front end to find out which scripts are specifically looking for elements with a CSS class of grouped_elements and as you suspected, it was the themes tc-scripts.min.js found at the following URL:

    http://www.2xtemp.jirina.fi/wp-content/themes/customizr/inc/assets/js/tc-scripts.min.js?ver=4.1.55

    If you view this in Chromes developer console you can format the minified file into a more readable state and find the specific reference on line 4406.

    So this comes down to a bug in the implementation of FancyBox done by the theme developers. They need to update their PHP code so that it appends additional CSS classes to the anchors instead of replacing everything.

    Now we could work around the parsing issue but you would simply encounter additional problems as many of the galleries features are implemented though CSS and specifically the fg-thumb CSS class. Removal of this CSS class by the theme is breaking the gallery.

    Thanks
    Steve

    Thanks guys … and thanks @steveush for having so much trouble with this.
    Maybe i just start a new topic post a link to this topic to the theme support here at https://wordpress.org/support/theme/customizr/

    Plugin Author steveush

    (@steveush)

    Hi @liskynd,

    It’s no problem and I hope the theme developer fixes the issue. If they read my reply they should hopefully know exactly what I am talking about and be able to solve the problem.

    Thanks
    Steve

    I now posted it here:
    https://wordpress.org/support/topic/foogallery-not-working-part3/
    and pointed your @steveush post about the problem.

    @steveush thanks for exploring this in details, your explanations are very clear, it helps 👌
    @liskynd I’ll reply in your most recent support thread about this.
    Thank you 🙏

Viewing 11 replies - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.