How to add multiple images to custom post type?

I would like to create a simple plugin to add multiple images to a custom post type. I have created a plugin to add a single image to a custom post type, but I am unable to figure out how to add multiple. enter image description here
this is where I’m at.

js file-

    jQuery(document).ready(function($) {

    // add image uploader functionality
        var meta_image_frame;

      $('.meta-image-button').live('click', function(e){
            e.preventDefault();

            if( meta_image_frame ){
                wp.media.editor.open();
                return;
            }

            meta_image_frame = wp.media.frames.file_frame = wp.media({
                title: 'Portfolio Image Gallery Selection Window',
                button: {text: 'Add to Gallery'},
                library: { type: 'image'},
                  multiple: false
            });

            meta_image_frame.on('select', function(){
                var media_attachment = meta_image_frame.state().get('selection').first().toJSON();

                   var url="";

                $('#meta-image').val(media_attachment.url);


            });

            meta_image_frame.open();

      });

      $('#add-input').click(function(event){

            add_input()
        }); 

        function add_input(){


            var input = "<p><label for="meta-image" class="">Add Project Image</label>"
                              +"<input type="text" name="meta-image" id='meta-image' value="" />"
                              +"<input type="button" class="meta-image-button button" value="Upload Image" />"
                              +"<input type="button" class="meta-image-button button remove-button" value="Remove Image" /></p>";

            $('#images-container').append(input);

        }

}); //end main jquery function

this is my php file-

    <?php

/*----------------------------------------------------------
                       Create Post Type
------------------------------------------------------------*/

function portfolio_create_post_type(){
    $labels = array(
            'name' => __('Portfolio', 'portfolio'),
            'singular_name' => __('Project', 'portfolio'),
            'add_new' => __('New project', 'portfolio'),
            'add_new_item' => __('Add new project', 'portfolio'),
            'edit_item' => __('Edit project', 'portfolio'),
            'new_item' => __('New project', 'portfolio'),
            'view_item' => __('View project', 'portfolio'),
            'search_item' => __('Search project', 'portfolio'),
            'not_found' => __('No products Found', 'portfolio'),
            'not_found_in_trash' => __('No products found in trash', 'portfolio')
        );
    $args = array(
            'labels' => $labels,
            'public' => true,
            'supports' => array(
                    'title',
                    'thumbnail',
                    'editor',
                ),
            'taxonomies' => array('post_tag', 'category')
        );
    register_post_type('Portfolio', $args);
}

add_action('init', 'portfolio_create_post_type' );


/*----------------------------------------------------------
                       Create Meta Box
------------------------------------------------------------*/


function portfolio_meta_box(){
    add_meta_box( 'portfolio_gallery', 'Project Gallery', 'project_meta_box_cb','Portfolio', 'normal', 'high' );
}//portfolio_meta_box

add_action( 'add_meta_boxes', 'portfolio_meta_box' );

/*----------------------------------------------------------
                  Meta Box Fields
------------------------------------------------------------*/

function project_meta_box_cb(){
                wp_nonce_field( basename( __FILE__ ), 'prfx_nonce' );
                $prfx_stored_meta = get_post_meta( $post->ID );

                ?>
                <div class="wrap">
                <input type="button" id="add-input" value="Add Image">

                <div id="images-container">


                </div><!-- end images container -->
                </div>
                <?php
            }

/*----------------------------------------------------------
                  Save the Data
------------------------------------------------------------*/
function project_meta_save( $post_id ) {

        // Checks save status
        $is_autosave = wp_is_post_autosave( $post_id );
        $is_revision = wp_is_post_revision( $post_id );
        $is_valid_nonce = ( isset( $_POST[ 'prfx_nonce' ] ) && wp_verify_nonce( $_POST[ 'prfx_nonce' ], basename( __FILE__ ) ) ) ? 'true' : 'false';

        // Exits script depending on save status
        if ( $is_autosave || $is_revision || !$is_valid_nonce ) {
            return;
        }

        // Checks for input and sanitizes/saves if needed
       if( isset( $_POST[ 'meta-image' ] ) ) {
        update_post_meta( $post_id, 'meta-image', $_POST[ 'meta-image' ] );

    }
}

add_action( 'save_post', 'project_meta_save' );

/*----------------------------------------------------------
                  Load Javascript File
------------------------------------------------------------*/
function project_image_enqueue() {
    global $typenow;
    if( $typenow == 'portfolio' ) {
        wp_enqueue_media();

        // Registers and enqueues the required javascript.
        wp_register_script( 'meta-box-image', plugin_dir_url( __FILE__ ) . 'meta-box-image.js', array( 'jquery' ) );
        wp_localize_script( 'meta-box-image', 'meta_image');
        wp_enqueue_script( 'meta-box-image' );
    }
}
add_action( 'admin_enqueue_scripts', 'project_image_enqueue' );

?>

2 Answers
2

This may be an alternative for you. The Advanced Custom Fields plug in has an Image Field, which allows images to be uploaded and selected. You can set the field to show on your Custom Post Type pages and also integrate a line of code into your template file. You can create as many image fields as needed. Learn more about the Image field here.

Leave a Comment