Support » Plugin: Easy FancyBox » [Plugin: Easy FancyBox] Plugin not working with Cloudflare

Viewing 14 replies - 1 through 14 (of 14 total)
  • Plugin Author RavanH

    (@ravanh)

    Hi @oblogdamari

    Are you using https://wordpress.org/plugins/cloudflare/ plugin? As far as I understand it, they recommend the default settings as described on https://support.cloudflare.com/hc/en-us/articles/227342487 which means Rocket Loader is OFF.

    Otherwise, if you really need the rocket but want to exclude certain scripts by adding a data-cfasync="false" attribute then you’ll have to code your own filter to add them specifically.

    Try something like this in your theme’s functions.php :

    
    add_filter( 'script_loader_tag', 'add_cfasync_false', 10, 3 );
    
    function add_cfasync_false( $tag, $handle, $src ) {
    
        // add any script handle to the array to set its cfasync attribute to false
        $handles = array ( 'jquery-fancybox', 'jquery-easing', 'jquery-mousewheel', 'jquery-metadata' );
    
        if ( in_array( $handle, $handles ) ) {
            $tag = '<script type="text/javascript" data-cfasync="false" src="' . $src . '"></script>';
        }
    
        return $tag;
    }
    

    Disclaimer: this snippet is untested. Please backup your functions.php before testing!

    • This reply was modified 1 year, 1 month ago by  RavanH.
    Plugin Author RavanH

    (@ravanh)

    Or maybe better:

    
    add_filter( 'script_loader_tag', 'add_cfasync_false', 10, 2 );
    
    function add_cfasync_false( $tag, $handle ) {
    
        // add any script handle to the array to set its cfasync attribute to false
        $handles = array ( 'jquery-fancybox', 'jquery-easing', 'jquery-mousewheel', 'jquery-metadata' );
    
        return in_array( $handle, $handles ) ? str_replace( ' src="', ' data-cfasync="false" src="', $tag ) : $tag;
    }
    
    • This reply was modified 1 year, 1 month ago by  RavanH.
    • This reply was modified 1 year, 1 month ago by  RavanH.

    Hi RavanH,

    Thanks for the reply. Yes, unfortunately I need to keep Rocket enable even though isn’t in Cloudflare standard configuration. Basically the option improves a lot the site’ speed. In, GTmetrix for example I have my grades changed from C/E to A/A just enabling it. So I added to functions.php the script that you suggested but it didn’t work. I tried both, but at this moment I have the second one enabled. Would you have any other suggestion?

    Thanks
    Mari

    Plugin Author RavanH

    (@ravanh)

    Hi Mari, it’s an interesting case… Looking at your site source code, I see indeed no evidence of any data-cfasync=”false” being added.

    I’ll test the script myself tomorrow but in the mean time: did you flush the cloudflare cache? Or is that not possible?

    Hi RavanH,

    I purged cache for some pages and I have also cleaned hyper cache data, but I’m still getting the same results. I’ll wait for your tests results.

    Thanks
    Mari

    Plugin Author RavanH

    (@ravanh)

    Hi Mari,

    Ok, the snippet needs just a little change to make it work:

    
    add_filter( 'script_loader_tag', 'add_cfasync_false', 10, 2 );
    
    function add_cfasync_false( $tag, $handle ) {
    
        // add any script handle to the array to set its cfasync attribute to false
        $handles = array ( 'jquery-fancybox', 'jquery-easing', 'jquery-mousewheel', 'jquery-metadata' );
    
        return in_array( $handle, $handles ) ? str_replace( ' src=', ' data-cfasync="false" src=', $tag ) : $tag;
    }
    

    Let me know! 🙂

    • This reply was modified 1 year, 1 month ago by  RavanH.

    Hi RavanH,

    I tried the new code, but I’m getting the same results. Not sure if I’m doing something wrong. The script is enabled, could you please check it again?

    http://i68.tinypic.com/nxtna8.jpg

    Thanks again
    Mari

    • This reply was modified 1 year, 1 month ago by  oblogdamari.
    Plugin Author RavanH

    (@ravanh)

    Hi Mari, looking at the source code, the attribute data-cfasync=”false” is being added to the script tags. We now know the code snippet is working 🙂 but there is an error reported in the browser console (F12, console tab) :

    
    Uncaught ReferenceError: jQuery is not defined
        at jquery.fancybox-1.3.8.min.js:2
    

    This is caused because the main jQuery library is still being deferred, so we’ll need to include it into our code too.

    Try a modification like this:

    
    $handles = array ( 'jquery-core', 'jquery-fancybox', 'jquery-easing', 'jquery-mousewheel', 'jquery-metadata' );
    

    (note the new 'jquery-core', there!)

    • This reply was modified 1 year, 1 month ago by  RavanH.

    Thanks again RavanH!

    Change is done, could you please check it again? Seems it’s still not working.

    Thanks,
    Mari

    Plugin Author RavanH

    (@ravanh)

    Hi, on http://www.oblogdamari.com/ the jquery library now has the attribute data-cfasync=”false” so at least the code is working. The error in console has gone too. But if I open a post like http://www.oblogdamari.com/2017/01/marvels-agents-of-shield-3a-temporada-review.html the error is back and the attribute is missing.

    Could you purge the cache for that page?

    Plugin Author RavanH

    (@ravanh)

    OK hang on, it seems the inline scripts ar also changed from type="text/javascript" to type="text/rocketscript" … do you know if adding data-cfasync=”false” there too should fix that? On https://support.cloudflare.com/hc/en-us/articles/200169436-How-can-I-have-Rocket-Loader-ignore-my-script-s-in-Automatic-Mode- the author only talks about linked script… 🙁

    Hi RavanH,

    That’s so weird. I have cleaned cache for all pages, it didn’t work. I have also noticed that after we inserted 'jquery-core'the site’s performance dropped a lot. I was using less then 50% of CPU now it’s using 71,85 100% =\

    About the inline scripts we can do a test if you want to. Unfortunately there’s not much more info on cloudflare besides the linked scripts. =(

    Thanks again!
    Mari

    Plugin Author RavanH

    (@ravanh)

    after we inserted ‘jquery-core’ the site’s performance dropped a lot. I was using less then 50% of CPU now it’s using 71,85 100% =\

    Very strange. I would expect the site to drop in pagespeed/etc. tests (because jquery no longer benefits from rocket loader deferring) but raising CPU usage is really surprising. Is that a constant CPU level? Does it go back down again if you disable the rocket loader option?

    About the inline scripts we can do a test if you want to. Unfortunately there’s not much more info on cloudflare besides the linked scripts. =(

    Yes we can do a test. Open the file easy-fancybox/inc/class-easyfancybox.php in the WordPress plugin editor and fid these lines not far from the top:

    
     
    		// begin output FancyBox settings
    		echo '
    <script type="text/javascript">
    /* <![CDATA[ */
    

    Now change that script line to

    
    <script data-cfasync="false" type="text/javascript">
    

    Next, find not far from the bottom:

    
     
    		echo '<script type="text/javascript">
    jQuery(document).on(\'ready post-load\', function(){ jQuery(\'.nofancybox,a.pin-it-button,a[href*="pinterest.com/pin/create/button"]\').addClass(\'nolightbox\'); });';
    

    There too, add a data-cfasync="false" attribute to the script tag.

    Then save, clear cache and check the result.

    • This reply was modified 1 year, 1 month ago by  RavanH. Reason: typo
    oblogdamari

    (@oblogdamari)

    Hi RavanH,

    Sorry for the late response. I haven’t been able to try the new script so I have just disabled Rocket in the meantime. I’ll enable it and perform the changes again to let you know the results as soon as possible.

    Thanks again!
    Mari

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘[Plugin: Easy FancyBox] Plugin not working with Cloudflare’ is closed to new replies.