In this example, we have shared WordPress Media Uploader with size select. You could use the media insertion dialog as shown on the “edit page” site, which adds alignment, link_to and size input fields. To do so add frame: ‘post’ to your options array:
1 2 3 4 5 6 7 8 9 | file_frame = wp.media.frames.file_frame = wp.media({ title: 'Select a image to upload', button: { text: 'Use this image', }, multiple: false, frame: 'post', state: 'insert', }); |
Instead of listening to the “select” event listen to the “insert” event. This code shows how retrieve the additional properties including the size:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // When an image is inserted, run a callback. file_frame.on( 'insert', function(selection) { var state = file_frame.state(); selection = selection || state.get('selection'); if (! selection) return; // We set multiple to false so only get one image from the uploader var attachment = selection.first(); var display = state.display(attachment).toJSON(); attachment = attachment.toJSON(); // Do something with attachment.id and/or attachment.url here var imgurl = attachment.sizes[display.size].url; jQuery( '#filenameFromURL' ).val( imgurl ); }); |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
