[Smush Pro] Conflict with Master Slider plugin

We've discovered that there is an odd issue with Smush pro and Master Slider plugins; when Smush CDN is enabled.

The slider images are still served from our server, even though they are indeed in <img> tags and not CSS background images.

Also, when the Automtic Resizing option is enabled in Smush CDN, the images disappear from the slides and seem to have a max-width of 1px inlined for the sizes.

This was confirmed by Patrick during a live chat and attached screenshots are from his test site.

  • Adam Czajczyk
    • Support Gorilla

    Hi Miles

    I hope you're well today and thank you for reaching out to us.

    I did some more tests with Master Slider and it seems it's all related to how Master Slider is "building-up" these sliders.

    When you look into the browser console, you'll see that the main slider image is a regular HTML markup using a standard "img" tag so, theoretically, it should be served from CDN. Looking into a page source, however, reveals that... there's no markup for the main slider!

    There's only a "container" without any "img" tag and then, depending on the settings of a particular slider, you got an image/thumbnail list (e.g. displayed as a set of thumbnails).

    The Master Slider seems to be creating the "main slide" markup (including the main image img tag) dynamically, most likely it's injecting it to the DOM with jQuery script. This would mean that the image "is not really there" when the site is "generated" by WordPress core. jQuery (so JavaScript) works in browser - on user end - so Smush is not able to interact with it.

    That's about the "slide" itself. If it comes to resizing option - that'd also be related. The "image/thumbnails list" that's used by MasterSlider to then "build-up" actual slides - it does use "real" HTML, printing out images as "real" img tags. Therefore these images (if you look into the page source code) are served from CDN. But apparently there's no any indication of the container size and the target image container is "unknown". Basically, what happens is that smush does resize the images for these thumbnails to "unknown" sizes, then MasterSlider scripts use them to create actual slides. Furthermore, apparently if the resizing option is enabled the actual slide does use the CDN image (though incorrectly resized).

    I know this sounds complex but I'm afraid that's all caused by the "tricky" way MasterSlider uses jQuery scripts to build up slides/sliders. However, I have asked our developers for additional confirmation and to see if there's anything we could do to address this.

    Please stay tuned and we'll update you here as soon as we know more.

    Best regards,
    Adam

  • Tho Bui
    • Staff

    Hello Miles,

    Apologies for the delay, I can't replicate the second issue If CDN is enabled with image resizing - they are served from CDN but also as resized to 1px max-width.
    Regarding your first issue The slider images are still served from our server, even though they are indeed in <img> tags and not CSS background images I have prepared a custom snippet which you can use as a guide here :
    https://gist.github.com/wpmudev-sls/3a0d00c63296e112d99d33441155a562

    You can download a zip, unzip it and upload file smush-fix-conflict-with-masterslider.php to your wp-content/mu-plugins folder. If that folder doesn't exist you can simply create it.

    If you are not familiar with mu-plugins you can read about them here:
    https://premium.wpmudev.org/manuals/wpmu-manual-2/using-mu-plugins/
    or you can paste it in your child theme's functions.php file.

    Kind regards,
    Tho Bui

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.