• hi. i made a widget to show images in the front page of any site, very simple (Title,text and image) it works right now if i copy the link image and paste in the url input in the widget editor. But im following this tut to use a button to go to the media library and select the image but its not working. I mean, there is no iframe window to select the image from the library.

    this is the tutorial https://codestag.com/how-to-use-wordpress-3-5-media-uploader-in-theme-options/

    Cant see why its now working. Its reading the JS because i put an alarm and it works

    these is the widget code

    ?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
    ?>

    and the JS

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

The topic ‘developing a widget to show image’ is closed to new replies.