Image picker widget

by

I want to create a custom widget so the user can select 2 images from the media library via a dropdown box and display them in a sidebar.

So I need the widget to display 2 drop downs, which each show the TITLE of the images in the media library.

I then need to save the url of these two images to use in the front-end (labelled <?php $IMAGEVAR ?> in the widget function.

Here is my widget template ->

<?php
class Image_Picker extends WP_Widget
{
  function Image_Picker() {
    $widget_ops = array('classname' => 'Image_Picker', 'description' => 'Pick 2 images from media library');
    $this->WP_Widget('Image_Picker', 'Image Picker', $widget_ops);
  }

  function form() {
  //WIDGET BACK-END SETTINGS
    echo '<select name="link1">';
    echo '<option value="image1" selected>Image 1 Title</option>';
    echo '<option value="image2">Image 2 Title</option>';
    echo '<option value="image3">Image 3 Title</option>';
    echo '</select><br>';
    echo '<select name="link2">';
    echo '<option value="image1" selected>Image 1 Title</option>';
    echo '<option value="image2">Image 2 Title</option>';
    echo '<option value="image3">Image 3 Title</option>';
    echo '</select>';
  }

  function update() {
  //WIDGET SAVE FUNCTION
  }

  function widget() {
  //WIDGET FRONT-END VIEW
  ?>

    <!-- Display images -->
    <div class="sidebar-image"><img src="https://wordpress.stackexchange.com/questions/34002/<?php $IMAGEVAR ?>" alt="" width="203" height="271" border="0"></div>
    <div class="sidebar-image"><img src="https://wordpress.stackexchange.com/questions/34002/<?php $IMAGEVAR ?>" alt="" width="177" height="207" border="0"></div>

<?php
  }
}

// Add class for Random Posts Widget
add_action( 'widgets_init', create_function('', 'return register_widget("Image_Picker");') );

?>

I have been doing this as a meta box for posts, but I need to make a widget version and can’t work out how to implement it. I have added in a front-end template to illustrate how it works as a widget, this template will show as a widget if you include it in your functions.php, but obviously it won’t do anything…

Any help is greatly appreciated, cheers.

1 Answer
1

Try this code.

class Image_Picker extends WP_Widget
{
  function Image_Picker() {
    $widget_ops = array('classname' => 'Image_Picker', 'description' => 'Pick 2 images from media library');
    $this->WP_Widget('Image_Picker', 'Image Picker', $widget_ops);
  }

  function form($instance) {
      //WIDGET BACK-END SETTINGS
      $instance = wp_parse_args((array) $instance, array('link1' => '', 'link2' => ''));
      $link1 = $instance['link1'];
      $link2 = $instance['link2'];
      $images = new WP_Query( array( 'post_type' => 'attachment', 'post_status' => 'inherit', 'post_mime_type' => 'image' , 'posts_per_page' => -1 ) );
      if( $images->have_posts() ){ 
          $options = array();
          for( $i = 0; $i < 2; $i++ ) {
              $options[$i] = '';
              while( $images->have_posts() ) {
                  $images->the_post();
                  $img_src = wp_get_attachment_image_src(get_the_ID());
                  $the_link = ( $i == 0 ) ? $link1 : $link2;
                  $options[$i] .= '<option value="' . $img_src[0] . '" ' . selected( $the_link, $img_src[0], false ) . '>' . get_the_title() . '</option>';
              } 
         } ?>
      <select name="<?php echo $this->get_field_name( 'link1' ); ?>"><?php echo $options[0]; ?></select>
      <select name="<?php echo $this->get_field_name( 'link2' ); ?>"><?php echo $options[1]; ?></select><?php
      } else {
            echo 'There are no images in the media library. Click <a href="' . admin_url('/media-new.php') . '" title="Add Images">here</a> to add some images';
      }

  }

  function update($new_instance, $old_instance) {
      $instance = $old_instance;
      $instance['link1'] = $new_instance['link1'];
      $instance['link2'] = $new_instance['link2'];
      return $instance;
  }

  function widget($args, $instance) {
      $link1 = ( empty($instance['link1']) ) ? 0 : $instance['link1'];
      $link2 = ( empty($instance['link2']) ) ? 0 : $instance['link2']; ?>

      <!-- Display images --><?php 
      if( !( $link1 || $link2 ) ) {
          echo "Please configure this widget.";
      } else { 
          if($link1) { ?><div class="sidebar-image"><img src="<?php echo $link1; ?>" alt="" width="203" height="271" border="0"></div><?php }
          if($link1) { ?><div class="sidebar-image"><img src="<?php echo $link2; ?>" alt="" width="177" height="207" border="0"></div><?php }
      } 
  }
}

// Add class for Random Posts Widget
add_action( 'widgets_init', create_function('', 'return register_widget("Image_Picker");') );

Leave a Comment