Soporte » Plugins y Hacks » desarrollo de plugin para subir imagen al media file

  • Hola que tal, he desarrollado un plugin muy simple, consta de un titulo, un texto y una imagen.

    Funciona muy bien pues en el form dentro del widget area coloco todo escrito, dirección de la imagen y los textos normales.

    El detalles está en que trato de hacer que la parte de la imagen se pueda dar click a un boton y esto me lleve al media file de wordpress, donde ya hay imagenes subidas y sea tan sencillo como solo seleccionarla y ya.

    Tengo este codigo siguiendo varios tutoriales en internet pero al hacer click no pasa nada. Si coloco un alert en el jquery si funciona.

    que podría estar haciendo mal?

    este es mi php.

    <?php
    /*
    Plugin Name: Imagenx Media Upload
    Plugin URI: http://behance.com/agarban
    Description: Muestra imagenes.
    Version: 1.0
    Author: Alexei Garban
    Author URI: http://behance.com/agarban
    License: MIT
    */
    
    /**
     * Creamos el widget
     *
     */
    class WP_Widget_imagenx extends WP_Widget {
    
    /**
         * Constructor
         **/
        public function __construct()
        {
            $widget_ops = array(
                'classname' => 'imagenx',
                'description' => 'Widget that uses the built in Media library.'
            );
    
            parent::__construct( 'imagenx', 'Imagenx Upload', $widget_ops );
    
            add_action('admin_enqueue_scripts', array($this, 'upload_scripts'));
            add_action('admin_enqueue_styles', array($this, 'upload_styles'));
        }
    
     /**
         * Upload the Javascripts for the media uploader
         */
        public function upload_scripts()
        {wp_enqueue_media();
            wp_enqueue_script('media-upload');
            wp_enqueue_script('thickbox');
            wp_enqueue_script('upload_media_widget', plugin_dir_url(__FILE__) . 'imagenx.js', array('jquery'));
        }
    
        /**
         * Add the styles for the upload media box
         */
        public function upload_styles()
        {
            wp_enqueue_style('thickbox');
        }
    
    function widget($args, $instance)
    {
    	// Extraemos los argumentos del area de widgets
            extract($args);
    
            $titulo = apply_filters('widget_title', $instance['titulo']);
            $texto = $instance['texto'];
            $imagen = $instance['imagen'];
            $imagenx = $instance['imagenx'];
    
           ?>
    
    <img src="<?php echo $imagenx; ?>">
    <!--  -->
    
            <?php
    
    }
    
    	function update($new_instance, $old_instance)
    {
    	return array(
    		'titulo'          => strip_tags($new_instance['titulo']),
    		'texto'  => strip_tags($new_instance['texto']),
    		'imagen'   => strip_tags ($new_instance['imagen']),
    		'imagenx'   => strip_tags ($new_instance['imagenx']),
    	);
    }
    
    function form($instance)
    {
    	// Obligamos a $instance a ser un array con todas las opciones disponibles
    	$instance = wp_parse_args( (array) $instance, array(
    					'titulo'  => 'Titulo',
    					'texto'   => 'texto',
    					'imagen'  => 'url',
    					'imagenx'  => 'aqui',
    	));
    
    	// Filtramos los valores para que se muestren correctamente en los formularios
    	$instance['titulo'] = esc_attr($instance['titulo']);
    	$instance['texto'] = esc_attr($instance['texto']);
    	$instance['imagen'] = esc_attr($instance['imagen']);
    	$instance['imagenx'] = esc_attr($instance['imagenx']);
    
    	// Mostramos el formulario
    	?>
    
    	<p>
    		<label for="<?php echo $this->get_field_id('titulo'); ?>">Título:</label></p>
    		<input value="<?php echo $instance['titulo']; ?>" class="widefat" type="text" id="<?php echo $this->get_field_id('titulo'); ?>" name="<?php echo $this->get_field_name('titulo'); ?>">
    	</p>
    
    	<p>
    		<label for="<?php echo $this->get_field_id('texto'); ?>">Escribe Texto:</label></p>
    		<input value="<?php echo $instance['texto']; ?>" class="widefat" type="text" id="<?php echo $this->get_field_id('texto'); ?>" name="<?php echo $this->get_field_name('texto'); ?>">
    	</p>
    
    	<p>
    		<label for="<?php echo $this->get_field_id('imagen'); ?>">Url de la imagen:</label></p>
    		<input value="<?php echo $instance['imagen']; ?>" class="widefat" type="text" id="<?php echo $this->get_field_id('imagen'); ?>" name="<?php echo $this->get_field_name('imagen'); ?>">
    	</p>
    
    	 <p>
                <label for="<?php echo $this->get_field_name( 'imagenx' ); ?>"><?php _e( 'Imagenx:' ); ?></label>
                <input value="<?php echo $instance['imagenx']; ?>" class="widefat" type="text" id="<?php echo $this->get_field_id('imagenx'); ?>" name="<?php echo $this->get_field_name('imagenx'); ?>">
    
                <input class="upload_image_button button button-primary" type="button" value="Upload Image" />
            </p>
    
    	<?php
    }
    
    }
    
    /**
     * Registramos el widget (Si no lo hacemos, WordPress no podrá detectarlo)
     *
     */
    function widget_register_imagenx()
    {
    	register_widget('WP_Widget_imagenx');
    }
    add_action('widgets_init', 'widget_register_imagenx');
    
    //FIN
    ?>

    y este mi jquery

    jQuery(document).ready(function($) {
        $(document).on("click", ".upload_image_button", function() {
    
           // alert("Mouse down over p1!");
    
            jQuery.data(document.body, 'prevElement', $(this).prev());
    
            window.send_to_editor = function(html) {
                var imgurl = jQuery('img',html).attr('src');
                var inputText = jQuery.data(document.body, 'prevElement');
    
                if(inputText != undefined && inputText != '')
                {
                    inputText.val(imgurl);
                }
    
                tb_remove();
            };
    
            tb_show('', 'media-upload.php?type=image&TB_iframe=true');
            return false;
        });
    });
  • El debate ‘desarrollo de plugin para subir imagen al media file’ está cerrado a nuevas respuestas.