Reply To: Display ACF Media Attachments (image) field over the image

• jcmatoskx

• October 16, 2020 at 12:49 am

So far I have managed to get the closest to what I need with this:

<?php

$phototext = get_field('communityphototext', get_post_thumbnail_id());
$js_out = json_encode($phototext);

?>
<script>
    var phototext = <?php echo $js_out; ?>;

var communityImages = document.querySelectorAll('img');
if( communityImages.length > 0 ){
  communityImages.forEach(function(image){
    image.outerHTML = '<div class="community-image">'+ phototext + image.outerHTML +'</div>';
  });
}
    
</script>

I use PHP to get the ACF field and then send the variable to Javascript,
I then use JS to programmatically add the ACF field to images.
I then style it with CSS (not shown here)

The problems I am facing:
– I am not fluent in either PHP of JS and I am still learning, so this is as far as I have gotten.
– This code is applying/showing the returned ACF value to all images that appear on the page, and not just to images that have the ACF field ‘communityphototext’ filled with some text or the field “CommunityPhoto” set as true.
– The field I get using get_field('communityphototext', get_post_thumbnail_id()); seems to be the field of the main post image, so then it attributes the ACF value of the main post image to all images

$value = get_field('field_name', $attachment_id);
doesn’t seem to work to get an image ID, in php it returns nothing and when I pass it to JS it returns null.

Thank you once again for the attention and advice, It has been quite a brain burner for me but I feel like I have never been so close to achieving this