0

I have created a plugin that creates a meta-box in the admin screen.
This meta-box has an option to upload or select an image via the default WordPress functions.

This works fine if there is one image uploader. Now I have a situation where there are multiple image uploaders.

The default uploader is triggered based upon an id.
I want to make this more dynamic but don't know how. I know I can just create a new .js file and add a number to it to work. But I have need 20 image uploaders. It would be insane to create 20 different files.

The meta-box is loaded if a certain template is used for the page. So a user first has to create a page with a template to activate the meta-box. With that in mind I already know certain information. I was thinking what if I take the $page_ID to add dynamically to the id in the external .js file. But that still leaves me with the problem that every id remains the same.

So here is what I did:

I have updated the question. See below

And this is the external .js for the image loader:
I have updated the question. See below

It would be nice if I could have something that adds a unique value to the id's so that I don't have to create 20 files!

-----------UPDATE----------
I have change a couple of things and I now have one problem left. The data saved to the database no has the name of the page and a trailing number. So it looks like this:
text-{name-page}_1

Because I know how many meta-boxes there will be I can just number them up (I know not the most elegant option but time is an issue.)

BUT...... why is there always a but

For the image loader the script uses an external .js file. Here is the id of the select button defined. I need to make this "dynamic" as well but how can I get the value of the button name to the external file?

here is the image uploader:

<?php 
$post = get_post($post_id, ARRAY_A);
$post_name = $post['post_name'];
$a = '_'.$post_name.'_1';
?>

<input type="button" id="dynamic-image-button<?php echo $a ?>" class="button" value="<?php _e( 'Kies of Upload', 'dynamic-textdomain' )?>" />

This is the external .js

/*
* Attaches the image uploader to the input field
*/
jQuery(document).ready(function($){

// Instantiates the variable that holds the media library frame.
var meta_image_frame;

// Runs when the image button is clicked.
$('#dynamic-image-button').click(function(e){

    // Prevents the default action from occuring.
    e.preventDefault();

    // If the frame already exists, re-open it.
    if ( meta_image_frame ) {
        meta_image_frame.open();
        return;
    }

    // Sets up the media library frame
    meta_image_frame = wp.media.frames.meta_image_frame = wp.media({
        title: meta_image.title,
        button: { text:  meta_image.button },
        library: { type: 'image' }
    });

    // Runs when an image is selected.
    meta_image_frame.on('select', function(){

        // Grabs the attachment selection and creates a JSON representation of the model.
        var media_attachment = meta_image_frame.state().get('selection').first().toJSON();

        // Sends the attachment URL to our custom image input field.
        $('#dynamic-image').val(media_attachment.url);
    });

    // Opens the media library frame.
    meta_image_frame.open();
});
});

How can I get the value of $a into the external js?

------- Additional --------
This is what already was in the script:

function dynamic_image_enqueue() {  global $typenow;
$post = get_post($post_id, ARRAY_A);
$post_name = $post['post_name'];
$a = '_'.$post_name.'_1';
$b = '_'.$post_name.'_2';
if( $typenow == 'page' ) {  wp_enqueue_media();
    wp_register_script( 'dynamic-box-image', plugin_dir_url( __FILE__ ) . 'dynamic-box-image.js', array( 'jquery' ) );
    wp_localize_script( 'dynamic-box-image', 'meta_image',  array('title' => __( 'Kies of Upload een afbeelding', 'dynamic-textdomain' ), 'button' => __( 'Gebruik deze afbeelding', 'dynamic-textdomain' ),));
    wp_enqueue_script( 'dynamic-box-image' );   }}
add_action( 'admin_enqueue_scripts', 'dynamic_image_enqueue' );
?>

--------- UPDATE---------
It claims the value is undefined.
I tried to do a alert to get the value but no luck
I added:

,'a_value' => __( $a, 'dynamic-textdomain' )

To the wp_localize_script.

In the example:
alert( object_name.some_string);
my try alert(meta_image.a_value);

1

You need to use wp_localize_script() when you enqueue the js script. It's usually a good alternative of ajax way and this will save you to create multiple js files.

wp_localize_script() can be used to make any data available to your script that you can normally only get from the server side of WordPress.

As you can see on the codex dedicated page

add_action('admin_enqueue_scripts', 'wpse_249089');

function wpse_249089(){
// Register the script
wp_register_script( 'some_handle', 'path/to/myscript.js' );

// Localize the script with new data
$translation_array = array(
    'some_string' => __( 'Some string to translate', 'plugin-domain' ),
    'a_value' => '10'
);
wp_localize_script( 'some_handle', 'object_name', $translation_array );

// Enqueued script with localized data.
wp_enqueue_script( 'some_handle' );
}

Then in the js file, you can use it like that:

<script>
// alerts 'Some string to translate'
alert( object_name.some_string);
// alerts '10'
alert( object_name.a_value);
</script> 

Hope it helps!

  • This might help if I can fully understand it. I think I got this. Hold my beer! – Interactive Dec 13 '16 at 12:50
  • Well keep the beer..... I can't believe this was already in my original script: See the updated question – Interactive Dec 13 '16 at 13:03
  • Well... guess I'm still stuck.Please see my updated answer – Interactive Dec 13 '16 at 13:16
  • Don't you try to add $a, $b to the array with title... And get it in the js ? – Benoti Dec 13 '16 at 13:26
  • 1
    Cool, keep the beer in the fridge ! And drink it this evening ! – Benoti Dec 13 '16 at 13:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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