Images not showing on screen

  • Resolved daisyli29

    (@daisyli29)


    8 years ago

    No matter what I do, the final tile gallery just doesn’t show on my page. I tried re-installing it but the problem persists. The interesting thing is, there is signs of my mouse hovering over an image where my gallery is supposed to be and the images do show when I click, but they just don’t appear on the page.

    I also have Envira Gallery installed just for comparison purposes and it works fine.

    my site is beyondmyborder.com. If you scroll down, you can see the envira gallery and right under it, is where final tile is placed.

    Please give me a hand if you can!! Much appreciated!!

Viewing 9 replies - 1 through 9 (of 9 total)
  • baddadam

    (@baddadam)

    I have the same problem. I figured out it’s something to do with a conflict with the plugin Autoptimize. I couldn’t find any Autoptimize settings that worked… Maybe the authors can help.

    @baddadam do you see JS errors on your browser console?

    Diego

    (@greentreelabs)

    Hi, sorry for my late response. The problem is that something is manipulating the HTML markup. Final Tiles Gallery uses the special attribute “data-ftg-src’ where it stores the image source.

    Another plugin, or maybe your theme, is currently manipulating the markup so that IMG tags in Final Tiles Gallery look like that:

    <img  alt='LA' class='item' data-class='item' data-ftg- src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://i2.wp.com/beyondmyborder.com/wp-content/uploads/2016/06/1.jpg?resize=600%2C900"  src='https://i2.wp.com/beyondmyborder.com/wp-content/uploads/2016/06/1.jpg?resize=600%2C900' data-tcjp-recalc-dims="1" />

    As you can see the data-ftg-src attribute is broken (it’s now data-ftg-) and there are 2 src attributes.

    Try to deactivate Autoptimize and then, if it’s still not working, deactivate all other plugins 1 by 1 until you find the one that causes this issue.

    @futtta could Autoptimize be responsible of that? If so I’m available to work together in order to find a solution about that

    baddadam

    (@baddadam)

    @futta, yes I see a lot of “unreachable code after return statement” errors.

    @greentreelabs the image code on my site is not broken, so perhaps I have a separate issue to daisyli29

    @greentreelabs: looks like those are changes by jetpack’s photon/ responsive images stuff?

    @baddadam; can you share your URL so I can have a quick look?

    Diego

    (@greentreelabs)

    @futta ah yes, that wouldn’t be the the first time photon breaks other plugins functionality

    @baddadam; I actually see

    10:52:00.021 ReferenceError: jQuery is not defined 1 photo-gallery:25:1

    so (re-)add js/jquery/jquery.js to AO’s JS optimization exclusions and all should be fine.

    Diego

    (@greentreelabs)

    “jQuery is not defined” error is thrown when a plugin or a theme include jQuery statically instead of using the proper function enqueue_script.

    baddadam

    (@baddadam)

    @futta — brilliant, that worked! Thanks so much. It seems that the default settings there had been changed.

    @greentreelabs — thanks for that tip. I have looked and I can’t see jquery.js being called by the theme. Perhaps it was just the default Autoptimize settings had been changed by mistake.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Images not showing on screen’ is closed to new replies.