¿Cómo agregar múltiples imágenes a un tipo de publicación personalizada?

25 ago 2014, 23:31:00
Vistas: 32.6K
Votos: 4

Me gustaría crear un plugin simple para agregar múltiples imágenes a un tipo de publicación personalizada. He creado un plugin para agregar una sola imagen a un tipo de publicación personalizada, pero no logro descubrir cómo agregar múltiples. captura de pantalla del administrador de WordPress aquí es donde estoy.

archivo js-

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

    // agregar funcionalidad del cargador de imágenes
        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: 'Ventana de Selección de Galería de Portafolio',
                button: {text: 'Agregar a la Galería'},
                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=''>Agregar Imagen del Proyecto</label>"
                              +"<input type='text' name='meta-image' id='meta-image' value='' />"
                              +"<input type='button' class='meta-image-button button' value='Subir Imagen' />"
                              +"<input type='button' class='meta-image-button button remove-button' value='Eliminar Imagen' /></p>";

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

        }

}); //fin de la función principal jquery

este es mi archivo php-

    <?php

/*----------------------------------------------------------
                       Crear Tipo de Publicación
------------------------------------------------------------*/

function portfolio_create_post_type(){
    $labels = array(
            'name' => __('Portafolio', 'portfolio'),
            'singular_name' => __('Proyecto', 'portfolio'),
            'add_new' => __('Nuevo proyecto', 'portfolio'),
            'add_new_item' => __('Agregar nuevo proyecto', 'portfolio'),
            'edit_item' => __('Editar proyecto', 'portfolio'),
            'new_item' => __('Nuevo proyecto', 'portfolio'),
            'view_item' => __('Ver proyecto', 'portfolio'),
            'search_item' => __('Buscar proyecto', 'portfolio'),
            'not_found' => __('No se encontraron productos', 'portfolio'),
            'not_found_in_trash' => __('No se encontraron productos en la papelera', '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' );


/*----------------------------------------------------------
                       Crear Meta Box
------------------------------------------------------------*/


function portfolio_meta_box(){
    add_meta_box( 'portfolio_gallery', 'Galería del Proyecto', 'project_meta_box_cb','Portfolio', 'normal', 'high' );
}//portfolio_meta_box

add_action( 'add_meta_boxes', 'portfolio_meta_box' );

/*----------------------------------------------------------
                  Campos del Meta Box
------------------------------------------------------------*/

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="Agregar Imagen">

                <div id="images-container">


                </div><!-- fin del contenedor de imágenes -->
                </div>
                <?php
            }

/*----------------------------------------------------------
                  Guardar los Datos
------------------------------------------------------------*/
function project_meta_save( $post_id ) {

        // Verifica el estado de guardado
        $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';

        // Sale del script dependiendo del estado de guardado
        if ( $is_autosave || $is_revision || !$is_valid_nonce ) {
            return;
        }

        // Verifica la entrada y sanitiza/guarda si es necesario
       if( isset( $_POST[ 'meta-image' ] ) ) {
        update_post_meta( $post_id, 'meta-image', $_POST[ 'meta-image' ] );

    }
}

add_action( 'save_post', 'project_meta_save' );

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

        // Registra y encola el javascript requerido
        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' );

?>
3
Comentarios

Para obtener una buena respuesta y evitar que tu pregunta sea cerrada, por favor sé más específico. Incluye una captura de pantalla de lo que quieres, añade el código que has usado hasta ahora (o que no está funcionando) y especifica más sobre la característica de imagen que estás tratando de construir. Actualmente, no está claro si te refieres a un meta box personalizado, imagen destacada, imagen en una entrada o algo más.

mrwweb mrwweb
25 ago 2014 23:43:59

Agregué mi progreso actual, creé un meta box personalizado que aparece debajo de mi tipo de entrada personalizado.

Justin Justin
26 ago 2014 01:22:36

Sería bueno ver una respuesta en PHP puro en lugar de: "Usa este plugin".

Sjeiti Sjeiti
10 mar 2020 17:40:22
Todas las respuestas a la pregunta 2
0

Esta puede ser una alternativa para ti. El plugin Advanced Custom Fields tiene un campo de Imagen, que permite subir y seleccionar imágenes. Puedes configurar el campo para que aparezca en las páginas de tu Tipo de Entrada Personalizado e integrar una línea de código en tu archivo de plantilla. Puedes crear tantos campos de imagen como necesites. Aprende más sobre el campo de Imagen aquí.

26 ago 2014 01:58:38
0

Puedes utilizar el plugin Meta Box, que soporta varios campos de imágenes (puedes elegir desde la Biblioteca Multimedia o subir imágenes, al igual que insertar imágenes en el editor de entradas). Puedes elegir entre:

  • El campo image_advanced que actúa como el botón Añadir Medios de WordPress
  • El campo file_input que te permite seleccionar una imagen existente o usar una URL externa para la imagen
  • El campo plupload_image que muestra un marcador de posición para arrastrar y soltar archivos

Además, este plugin te permite clonar los campos si lo deseas, facilitando la creación de galerías.

Puedes integrar el plugin con cualquier tipo de contenido personalizado y crear tantos campos como necesites. Aquí tienes la lista de campos soportados.

7 dic 2015 03:20:30