Image picker widget

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.

Read More

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="<?php $IMAGEVAR ?>" alt="" width="203" height="271" border="0"></div>
    <div class="sidebar-image"><img src="<?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.

Related posts

Leave a Reply

1 comment

  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");') );