I'd like to save one image in my custom settings page. i.e. this image should be the logo which should get print to the pdf files I generate. Thats why I want to store the image (the image link) in the wp_options table.

I want to use the default wordpress image attachment funktions to select / upload the image. So I want the usability like the user adding a thumbnail to his post.

Can somebody help me?

Thanks.

I'd like to save one image in my custom settings page. i.e. this image should be the logo which should get print to the pdf files I generate. Thats why I want to store the image (the image link) in the wp_options table.

I want to use the default wordpress image attachment funktions to select / upload the image. So I want the usability like the user adding a thumbnail to his post.

Can somebody help me?

Thanks.

• images
• options

• You can add a custom meta_box and add a upload possibility. After selecting you can specify where to save the image in your database. Start here code.tutsplus/tutorials/… – Interactive Commented Dec 1, 2015 at 16:29

1 Answer 1

After some time I found out how to solve my Problem.

In short, I have to use Javascript to open the WP-Media Uploader. And in my options I only save the attachment ID.

Here is my code:

HTML / PHP:

<?php 
    $options        = get_option( 'mysettings' );
    $image_id       = esc_attr__( $options['image_id']);
?>
<div id="logo"> 
<?php
    $hasImage       = false;
    $image          = wp_get_attachment_image_src( $image_id, 'medium' );
    $image_url      = $image[0];
    if (!is_null($image_id) && $image_id !== "" && $image_id > 0) {
        $hasImage   = true;
    }
?>
    <div>
        <label for="image_url">Image</label>
        <input type="hidden" name="mysettings[image_id]" id="option_image_id" class="regular-text">
        <input id="upload_img-btn" type="button" name="upload-btn" class="button-secondary" value="Upload Image">
    </div>
    <div id="logo_container">
        <?php if ($hasImage) { ?>
        <img class="logo" src="<?php echo $image_url; ?>" />
        <?php } ?>
    </div>
    <input id="delete_img-btn" type="button" name="delete-btn" class="button-secondary" value="Remove Image" <?php if (!$hasImage) echo 'style="display: none;"'; ?>>
</div>

and my Javascript Code:

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

$("#delete_img-btn").on("click", function(e) {
    e.preventDefault();

    $('#logo_container').html("");
    $("#delete_img-btn").hide();
});

$('#upload_img-btn').on("click", function(e) {
    e.preventDefault();
    var $el = jQuery( this );
    var optionImageFrame = wp.media({ 
        title: $el.data( 'choose' ),
        button: {
            text: $el.data( 'update' )
        },
        states: [
            new wp.media.controller.Library({
                title: $el.data( 'choose' ),
                filterable: 'all',
                // mutiple: true if you want to upload multiple files at once
                multiple: false
            })
        ]           
    });

    optionImageFrame.on('select', function(e){
        // This will return the selected image from the Media Uploader, the result is an object
        var uploaded_image = optionImageFrame.state().get('selection').first();
        // We convert uploaded_image to a JSON object to make accessing it easier
        // Output to the console uploaded_image
        var attachment = uploaded_image.toJSON();
        var image_url = attachment.url;
        var image_id  = attachment.id;

        $('#option_image_id').val(image_id);

        $('#logo_container').append('<img class="logo" src="' + image_url + '" />');
        $("#delete_img-btn").show();
    });
    optionImageFrame.open();
});
});