Custom Meta Box Template

Plugin template for creating custom meta boxes in the WordPress admin area.

This plugin was created for the WordPress Meta Boxes: a Comprehensive Developer’s Guide tutorial.

custom-meta-box-template's People

Contributors

Stargazers

Watchers

custom-meta-box-template's Issues

Bug fix: can't get attachment.url

Hi,

I found a bug the select event will never be triggered, since we are calling

// Opens the media library frame.
wp.media.editor.open();

instead of

meta_image_frame.open();

I've changed here and now after testing and it's working fine! Sorry I didn't sent a pull request

Make jQuery selectors class-based

If you switch the ID selector to a class selector you can easily re-use the script on multiple image upload inputs as long as each button as the matching class.

/*
 * 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.
    $('.meta-upload').click(function(e){

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

        // store button object
        $button = $(this);

        // 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.
            $button.prev('input').val(media_attachment.url);
            $button.next('input').val(media_attachment.id);
        });

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

And if you add a hidden input after the button you can catch the attachment ID. Personally, I tend to find the ID more useful.

    <p>
        <label for="meta-image" class="prfx-row-title"><?php _e( 'Example File Upload', 'prfx-textdomain' )?></label>
        <input type="text" name="meta-image" id="meta-image" value="<?php if ( isset ( $prfx_stored_meta['meta-image'] ) ) echo $prfx_stored_meta['meta-image'][0]; ?>" />
        <input type="button" id="meta-image-button" class="meta-upload button" value="<?php _e( 'Choose or Upload an Image', 'prfx-textdomain' )?>" />
        <input type="text" name="meta-image-id" id="meta-image-id" value="<?php if ( isset ( $prfx_stored_meta['meta-image-id'] ) ) echo $prfx_stored_meta['meta-image-id'][0]; ?>" />
    </p>

Recommend Projects