Support » Plugin: FooGallery Image Gallery – Responsive Photo Gallery » thumbnail images are not visible with theme Photo-Diary

  • Resolved klauswaushb


    Since the latest two updates of FooGallery no thumbnails are shown an any page. I tried different things to identfy the problem. After switching from my theme “Photo-Diary” to “Twenty Nineteen” the thumbnail gallerys where shown.
    So I think that there is no problem with plugins, browser or other things.

    What do I have to change in individual CSS to display the thumbnails again? Or is there an other way to solve the problem?

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author bradvin



    I had a look at your site and I can see that there is a javascript error in the console. We will dig into this to figure it out.

    Plugin Author steveush


    Hi @klauswaushb,

    The issue here is your theme is wrapping all <figure/> elements in your page in a <p/> tag as a work around for featured overlay thumbnails in posts. This can be seen in your themes JS file found at ~/wp-content/themes/photo-diary/js/jquery-photo_diary_theme_functions.js on line 47. Basically it is executing the following code:

    $('.entry-content figure').not('.gallery-item').wrap('<p></p>');

    While this works for the built-in WordPress gallery it is interfering with FooGallery as our items figures are decorated with the class fg-item-inner and not gallery-item.

    As for why this has only started occurring in the 1.7.x updates it is due to performance changes made in those updates. Previously when FooGallery parsed an item it didn’t care about the item’s exact DOM structure, as long as the required elements existed somewhere within the item. While this worked great the method used to perform the element lookup was quite taxing. To increase the speed of parsing it was changed so that our JS uses alternative methods that directly query each element as we know the exact structure as we output it to the page. The additional <p/> tag being inserted by your theme into each of our items is breaking the parsing as it is changing the structure of the item.

    At present the only options available to fix this would be rolling back to a 1.6.x version of FooGallery before we released the performance changes or get your theme fixed so that it doesn’t simply wrap every <figure/> with a <p/> tag. I’ll discuss our changes with @bradvin however as this issue lies with your theme and our changes improve the performance of FooGallery I don’t think we will roll back our changes.

    At it’s simplest you could change the previously mentioned line 47 in your theme JS to the following:

    $('.entry-content figure').not('.gallery-item,.fg-item-inner').wrap('<p></p>');

    However this would only fix the issue with FooGallery and not any other gallery/media plugins that output a <figure/> element. Ideally your theme should be updated/fixed so that it’s work around for featured overlay thumbnails does not interfere with anything else in the page and only wrap the actual featured thumbnail.


    Hi Steve,
    great support!
    I´ll try to implement the suggestet change … and will inform the developer of the theme 😉
    Thanks a lot!

    Hi Steve,
    your code works great! Problem solved!
    Thanks a lot again!

    Plugin Author steveush


    Hi Klaus,

    Glad to hear it resolved the issue for you. Please note though that if you update your theme you will need to apply this fix again as that JS file will be replaced.

    I’ll mark this as resolved.


Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘thumbnail images are not visible with theme Photo-Diary’ is closed to new replies.