3

I have a custom meta box where a user can select an image and save it using wordpresses media picker, set up with some JavaScript. That works fine, but I'd like the option to select which version of the image to use; large, medium, or thumbnail.

Is that possible?

EDIT 2: I solved it! I'll post the solution when I have time, but basically: var selectedSizeUrl = media_attachment.sizes[$('select[name="size"]').val()].url; gives the url.

EDIT: I've made some progress. I now get the selector for the size, I just need to save the correct url to the database. Now the url that is save is just that of the originally sized image. Here is my JavaScript:

/*
 * 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;

  // Hide the empty thumbnail frames
  $('.inspiration-image-thumbnail').each(function (i, element) {
  var $element = $(element);

  $element.attr('src') ? $element.show() : $element.hide();
});

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

var that = $(this);

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

// Sets up the media library frame
file_frame  = wp.media({
  frame:   'select',
  state:   'mystate',
  library:   { type: 'image' },
  multiple:   false
});

file_frame.states.add([
  new wp.media.controller.Library({
    id: 'mystate',
    title: 'Velg bilde',
    priority: 20,
    toolbar: 'select',
    filterable: 'uploaded',
    library: wp.media.query( file_frame.options.library ),
    multiple: file_frame.options.multiple ? 'reset' : false,
    editable: true,
    displayUserSettings: false,
    displaySettings: true,
    allowLocalEdits: true
  })
]);

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

  // Grabs the attachment selection and creates a JSON representation of the model.
  var media_attachment = file_frame.state().get('selection').first().toJSON();
  console.log(media_attachment);
  // Sends the attachment URL to our custom image input field.
  that.siblings('.meta-image').val(media_attachment.url);

  var thumbnail = that.siblings('.inspiration-image-thumbnail')
  thumbnail.attr('src', media_attachment.url);    // Update the thumbnail source
  thumbnail.is(':hidden') && thumbnail.show();    // Show the thumbnail if it is hidden
});

file_frame.open();

});
});

This is from this post, basically almost copying it into my code, just fixed the few script errors.

  • +1 This as well as looking in wp-includes/js/media-views.js helped me make my own jQuery 'add media' button mimic the PHP wp_editor version. – myol Jan 17 '15 at 16:25

Your Answer

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

Browse other questions tagged or ask your own question.