0

I am trying to write a plugin that adds a custom meta field to image attachments to give images a credit field. I use the 'attachment_fields_to_edit' and 'attachment_fields_to_save' filters.

function hrld_attachment_field_credit( $form_fields, $post ) {
 $value = get_post_meta( $post->ID, '_hrld_media_credit', true );
 $form_fields['hrld_media_credit']['label'] = 'Media Credit';
 $form_fields['hrld_media_credit']['input'] = 'html';
 $form_fields['hrld_media_credit']['html'] = '<input type="text" class="text hrld_media_credit_input" id="attachments-'.$post->ID.'-hrld_media_credit" name="attachments['.$post->ID.'][hrld_media_credit]" value="'.$value.'">';
 $form_fields['hrld_media_credit']['helps'] = 'If photo was taken by a Herald photographer, use their username. e.g. "Bucky Badger" You should write "bbadger".';

return $form_fields;
}

add_filter( 'attachment_fields_to_edit', 'hrld_attachment_field_credit', 10, 2 );

The above adds the input field.

function hrld_attachment_field_credit_save( $post, $attachment ) {
if( isset( $attachment['hrld_media_credit'] ) )
    update_post_meta( $post['ID'], '_hrld_media_credit', $attachment['hrld_media_credit'] );

return $post;
}

add_filter( 'attachment_fields_to_save', 'hrld_attachment_field_credit_save', 10, 2 );

And the above triggers saving the meta data.

The issue arises when editing a post and you click the "Add Media" button to add an image. When changing meta data on an image within this media uploader frame, such as caption or alt text, wordpress will auto save the data when the text field will lose focus. My meta data also saves similarly with no issue. I added a filter to 'image_send_to_editor' to automatically add the credit field inside a caption tag if the credit data is present.

function hrld_media_credit_send_editor($html, $id, $caption, $title, $align, $url, $size){
    $html = get_image_tag($id, '', $title, $align, $size);
    $hrld_credit = get_hrld_media_credit($id);
    if(isset($hrld_credit) && !empty($hrld_credit)){
        if(get_user_by('login', $hrld_credit)){
            $hrld_user = get_user_by('login', $hrld_credit);
            $html_text = '<span class="hrld-media-credit">Photo by '.$hrld_user->display_name.'.</span>';
        } else{
            $html_text = '<span class="hrld-media-credit">'.$hrld_credit.'.</span>';
        }
        if($caption){
            $html = get_image_tag($id, '', $title, $align, $size);
            $html .= $html_text;
        } else{
            $attach_attributes = wp_get_attachment_image_src($id, $isze);
            $html = '[caption id="attachment_'.$id.'" align="'.$align.'" width="'.$attach_attributes[1].'"]';
            $html .= get_image_tag($id, '', $title, $align, $size);
            $html .= $html_text;
            $html .= '[/caption]';
        }
    }
return  $html;
}
add_filter( 'image_send_to_editor', 'hrld_media_credit_send_editor', 10, 7 );

Again so far things work as expected. The functionality I want is to use jQuery UI Autocomplete to suggest user logins as the user types, but I want to keep the input field free form text because an image credit does not have to be a user in wordpress. I use this javascript to add the autocomplete function to each field.

jQuery("body").on("keydown", ".hrld_media_credit_input", function(){
var hrld_media_input = jQuery(this);
hrld_media_input.autocomplete({
    source: hrld_user_tags,
    select: function (event, ui) {
        console.log(hrld_media_input);
        hrld_media_input.attr("value", ui.item.value);
    }  
});
});

The reason i use .on() is that when using the "Add Media" button, it creates the input fields dynamically, so without the .on(), it will only apply the autocomplete on page load, which those input fields wont have existed yet.(I have omitted a bit of php code that queues this script as well as creates the hrld_user_tags variable, which is just an array of usernames).

Now, when using autocomplete to select a suggested username, clicking on that name to populate the field, wordpress will not auto save that meta data. If I hit insert to post, it will not be put into a caption tag, as if I never entered a username. However, If I type into the field and see that "example" is a suggestion, if instead of clicking the suggestion to autocomplete the field, i finish typing out "example" by hand, then press "Insert to Post," it saves the metadata "example" and will insert it into a caption tag.

I have searched for hours for answers to this problem, looked into wp-includes and wp-admin core files trying to find functions to apply filters or add actions to trigger saving my data, but cannot figure this out.

Any help or insights to this problem will be greatly appreciated.

0

You have to trigger a change event on your field, i.e. hrld_media_input.attr("value", ui.item.value).change();. This will ensure that attachment_fields_to_save will get triggered.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.