Using the Javascript API for Advanced Custom Fields

Question

I'm creating a new field type with the Adavanced Custom Fields, which enables the user to choose an image from the Image Library and define a point (X,Y coordinates) in this image. After defining the coordinates, the user can place an overlay video in this point. But my question is, how do I Get and Set an X and Y value in the database with the javascript API?

I think you should save an JSON array with the file identifier, x position and y position. — Kaperto
– Kaperto, Commented Dec 8, 2019 at 0:21
@ObmerkKronen yes, I've made the JS code for defining the X/Y coordinates and now my question is, how do I save them to the database ... and how do I retrieve them when accessing the field again. — Kasper Gantzhorn
– Kasper Gantzhorn, Commented Dec 8, 2019 at 8:37
well, if you use ACF tan you just populate the fields, it will be saved with all the other data and will be retrieved with field name.. — Obmerk Kronen
– Obmerk Kronen, Commented Dec 8, 2019 at 10:18
@ObmerkKronen and I tried acf.set("posX", "123"); It works fine, but it does not save it in the database. — Kasper Gantzhorn
– Kasper Gantzhorn, Commented Dec 8, 2019 at 16:12

Kasper Gantzhorn · Accepted Answer · 2019-12-09 07:55:26Z

1

Okay, so @ObmerKronen suggested that I posted some code to demostrate what I'm trying to do ... makes sense:)

I've added the image in the new ACF field php file (class-tas-v5.php)

$imgID = get_field('image_url');
$img = wp_get_attachment_image( $imgID, "full", "", array( "class" => "overlay-point-img" ) );
echo '<div class="overlay-point-img-container">' . $img . '</div>';

Then I'm defining the X and Y coordinates in the input.js file

function initialize_field($field) {

var overlay_point_container = $field.context;
var img = $(overlay_point_container).find(".overlay-point-img-container");
var circle = '<div class="overlay-point-circle"></div>';
img.prepend(circle);

$(img).on("mousemove", function(event) {
  var relX = event.pageX - $(this).offset().left;
  var relY = event.pageY - $(this).offset().top;

  $(circle).css({ left: relX, top: relY });
});

// Tried these two functions, but none of the values are saved in the database
// acf.set("posX", "123"); 
// $field.val("posX");
}

I've tried to save it with dummy data like this

acf.set("posX", "123"); 
$field.val("posX");

answered Dec 9, 2019 at 7:55

Kasper Gantzhorn

2015 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pete Harrison Over a year ago

Did you resolve this? I'm trying to achieve something like this to document people in an image.

Collectives™ on Stack Overflow

Using the Javascript API for Advanced Custom Fields

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related