Widget selector de imagen

2

Quiero crear un widget personalizado para que el usuario pueda seleccionar 2 imágenes de la biblioteca de medios a través de un cuadro desplegable y mostrarlas en una barra lateral.

Necesito el widget para mostrar 2 menús desplegables, cada uno con el TÍTULO de las imágenes en la biblioteca de medios.

Luego necesito guardar la url de estas dos imágenes para usarlas en la parte delantera (etiquetadas como <?php $IMAGEVAR ?> en la función widget .

Aquí está mi plantilla de widget - >

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

?>

He estado haciendo esto como un meta box para las publicaciones, pero necesito hacer una versión de widget y no puedo encontrar la forma de implementarla. He agregado una plantilla de front-end para ilustrar cómo funciona como un widget, esta plantilla se mostrará como un widget si la incluye en su functions.php , pero obviamente no hará nada ...

Cualquier ayuda es muy apreciada, saludos.

    
pregunta reekogi 17.11.2011 - 17:22

1 respuesta

4

Prueba este código.

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");') );
    
respondido por el Joshua Abenazer 25.11.2011 - 07:36

Lea otras preguntas en las etiquetas