Home Forums ACF PRO Acf Pro Front end image upload !


Acf Pro Front end image upload !

  • 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>
    							<img class="acf-image-image" src="" alt="">
    						<div class="no-image">
    							<p><input type="button" class="button add-image" value="<?php esc_html_e( 'Select Image', 'king' ); ?>"></p>

    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>
    	<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>

    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, 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, there is an example of this here

    Create an acf/update_value filter, there is a solution for in this topic

    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.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.