Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Evan Fraser
Evan Fraser
6,789 Points
Posted by Evan Fraser
Evan Fraser
6,789 Points

Adding custom data to image in wordpress "Add Media" dialog??

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

It works but once I add an image and go to add it again it automatically enters the html again without resetting it to wordpress defaults.

So it always outputs 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, I posted this to the php subject but it's more wordpress core stuff so figured id post it there. I have published this to many forums without answer it would be awesome to get this fixed. Thanks

<?php>
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();
<?>

1 Answer

Evan Fraser
Evan Fraser
6,789 Points
Evan Fraser
Evan Fraser
6,789 Points

Waaaaaaaaait.... I think I found the fix, but I still want to know if it's conventional. compare this with the very last function in my question above: media_send_to_editor

<?php>
function media_send_to_editor( $html, $id ) {
        //only add class if the checkbox was checked
        $attachment_title = get_the_title($id);
        if ( 1 == (int)get_post_meta($id, 'add_class', true) ){
            //change this to whatever you want
            $seo_data_to_add = ' itemprop="image"';

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

            $title = ' title="'.$attachment_title .' by '. get_option('ews_opt_branding') .'"';
            $html = str_replace('<img', '<img'.$title.''.$seo_data_to_add.'', $html);
        }
        else {$html = str_replace('<img', '<img title="'.$attachment_title.'"', $html);}
        delete_post_meta($id, 'add_class', true);
        return $html;
    }
<?>