Recently I had a real problem with a theme that I’ve never really run into before. I needed a way to upload an image in the admin backend. I had never seen a way to do this anywhere. I looked through the admin file, but couldn’t find anything.

Then I found a great post by Matt at Webmaster-Source. He detailed a way to upload an image in the functions.php file, absolutely perfect for what I wanted. But my problem was that I needed multiple media uploads on the page, which he nearly had but just needed a slight alteration.

Basically add a simple form with these two lines in:

<input id=”upload_image” type=”text” size=”36″ name=”upload_image” value=”" />
<input id=”upload_image_button” type=”button” value=”Upload Image” />

So here is his javascript (jquery) code that handles it:

$(document).ready(function() {
 $(‘#upload_image_button’).click(function() {
  formfield = $(‘#upload_image’).attr(‘name’);
  tb_show(”, ‘media-upload.php&type=image&TB_iframe=true’);
  return false;
 });

 window.send_to_editor = function(html) {
  imgurl = $(‘img’,html).attr(‘src’);
  $(‘#upload_image’).val(imgurl);
  tb_remove();
 }
});

So I altered it just a tiny little bit and here is the alteration. The first bit is to take his first function and slightly alter it for each instance of the form, the ‘upload_image_button‘ id and the formfield variable that selects the ‘upload_image‘ id:

 $(‘#upload_image_button’).click(function() {
  formfield = $(‘#upload_image’).attr(‘name’);
  tb_show(”, ‘media-upload.php?type=image&TB_iframe=true’);
  return false;
 });

In the second function, use the variable that he had set up earlier (formfield):

 window.send_to_editor = function(html) {
  imgurl = $(‘img’,html).attr(‘src’);
  $(‘#’ + formfield).val(imgurl);
  tb_remove();
 }

That should do it. Every time the media file is selected, then the submit/upload button event puts the media (image, in my case) url into the input box. Use your functions.php know-how to save it as an option for your theme, and use it as a background etc.,

Subscribe

Bookmark

Trackback

Tweet This