Support » Plugin: Advanced Custom Fields: Extended » Feature request: Split the JS/CSS of flexible content field

  • Resolved R3dRidl3

    (@r3dridl3)


    It would be better if you have the ability to split these, for example:

    style.css
    style-preview.css

    script.js
    script-preview.css

    This way you would not load unnecessary CSS/JS on the front-end wich you won’t need. This is better for the speed of the website and SEO.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Konrad Chmielewski

    (@hwk-fr)

    Hello!

    Thanks for the suggestion! I understand why you want to split static files, however, I would like to avoid to clutter the ACF UI with too much fields & settings to flexible content & layouts.

    But don’t worry, there’s solutions already available!

    You can use the following hooks in order to override script/style/template files when in preview mode. This way, you can set your front-end files in the ACF administration, and add some PHP to override it for the preview mode.

    This hook will manually override the script file for my_layout:

    
    add_filter('acfe/flexible/layout/render/script/layout=my_layout', 'acf_flexible_layout_render_script', 10, 4);
    function acf_flexible_layout_render_script($script, $field, $layout, $is_preview){
    
        // Ajax preview
        if($is_preview)
            $script = get_stylesheet_directory_uri() . '/layouts/my-layout/script-preview.js';
            
        return $script;
        
    }
    

    Note that you can do the same for style & template files, check the FAQ “How to change the Flexible Content: Layout Render Paths in PHP?”

    Here is the a hook that will automatically add -preview to all your scripts files set in the ACF administration, for all layouts of the flexible content my_flexible:

    
    add_filter('acfe/flexible/render/script/name=my_flexible', 'acf_flexible_layout_render_script', 10, 4);
    function acf_flexible_layout_render_script($script, $field, $layout, $is_preview){
        
        // Preview check
        if(!$is_preview)
            return $script;
        
        // Script file not set in the ACF administration, return to default
        if(strpos($script, '.js') === false)
            return $script;
        
        $path = explode('.js', $script);
        
        // Add '-preview.js' to the file
        $script = $path[0] . '-preview.js';
        
        return $script;
    
    }
    

    This way you can set /layouts/my-layout/script.js in the administration, and it will automatically append -preview when preview mode is being loaded šŸ™‚

    Hope it helps!

    Regards.

    Plugin Author Konrad Chmielewski

    (@hwk-fr)

    Oh that gave me an idea! I can automatically use the script/style/template files (if they are set via the administration), and try to find the same file ending with -preview.

    If such file is found, then ACF Extended will use it in preview mode! This way everything is automatic, and you don’t have to add extra code to your theme!

    I write down the idea and will add it to the plugin šŸ™‚

    Regards.

    Thread Starter R3dRidl3

    (@r3dridl3)

    Yeah that is exactly what i meant šŸ˜€
    Again, thanks for the fast reply šŸ™‚

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Feature request: Split the JS/CSS of flexible content field’ is closed to new replies.