Support

Account

Register Login

Home › Forums › ACF PRO › Custom HTML in an Edit Page

Solved

Custom HTML in an Edit Page

  • I am trying to see if it is possible to add a custom HTML area to a post edit page or in a settings edit page. This HTML area would need to interact/respond to custom fields on the page as well.

    For instance, a file field would have an upload button to upload an image and then the image would be loaded into the HTML area.

    Any suggestions or directions on what to look into?

  • Is there any reason why a WYSIWYG field will not work for what you want?

  • Good suggestion, but I don’t want the entire HTML area to be editable and the HTML content would also need to have some additional JavaScript functionality that I don’t think can be added in with the WYSIWYG field. Make sense?

  • That would be beyond what can be done with ACF. You’d need to build a new field type using the ACF WYSIWYG editor for a base https://www.advancedcustomfields.com/resources/creating-a-new-field-type/ and then create custom JavaScript for that field type that would do what you want done https://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/. Can it be done, probably, but not easily.

    If you don’t want people to edit the field I would actually use a message field where the content of that message field is built using JavaScript that reads the values of the other fields as well as being updated when a change is made to one of the other fields. Still complicated but I think more likely to happen. If you’re interested in this I can point you to some JS that adds custom actions to different types of fields to get you started.

  • Interesting… I would be interested in taking a look at that JS and seeing what I can get working. I’ll try to post back here with progress, if any 🙂

    Thanks

  • So this is part of a project that I’m currently working on where I needed changes to ACF fields to do a lot more than what it normally does. It won’t give you exactly what you need but the ideas are all the same.

    You’ll need to create a ready function for the message field that will get the values from the other fields and show the changes. Really, in your case you’re talking about having one main function that modifies the field where things are shown and calling it whenever a change is made.

    You’ll probably also want some type of hidden field as well if you want to store the results.

    https://github.com/Hube2/blunt-parametric-search/blob/master/admin/js/admin.js

  • Thanks for the help, I will check out the link to the .js Can I contact you if I have a question or two?

    So far what I have working is an image field loading an image, then in a custom meta box I have a “refresh” button that I can click to load the image into the custom HTML. I am hoping I can do away with the refresh button with what you are sharing.

  • I’m here if you have any further questions, just reply to this thread. I’m sure this discussion will be valuable for anyone that’s looking to create custom JS functionality for ACF.

  • I am getting somewhere – now what I am struggling with is getting a value via PHP of an acf input field. The $_GET method doesn’t seem to be working, not sure if it is because the name is actually an array element… This is what I am trying to get working –
    <?php update_field('image_selection', $_GET['acf[field_571a8e724a917]']); ?>

    The get should be returning a number.

  • When are you trying to get this value in PHP? After the post is submitted?

    Most of what you’d want to do I think would be done with JavaScript.

    ACF uses $_POST. If you’re trying to update values after submission then see the acf/save_post hook https://www.advancedcustomfields.com/resources/acfsave_post/

  • Here are the steps:
    1. select post to edit
    2. select image field and select image
    3. once selected, on the change event (from your example – thanks!) update a text field with the id of the image
    4. then get this id value via PHP (my code that doesn’t work) so that I can access the URL of the newly selected image.

    You are right I can probably do it all with javascript, just felt like it would be cleaner this way.

    I am no PHP expert so not sure if I can really call a PHP script multiple times or if PHP is really only called once.

  • I’m still not sure when your getting the image or what you’re doing with it. I didn’t see anything about submitting the post so I am assuming that you want to get the image url and add that image to the text field. PHP will only do part of this. You’ll need to do an AJAX request, that request will call a function that is run in PHP to get the URL and return it. Since ACF is going to display that image this AJAX request is already done by ACF, but I don’t know enough about how this works in ACF to tell you how to get that value. It would probably take me several hours of trial and error to figure that out.

  • I am trying to do all of this without needing to hit the update button, but it seems like that might not be possible, or at least take a decent amount of time to figure out. I have already done quite a bit of trial and error with not much luck.

  • Wow…. what a whirlwind – finally getting somewhere. Your reply here https://support.advancedcustomfields.com/forums/topic/use-update_field-with-ajax/ sent me in the right direction.

  • Sorry I didn’t get back to you sooner, glad you found something to help you on your way. Yes, the other day I was trying to figure something else out https://support.advancedcustomfields.com/forums/topic/datepicker-ids/#post-37600 and that bit of code took me more time than I’d like to admit. Adding to the ACF JS and manipulating fields base on other fields is right on the edge of my comfort zone. It can be quite challenging.

  • Okay – got this one more or less solved… Here’s what I have going on:
    1. Add a image selection field
    2. Create a custom meta box with an image with an id of “prodimage”
    3. Use @hube2 script to tie into the change of the image selection field
    4. Use an ajax call from this stackoverflow link: http://wordpress.stackexchange.com/questions/101797/update-option-in-javascript in the change event and then call the update_field in the success as shown
    5. send back the URL of the image to the js json.success and update the image with that new URL

    Here are a few snippets:

    First the edited code from @hube2 

    _para_image_change: function(e) {
				console.log('image file change');
				
				newAttachID = jQuery('.acf-field-52ebc2ab15adb input').val();
				newAttachID = newAttachID.toString();
				
				console.log("newAttachID="+newAttachID);
				//jQuery('#acf-field_571a8e724a917').val(newAttachID);
				//$('#acf-field_571a8e724a917').trigger('change');
				
				$.ajax({
					type:   'POST',
					url:    'http://example.com/wp-admin/admin-ajax.php',
					data:   {
						action: 'hit-bottom',
						imageID: newAttachID, // your option variable
						postNumID: postID // your option variable
					},
					dataType: 'json'
					
					}).done(function( json ) {
						console.log( "Ajax call succeeded, let's see what the response was." );
						if( json.success ) {
							console.log("Function executed successfully and returned: "+json.message);
							//update the image src in the metabox
							jQuery("#prodimage").attr('src',json.message);
							
						} else if( !json.success ) {
							console.log( "Function failed and returned: " + json.message );
						}
					}).fail(function() {
						console.log( "The Ajax call itself failed." );
					}).always(function() {
						console.log( "This message is always displayed, whether the call failed or succeeded." );
				});

			},

    And next the php/ajax handoff:

    add_action( 'wp_ajax_hit-bottom', 'wpse_hit_bottom' );
add_action( 'wp_ajax_nopriv_hit-bottom', 'wpse_hit_bottom' );

function wpse_hit_bottom() {
    $imageID = $_POST['imageID'];
	$postNumID = $_POST['postNumID'];
	
    if( !isset( $imageID ) || $imageID == '' || !isset( $postNumID ) || $postNumID == ''  ) {
        //insert fallback vars
		die(
            json_encode(
                array(
                    'success' => false,
                    'message' => 'Missing required information.'
                )
            )
        );
    }
	update_field('field_571a8e724a917', $imageID, $postNumID);
	$full = wp_get_attachment_image_src($imageID,'full');
	$fullstring = $full[0];
    
	die(
        json_encode(
            array(
                'success' => true,
                'message' => $fullstring
            )
        )
    );
}
Viewing 16 posts - 1 through 16 (of 16 total)

The topic ‘Custom HTML in an Edit Page’ is closed to new replies.