Main logic of this field is:
1. Choose or upload some image.
2. Draw hotspots on that image with jquery plugin “Image map pro”.
3. And then save all info to field value.
Im not strong in PHP abstract programming, so current my main question is:
Can I somehow logically extend functionality of acf_field_image class? And then use it in creating image choosing/uploading functionality for my new custom field type.
Hi @infogoldweb-lt
It seems Image Map Pro is a plugin for WordPress. This means that this plugin will have its own way to save the data and to show it on the front end.
You can use ACF to upload the image, and it will be saved in the WordPress media library. Unfortunately, I’m not sure if you can activate Image Map Pro after the image is uploaded. For further information, kindly get in touch with Image Map Pro author instead.
Thanks 🙂
Hi, I dont want use WordPress type plugin of Image Map Pro, only jquery type plugin integrate somehow into newly created acf field type. Most interaction will be with my own javascript realised.
Question: How I can use ACF Image choose/upload button in my new acf field type? Maybe is some code example?
Solved with this piece of code:
// jQuery
wp_enqueue_script('jquery');
// This will enqueue the Media Uploader script
wp_enqueue_media();
?>
<div>
<label for="image_url">Image</label>
<input type="text" name="image_url" id="image_url" class="regular-text">
<input type="button" name="upload-btn" id="upload-btn" class="button-secondary" value="Upload Image">
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#upload-btn').click(function(e) {
e.preventDefault();
var image = wp.media({
title: 'Upload Image',
// mutiple: 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();
// We convert uploaded_image to a JSON object to make accessing it easier
// Output to the console uploaded_image
console.log(uploaded_image);
var image_url = uploaded_image.toJSON().url;
// Let's assign the url value to the input field
$('#image_url').val(image_url);
});
});
});
</script>
From: http://stackoverflow.com/questions/17668899/how-to-add-the-media-uploader-in-wordpress-plugin
