CODEWITHSUNDEEP
wordpressadvanced-custom-fieldsacfpro
Kasper Gantzhorn
Kasper Gantzhorn

Reputation: 201

Using the Javascript API for Advanced Custom Fields

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?

Upvotes: 0

Views: 3218

Answers (1)

Kasper Gantzhorn
Kasper Gantzhorn

Reputation: 201

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");

Upvotes: 1

Related Questions