1

I have been working on the Custom Gallery Layout style and was wondering how do I enqueue and make the following script working without hard coded in the file. Or is there a better way of adding it via inline script wp_add_inline_script().

I tried with wp_add_inline_script() but that didn't helped. May be I was doing something wrong.

How to add the localize or enqueue the code which is nested with <script>...</script> tags in the below code.

add_action('print_media_templates', function() {
// define your backbone template;
// the "tmpl-" prefix is required,
// and your input field should have a data-setting attribute
// matching the shortcode name

$gallery_types = apply_filters('print_media_templates_gallery_settings_types',
    array(
        'justified' => esc_html__( 'Justified','textdomain' ),
        'grid'      => esc_html__( 'Grid','textdomain' ),
        'slider'    => esc_html__( 'Slider','textdomain' ),
        'default_val'    => esc_html__( 'Default','textdomain' ),
    )
);
?>
<script type="text/html" id="tmpl-custom-gallery-type-setting">
    <label class="setting">
        <span><?php esc_html_e( 'Layout Type' ); ?></span>
        <select data-setting="type">
        <?php
        foreach ( $gallery_types as $key => $value ) {
            echo "<option value=\"$key\">$value</option>";
        }
        ?>
        </select>
    </label>
</script>
<script>
jQuery(document).ready(function(){

    // add your shortcode attribute and its default value to the
    // gallery settings list; $.extend should work as well...
    _.extend(wp.media.gallery.defaults, {
        type: 'default_val'
    });

    // join default gallery settings template with yours -- store in list
    if (!wp.media.gallery.templates) wp.media.gallery.templates = ['gallery-settings'];
    wp.media.gallery.templates.push('custom-gallery-type-setting');

    // merge default gallery settings template with yours
    wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
        template: function (view) {
            var output = '';
            for (var i in wp.media.gallery.templates) {
                output += wp.media.template(wp.media.gallery.templates[i])(view);
            }
            return output;
        }
    });
});

1 Answer 1

0
//add the JS code in a variable - without <script>
$script = "
jQuery(document).ready(function(){

// add your shortcode attribute and its default value to the
// gallery settings list; $.extend should work as well...
_.extend(wp.media.gallery.defaults, {
    type: 'default_val'
});

// join default gallery settings template with yours -- store in list
if (!wp.media.gallery.templates) wp.media.gallery.templates = ['gallery-settings'];
wp.media.gallery.templates.push('custom-gallery-type-setting');

// merge default gallery settings template with yours
wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
    template: function (view) {
        var output = '';
        for (var i in wp.media.gallery.templates) {
            output += wp.media.template(wp.media.gallery.templates[i])(view);
        }
        return output;
    }
});
});";
//add the code to the script that is already enqueued with wp_enqueue_script() 
//use the same handle
wp_add_inline_script('handle_of_script_you_want_modified', $script);
10
  • tried with enqueue but throws an error function theme_prefix_enqueue_script() { wp_add_inline_script( 'tmpl-gallery-enqueue', $script );} add_action( 'wp_enqueue_scripts', 'theme_prefix_enqueue_script' );
    – Maqk
    Commented Sep 8, 2017 at 16:22
  • This is the error - syntax error, unexpected 'function' (T_FUNCTION
    – Maqk
    Commented Sep 8, 2017 at 16:23
  • Put your code in Pastebin and let me take a look at it Commented Sep 8, 2017 at 16:30
  • Here is the full file code. pastebin.com/TMsNhVtt
    – Maqk
    Commented Sep 8, 2017 at 16:34
  • Where are you using the code I suggested above? Commented Sep 8, 2017 at 16:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.