adding a custom field to media attachment

• wk

• October 12, 2018 at 6:43 am

Hi there.

I’m trying to add a custom field to media attachment with this tutorial:
https://www.advancedcustomfields.com/resources/adding-fields-media-attachments/

I want to add custom image url and put it to data-attr in content, and then get it from api like:

In custom field everything is perfect but I can’t see it in api.

Could you help me please?

• djcottrell

• October 12, 2018 at 1:05 pm

I have not tested this all out but it should work for you.

With a custom field image

<?php
$image = get_field('image');
$custom_image_url = get_field('customURL', $image['ID']);?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" data-attr="<?php echo $custom_image_url;?>" />

With a featured image

<?php
$url = get_the_post_thumbnail_url( $post->ID );
$thumbnail_id = get_post_thumbnail_id( $post->ID );
$custom_image_url = get_field('customURL', $thumbnail_id);
$alt = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true);
?>
<img src="<?php echo $url; ?>" alt="<?php echo $alt;?>" data-attr="<?php echo $custom_image_url;?>" />

• wk

• October 12, 2018 at 3:58 pm

Thanks for reply.

Where should I put it? When I put it to function.php I see it in api… but on the top, so I’m sure I’m wrong 😉

• djcottrell

• October 12, 2018 at 4:59 pm

I thought you were including it in a template not looking for a filter.

If you are using an ACF image field on your page to include the image or including the image in your content you will have to build it into your template or create a short code.

If you are using WordPress’ Featured Image system you can include the following and changing your custom field accordingly.

add_filter('post_thumbnail_html', 'my_thumbnail_filter_method', 10, 5 );
function my_thumbnail_filter_method($html, $post->ID, $post_thumbnail_id, $size, $attr) {
    $id = get_post_thumbnail_id();
    $src = wp_get_attachment_image_src($id, $size); 
    $alt = get_the_title($id);
    $class = $attr['class'];
	$attr = get_field('CUSTOM FIELD NAME',$post->ID);
    $html = '<img src="' . $src[0] . '" alt="' . $alt . '" class="' . $class . '" data-attr="" />';
    return $html;
}

• wk

• October 13, 2018 at 4:11 am

My bad luck. I don’t use WordPress’ Featured Image system. I want to put it like simple image to post content – like pressing a “add media” button and choosing right image.

I am very appreciate for help. Thanks a lot.

• wk

• October 14, 2018 at 5:43 pm

I was based on your reply and create something like that.

function filter_image_send_to_editor($html, $id, $caption, $title, $align, $url, $size, $alt) {
  $attr = get_field('CUSTOM FIELD NAME', $id);
  
  if ($attr !== NULL) {
    $html = str_replace('<img ', '<img data-attr="'. $attr .'" ', $html);
  }
  return $html;
}
add_filter('image_send_to_editor', 'filter_image_send_to_editor', 10, 8);

This solve my problem. Thanks again for help 🙂