Snippet: Media Metabox to add additional images to posts

This snippet adds a gallery metabox where admin can either upload images through WordPress Uploader or put in the image URL directly. This metabox is very useful for the custom post types for which you want to upload multiple images. Some good examples are, real estate properties, work portfolios and store products. All of these would have a featured image and some images to be displayed in a (for example) slider to explain it features and qualities.

You can specify number of images to upload, just change the constant on first line of snippet.

Media or Gallery Metabox

Snippet

/*
* Media/Gallery Metabox
* Author: WPDevSnippets.com
*/
define('WPDS_NUM_ADD_IMAGES',10); // Change number of images 
add_action('add_meta_boxes', 'wpds_media_meta_box');
add_action('save_post','wpds_save_media_mb');
function wpds_media_meta_box() {
    // change 'post' to any custom post type as per scenario
    add_meta_box('additional_images', 'Additional Images', 'additional_images_cb', 'post', 'normal');
}

function additional_images_cb($post) {
    
    echo '<table>';
    for($i=0; $i<WPDS_NUM_ADD_IMAGES; $i++){
        echo ($i%2==0) ? '<tr valign="top">':'';
        echo '<td valign=top width="40%"><input id="add_img'.$i.'_field" type="text" size="36" name="add_img'.$i.'" value="'.get_post_meta($post->ID,'add_img'.$i,true).'" />
        <input id="add_img'.$i.'" class="upload_buttons" type="button" value="Upload/Select" /></td><td width="10%">';
        if(has_additional_image($post->ID,$i) )
                echo '<a href="'.the_additional_image_url($post->ID,$i).' target="_blank"><img src="'.the_additional_image_url($post->ID,$i,array(30,30)).'" height=30 /></a>';
        echo '</td>';
        echo (($i+1)%2==0) ? '</tr>':'';
    }
    echo '
        <tr><td colspan="4">You can specify an image URL or an attachment ID through Upload/Select button</td></tr>
    </table>';
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            var formfieldID = '';
            var wpds_orig_send_to_editor = window.send_to_editor;
            jQuery('.upload_buttons').click(function() {
                formfieldID = jQuery(this).attr('id')+'_field';
                tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');
                
                window.send_to_editor = function(html) {
                    attachmentID = html.match(/wp-image-([0-9]+)/);
                    if(attachmentID)
                        pasteValue = attachmentID[1];
                    else
                        pasteValue = jQuery(html).filter('img').attr('src');

                    jQuery('#'+formfieldID).val(pasteValue);
                    tb_remove();
                    window.send_to_editor = wpds_orig_send_to_editor;
                }
                return false;
            });

        });
    </script>
    <?
}

function wpds_save_media_mb($post_id) {

    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
        return;

    if (wp_is_post_revision($post_id) || wp_is_post_autosave($post_id))
        return;

    for($i=0; $i<WPDS_NUM_ADD_IMAGES; $i++){
        if(isset($_POST['add_img'.$i]))
            update_post_meta($post_id, 'add_img'.$i, $_POST['add_img'.$i]);
    }
}

Check Existance of Image

Similar to “has_post_thumbnail“, Use the following following function to check the existance of an additional image.

function has_additional_image($post_id, $id=1) {
   
    $meta = get_post_meta($post_id,'add_img'.$id, true);
    if(empty($meta))    return false;
    return true;
}

Fetch Additional Image

Similar to “the_post_thumbnail“, use following function to get the additional image. Unlike “the_post_thumbnail“, this function returns the image URL without any HTML code.

function the_additional_image_url($post_id, $id=1, $size='post-thumbnail') {
    $meta = get_post_meta($post_id,'add_img'.$id, true);
    if(empty($meta))    return false;
    if(is_numeric($meta)){
        $image = wp_get_attachment_image_src($meta, $size);
        if(!empty($image))
            return $image[0];
        return false;
    }
    else{
        return $meta;
    }
}