Support » Plugin: EWWW Image Optimizer » WebP doesn’t work with Jetpack Carousel

  • Resolved Alias79

    (@alias79)


    Yesterday I activated WebP support, and works. I activated the first and last option in the WebP settings (since I use a CDN).

    As I said, it works properly, except the Jetpack Carrousel gallery. When a gallery has WebP images, the page hangs. These are the reported errors:

    Uncaught TypeError: Cannot read property ‘split’ of undefined
    at a.fn.init.originalDimensions (jetpack-carousel.js:1063)
    at a.fn.init.$.fn.jp_carousel (jetpack-carousel.js:1435)
    at a.fn.init.bestFit (jetpack-carousel.js:782)
    at a.fn.init.$.fn.jp_carousel (jetpack-carousel.js:1435)
    at a.fn.init.fitInfo (jetpack-carousel.js:814)
    at a.fn.init.$.fn.jp_carousel (jetpack-carousel.js:1435)
    at a.fn.init.updateSlidePositions (jetpack-carousel.js:629)
    at a.fn.init.$.fn.jp_carousel (jetpack-carousel.js:1435)
    at a.fn.init.selectSlide (jetpack-carousel.js:701)
    at a.fn.init.$.fn.jp_carousel (jetpack-carousel.js:1435)
    jetpack-carousel.js:1063 Uncaught TypeError: Cannot read property ‘split’ of undefined
    at a.fn.init.originalDimensions (jetpack-carousel.js:1063)
    at a.fn.init.$.fn.jp_carousel (jetpack-carousel.js:1435)
    at a.fn.init.bestFit (jetpack-carousel.js:782)
    at a.fn.init.$.fn.jp_carousel (jetpack-carousel.js:1435)
    at a.fn.init.fitInfo (jetpack-carousel.js:814)
    at a.fn.init.$.fn.jp_carousel (jetpack-carousel.js:1435)
    at a.fn.init.updateSlidePositions (jetpack-carousel.js:629)
    at a.fn.init.$.fn.jp_carousel (jetpack-carousel.js:1435)

    When I disable WebP support in EWWW Image Optimizer, everything works as before. I understand this might be a Jetpack problem, but I wanted to comment it here first.

Viewing 15 replies - 1 through 15 (of 21 total)
  • Plugin Author nosilver4u

    (@nosilver4u)

    I think this is not an individual support query. To do a test, I installed a WordPress with only the Jetpack and EWWW Image Optimizer plugin actives. I’ve activated the same WebP options and the exact thing happens in this new installation.

    • This reply was modified 3 years, 7 months ago by Alias79.

    I do not know if it will be a problem really related to EWWW Image Optimizer plugin… I have opened a post in the Jetpack support forum also… This issue is quite serious 🙁

    I have raised the problem in the other post by focusing it from Jetpack, but when I paste the same list of errors they have closed it to say it was a duplicate. Please tell me if it is a Jetpack problem, or related to your plugin.

    I don’t want to go back with the WebP implementation, and meanwhile the galleries of my web do not work. As I said, in another installation of WP the same thing happens, an installation that has only enabled Jetpack Carousel galery, EWWW and support for WebP.

    One day has passed. Certainly, I don’t know if this issue is related to EWWW, or Jetpack, but I think that at least the responsible of the plugin should answer; Seems to be a bug, or a problem with the WebP format + Jetpack carousel, not a general support question.

    Plugin Author nosilver4u

    (@nosilver4u)

    In the future, no matter the issue, please use the contact form. It’s not just for support. If you want to contact me, that will always be the best and fastest way.

    That said, I did a quick test with Jetpack’s Carousel, and encountered no javascript issues with the first and last webp options checked (JPG/PNG to WebP, and Alt WebP Rewriting).

    However, using any of EWWW’s WebP functions with Photon-enabled features is probably not ever going to work properly. Photon appends extra stuff to the url, and breaks the Alt Webp function. I’ve looked at the Photon (server-side) source code recently, and it appears to have webp support, although I don’t know that they’ve enabled it yet. So if you want to use Photon, I would just wait for them to introduce WebP support.

    First of all, thanks for your response.

    In the tests I have done, on my main website I completely deactivated the CDN (MAXCDN) and another plugins. In the new website that I set up to test this, I have ONLY activated Jetpack with Carousel and EWWW. In other words, it’s not a problem related to Photon in any case.

    I think problems that can affect other people should be answered in the forum, so that other people find the solution without having to send support tickets.

    • This reply was modified 3 years, 7 months ago by Alias79.
    • This reply was modified 3 years, 7 months ago by Alias79.
    Plugin Author nosilver4u

    (@nosilver4u)

    Sorry, I had misunderstood their requirements. I thought both Tiled Galleries AND Carousel required Photon, but seems it is only Tiled Galleries that has this requirement.

    At any rate, that does help replicate the problem, so I’ll see what can be done. I suspect Jetpack is looking for an attribute that didn’t get replicated properly.

    Sorry nosilver4u, I probably did not explain myself well. So you can see what happens, in this URL of my web there is a gallery:

    https://goo.gl/RY6jpI

    In this other URL, there is another gallery of my website, but the images have not yet been converted to WebP (that’s why it works):

    https://goo.gl/vXNphE

    I have tried on two new webs, this is one of them. I only activated Jetpack Carousel + EWWW (no Photon or other features)

    https://goo.gl/weVCw6

    Fails any carousel gallery with images converted to WebP (tested in 3 different webs).

    I have found another big problem with the use of WebP… Since I activated this format my AMP pages generate thousands of serious errors (according to Google Search Console), I do not know if because this format is not compatible with AMP (curious, being the two initiatives of Google), or if is related with the AMP plugin itself; this particular issue occurs when the “WebP Alternate Rewriting” is turned on, in order for the CDN to work. I’ve been talking to people from CDN, and it says it’s EWWW plugin related.

    For now I will deactivate WebP in my main web, waiting for progress on these fronts.

    Plugin Author nosilver4u

    (@nosilver4u)

    Yeah, the AMP thing is sort of a known issue. Known, in that a couple folks have reported issues (3 now including you), but I’ve never been able to reproduce them.

    I’m working through the Jetpack stuff, and I’ll take a look at the AMP plugin again while I’m at it.

    Ok, thanks nosilver4u!

    Plugin Author nosilver4u

    (@nosilver4u)

    Can you look to see if all your carousel images have these three attributes:
    data-orig-file
    data-medium-file
    data-large-file

    Plugin Author nosilver4u

    (@nosilver4u)

    Nevermind, I did some testing, and it seems those three attributes ARE always present with the carousel, even if the image is rather small. So I have the Jetpack stuff sorted, but the AMP issue is elusive. I suspect it is related to some specific theme/plugin, because the Auttomatic AMP plugin changes all the img elements to be amp-img elements, thus EWWW completely ignores those. And the only other thing it mucks with is ‘a’ (links) and ‘li’ (list-item) elements.

    Those only get touched if they are from NextGEN or Revolution Slider, as it looks for some pretty specific attributes before changing anything.

    I’ll do some brainstorming to see if I can think how to test/replicate the AMP problems. I could certainly just skip all AMP pages for now, but realistically it would be nice if they could have the webp images added also.

    Yes, on my main web site, and in the 2 new test sites.

    • This reply was modified 3 years, 7 months ago by Alias79.
    • This reply was modified 3 years, 7 months ago by Alias79.
Viewing 15 replies - 1 through 15 (of 21 total)
  • The topic ‘WebP doesn’t work with Jetpack Carousel’ is closed to new replies.