0

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' );
  • You would need to make a text field under each image in your meta box. Then, when you submit, take that value and wp_update_post for each image ID because it's not a metadata item, it's an actual post property (per image) - codex.wordpress.org/Function_Reference/wp_update_post. It'd test it out but I have some other things I need to tend to. Best, – jgraup Dec 31 '15 at 1:45
  • Thanks a lot for your reply. Can't seem to be able to understand how to make it work properly.. Can you help? I don't mind paying. – Madeirense Dec 31 '15 at 4:49
  • It's difficult to test this because I don't really have all the code needed to make this work -- like [Add Gallery Images], [Change] & [Remove]. I can only really test by pulling all images from current post galleries. – jgraup Dec 31 '15 at 21:37
0

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');
    } 
}

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.