when I use this code in front-end page with free Acf plugin it’s working good ;
<div class="acf-image-uploader king-image-upload" data-preview_size="large" data-library="uploadedTo">
<input class="acf-image-value" type="text" name="featured_image" required />
<div class="has-image">
<div class="hover">
<a class="acf-button-delete ir" href="#"><i class="fa fa-trash fa-lg" aria-hidden="true"></i></a>
<a class="acf-button-edit ir" href="#"><i class="fa fa-pencil-square fa-lg" aria-hidden="true"></i></a>
</div>
<img class="acf-image-image" src="" alt="">
</div>
<div class="no-image">
<p><input type="button" class="button add-image" value="<?php esc_html_e( 'Select Image', 'king' ); ?>"></p>
</div>
</div>
but When I use with Acf Pro image upload popup not appearing ! I also added acf_form_head(); in front end page but no luck !
It looks like you’ve copied the HTML code that ACF uses for the image field to create your own image field. ACF4 and ACF5 are built differently and use different HTML. More than likely something in this difference is causing your field not to work.
Thanks John for answer I also tried Acf 5 html code, but it’s not wroking too;
<div class="acf-input">
<div class="acf-image-uploader acf-cf" data-preview_size="thumbnail" data-library="all" data-mime_types="" data-uploader="wp">
<input name="featured_image" value="" type="hidden"> <div class="view show-if-value acf-soh" style="max-width: 150px">
<img data-name="image" src="" alt="">
<ul class="acf-hl acf-soh-target">
<li><a class="acf-icon -pencil dark" data-name="edit" href="#" title="Edit"></a></li>
<li><a class="acf-icon -cancel dark" data-name="remove" href="#" title="Remove"></a></li>
</ul>
</div>
<div class="view hide-if-value">
<p style="margin:0;">No image selected <a data-name="add" class="acf-button button" href="#">Add Image</a></p>
</div>
</div>
</div>
can not open the image upload popup , I see this error ;
Uncaught TypeError: Cannot read property 'query' of undefined
I can’t say. Is there any reason why your not using acf_form() for this?
because I am using this to upload featured image , and I need to add name=”featured_image” input name
This can be done in other ways.
Create an acf/pre_save_post filter https://www.advancedcustomfields.com/resources/acf-pre_save_post/, and move the image to the post thumbnail. There is an example of this here, search for “_thumbnail_id” on that page
Create an acf/save_post filter https://www.advancedcustomfields.com/resources/acf-save_post/, there is an example of this here https://itsmereal.com/advanced-custom-fields-front-end/
Create an acf/update_value filter https://www.advancedcustomfields.com/resources/acfupdate_value/, there is a solution for in this topic https://support.advancedcustomfields.com/forums/topic/set-image-as-featured-image/
But the easiest method, that most people overlook, is to create an image field with the field name of “_thumbnail_id”. Doing this ACF will just store the image in the field it needs to be stored in and in the same format. No extra work required for this one.
