Update caption for metabox gallery images

Question

Just wondering how to make the caption on my metabox gallery images updatable. I have the caption on a textarea so it can be easily updated. I can change the contents of this textarea, cant seem to be able to update it on save post though.

 function mytheme_show_post_gallery_metabox( $post ) {

    wp_nonce_field( 'mytheme_post_gallery_metabox', '_mytheme_post_gallery_metabox' );
    $gallery = get_post_meta( $post->ID, '_mytheme_post_gallery', true );

    ?>
    <a class="gallery-add button media-button button-primary button-large media-button-select" href="#" data-uploader-title="<?php _e( 'Add gallery images', 'mytheme' ); ?>" data-uploader-button-text="<?php _e( 'Add gallery images', 'mytheme' ); ?>"><?php _e( 'Add gallery images', 'mytheme' ); ?></a>
    <table>
      <tr>
        <td>
          <ul id="gallery-metabox-list">
            <?php if ( $gallery ) : ?>
              <?php foreach ( $gallery as $key => $value ) : $image = wp_get_attachment_image_src( $value ); ?>
                <li>
                  <input type="hidden" name="_mytheme_post_gallery[<?php echo $key; ?>]" value="<?php echo $value; ?>">
                  <img class="image-preview" src="<?php echo $image[0]; ?>">
                  <a class="change-image" href="#"><?php _e( 'Change | ', 'mytheme' ); ?></a>
                  <a class="remove-image" href="#"><?php _e( 'Remove', 'mytheme' ); ?></a>
                </li>
              <?php endforeach; ?>
            <?php endif; ?>
          </ul>
        </td>
     </tr>
    </table>
    <?php
    }

The following code updates the image. How can I tweak it to also update the caption when the post is saved/updated?

function mytheme_save_image_gallery_metabox( $post_id ) {

  if ( !isset($_POST['_mytheme_post_gallery'] ) || !wp_verify_nonce( $_POST['_mytheme_post_gallery_metabox'], 'mytheme_post_gallery_metabox' ) ) return;
  if ( !current_user_can('edit_post', $post_id ) ) return;
  if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
  if( isset( $_POST['_mytheme_post_gallery'] ) ) {
    update_post_meta( $post_id, '_mytheme_post_gallery', wp_kses( $_POST['_mytheme_post_gallery'] ,'') );
  } else {
    delete_post_meta( $post_id, '_mytheme_post_gallery' );
  }
}
add_action( 'save_post', 'mytheme_save_image_gallery_metabox' );

Answer 1

I had to generate a bunch of extra code because I don't think you've posted it all. In this case I don't have scripts to add galleries so I tested it by pulling gallery data inside the post to populate the meta box. Each caption text field is generated per image then updated on post save.

This shows the meta box and each image in the gallery with caption and two buttons per. Changing the caption text will set the image's post_excerpt on save.

function mytheme_show_post_gallery_metabox($post) {

    wp_nonce_field('mytheme_post_gallery_metabox', '_mytheme_post_gallery_metabox');
    $gallery = get_post_meta($post->ID, '_mytheme_post_gallery', true);

    // START | TESTING
    // pull the gallery images from all galleries if it hasn't been created
    if(empty($gallery)) {
        $galleries = get_post_galleries($post, false);
        $allIds = array();
        foreach($galleries as $data) {
            $ids = $data[ 'ids' ];
            $ids = explode(',', $ids);
            $allIds = array_unique ( array_merge( $allIds, $ids ) );
        }
        $gallery = $allIds;
    }
    // END | TESTING ?>

    <style>
        ul#gallery-metabox-list li {
           float: left;
           margin-right: 5px;
        }
    </style>

    <a class="gallery-add button media-button button-primary button-large media-button-select" href="#"
       data-uploader-title="<?php _e('Add gallery images', 'mytheme'); ?>"
       data-uploader-button-text="<?php _e('Add gallery images', 'mytheme'); ?>"><?php _e('Add gallery images', 'mytheme'); ?></a>
    <table>
        <tr>
            <td>
                <ul id="gallery-metabox-list">
                    <?php if($gallery) : ?>
                        <?php foreach($gallery as $key => $value) :
                            $image = wp_get_attachment_image_src($value);
                            $image_id = $value;
                            $image_post = get_post($image_id);
                            $caption = $image_post->post_excerpt;
                            ?>
                            <li>
                                <input type="hidden" name="_mytheme_post_gallery[<?php echo $key; ?>]"
                                       value="<?php echo $value; ?>">
                                <img class="image-preview" src="<?php echo $image[ 0 ]; ?>">
                                <p>
                                    <label for="_mytheme_caption_text_<?php echo $image_id; ?>"
                                           class="mytheme-row-title"><?php _e('Caption', 'mytheme') ?></label>
                                    <input type="text" name="_mytheme_caption_text_<?php echo $image_id; ?>"
                                           id="_mytheme_caption_text_<?php echo $image_id; ?>"
                                           value="<?php echo $caption; ?>"/>
                                </p>
                                <p>
                                    <a class="change-image" href="#"><?php _e('Change', 'mytheme'); ?></a> | <a
                                        class="remove-image" href="#"><?php _e('Remove', 'mytheme'); ?></a>
                                </p>
                            </li>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </ul>
            </td>
        </tr>
    </table>
    <?php
}

Setup the meta box

add_action('add_meta_boxes', 'myplugin_add_meta_box');

function myplugin_add_meta_box() {

    $screens = array('post', 'page');

    foreach($screens as $screen) {

        add_meta_box(
            'myplugin_sectionid',
            __('My Post Section Title', 'mytheme'),
            'mytheme_show_post_gallery_metabox', // meta box view
            $screen
        );
    }
}

On save, update the gallery and pull the IDs. For each ID check and see if we have a caption text field in the post data. If it exists then update the image's post content.

add_action('save_post', 'mytheme_save_image_gallery_metabox');

function mytheme_save_image_gallery_metabox($post_id) {

    // see: http://themefoundation.com/wordpress-meta-boxes-guide/

    if( ! isset($_POST[ '_mytheme_post_gallery' ]) || ! wp_verify_nonce($_POST[ '_mytheme_post_gallery_metabox' ], 'mytheme_post_gallery_metabox')) return;
    if( ! current_user_can('edit_post', $post_id)) return;
    if(defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
    if(isset($_POST[ '_mytheme_post_gallery' ])) {
        $gallery = wp_kses($_POST[ '_mytheme_post_gallery' ], '');
        update_post_meta($post_id, '_mytheme_post_gallery', $gallery);
        foreach($gallery as $image_id) {
            if( ! is_numeric($image_id)) continue; // not a number, not an ID
            if(isset($_POST[ '_mytheme_caption_text_' . $image_id ])) {
                $caption = $_POST[ '_mytheme_caption_text_' . $image_id ];
                $caption = wp_kses($caption); // clean it up
                // change the image caption
                wp_update_post(array('ID' => $image_id, 'post_excerpt' => $caption));
            }
        }
    }
    else {
        delete_post_meta($post_id, '_mytheme_post_gallery');
    } 
}