user listings and 2x graphics

functions.php

@@ -73,6 +73,23 @@ function unhyped_widgets_init() {
 }
 add_action( 'widgets_init', 'unhyped_widgets_init' );
 
+/**
+ * Author bio format
+ */
+function the_user_bio($user_id) {
+  if (empty($user_id)) return;
+
+  $userdata = get_userdata($user_id);
+
+  $html_str = '<div id="userbio-'.$user_id.'" class="userbio">';
+  $html_str .= get_avatar($user_id, 120);
+  $html_str .= '<span class="user-name">'.$userdata->display_name.'</span>';
+  $html_str .= '<span class="user-description">'.$userdata->user_description.'</span>';
+  $html_str .= '</div>';
+
+  return $html_str;
+}
+
 /**
  * A prettier excerpt template tag
  * It cuts off at the end of the sentence preceding the cut-off character.

inc/unhyped_featured_event_widget.php

@@ -103,5 +103,4 @@ function widget($args, $instance) {
     <?php
     echo $after_widget;
   }
-}
-?>
+}

inc/unhyped_staff_listing_widget.php

@@ -45,28 +45,29 @@ function UNHYPED_Staff_Listing_Widget() {
   }
 
   function form($instance) {
-    $instance = wp_parse_args( (array) $instance, array( 'user_id_csv' => '' ) );
-    $user_id_csv = strip_tags($instance['user_id_csv']);
+    $instance = wp_parse_args( (array) $instance, array( 'user_ids_str' => '' ) );
+    $user_ids_str = strip_tags($instance['user_ids_str']);
     ?>
-    <p><label for="<?php echo $this->get_field_id('user_id_csv'); ?>"><?php _e('User IDs (comma separated):', 'unhyped'); ?>
-      <input class="widefat" id="<?php echo $this->get_field_id('user_id_csv'); ?>" name="<?php echo $this->get_field_name('user_id_csv'); ?>" type="text" value="<?php echo esc_attr($user_id_csv); ?>" /></label></p>
+    <p><label for="<?php echo $this->get_field_id('user_ids_str'); ?>"><?php _e('User IDs (comma separated):', 'unhyped'); ?>
+      <input class="widefat" id="<?php echo $this->get_field_id('user_ids_str'); ?>" name="<?php echo $this->get_field_name('user_ids_str'); ?>" type="text" value="<?php echo esc_attr($user_ids_str); ?>" /></label></p>
     <?php
   }
 
   function update($new_instance, $old_instance) {
     $instance = $old_instance;
-    $instance['user_id_csv'] = strip_tags($new_instance['user_id_csv']);
+    $instance['user_ids_str'] = strip_tags($new_instance['user_ids_str']);
     return $instance;
   }
 
   function widget($args, $instance) {
     // outputs the content of the widget
     extract( $args );
 
-    if (empty($instance['user_id_csv']))
+    if (empty($instance['user_ids_str']))
       return;
 
-    $user_id_csv = apply_filters('widget_post_id', $instance['user_id_csv']);
+    $user_ids_str = apply_filters('widget_post_id', $instance['user_ids_str']);
+    $user_ids = explode(',', $user_ids_str);
 
     echo $before_widget;
 
@@ -76,12 +77,17 @@ function widget($args, $instance) {
 
     <div class="content">
       <?php
-        echo $user_id_csv;
+        if ( !empty($user_ids) ):
+          echo '<ul class="staff-listing"><h2 class="list-title">unHYPED staff</h2>';
+          foreach( $user_ids as $user_id ):
+            echo '<li class="staff-member">'.the_user_bio($user_id).'</li>';
+          endforeach;
+          echo '</ul>';
+        endif;
       ?>
     </div>
 
     <?php
     echo $after_widget;
   }
-}
-?>
+}

sass/modules/_userbio.scss

@@ -0,0 +1,19 @@
+.userbio {
+  @include clearfix;
+  font-size: $small-font-size;
+  .avatar {
+    display: block;
+    float: left;
+    margin-bottom: .25 * $base-vmargin;
+    margin-right: .5 * $base-hmargin;
+    width: 60px;
+    height: auto;
+  }
+  .user-name {
+    display: block;
+  }
+  .user-description {
+    color: $mute-color;
+    display: block;
+  }
+}

sass/partials/_page.scss

@@ -34,7 +34,7 @@ blockquote {
   @include clearfix;
   margin: $base-vmargin auto;
   padding: $base-vmargin $base-hmargin;
-  width: 748px;
+  width: 978px; 
 }
 
 #header {
@@ -96,7 +96,7 @@ blockquote {
   }
   .section-title {
     @include inline-block;
-    @include replace-text-with-dimensions('picks.png');
+    @include replace-linked-text('picks.png', true, true);
     margin-left: -10px; 
   }
   .social {
@@ -105,7 +105,7 @@ blockquote {
     right: 0;
     .title {
       @include inline-block;
-      @include replace-text-with-dimensions('follow.png');
+      @include replace-linked-text('follow.png', true, true);
       margin: 0;
     }
     .services {
@@ -120,22 +120,22 @@ blockquote {
         }
         &.facebook {
           a {
-            @include replace-text-with-dimensions('facebook.png');
+            @include replace-linked-text('facebook.png', true, true);
           }
         }
         &.twitter {
           a {
-            @include replace-text-with-dimensions('twitter.png');
+            @include replace-linked-text('twitter.png', true, true);
           }
         }
         &.feed {
           a {
-            @include replace-text-with-dimensions('feed.png');
+            @include replace-linked-text('feed.png', true, true);
           }
         }
         &.ical {
           a {
-            @include replace-text-with-dimensions('ical.png');
+            @include replace-linked-text('ical.png', true, true);
           }
         }
       }
@@ -259,7 +259,7 @@ blockquote {
       top: 0;
       left: 70%;
       &.upcoming {
-        @include replace-text-with-dimensions('upcoming.png');
+        @include replace-linked-text('upcoming.png', true, true);
       }
     }
   }
@@ -279,6 +279,16 @@ blockquote {
     padding: $base-vmargin $base-hmargin;
     margin-bottom: .5 * $base-vmargin;
   }
+  .staff-listing {
+    @include unstyled-list;
+    margin: 0;
+    .list-title {
+      font-weight: bold;
+    }
+    .staff-member {
+      margin-top: .5 * $base-vmargin;
+    }
+  }
   body.singular & {
     float: right;
     margin-top: 2 * $base-vmargin;

sass/style.scss

@@ -26,6 +26,7 @@ Template:       synack-wpbp
 // Modules
 @import "modules/eo"; // event organizer plugin
 @import "modules/ss-form"; // wordpress google form plugin
+@import "modules/userbio";
 @import "modules/components";
 
 // Theme styles