I'm a noob making my own custom widgets, and I wanted to make a custom widget to display featured services of a website including a image, title, description, and a link button. I looked a lot on stackoverflow and I end up having something almost working. The problem is that the media button works, the field works, but when I click "use this image", it puts the same image url on every input it finds (inside widgets desktop) with the class "image1", so every widget has the same image.
I would really appreciate if somebody could help me fix it. Sorry in advance for the spanish words, but them are not used in anything related to the actions I'm trying to fix. Here goes the functions.php code I have:
// START CUSTOM WIDGET
class services_widget extends WP_Widget {
// Create Widget
function services_widget() {
parent::WP_Widget(false, $name = 'Servicios Destacados - Widget', array('description' => 'Widget para mostrar servicios destacados en la página principal'));
}
// Widget Content
function widget($args, $instance) {
extract( $args );
$photo = $instance['photo'];
$titulo = $instance['titulo'];
$descripcion = $instance['descripcion'];
$enlace = strip_tags($instance['enlace']);
$textoenlace = strip_tags($instance['textoenlace']);
?>
<div class="servicio-destacado <?php echo $this->id; ?>">
<div class="servicio-imagen" style="background-color:#eaeaea;background-image: url('<?php echo $photo; ?>');"></div>
<div class="titulo"><?php echo $titulo; ?></div>
<div class="line"></div>
<div class="descripcion"><?php echo $descripcion; ?></div>
<a href="<?php echo $enlace; ?>" class="enlace boton"><?php echo $textoenlace; ?></a>
</div>
<?php
}
// If widget content needs a form
function form($instance) {
//widgetform in backend
$photo = $instance['photo'];
$titulo = $instance['titulo'];
$descripcion = $instance['descripcion'];
$enlace = strip_tags($instance['enlace']);
$textoenlace = strip_tags($instance['textoenlace']);
?>
<div class="servicio-widget">
<p>
<label for="<?php echo $this->get_field_id('photo'); ?>"><strong>Imagen</strong>: </label>
<input class="widefat image1" type="text" name="<?php echo $this->get_field_name('photo'); ?>" id="<?php echo $this->get_field_id('photo'); ?>" value="<?php echo attribute_escape($photo) ;?>">
</p>
<p>
<button class="image_upload1">Seleccionar o cambiar imagen</button>
</p>
<p>
<label for="<?php echo $this->get_field_id('titulo'); ?>"><strong>Título</strong>: </label>
<input class="widefat" id="<?php echo $this->get_field_id('titulo'); ?>" name="<?php echo $this->get_field_name('titulo'); ?>" type="text" value="<?php echo attribute_escape($titulo); ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('descripcion'); ?>"><strong>Descripción</strong>: </label>
<textarea class="widefat" id="<?php echo $this->get_field_id('descripcion'); ?>" name="<?php echo $this->get_field_name('descripcion'); ?>" type="text" value="<?php echo attribute_escape($descripcion); ?>"><?php echo attribute_escape($descripcion); ?></textarea>
</p>
<p>
<label for="<?php echo $this->get_field_id('textoenlace'); ?>"><strong>Texto del botón</strong>: </label>
<input class="widefat" id="<?php echo $this->get_field_id('textoenlace'); ?>" name="<?php echo $this->get_field_name('textoenlace'); ?>" type="text" value="<?php echo attribute_escape($textoenlace); ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('enlace'); ?>"><strong>Enlace</strong>: </label>
<input class="widefat" id="<?php echo $this->get_field_id('enlace'); ?>" name="<?php echo $this->get_field_name('enlace'); ?>" type="text" value="<?php echo attribute_escape($enlace); ?>" />
</p>
</div>
<?php
}
// Update and save the widget
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['photo'] = ( ! empty( $new_instance['photo'] ) ) ? $new_instance['photo'] : '';
return $instance;
}
}
register_widget('services_widget');
/*
photo upload option in widget
*/
function photo_upload_option($hook) {
if( $hook != 'widgets.php' )
return;
//enque Javasript Media API
wp_enqueue_media();
wp_enqueue_script( 'uploadphoto', get_template_directory_uri() . '/upload_image.js', array('jquery') );
}
add_action('admin_enqueue_scripts', 'photo_upload_option');
// END CUSTOM WIDGET
This is the code of upload_image.js:
jQuery(function($){
// Set all variables to be used in scope
var frame,
addImgLink = $('.image_upload1'),
imgIdInput = $('.image1');
// ADD IMAGE LINK
addImgLink.on( 'click', function( event ){
event.preventDefault();
// If the media frame already exists, reopen it.
if ( frame ) {
frame.open();
return;
}
// Create a new media frame
frame = wp.media({
title: 'Select or Upload Image',
button: {
text: 'Use this Image'
},
multiple: false // Set to true to allow multiple files to be selected
});
// When an image is selected in the media frame...
frame.on( 'select', function() {
// Get media attachment details from the frame state
var attachment = frame.state().get('selection').first().toJSON();
// Send the attachment URL to our custom image input field.
//imgContainer.append( '<img src="'+attachment.url+'" alt="" style="max-width:100%;"/>' );
// Send the attachment url to our input field
imgIdInput.val( attachment.url );
});
// Finally, open the modal on click
frame.open();
});
});