I’ve coded a widget that allows me to upload some files.
The thing is, if I want to use that widget in more than one sidebar, when I upload a new file it overwrites it’s other instances.
Here’s some code.
<?php
error_reporting(E_ALL);
/*
Plugin Name: Dulkre Widgets
Plugin URI: xxx
Description: xxx
Version: 1.0
Author: Pablo Bertran
Author URI: http://www.pablobertran.com
*/
class InfoProducto extends WP_Widget {
/**
* Register widget with WordPress.
*/
public function __construct() {
parent::__construct(
'InfoProducto', // Base ID
'Información lateral de producto', // Name
array( 'description' => __( 'Permite cargar tabla nutricional, PDF para descargar y descripción al pie del lateral.', 'iuw' ), ) // Args
);
}
/**
* Front-end display of widget.
*
* @see WP_Widget::widget()
*
* @param array $args Widget arguments.
* @param array $instance Saved values from database.
*/
public function widget( $args, $instance ) {
extract( $args );
/*
// Imagen previa al pdf
$imagen1 = apply_filters('imagen1', $instance['imagen1'] );
// PDF
$pdf = apply_filters('pdf', $instance['pdf'] );
// Imagen posterior al pdf
$imagen2 = apply_filters('imagen2', $instance['imagen2'] );
/*$name = apply_filters( 'widget_name', $instance['name'] );
$link = apply_filters( 'widget_link', $instance['link'] );
$imagen2 = apply_filters( 'widget_image_uri', $instance['image_uri'] );*/
echo $before_widget; ?>
<img src="<?php echo esc_url( $instance['imagen1'] ); ?>" />
<a href="<?php echo esc_url( $instance['pdf'] ); ?>">Descargar información Nutricional</a>
<img src="<?php echo esc_url( $instance['imagen2'] ); ?>" />
<?php
echo $after_widget;
}
/**
* Sanitize widget form values as they are saved.
*
* @see WP_Widget::update()
*
* @param array $new_instance Values just sent to be saved.
* @param array $old_instance Previously saved values from database.
*
* @return array Updated safe values to be saved.
*/
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['imagen1'] = ( ! empty( $new_instance['imagen1'] ) ) ? strip_tags( $new_instance['imagen1'] ) : '';
$instance['imagen2'] = ( ! empty( $new_instance['imagen2'] ) ) ? strip_tags( $new_instance['imagen2'] ) : '';
$instance['pdf'] = ( ! empty( $new_instance['pdf'] ) ) ? strip_tags( $new_instance['pdf'] ) : '';
return $instance;
}
/**
* Back-end widget form.
*
* @see WP_Widget::form()
*
* @param array $instance Previously saved values from database.
*/
public function form( $instance ) {
if ( isset( $instance[ 'imagen1' ] ) ) {
$imagen1 = $instance[ 'imagen1' ];
}
else {
$imagen1 = __( 'Imagen Previa', 'iuw' );
}
if ( isset( $instance[ 'imagen2' ] ) ) {
$imagen2 = $instance[ 'imagen2' ];
}
else {
$imagen2 = __( 'Imagen Pie', 'iuw' );
}
if ( isset( $instance[ 'pdf' ] ) ) {
$pdf = $instance[ 'pdf' ];
}
else {
$pdf = __( 'PDF Info. Nutricional', 'iuw' );
}
?>
<p>
<label for="<?php echo $this->get_field_id('imagen1'); ?>">Imagen Previa</label><br />
<img class="custom_media_image" src="<?php echo $imagen1; ?>" style="margin:0;padding:0;max-width:100px;float:left;display:inline-block" />
<input type="text" class="widefat custom_media_url" name="<?php echo $this->get_field_name('imagen1'); ?>" id="<?php echo $this->get_field_id('imagen1'); ?>" value="<?php echo $imagen1; ?>">
</p>
<p>
<input type="button" value="<?php _e( 'Cargar Imagen', 'iuw' ); ?>" class="button custom_media_upload" id="custom_image_uploader1"/>
</p>
<p>
<label for="<?php echo $this->get_field_id('pdf'); ?>">PDF Info. Nutricional</label><br />
<a href="<?php echo $pdf; ?>">PDF</a><br/>
<input type="text" class="widefat custom_media_url2" name="<?php echo $this->get_field_name('pdf'); ?>" id="<?php echo $this->get_field_id('pdf'); ?>" value="<?php echo $pdf; ?>">
</p>
<p>
<input type="button" value="<?php _e( 'Cargar Imagen', 'iuw' ); ?>" class="button custom_media_upload2" id="custom_image_uploader2"/>
</p>
<p>
<label for="<?php echo $this->get_field_id('imagen2'); ?>">Imagen Pie</label><br />
<?php if( isset($imagen2 ) ) { ?><img class="custom_media_image3" src="<?php echo $imagen2; ?>" style="margin:0;padding:0;max-width:100px;float:left;display:inline-block" /><?php } ?>
<input type="text" class="widefat custom_media_url3" name="<?php echo $this->get_field_name('imagen2'); ?>" id="<?php echo $this->get_field_id('imagen2'); ?>" value="<?php echo $imagen2; ?>">
</p>
<p>
<input type="button" value="<?php _e( 'Cargar Imagen', 'iuw' ); ?>" class="button custom_media_upload3" id="custom_image_uploader3"/>
</p>
<?php
}
}
add_action( 'widgets_init', create_function( '', 'register_widget( "InfoProducto" );' ) );
function wdScript(){
wp_enqueue_media();
wp_enqueue_script('adsScript', plugins_url( '/js/image-upload-widget.js' , __FILE__ ));
}
add_action('admin_enqueue_scripts', 'wdScript');
?>
And the JS that opens media library and inserts the images into the widget’s form:
// JavaScript Document
jQuery(document).ready( function(){
function media_upload( button_class, input_class) {
var _custom_media = true,
_orig_send_attachment = wp.media.editor.send.attachment;
jQuery('body').on('click',button_class, function(e) {
var button_id ='#'+jQuery(this).attr('id');
/* console.log(button_id); */
var self = jQuery(button_id);
var send_attachment_bkp = wp.media.editor.send.attachment;
var button = jQuery(button_id);
var id = button.attr('id').replace('_button', '');
_custom_media = true;
wp.media.editor.send.attachment = function(props, attachment){
if ( _custom_media ) {
//jQuery('.custom_media_id').val(attachment.id);
jQuery('.custom_media_url' + input_class).val(attachment.url);
console.log( 'custom_media_image' + input_class );
jQuery('.custom_media_image' + input_class ).attr('src',attachment.url).css('display','block');
} else {
return _orig_send_attachment.apply( button_id, [props, attachment] );
}
}
wp.media.editor.open(button);
return false;
});
}
media_upload( '.custom_media_upload', '');
media_upload( '.custom_media_upload2', '2');
media_upload( '.custom_media_upload3', '3');
});
So, lets suppose I have these sidebars:
Sidebar 1
Sidebar 2
Sidebar 3
If I insert an instance of InfoProducto in all sidebars. Firs, I’ll upload Sidebar 1’s images. Done that, i move on to Sidebar 2. But when I upload any of the files, it overwrites the one I’ve uploaded in Sidebar 1.
So, I’m trying to find a way to make a difference in the form’s classes depending of which sidebar the widget is inserted to.
Do you guys know any way to do so?
