Created
February 13, 2016 15:16
-
-
Save wp-kitten/238b0d44b641b4469e19 to your computer and use it in GitHub Desktop.
WordPress Image Upload in theme or plugin
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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