Title: developing a widget to show image
Last modified: August 22, 2016

---

# developing a widget to show image

 *  [garban](https://wordpress.org/support/users/garban/)
 * (@garban)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/developing-a-widget-to-show-image/)
 * 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/](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.

 * 0 replies
 * 1 participant
 * Last reply from: [garban](https://wordpress.org/support/users/garban/)
 * Last activity: [11 years, 2 months ago](https://wordpress.org/support/topic/developing-a-widget-to-show-image/)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics