Instagram Slider Widget - Version 1.2.2

Version Description

  • Modified the code to work with new Instagram Page
  • Removed Image Size option when loading images directly from Instagram
  • 24 Images can now be displayed
  • Fixed multiple widget bug using widget ids in class names
  • Added better explanation for sources
Download this release

Release Info

Developer jetonr
Plugin Icon 128x128 Instagram Slider Widget
Version 1.2.2
Comparing to
See all releases

Code changes from version 1.2.1 to 1.2.2

Files changed (4) hide show
  1. assets/css/jr-insta-admin.css +9 -6
  2. assets/js/jr-insta-admin.js +21 -4
  3. instaram_slider.php +77 -44
  4. readme.txt +10 -3
assets/css/jr-insta-admin.css CHANGED
@@ -1,8 +1,10 @@
1
- .jr-container .pressthis a span:before { content: "\f487"; color: #DC143C; }
2
- .jr-container .pressthis a,
3
- .jr-container .pressthis a:active,
4
- .jr-container .pressthis a:focus,
5
- .jr-container .pressthis a:hover { cursor: pointer; font-size: 12px; background: #53b5d9; border: 1px solid #0074a2; color: #ffffff; font-weight: bold }
 
 
6
  .jr-container .jr_insta_error { border-left: 4px solid #dd3d36; -moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1); -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1); box-shadow: 0 1px 1px 0 rgba(0,0,0,.1); padding: 5px 12px; }
7
  .jr-container .jr-radio { margin-right: 20px }
8
  .jr-container .jr-advanced { text-decoration: none; border: none }
@@ -10,7 +12,8 @@
10
 
11
  .jr-container .jr-advanced-input div { border: 1px solid #cfcfcf; padding: 10px; margin: 25px 0 0; }
12
  .jr-container .jr-advanced-input .jr-advanced-title{ margin: -22px 0 0 0; background-color: white; width: 160px; padding: 3px 10px; border: 1px solid #cfcfcf; }
13
- .jr-container .jr-description { color: #777; font-size: smaller; clear:both; display:block }
 
14
 
15
  .jr-container .blocked-images { margin: 0 0 0 0; padding: 0 0 0 0; }
16
  .jr-container .blocked-images:after { content: ""; display: table; clear: both; }
1
+ .jr-container .donate { padding: 5px; display: inline-block; position: relative; color: #32373c; background: #e6e6e6; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #b4b4b4; font-weight: bold; font-size: 14px; text-decoration: none; }
2
+ .jr-container .donate a { outline: 0; cursor: pointer }
3
+ .jr-container .donate span:before { color: #FF0000; font: 400 20px/1 dashicons; font-family: dashicons; font-size: 20px; font-style: normal; font-variant: normal; font-weight: 400; font-stretch: normal; line-height: 1; content: '\f487'; position: relative; display: inline-block; top: 4px; margin-right: 4px; }
4
+ .jr-container .pressthis a, .jr-container .pressthis-bookmarklet a,
5
+ .jr-container .pressthis a:active, .jr-container .pressthis-bookmarklet a:active,
6
+ .jr-container .pressthis a:focus, .jr-container .pressthis-bookmarklet a:focus,
7
+ .jr-container .pressthis a:hover, .jr-container .pressthis-bookmarklet a:hover { cursor: pointer; background: #53b5d9; border: 1px solid #0074a2; color: #ffffff; font-weight: bold }
8
  .jr-container .jr_insta_error { border-left: 4px solid #dd3d36; -moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1); -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1); box-shadow: 0 1px 1px 0 rgba(0,0,0,.1); padding: 5px 12px; }
9
  .jr-container .jr-radio { margin-right: 20px }
10
  .jr-container .jr-advanced { text-decoration: none; border: none }
12
 
13
  .jr-container .jr-advanced-input div { border: 1px solid #cfcfcf; padding: 10px; margin: 25px 0 0; }
14
  .jr-container .jr-advanced-input .jr-advanced-title{ margin: -22px 0 0 0; background-color: white; width: 160px; padding: 3px 10px; border: 1px solid #cfcfcf; }
15
+ .jr-container .jr-description { color: #777; font-size: smaller; clear:both; display:block; margin-top: 5px;}
16
+ .jr-container .jr-description.hide-media-library, .jr-container .jr-description.hide-instagram { display: none }
17
 
18
  .jr-container .blocked-images { margin: 0 0 0 0; padding: 0 0 0 0; }
19
  .jr-container .blocked-images:after { content: ""; display: table; clear: both; }
assets/js/jr-insta-admin.js CHANGED
@@ -12,6 +12,18 @@
12
  }
13
  });
14
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  // Hide Refresh hour if source is wp media library
16
  $('body').on('change', '.jr-container select[id$="template"]', function(e){
17
  var template = $(this);
@@ -24,21 +36,26 @@
24
  }
25
  });
26
 
27
-
28
  // Hide Refresh hour if source is wp media library
29
  $('body').on('change', '.jr-container input:radio[id$="source"]', function(e){
30
  var source = $(this);
31
  if ( source.val() != 'instagram' ) {
32
  source.closest('.jr-container').find('input[id$="refresh_hour"]').closest('p').animate({opacity: 'hide' , height: 'hide'}, 200);
33
- source.closest('.jr-container').find('input[id$="attachment"]').closest('p').animate({opacity: 'hide' , height: 'hide'}, 200);
 
 
34
  source.closest('.jr-container').find('.blocked-wrap').animate({opacity: 'hide' , height: 'hide'}, 200);
 
35
  } else {
36
  source.closest('.jr-container').find('input[id$="refresh_hour"]').closest('p').animate({opacity: 'show' , height: 'show'}, 200);
37
  source.closest('.jr-container').find('input[id$="attachment"]').closest('p').animate({opacity: 'show' , height: 'show'}, 200);
 
 
38
  source.closest('.jr-container').find('.blocked-wrap').animate({opacity: 'show' , height: 'show'}, 200);
 
39
  }
40
- });
41
-
42
  // Hide blocked images if not checked attachments
43
  $('body').on('change', '.jr-container [id$="attachment"]:checkbox', function(e){
44
  var attachment = $(this);
12
  }
13
  });
14
 
15
+ // Hide Refresh hour if source is wp media library
16
+ $('body').on('change', '.jr-container input:checkbox[id$="attachment"]', function(e){
17
+ var attachment = $(this);
18
+ if ( typeof attachment.attr('checked') == "undefined" ) {
19
+ attachment.closest('.jr-container').find('select[id$="image_size"]').closest('p').animate({opacity: 'hide' , height: 'hide'}, 200);
20
+ } else if ( attachment.attr('checked') == "checked" ) {
21
+ attachment.closest('.jr-container').find('select[id$="image_size"]').closest('p').animate({opacity: 'show' , height: 'show'}, 200);
22
+ }
23
+ });
24
+
25
+ $('.jr-container input:checkbox[id$="attachment"]').trigger('change');
26
+
27
  // Hide Refresh hour if source is wp media library
28
  $('body').on('change', '.jr-container select[id$="template"]', function(e){
29
  var template = $(this);
36
  }
37
  });
38
 
 
39
  // Hide Refresh hour if source is wp media library
40
  $('body').on('change', '.jr-container input:radio[id$="source"]', function(e){
41
  var source = $(this);
42
  if ( source.val() != 'instagram' ) {
43
  source.closest('.jr-container').find('input[id$="refresh_hour"]').closest('p').animate({opacity: 'hide' , height: 'hide'}, 200);
44
+ source.closest('.jr-container').find('select[id$="image_size"]').closest('p').animate({opacity: 'show' , height: 'show'}, 200);
45
+ source.closest('.jr-container').find('.jr-media-library-option').animate({opacity: 'show' , height: 'show'}, 200);
46
+ source.closest('.jr-container').find('.jr-instagram-option').animate({opacity: 'hide' , height: 'hide'}, 200);
47
  source.closest('.jr-container').find('.blocked-wrap').animate({opacity: 'hide' , height: 'hide'}, 200);
48
+ source.closest('.jr-container').find('input[id$="attachment"]').closest('p').animate({opacity: 'hide' , height: 'hide'}, 200);
49
  } else {
50
  source.closest('.jr-container').find('input[id$="refresh_hour"]').closest('p').animate({opacity: 'show' , height: 'show'}, 200);
51
  source.closest('.jr-container').find('input[id$="attachment"]').closest('p').animate({opacity: 'show' , height: 'show'}, 200);
52
+ source.closest('.jr-container').find('.jr-media-library-option').animate({opacity: 'hide' , height: 'hide'}, 200);
53
+ source.closest('.jr-container').find('.jr-instagram-option').animate({opacity: 'show' , height: 'show'}, 200);
54
  source.closest('.jr-container').find('.blocked-wrap').animate({opacity: 'show' , height: 'show'}, 200);
55
+ $('.jr-container input:checkbox[id$="attachment"]').trigger('change');
56
  }
57
+ });
58
+
59
  // Hide blocked images if not checked attachments
60
  $('body').on('change', '.jr-container [id$="attachment"]:checkbox', function(e){
61
  var attachment = $(this);
instaram_slider.php CHANGED
@@ -2,7 +2,7 @@
2
  /*
3
  Plugin Name: Instagram Slider Widget
4
  Plugin URI: http://jrwebstudio.com/instagram-slider/
5
- Version: 1.2.1
6
  Description: Instagram Slider Widget is a responsive slider widget that shows 20 latest images from a public instagram user.
7
  Author: jetonr
8
  Author URI: http://jrwebstudio.com/
@@ -200,13 +200,65 @@ class JR_InstagramSlider extends WP_Widget {
200
  <?php _e( 'Source:', 'jrinstaslider' ); ?><br>
201
  <label class="jr-radio"><input type="radio" id="<?php echo $this->get_field_id( 'source' ); ?>" name="<?php echo $this->get_field_name( 'source' ); ?>" value="instagram" <?php checked( 'instagram', $instance['source'] ); ?> /> <?php _e( 'Instagram', 'jrinstaslider' ); ?></label>
202
  <label class="jr-radio"><input type="radio" id="<?php echo $this->get_field_id( 'source' ); ?>" name="<?php echo $this->get_field_name( 'source' ); ?>" value="media_library" <?php checked( 'media_library', $instance['source'] ); ?> /> <?php _e( 'WP Media Library', 'jrinstaslider' ); ?></label>
203
- <br><span class="jr-description"><?php _e( 'WP Media Library option will display previously saved instagram images for the user in the field above!', 'jrinstaslider') ?></span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
204
  </p>
205
  <p class="<?php if ( 'instagram' != $instance['source'] ) echo 'hidden'; ?>">
206
- <label for="<?php echo $this->get_field_id( 'attachment' ); ?>"><?php _e( 'Insert images into Media Library:', 'jrinstaslider' ); ?></label>
207
  <input class="widefat" id="<?php echo $this->get_field_id( 'attachment' ); ?>" name="<?php echo $this->get_field_name( 'attachment' ); ?>" type="checkbox" value="1" <?php checked( '1', $instance['attachment'] ); ?> />
208
  <br><span class="jr-description"><?php _e( 'It is recommended you check the field above because images displayed directly from Instagram server will affect your site loading time!', 'jrinstaslider') ?></span>
209
  </p>
 
 
 
 
 
 
 
 
 
 
 
210
  <?php
211
  $user_opt = get_option( 'jr_insta_'. md5( $instance['username'] ) );
212
  if ( isset( $user_opt['deleted_images'] ) && ( !empty( $user_opt['deleted_images'] ) && ( $instance['source'] == 'instagram' ) && ( $instance['attachment'] ) ) ) {
@@ -290,24 +342,12 @@ class JR_InstagramSlider extends WP_Widget {
290
  <input class="widefat" id="<?php echo $this->get_field_id( 'custom_url' ); ?>" name="<?php echo $this->get_field_name( 'custom_url' ); ?>" value="<?php echo $instance['custom_url']; ?>" />
291
  <span><?php _e('* use this field only if the above option is set to <strong>Custom Link</strong>', 'jrinstaslider'); ?></span>
292
  </p>
293
- <p>
294
- <label for="<?php echo $this->get_field_id( 'images_number' ); ?>"><?php _e( 'Number of images to show:', 'jrinstaslider' ); ?>
295
- <input class="small-text" id="<?php echo $this->get_field_id( 'images_number' ); ?>" name="<?php echo $this->get_field_name( 'images_number' ); ?>" value="<?php echo $instance['images_number']; ?>" />
296
- <span><?php _e( 'limit is 20 if <strong>Source</strong> is Instagram', 'jrinstaslider' ); ?></span>
297
- </label>
298
- </p>
299
  <p class="<?php if ( 'thumbs' != $instance['template'] ) echo 'hidden'; ?>">
300
  <label for="<?php echo $this->get_field_id( 'columns' ); ?>"><?php _e( 'Number of Columns:', 'jrinstaslider' ); ?>
301
  <input class="small-text" id="<?php echo $this->get_field_id( 'columns' ); ?>" name="<?php echo $this->get_field_name( 'columns' ); ?>" value="<?php echo $instance['columns']; ?>" />
302
  <span><?php _e('max is 10 ( only for thumbnails template )', 'jrinstaslider'); ?></span>
303
  </label>
304
  </p>
305
- <p class="<?php if ( 'instagram' != $instance['source'] ) echo 'hidden'; ?>">
306
- <label for="<?php echo $this->get_field_id( 'refresh_hour' ); ?>"><?php _e( 'Check for new images every:', 'jrinstaslider' ); ?>
307
- <input class="small-text" id="<?php echo $this->get_field_id( 'refresh_hour' ); ?>" name="<?php echo $this->get_field_name( 'refresh_hour' ); ?>" value="<?php echo $instance['refresh_hour']; ?>" />
308
- <span><?php _e('hours', 'jrinstaslider'); ?></span>
309
- </label>
310
- </p>
311
  <p>
312
  <strong>Advanced Options</strong>
313
  <?php
@@ -366,7 +406,7 @@ class JR_InstagramSlider extends WP_Widget {
366
  <span class="jr-description"><?php _e( 'Use this shortcode in any page or post to display images with this widget configuration!', 'jrinstaslider') ?></span>
367
  </p>
368
  <?php endif; ?>
369
- <p class="pressthis"><a target="_blank" title="Donate To Keep This Plugin Alive!" href="http://goo.gl/RZiu34"><span>Donate To Keep This Plugin Alive!</span></a></p>
370
  </div>
371
  <?php
372
  }
@@ -396,6 +436,7 @@ class JR_InstagramSlider extends WP_Widget {
396
  $atts = shortcode_atts( array( 'id' => '' ), $atts, 'jr_instagram' );
397
  $args = get_option( 'widget_jr_insta_slider' );
398
  if ( isset($args[$atts['id']] ) ) {
 
399
  return $this->display_images( $args[$atts['id']] );
400
  }
401
  }
@@ -436,6 +477,7 @@ class JR_InstagramSlider extends WP_Widget {
436
  $controls = isset( $args['controls'] ) ? $args['controls'] : 'prev_next';
437
  $animation = isset( $args['animation'] ) ? $args['animation'] : 'slide';
438
  $description = isset( $args['description'] ) ? $args['description'] : array();
 
439
 
440
  if ( false == $username ) {
441
  return false;
@@ -469,11 +511,11 @@ class JR_InstagramSlider extends WP_Widget {
469
  $ul_class = 'slides';
470
 
471
  if ( $template == 'slider' ) {
472
- $images_div_class = 'pllexislider pllexislider-normal';
473
  $slider_script =
474
  "<script type='text/javascript'>" . "\n" .
475
  " jQuery(document).ready(function($) {" . "\n" .
476
- " $('.pllexislider-normal').pllexislider({" . "\n" .
477
  " animation: '{$animation}'," . "\n" .
478
  " directionNav: {$direction_nav}," . "\n" .
479
  " controlNav: {$control_nav}," . "\n" .
@@ -483,11 +525,11 @@ class JR_InstagramSlider extends WP_Widget {
483
  " });" . "\n" .
484
  "</script>" . "\n";
485
  } else {
486
- $images_div_class = 'pllexislider pllexislider-overlay';
487
  $slider_script =
488
  "<script type='text/javascript'>" . "\n" .
489
  " jQuery(document).ready(function($) {" . "\n" .
490
- " $('.pllexislider-overlay').pllexislider({" . "\n" .
491
  " animation: '{$animation}'," . "\n" .
492
  " directionNav: {$direction_nav}," . "\n" .
493
  " controlNav: {$control_nav}," . "\n" .
@@ -621,16 +663,7 @@ class JR_InstagramSlider extends WP_Widget {
621
  $template_args['link_to'] = $custom_url;
622
  }
623
 
624
- if ( $image_size == 'thumbnail' ) {
625
- $template_args['image'] = $image_data['url_thumbnail'];
626
- } elseif ( $image_size == 'medium' ) {
627
- $template_args['image'] = $image_data['url_medium'];
628
- } elseif( $image_size == 'large' ) {
629
- $template_args['image'] = $image_data['url'];
630
- } else {
631
- $template_args['image'] = $image_data['url'];
632
- }
633
-
634
  $template_args['caption'] = $image_data['caption'];
635
  $template_args['timestamp'] = $image_data['timestamp'];
636
  $template_args['username'] = $image_data['username'];
@@ -673,6 +706,7 @@ class JR_InstagramSlider extends WP_Widget {
673
  }
674
 
675
  $short_caption = wp_trim_words( $caption, 10 );
 
676
 
677
  $image_src = '<img src="' . $image_url . '" alt="' . $short_caption . '" title="' . $short_caption . '" />';
678
  $image_output = $image_src;
@@ -788,7 +822,6 @@ class JR_InstagramSlider extends WP_Widget {
788
  if ( false === $instaData || $user_opt['username'] != $username || $user_opt['cache_hours'] != $cache_hours || $user_opt['nr_images'] != $nr_images || $user_opt['attachment'] != $attachment ) {
789
 
790
  $instaData = array();
791
-
792
  $user_opt['username'] = $username;
793
  $user_opt['cache_hours'] = $cache_hours;
794
  $user_opt['nr_images'] = $nr_images;
@@ -826,32 +859,32 @@ class JR_InstagramSlider extends WP_Widget {
826
 
827
  if ( $results && is_array( $results ) ) {
828
 
829
- $userMedia = isset( $results['entry_data']['UserProfile'][0]['userMedia'] ) ? $results['entry_data']['UserProfile'][0]['userMedia'] : array();
830
 
831
  if ( empty( $userMedia ) ) {
832
  return __( 'No images found', 'jrinstaslider');
833
  }
834
 
835
  foreach ( $userMedia as $current => $result ) {
836
-
837
- if ( $result['type'] != 'image' ) {
838
  $nr_images++;
839
  continue;
840
  }
841
-
842
  if ( $current >= $nr_images ) {
843
  break;
844
  }
845
-
846
- $image_data['username'] = $result['user']['username'];
847
- $image_data['caption'] = $this->sanitize( $result['caption']['text'] );
 
 
848
  $image_data['id'] = $result['id'];
849
- $image_data['link'] = $result['link'];
850
  $image_data['popularity'] = (int) ( $result['comments']['count'] ) + ( $result['likes']['count'] );
851
- $image_data['timestamp'] = (int) $result['created_time'];
852
- $image_data['url'] = $result['images']['standard_resolution']['url'];
853
- $image_data['url_thumbnail'] = $result['images']['thumbnail']['url'];
854
- $image_data['url_medium'] = $result['images']['low_resolution']['url'];
855
 
856
  if ( !$attachment ) {
857
 
@@ -869,7 +902,7 @@ class JR_InstagramSlider extends WP_Widget {
869
 
870
  } else {
871
 
872
- $user_opt['deleted_images'][$image_data['id']] = $image_data['url_thumbnail'];
873
  }
874
 
875
  } else {
2
  /*
3
  Plugin Name: Instagram Slider Widget
4
  Plugin URI: http://jrwebstudio.com/instagram-slider/
5
+ Version: 1.2.2
6
  Description: Instagram Slider Widget is a responsive slider widget that shows 20 latest images from a public instagram user.
7
  Author: jetonr
8
  Author URI: http://jrwebstudio.com/
200
  <?php _e( 'Source:', 'jrinstaslider' ); ?><br>
201
  <label class="jr-radio"><input type="radio" id="<?php echo $this->get_field_id( 'source' ); ?>" name="<?php echo $this->get_field_name( 'source' ); ?>" value="instagram" <?php checked( 'instagram', $instance['source'] ); ?> /> <?php _e( 'Instagram', 'jrinstaslider' ); ?></label>
202
  <label class="jr-radio"><input type="radio" id="<?php echo $this->get_field_id( 'source' ); ?>" name="<?php echo $this->get_field_name( 'source' ); ?>" value="media_library" <?php checked( 'media_library', $instance['source'] ); ?> /> <?php _e( 'WP Media Library', 'jrinstaslider' ); ?></label>
203
+ <?php
204
+ $saved_images = 0;
205
+ $username = '';
206
+
207
+ if ( 'instagram' == $instance['source'] ) {
208
+ $media_option_class = 'hide-media-library';
209
+ $insta_option_class = '';
210
+
211
+ } else {
212
+ $media_option_class = '';
213
+ $insta_option_class = 'hide-instagram';
214
+ }
215
+
216
+
217
+ if ( isset( $instance['username'] ) && ( !empty( $instance['username'] ) ) ) {
218
+ $username = $instance['username'];
219
+ $savedinsta_args = array(
220
+ 'post_type' => 'attachment',
221
+ 'post_status' => 'inherit',
222
+ 'post_mime_type' => 'image',
223
+ 'posts_per_page' => -1,
224
+ 'orderby' => 'rand',
225
+ 'no_found_rows' => true,
226
+ 'meta_query' => array(
227
+ array(
228
+ 'key' => 'jr_insta_username',
229
+ 'value' => $instance['username'],
230
+ 'compare' => '='
231
+ ),
232
+ ),
233
+ );
234
+ $savedinsta = new WP_Query( $savedinsta_args );
235
+ $saved_images = $savedinsta->post_count;
236
+ }
237
+
238
+ if ( $saved_images <= 0 ) {
239
+ echo '<span class="jr-description jr-media-library-option '.$media_option_class.'"><strong>WP Media Library</strong> will not show any images for '. $username .' because there are no saved images yet!</span>';
240
+ } else {
241
+ echo '<span class="jr-description jr-media-library-option '.$media_option_class.'"><strong>WP Media Library</strong> can display up to <strong>'. $saved_images .'</strong> images that are saved in media library for <strong>'. $username.'</strong>!<br> This option will NOT check for new images on Instagram!</span>';
242
+ }
243
+ echo '<span class="jr-description jr-instagram-option '.$insta_option_class.'"><strong>Instagram</strong> can display up to <strong>24</strong> images for <strong>'. $username .'</strong>!<br> This option will check for new images on Instagram!</span>';
244
+ ?>
245
  </p>
246
  <p class="<?php if ( 'instagram' != $instance['source'] ) echo 'hidden'; ?>">
247
+ <label for="<?php echo $this->get_field_id( 'attachment' ); ?>"><?php _e( 'Save and Display Images from Media Library:', 'jrinstaslider' ); ?></label>
248
  <input class="widefat" id="<?php echo $this->get_field_id( 'attachment' ); ?>" name="<?php echo $this->get_field_name( 'attachment' ); ?>" type="checkbox" value="1" <?php checked( '1', $instance['attachment'] ); ?> />
249
  <br><span class="jr-description"><?php _e( 'It is recommended you check the field above because images displayed directly from Instagram server will affect your site loading time!', 'jrinstaslider') ?></span>
250
  </p>
251
+ <p>
252
+ <label for="<?php echo $this->get_field_id( 'images_number' ); ?>"><?php _e( 'Number of images to show:', 'jrinstaslider' ); ?>
253
+ <input class="small-text" id="<?php echo $this->get_field_id( 'images_number' ); ?>" name="<?php echo $this->get_field_name( 'images_number' ); ?>" value="<?php echo $instance['images_number']; ?>" />
254
+ </label>
255
+ </p>
256
+ <p class="<?php if ( 'instagram' != $instance['source'] ) echo 'hidden'; ?>">
257
+ <label for="<?php echo $this->get_field_id( 'refresh_hour' ); ?>"><?php _e( 'Check for new images every:', 'jrinstaslider' ); ?>
258
+ <input class="small-text" id="<?php echo $this->get_field_id( 'refresh_hour' ); ?>" name="<?php echo $this->get_field_name( 'refresh_hour' ); ?>" value="<?php echo $instance['refresh_hour']; ?>" />
259
+ <span><?php _e('hours', 'jrinstaslider'); ?></span>
260
+ </label>
261
+ </p>
262
  <?php
263
  $user_opt = get_option( 'jr_insta_'. md5( $instance['username'] ) );
264
  if ( isset( $user_opt['deleted_images'] ) && ( !empty( $user_opt['deleted_images'] ) && ( $instance['source'] == 'instagram' ) && ( $instance['attachment'] ) ) ) {
342
  <input class="widefat" id="<?php echo $this->get_field_id( 'custom_url' ); ?>" name="<?php echo $this->get_field_name( 'custom_url' ); ?>" value="<?php echo $instance['custom_url']; ?>" />
343
  <span><?php _e('* use this field only if the above option is set to <strong>Custom Link</strong>', 'jrinstaslider'); ?></span>
344
  </p>
 
 
 
 
 
 
345
  <p class="<?php if ( 'thumbs' != $instance['template'] ) echo 'hidden'; ?>">
346
  <label for="<?php echo $this->get_field_id( 'columns' ); ?>"><?php _e( 'Number of Columns:', 'jrinstaslider' ); ?>
347
  <input class="small-text" id="<?php echo $this->get_field_id( 'columns' ); ?>" name="<?php echo $this->get_field_name( 'columns' ); ?>" value="<?php echo $instance['columns']; ?>" />
348
  <span><?php _e('max is 10 ( only for thumbnails template )', 'jrinstaslider'); ?></span>
349
  </label>
350
  </p>
 
 
 
 
 
 
351
  <p>
352
  <strong>Advanced Options</strong>
353
  <?php
406
  <span class="jr-description"><?php _e( 'Use this shortcode in any page or post to display images with this widget configuration!', 'jrinstaslider') ?></span>
407
  </p>
408
  <?php endif; ?>
409
+ <a target="_blank" title="Donate To Keep This Plugin Alive!" href="http://goo.gl/RZiu34"><p class="donate"><span></span>Donate To Keep This Plugin Alive!</p></a>
410
  </div>
411
  <?php
412
  }
436
  $atts = shortcode_atts( array( 'id' => '' ), $atts, 'jr_instagram' );
437
  $args = get_option( 'widget_jr_insta_slider' );
438
  if ( isset($args[$atts['id']] ) ) {
439
+ $args[$atts['id']]['widget_id'] = $atts['id'];
440
  return $this->display_images( $args[$atts['id']] );
441
  }
442
  }
477
  $controls = isset( $args['controls'] ) ? $args['controls'] : 'prev_next';
478
  $animation = isset( $args['animation'] ) ? $args['animation'] : 'slide';
479
  $description = isset( $args['description'] ) ? $args['description'] : array();
480
+ $widget_id = isset( $args['widget_id'] ) ? $args['widget_id'] : preg_replace( '/[^0-9]/', '', $this->id );
481
 
482
  if ( false == $username ) {
483
  return false;
511
  $ul_class = 'slides';
512
 
513
  if ( $template == 'slider' ) {
514
+ $images_div_class = 'pllexislider pllexislider-normal instaslider-nr-'. $widget_id;
515
  $slider_script =
516
  "<script type='text/javascript'>" . "\n" .
517
  " jQuery(document).ready(function($) {" . "\n" .
518
+ " $('.instaslider-nr-{$widget_id}').pllexislider({" . "\n" .
519
  " animation: '{$animation}'," . "\n" .
520
  " directionNav: {$direction_nav}," . "\n" .
521
  " controlNav: {$control_nav}," . "\n" .
525
  " });" . "\n" .
526
  "</script>" . "\n";
527
  } else {
528
+ $images_div_class = 'pllexislider pllexislider-overlay instaslider-nr-'. $widget_id;
529
  $slider_script =
530
  "<script type='text/javascript'>" . "\n" .
531
  " jQuery(document).ready(function($) {" . "\n" .
532
+ " $('.instaslider-nr-{$widget_id}').pllexislider({" . "\n" .
533
  " animation: '{$animation}'," . "\n" .
534
  " directionNav: {$direction_nav}," . "\n" .
535
  " controlNav: {$control_nav}," . "\n" .
663
  $template_args['link_to'] = $custom_url;
664
  }
665
 
666
+ $template_args['image'] = $image_data['url'];
 
 
 
 
 
 
 
 
 
667
  $template_args['caption'] = $image_data['caption'];
668
  $template_args['timestamp'] = $image_data['timestamp'];
669
  $template_args['username'] = $image_data['username'];
706
  }
707
 
708
  $short_caption = wp_trim_words( $caption, 10 );
709
+ $short_caption = preg_replace("/[^A-Za-z0-9?! ]/","", $short_caption);
710
 
711
  $image_src = '<img src="' . $image_url . '" alt="' . $short_caption . '" title="' . $short_caption . '" />';
712
  $image_output = $image_src;
822
  if ( false === $instaData || $user_opt['username'] != $username || $user_opt['cache_hours'] != $cache_hours || $user_opt['nr_images'] != $nr_images || $user_opt['attachment'] != $attachment ) {
823
 
824
  $instaData = array();
 
825
  $user_opt['username'] = $username;
826
  $user_opt['cache_hours'] = $cache_hours;
827
  $user_opt['nr_images'] = $nr_images;
859
 
860
  if ( $results && is_array( $results ) ) {
861
 
862
+ $userMedia = isset( $results['entry_data']['ProfilePage'][0]['user']['media']['nodes'] ) ? $results['entry_data']['ProfilePage'][0]['user']['media']['nodes'] : array();
863
 
864
  if ( empty( $userMedia ) ) {
865
  return __( 'No images found', 'jrinstaslider');
866
  }
867
 
868
  foreach ( $userMedia as $current => $result ) {
869
+
870
+ if ( $result['is_video'] == true ) {
871
  $nr_images++;
872
  continue;
873
  }
874
+
875
  if ( $current >= $nr_images ) {
876
  break;
877
  }
878
+
879
+ $meta_data = json_decode( wp_remote_retrieve_body( wp_remote_get( 'http://api.instagram.com/oembed?url=https://instagram.com/p/'. $result['code'], array( 'sslverify' => false ) ) ), true );
880
+
881
+ $image_data['username'] = $username;
882
+ $image_data['caption'] = $this->sanitize( $meta_data['title'] );
883
  $image_data['id'] = $result['id'];
884
+ $image_data['link'] = 'https://instagram.com/p/'. $result['code'];
885
  $image_data['popularity'] = (int) ( $result['comments']['count'] ) + ( $result['likes']['count'] );
886
+ $image_data['timestamp'] = (float) $result['date'];
887
+ $image_data['url'] = $result['display_src'];
 
 
888
 
889
  if ( !$attachment ) {
890
 
902
 
903
  } else {
904
 
905
+ $user_opt['deleted_images'][$image_data['id']] = $image_data['url'];
906
  }
907
 
908
  } else {
readme.txt CHANGED
@@ -7,10 +7,10 @@ Tested up to: 4.1
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
10
- Instagram Slider Widget is a responsive slider widget that shows 20 latest images from a public instagram user.
11
 
12
  == Description ==
13
- * Instagram Slider Widget is a responsive slider widget that shows 20 latest images from a public instagram user.
14
  = Features =
15
  * Images from instagram are imported as wordpress attachments
16
  * Display Images in Slider or Thumbnails
@@ -43,7 +43,14 @@ I will try to respond on wordpress.org asap but for faster reposnse use the link
43
  3. Backend Configuration
44
 
45
  == Changelog ==
46
- = 1.2.0 =
 
 
 
 
 
 
 
47
  * Bug fixes
48
  * Shortcode for widgets
49
  * Option not to insert images into media library
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
10
+ Instagram Slider Widget is a responsive slider widget that shows 24 latest images from a public instagram user.
11
 
12
  == Description ==
13
+ * Instagram Slider Widget is a responsive slider widget that shows 24 latest images from a public instagram user.
14
  = Features =
15
  * Images from instagram are imported as wordpress attachments
16
  * Display Images in Slider or Thumbnails
43
  3. Backend Configuration
44
 
45
  == Changelog ==
46
+ = 1.2.2 =
47
+ * Modified the code to work with new Instagram Page
48
+ * Removed Image Size option when loading images directly from Instagram
49
+ * 24 Images can now be displayed
50
+ * Fixed multiple widget bug using widget ids in class names
51
+ * Added better explanation for sources
52
+
53
+ = 1.2.1 =
54
  * Bug fixes
55
  * Shortcode for widgets
56
  * Option not to insert images into media library