Skip to content

Instantly share code, notes, and snippets.

@wp-kitten
Created February 13, 2016 15:16
Show Gist options
  • Select an option

  • Save wp-kitten/238b0d44b641b4469e19 to your computer and use it in GitHub Desktop.

Select an option

Save wp-kitten/238b0d44b641b4469e19 to your computer and use it in GitHub Desktop.
WordPress Image Upload in theme or plugin
// Enqueue scripts
wp_enqueue_script( 'jquery' );
wp_enqueue_media();
/*
* Generate the fields
*/
function generateImageUploadFields( $inputName, $buttonName, $previewImageID = '', $buttonValue = '')
{
?>
<div class="image-upload"
data-input="<?php echo $inputName;?>"
data-button="<?php echo $buttonName;?>"
data-preview="<?php echo $previewImageID;?>">
<input type="hidden" name="<?php echo $inputName;?>" id="<?php echo $inputName;?>"/>
<input type="button" name="<?php echo $buttonName;?>" id="<?php echo $buttonName;?>"
class="button-secondary" value="<?php echo $buttonValue;?>"/>
<?php if($previewImageID) { ?>
<div class="image-preview-container">
<img id="<?php echo $previewImageID;?>" class="previewImage" src=""/>
<span class="deleteImagePreview"></span>
</div>
<?php } ?>
</div>
<?php
}
/*
* Localized admin js file
*/
//<editor-fold desc=">>> IMAGE UPLOAD">
// Find all Image Upload containers
var _containers = $('.image-upload');
if(_containers)
{
// Enable the image upload functionality for each
$.each(_containers, function(a,b)
{
var container = $(b);
// Check attributes
if(container.attr('data-input').length && container.attr('data-button').length)
{
var input = $('#'+container.attr('data-input')),
button = $('#'+container.attr('data-button')),
previewImg = null,
deleteImageButton = null,
title = ((typeof(WPK.imageUploadTitle) != 'undefined') ? WPK.imageUploadTitle : 'Upload Image');
if(container.attr('data-preview').length) {
previewImg = $('#' + container.attr('data-preview'));
deleteImageButton = $('.deleteImagePreview', container);
}
if(deleteImageButton)
{
deleteImageButton.on('click', function(e){
e.preventDefault(); e.stopPropagation();
if(previewImg) {
previewImg.removeClass('imagePreview-visible').attr('src', '');
input.val('');
}
});
}
if(input && button)
{
button.on('click', function(e)
{
e.preventDefault();
var image = wp.media({
title: title,
// multiple: true if you want to upload multiple files at once
multiple: false
}).open()
.on('select', function(e){
// This will return the selected image from the Media Uploader, the result is an object
var uploaded_image = image.state().get('selection').first();
// Convert uploaded_image to a JSON object to make accessing it easier
var image_url = uploaded_image.toJSON().url;
// Set the url as value to the input field
input.val(image_url);
// Display the image
if(previewImg) {
previewImg.attr('src', image_url).addClass('imagePreview-visible');
}
});
});
}
}
});
}
//</editor-fold desc=">>> IMAGE UPLOAD">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment