Site icon Hip-Hop Website Design and Development

Media Attachment Customized Meta Fields not saving in Media Uploader when utilizing jQuery UI Autocomplete

I’m making an attempt to put in writing a plugin that provides a customized meta subject to picture attachments to provide pictures a credit score subject. I exploit the ‘attachment_fields_to_edit’ and ‘attachment_fields_to_save’ filters.

perform hrld_attachment_field_credit( $form_fields, $submit ) {
 $worth = get_post_meta( $post->ID, '_hrld_media_credit', true );
 $form_fields['hrld_media_credit']['label'] = 'Media Credit score';
 $form_fields['hrld_media_credit']['input'] = 'html';
 $form_fields['hrld_media_credit']['html'] = '<enter kind="textual content" class="textual content hrld_media_credit_input" id="attachments-'.$post->ID.'-hrld_media_credit" title="attachments['.$post->ID.'][hrld_media_credit]" worth="'.$worth.'">';
 $form_fields['hrld_media_credit']['helps'] = 'If photograph was taken by a Herald photographer, use their username. e.g. "Bucky Badger" It's best to write "bbadger".';

return $form_fields;
}

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

The above provides the enter subject.

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

return $submit;
}

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

And the above triggers saving the meta knowledge.

The difficulty arises when modifying a submit and also you click on the “Add Media” button so as to add a picture. When altering meta knowledge on a picture inside this media uploader body, comparable to caption or alt textual content, wordpress will auto save the information when the textual content subject will lose focus. My meta knowledge additionally saves equally with no challenge. I added a filter to ‘image_send_to_editor’ to routinely add the credit score subject inside a caption tag if the credit score knowledge is current.

perform hrld_media_credit_send_editor($html, $id, $caption, $title, $align, $url, $measurement){
    $html = get_image_tag($id, '', $title, $align, $measurement);
    $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">Picture 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, $measurement);
            $html .= $html_text;
        } else{
            $attach_attributes = wp_get_attachment_image_src($id, $isze);
            $html = '.'"]';
            $html .= get_image_tag($id, '', $title, $align, $measurement);
            $html .= $html_text;
            $html .= '';
        }
    }
return  $html;
}
add_filter( 'image_send_to_editor', 'hrld_media_credit_send_editor', 10, 7 );

Once more to this point issues work as anticipated. The performance I would like is to make use of jQuery UI Autocomplete to counsel person logins because the person varieties, however I wish to preserve the enter subject free type textual content as a result of a picture credit score doesn’t must be a person in wordpress. I exploit this javascript so as to add the autocomplete perform to every subject.

jQuery("physique").on("keydown", ".hrld_media_credit_input", perform(){
var hrld_media_input = jQuery(this);
hrld_media_input.autocomplete({
    supply: hrld_user_tags,
    choose: perform (occasion, ui) {
        console.log(hrld_media_input);
        hrld_media_input.attr("worth", ui.merchandise.worth);
    }  
});
});

The rationale i exploit .on() is that when utilizing the “Add Media” button, it creates the enter fields dynamically, so with out the .on(), it should solely apply the autocomplete on web page load, which these enter fields wont have existed but.(I’ve omitted a little bit of php code that queues this script in addition to creates the hrld_user_tags variable, which is simply an array of usernames).

Now, when utilizing autocomplete to pick out a advised username, clicking on that title to populate the sector, wordpress is not going to auto save that meta knowledge. If I hit insert to submit, it is not going to be put right into a caption tag, as if I by no means entered a username. Nonetheless, If I kind into the sector and see that “instance” is a suggestion, if as a substitute of clicking the suggestion to autocomplete the sector, i end typing out “instance” by hand, then press “Insert to Publish,” it saves the metadata “instance” and can insert it right into a caption tag.

I’ve looked for hours for solutions to this drawback, appeared into wp-includes and wp-admin core information looking for features to use filters or add actions to set off saving my knowledge, however can not determine this out.

Any assist or insights to this drawback will probably be drastically appreciated.