I created a field on Media Attachments (images):
“CommunityPhoto” (true/false) selectable
Essentially sometimes we receive photos submitted by the community, and whenever we use them on our site (mostly product gallery page, but can also show up on blog) I want to append a text to the image “This photo was submitted by the community”, in case the field “CommunityPhoto” of that photo is true
However as multiple images like this might appear on the same page, I am not being able to successfully display that text right on top of the corresponding images that are “CommunityPhotos”
The further development intent of this is to add an extra text field to the community images “CommunityPhotosSource” that allows us to write the name and give credit to the user/source that submitted the photo such as “This photo was submitted by John”. I believe if I can get the first part to work out (How to display the text on the community images) I will be able to figure out the rest and display this user name field.
Thank you very much in advance for the attention and advice, Much love!
You need to get the ID of the image, the code you’re using to do that would be helpful. With that ID you us it to get the field from the image
$value = get_field('field_name', $attachment_id);
how you display text over an image is a matter of the HTML and CSS you use.
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
