Detect image render/load within flexible content repeater

• shaun

• January 5, 2024 at 5:56 pm

Using acf/render_field/type=image, I’m echoing a script and appending some elements. The script is running as expected on top-level image fields, but while the elements always append, the script fails to run on dynamically loaded images within a flexible content repeater.

here’s the gist, getting an image within a field key—
add_action('acf/render_field/type=image', 'acf_image_pos');
function acf_image_pos($field){
$fieldKey = $field['key'];
echo '<script>
let img = document.querySelector("[data-key=\"'.$fieldKey.'\"]").getElementsByTagName("img");
console.log("Image: ", img[0]);
</script>';
}

Looking at the img[0] array, img.src is set as the current post.php url oddly, and the actual image URL isn’t stored anywhere else.

I tried running the functions within image.addEventListener("load") and image.onload, but that isn’t helping anything.

What is the hook for rendering of the image itself, not just the Image field?

• John Huebner

• January 6, 2024 at 10:39 am

I can’t tell you exactly what your issue is but it could be a couple of things.

The first is that in a repeater you’re likely to be getting multiple images and not just one image.

The other is that the DOM is being updated and JS has a difficult time finding elements that have just been added.

Another might be that the script is not actually running because JS added dynamically to the DOM added when the repeater row is added will not automatically be run.

Instead of adding the script using the render_field hook I would suggest adding an admin JS file as explained here https://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/

Then look at the ACF JS API https://www.advancedcustomfields.com/resources/javascript-api/. In particular the “ready” and “append” actions, especially the append action because this happens when a repeater is added.

I would also use jQuery, because it is loaded anyway and used by ACF.

targeting actions outside of ACF on a repeater sub field, for example an image load action, needs to start with the document object because the img object may not exist in the dom on page load.

// in your admin JS file
(function($){
  $(document).on('load', '[data-key="FIELD_KEY"] img', function(e) {
    var img_el = $(e.target);
    console.log(img_el);
  });
})(jQuery);

Hopefully something in there helps you.

• shaun

• January 8, 2024 at 4:35 pm

this is very helpful, thank you for the speedy response John! i believe it’s the image fields each having the same field_key that is my issue here, primarily.

for posterity, what i’m doing here is running a js script that scans the image for faces and applies a value to a custom field if one doesn’t exist.

cheers