Wordpress media uploaded theme options

Question

I have a word press theme with a theme options dialog

I'd like to add a feature to upload a logo via the theme options page and then display it on the front end in the header as the logo. How would I do this. I would like to use the wordpress media uploaded, but if this is not possible or an alternative is available Id appreciate that also

Answer 1

It is possible to use the built in WordPress Media Upload in your theme functions. I've incorporated it successfully into many themes, and in a variety of different uses.

Below is a simple version (I've got another version that supports multiple image upload fields in a single page).

In a javascript file (save as media_upload.js in your theme directory):

var formfield, tbframe_interval;
jQuery(document).ready(function() {
    // Bind the click to your upload image button
    jQuery('.upload_image_button').click(function() {
            // Which gets the name of the input field
            formfield = '.image_input';
            tb_show('', 'media-upload.php?post_id=0&type=image&TB_iframe=1');
            // Set an interval to change the button text from Insert Into Post
            tbframe_interval = setInterval(function() {
                jQuery('#TB_iframeContent').contents().find('.savesend .button').val('Use This Image');
                }, 2000);
            return false;
    });
    // Bind event to the focus of the input field to trigger the media upload
    jQuery('.image_input').focus(function() {
        jQuery('.upload_image_button').trigger("click");
    });
    // Bind click event to the delete button if it is already displayed
    jQuery("#preview_image .delete").click(function() {removeImage();});
    // Get original send to editor because we are about to override it
    window.original_send_to_editor = window.send_to_editor;
    // Custom function to override where media upload sends data
    window.send_to_editor = function(html) {
        // If formfield set, means we're using our custom function
        if (formfield) {
                // Have to add tags around html in order to be sure finds img src
                imgurl = jQuery('img','<p>' + html + '</p>').attr('src');
                // Send the img url to the input field
                jQuery(formfield).val(imgurl);
                // Remove the media upload box
                tb_remove();
                // Call our function to display image
                renderImage(imgurl);
                // Clear the formfield
                formfield = "";
                // Clear the interval that changes the button name
                clearInterval(tbframe_interval);
            // If not, use the original function
            } else {
                window.original_send_to_editor(html);
            }
      }
});

// function to load the image url into the correct input box
function renderImage(img) {
    // Load the image into the div we set up to display it
    // Also throws in a delete button to remove the image
    jQuery("#preview_image").html('<img src="' + img + '" alt="" /><a class="delete" title="Remove Image" href="javascript:void(0);">X</a>');
    // Bind the click to the delete in order to remove the image
    jQuery("#preview_image .delete").click(function() {removeImage();});
}

// Function we call when the delete button is clicked
function removeImage() {
    jQuery("#preview_image").html('');
    jQuery('.image_input').val('');
}

In your theme's functions.php file, you have to enqueue the necessary scripts (including the one above) by creating a function and using the WP hooks to call the function on admin int:

function my_theme_media_script_load() {
    // Load the necessary WP scripts
    wp_enqueue_script('media-upload'); 
    wp_enqueue_script('thickbox'); 
    // Register our custom script
    wp_register_script('my-custom-media-upload', get_bloginfo("template_url") .
        '/javascript/media_upload.js', array('jquery','media-upload','thickbox')); 
    // Load our custom script
    wp_enqueue_script('my-custom-media-upload'); 
    // Load the WP style for the media upload thickbox
    wp_enqueue_style('thickbox');
}

add_action ('admin_init', 'my_theme_media_script_load');

And finally, where you want the media upload input fields and preview to appear, use the following html:

<?php 
    // Provide your own code to load the image url into the variable $image
    // Then prepare a couple of variables for displaying the image and delete in the html
    $preview = ($image) ? '<img src="' . $image . '" alt="" />' : '';
    $delete_button = ($image) ? '<a class="delete" href="javascript:void(0);" title="Remove Image"><img src="' . get_bloginfo("template_url") . '/images/delete.png" alt="X" /></a>' : '';
?>
<div class="media">
    <label for="acg_user_photo">Image:</label>
    <input type="text" class="image_input" id="image_input" name="image_upload" value="<?php echo $image; ?>" />
    <input type="button" class="upload_image_button" name="image_button"  value="Upload" />
    <div class="preview" id="preview_image">
        <?php echo $delete_button; ?>
        <p id="preview"><?php echo $preview; ?></p>
    </div>
</div>

It's up to you to provide the css to style it up to look good.

Also please note that this should only ever be done on the admin side. You cannot trust the average visitor to upload anything to your site.

Answer 2

I found a way to pass the url from the WP Media Uploader to a text box, then saved the id information from the text field. The input fields:

<input class="uploading" id="<?php echo $value['id']; ?>_btn" type="button" name="<?php echo $value['id']; ?>" value="Upload File" />
<input class="set_item_text" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="text" value="<?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?>" />

And for my jQuery:

jQuery(document).ready(function($) {

$( 'input.uploading' ).click(function() {
    formfield = jQuery(this).attr('name');
    tb_show('', 'media-upload.php?type=image&TB_iframe=true');
    return false;
});

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

});

The name field from the Button is the same as the ID from the Text box - links the two and passes the information easily. The rest is standard in the functions.php to enable your scripting

function mytheme_add_style() {
    $file_dir=get_bloginfo('template_directory');
    wp_enqueue_script("functionsJS", $file_dir."/functions/functions.js", false, "1.0");
    wp_enqueue_style('thickbox');
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');
}

add_action('admin_init', 'mytheme_add_style');

Answer 3

我不是wordpress用户/开发人员，但只是作为一个想法，是否可以编写自己的php页面将此文件上传到正确的位置并将此页面作为iFrame嵌入到对话框中？

Answer 4

It appears in Wordpress 3 this isn't possible. Wordpress loads up the media-upload.php file in an iframe, and the form which usually contains the delete and insert into post and use as post thumbnail, is get_media_item() in media.php at line 1156.

Unfortunately while one can pull up the media uploader, it cant be modified via hooks and filters to insert the extra buttons or links without modifying the core wordpress files.