Creating custom setting in add media popup

  • Resolved ewsrobert

    (@ewsrobert)


    7 years, 6 months ago

    I am creating a checkbox in the Add Media popup screen to add HTML to the $html output when inserting an image.

    This is working fine. However, once I have added an image with the checkbox selected. If I try and add it again, and deselect the checkbox, it won’t register or save the change.

    Thus always outputting the modified image instead of reverting back to WP default once unchecked.

    Plus the check mark after I have selected it and inserted to page will stay pre-selected every time I select that image.

    How do I make the unselect checkbox function as would be expected?

    Much appreciate the help. Thanks

    class media_uploader_cb{

    function __construct(){
        // attach our function to the correct hook
        add_filter('attachment_fields_to_edit',  array( $this, 'attachment_fields_to_edit' ), 10, 2);
        //save attachment field
        add_filter( 'attachment_fields_to_save', array( $this, 'attachment_fields_to_save' ), 10, 2);
        //add custom css class
        add_filter( 'media_send_to_editor',      array( $this, 'media_send_to_editor' ), 10, 2 );
    }

    /**
     * Adding our custom checkbox field to the $form_fields array
     * 
     * @param array $form_fields
     * @param object $post
     * @return array
     */
    function attachment_fields_to_edit($form_fields, $post) {
        $form_fields['add_class']['label'] = __("Add SEO Data");
        $form_fields['add_class']['input'] = 'html';
        $form_fields['add_class']['html'] = '<input type="checkbox" value="1" name="attachments['.$post->ID.'][add_class]" id="attachments['.$post->ID.'][add_class]" '.checked( 1, get_post_meta($post->ID, 'add_class', true), false ).'/>';
        return $form_fields;
    }

    /**
     * Saving our custom checkbox field
     * @param array $post
     * @param array $attachment
     * @return array
     */
    function attachment_fields_to_save($post, $attachment) {

        if( isset($attachment['add_class']) ){
            update_post_meta($post['ID'], 'add_class', $attachment['add_class']);
        }
        return $post;
    }

    /**
     * Adding our custom css class based on checkbox field 
     * 
     * @param string  $html
     * @param int $id
     * @return string
     */
    function media_send_to_editor( $html, $id ) {
        //only add class if the checkbox was checked
        if ( 1 == (int)get_post_meta($id, 'add_class', true) ){
            //change this to whatever you want
            $seo_data_to_add = 'custom="HTML Output Here""';

            // THIS SHOULD BE THE CHECKBOX
            get_post_meta($id, 'add_class', true);

            $attachment_title = get_the_title($id);
            $title = 'title="'.$attachment_title .' by '. get_option('ews_opt_branding') .'"';
            $html = str_replace('<img', '<img '.$title.' '.$seo_data_to_add.'', $html);
        }
        return $html;
    }

}

new media_uploader_cb();

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    Adding another instance of the same image should work correctly AFAIK, however you are now using one attachment meta data value for two different images. The last saved value will not affect the other instance because the related class occurs in post content, which is not updated.

    I think where the problem lies would be in trying to edit an image already inserted. In this case, it’s all handled with jQuery and none of the PHP hooks ever fire, so the altered HTML and saved value will not reflect the current checkbox status. You need to add your own listener to the update button that grabs the current check box status and alters the related HTML in the editor textarea. There’s a potential race condition here that needs to be addressed. Is your code altering the HTML before the WP script does? Somehow, that cannot be allowed. You determine the proper HTML through the selection coordinate properties of the editor textarea.

    In a similar vein, the checkbox state is not saved because the “attachment_fields_to_save” action does not fire. Other native image values are sent and saved through the regular heartbeat Ajax action. Check your network traffic to see if your checkbox checked state is part of the heartbeat data. If so, you can hook the “wp_ajax_heartbeat” action and save the checked value if it exists. If it does not exist, we cannot know if it is because it is unchecked or because it was not changed. Checkboxes do not work well in heartbeat data. It’s probably best to save the state through your own Ajax request. If you do this first, the HTML should have already been updated by native code, maybe avoiding the race condition.

    Thread Starter ewsrobert

    (@ewsrobert)

    @bcworkz, I am afraid this is far too technical of an answer for me. The code above was provided in a post ( https://generatewp.com/snippet/rGEEo46/ ) on how to add classes to images and I have changed it to alter the html output as I needed. Nothing else was added or used but the supplied code above.

    Is there something in the code I can change to get better or appropriate results for what I am after? Specific code alterations or additions to make it behave as expected?

    So a clear example is: If I add a media item without checking that box, it inputs as normally WP would.

    If I check the box, it outputs the modified version as I want it.

    However, if I have checked the box and inserted image, then go back to add that image elsewhere and UNcheck the box, it still outputs the modified version, not the original WP output.

    Everything works fine EXCEPT adding the image after it has been entered in its altered state. Then that image always gets input as the modified version and when I open up the Add Media popup it is still checked after I had unchecked it last time AND got the wrong html output(as I expected it to be).

    So it does what I want with exception of it undoing what I want. I sadly don’t know PHP well enough to know how to trouble shoot it on my own.

    Basically what I want is it to go back to default after inserting once, or, if I uncheck the box, after checking it and inserting it, it goes back to default. Either would be fine.

    I greatly appreciate your response though as in other groups/forums, you are the first person in about a week to even respond at all.

    Thank you!!!

    Thread Starter ewsrobert

    (@ewsrobert)

    Got some assistance from another forum in addition to this. It spurred some brainstorming at the office and we came up with a solution. Not sure if this is the best way to resolve it but it is working as expected. I added this code:
    delete_post_meta($id, 'add_class', true);
    just above the:
    return $html;
    at the end of the last function and everything is behaving properly. If there is a better solution, please let me know.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Creating custom setting in add media popup’ is closed to new replies.

Tags