Home › Forums › General Issues › Display ACF Media Attachments (image) field over the image › Reply To: Display ACF Media Attachments (image) field over the image
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
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.