Lightbox: enqueue only if shortcode

Hi there,

Whats the best way to load the lightbox script only if the gallery shortcode is present?

Tried that:

function de_lightbox_components () {
    beans_uikit_enqueue_components(array('lightbox'), 'add-ons');
}
#add_action( 'beans_uikit_enqueue_scripts', 'de_lightbox_components'); // works but will load always

function de_post_gallery ($output, $attr) {
    add_action( 'beans_uikit_enqueue_scripts', 'de_lightbox_components' ); // didnt work
    [...]
}
add_filter("post_gallery", "de_post_gallery", 999, 2);

Hey Andreas,

You can check if the post content contains your shortcode in the beans_uikit_enqueue_scripts callback function as such:

add_action( 'beans_uikit_enqueue_scripts', 'example_enqueue_uikit_assets' );

function example_enqueue_uikit_assets() {

  global $post;

    preg_match_all( '/'. get_shortcode_regex() .'/s', beans_get( 'post_content', $post ), $matches );

    // Only load UIkit lightbox if the post contains the gallery shortcode.
    if ( in_array( 'gallery', beans_get( 2, $matches ) ) ) {
        beans_uikit_enqueue_components( array( 'lightbox' ), 'add-ons' );
    }

}

You may apply the same logic to any shortcode name by changing the gallery instance with which ever shortcode you need to conditionally load assets for.

Hope that helps,

Thanks.

Cause I have nested Shortcodes, I changed the Regex. Else it only finds the outer shortcode tags.

preg_match_all( '/'. get_shortcode_regex(array('gallery')) .'/s', beans_get( 'post_content', $post ), $matches );

I used a bit different version

$required_addons = array('sticky', 'tooltip');

global $post;

if ( has_shortcode( $post->post_content, 'slideset') ) {
  $required_addons[] = 'slideset';
}

beans_uikit_enqueue_components( $required_addons, 'add-ons' );

but what if the shortcode is inside a widget and not in post content? in normal wordpress you can do this

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

function my_plugin_assets() {
 wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) );
  wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );
}

add_shortcode( 'custom_gallery', 'custom_gallery' );

function custom_gallery( $atts ) {
  wp_enqueue_style( 'custom-gallery' );
 wp_enqueue_script( 'custom-gallery' );

  // Gallery code here
}

How to do the same with beans uikit components?

Hey Manuel,

This is currently not possible with the compiler. When you run wp_enqueue_style() or wp_enqueue_script() in your shorcode callback function, it will add your assets (styles and scripts) in the footer since it is called too late to be added in the head. If we had to do the same with the compiler, it would mean that the entire compiled files would be added to the footer which would cause issues.

That said, it is on Beans roadmap to add the ability to have more that one compiled UIkit files so that extra components can be added in seperated files if need be (good pratice when using HTTP/2). I don't have an ETA for that feature to be release, keep an eye on the changelog.

The only solution at this stage is to sniff shortcodes as demonstrated in the example above.

All the best,

Can we sniff widgets contents inside beans_uikit_enqueue_scripts? How?

Well technically I guess you could loop through the global $wp_registered_sidebars and then buffer dynamic_sidebar() for each sidebar to sniff for shorcodes but personally, I don't think I would do that.

Have fun,

I don't like this solution, for now, while waiting for the future realease, I hardcoded the components to load when needed (and I can do that only because it's a custom tailored theme)

Wise choice 😉