Youtube Channel Gallery - Version 1.4.5

Version Description

  • Tweaks on CSS.
  • Now the CSS and JS files are loaded only on the page in which appears the plugin.
  • Correction on JS, because it did not work in IE and FF.
  • Code organization. More OOP.
Download this release

Release Info

Developer javitxu123
Plugin Icon 128x128 Youtube Channel Gallery
Version 1.4.5
Comparing to
See all releases

Code changes from version 1.4.2 to 1.4.5

Files changed (4) hide show
  1. readme.txt +7 -1
  2. scripts.js +7 -5
  3. styles.css +19 -3
  4. youtube-channel-gallery.php +146 -141
readme.txt CHANGED
@@ -4,7 +4,7 @@ Donate link: http://poselab.com/
4
  Tags: widget, gallery, youtube, channel, user
5
  Requires at least: 2.8
6
  Tested up to: 3.4.1
7
- Stable tag: 1.4.2
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
@@ -81,6 +81,12 @@ The username who uploaded a video to Youtube is located below each video, where
81
 
82
  == Changelog ==
83
 
 
 
 
 
 
 
84
  = 1.4.2 =
85
  * Fixed issue with CSS.
86
 
4
  Tags: widget, gallery, youtube, channel, user
5
  Requires at least: 2.8
6
  Tested up to: 3.4.1
7
+ Stable tag: 1.4.5
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
81
 
82
  == Changelog ==
83
 
84
+ = 1.4.5 =
85
+ * Tweaks on CSS.
86
+ * Now the CSS and JS files are loaded only on the page in which appears the plugin.
87
+ * Correction on JS, because it did not work in IE and FF.
88
+ * Code organization. More OOP.
89
+
90
  = 1.4.2 =
91
  * Fixed issue with CSS.
92
 
scripts.js CHANGED
@@ -1,15 +1,17 @@
 
 
1
  function ytcplayVideo (iframeid, youtubeid) {
2
- if(window[iframeid].loadVideoById) {
3
- window[iframeid].loadVideoById(youtubeid);
 
4
  }else{
5
- window[iframeid] = new YT.Player(iframeid, {
6
  events: {
7
  'onReady': function(){
8
- window[iframeid].loadVideoById(youtubeid);
9
  }
10
  }
11
  });
12
  }
13
 
14
-
15
  }
1
+ var ytcplayer = {};
2
+
3
  function ytcplayVideo (iframeid, youtubeid) {
4
+
5
+ if(iframeid in ytcplayer) {
6
+ ytcplayer[iframeid].loadVideoById(youtubeid);
7
  }else{
8
+ ytcplayer[iframeid] = new YT.Player(iframeid, {
9
  events: {
10
  'onReady': function(){
11
+ ytcplayer[iframeid].loadVideoById(youtubeid);
12
  }
13
  }
14
  });
15
  }
16
 
 
17
  }
styles.css CHANGED
@@ -1,8 +1,22 @@
1
- .ytcplayer{margin-bottom: 10px}
 
 
 
 
 
2
  ul.ytchagallery{
3
  margin: 0; padding: 0;
4
- list-style: none; overflow:hidden
 
 
 
 
 
5
  }
 
 
 
 
6
  ul.ytchagallery li{
7
  float:left;
8
  margin: 0 10px 10px 0;padding: 0
@@ -21,4 +35,6 @@ ul.ytchagallery li a:hover{
21
  }
22
  ul.ytchagallery li a:hover .ytcplay{
23
  background-position: center center;
24
- }
 
 
1
+ .ytcplayer{
2
+ display: block;
3
+ margin-bottom: 10px;
4
+ padding: 0
5
+ }
6
+
7
  ul.ytchagallery{
8
  margin: 0; padding: 0;
9
+ list-style: none;
10
+ *zoom: 1;
11
+ }
12
+ ul.ytchagallery:before,ul.ytchagallery:after {
13
+ content: " ";
14
+ display: table;
15
  }
16
+ ul.ytchagallery:after {
17
+ clear: both;
18
+ }
19
+
20
  ul.ytchagallery li{
21
  float:left;
22
  margin: 0 10px 10px 0;padding: 0
35
  }
36
  ul.ytchagallery li a:hover .ytcplay{
37
  background-position: center center;
38
+ }
39
+
40
+
youtube-channel-gallery.php CHANGED
@@ -5,7 +5,7 @@ Plugin URI: http://www.poselab.com/
5
  Description: Show a youtube video and a gallery of thumbnails for a youtube channel.
6
  Author: Javier Gómez Pose
7
  Author URI: http://www.poselab.com/
8
- Version: 1.4.2
9
  License: GPL2
10
 
11
  Copyright 2010 Javier Gómez Pose (email : javierpose@gmail.com)
@@ -37,22 +37,24 @@ class YoutubeChannelGallery_Widget extends WP_Widget {
37
  public function __construct() {
38
 
39
  //localization
40
- load_plugin_textdomain('youtube-channel-gallery', false, dirname(plugin_basename( __FILE__ ) ) . '/languages/' );
 
41
 
42
  parent::__construct(
43
  'youtubechannelgallery_widget', // Base ID
44
  __( 'Youtube Channel Gallery', 'youtube-channel-gallery' ), // Name
45
  array( 'description' => __( 'Show a youtube video and a gallery of thumbnails for a youtube channel', 'youtube-channel-gallery' ), ) // Args
46
  );
47
-
48
- // Load JavaScript and stylesheets
49
- $this->register_scripts_and_styles();
50
  }
51
 
52
  /**
53
  * Front-end display of widget.
54
  */
55
  public function widget( $args, $instance ) {
 
 
 
 
56
  extract( $args );
57
  $title = apply_filters( 'widget_title', $instance['title'] );
58
 
@@ -60,7 +62,7 @@ class YoutubeChannelGallery_Widget extends WP_Widget {
60
  if ( ! empty( $title ) )
61
  echo $before_title . $title . $after_title;
62
 
63
- ytchag_rss_markup($instance);
64
 
65
  echo $after_widget;
66
  }
@@ -146,151 +148,140 @@ class YoutubeChannelGallery_Widget extends WP_Widget {
146
  /*--------------------------------------------------*/
147
  /* Private Functions
148
  /*--------------------------------------------------*/
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
149
 
150
-
151
- // load css or js
152
- private function register_scripts_and_styles() {
153
- wp_enqueue_script('youtube_player_api', 'http://www.youtube.com/player_api', false, false, true);
154
- wp_enqueue_script('youtube-channel-gallery', plugins_url('/scripts.js', __FILE__), false, false, true);
155
- wp_enqueue_style('youtube-channel-gallery', plugins_url('/styles.css', __FILE__), false, false, 'all');
156
- }
157
-
158
- } // class YoutubeChannelGallery_Widget
159
-
160
- // register YoutubeChannelGallery_Widget widget
161
- add_action( 'widgets_init', create_function( '', 'register_widget( "YoutubeChannelGallery_Widget" );' ) );
162
-
163
-
164
-
165
- /*--------------------------------------------------*/
166
- /* Functions
167
- /*--------------------------------------------------*/
168
-
169
- function ytchag_rss_markup($instance){
170
-
171
- //$instance variables
172
- $ytchag_user = apply_filters('ytchag_user', $instance['ytchag_user']);
173
- $ytchag_link = apply_filters('ytchag_link', $instance['ytchag_link']);
174
- $ytchag_maxitems = apply_filters('ytchag_maxitems', $instance['ytchag_maxitems']);
175
- $ytchag_video_width = apply_filters('ytchag_video_width', $instance['ytchag_video_width']);
176
- $ytchag_thumb_width = apply_filters('ytchag_thumb_width', $instance['ytchag_thumb_width']);
177
- $ytchag_thumb_columns = apply_filters('ytchag_thumb_columns', $instance['ytchag_thumb_columns']);
178
- $ytchag_theme = apply_filters('ytchag_theme', $instance['ytchag_theme']);
179
-
180
- //defaults
181
- $ytchag_video_width = ( $ytchag_video_width ) ? $ytchag_video_width : 250;
182
- $ytchag_thumb_width = ( $ytchag_thumb_width ) ? $ytchag_thumb_width : 85;
183
- $ytchag_thumb_columns = ( $ytchag_thumb_columns ) ? $ytchag_thumb_columns : 0;
184
- $ytchag_theme = ( $ytchag_theme ) ? $ytchag_theme : 'dark';
185
-
186
- //heights of video and thumbnail
187
- $ytchag_video_heigh = round($ytchag_video_width/(16/9) + 32);
188
- $ytchag_thumb_height = $ytchag_thumb_width*75/100; // 75% 'cos sizes of thumbnail in xml file are 480x360 and 120x90
189
-
190
- if( $ytchag_user ) { // only if user name inserted
191
-
192
- // links
193
- $ytchag_rss_url = "http://gdata.youtube.com/feeds/api/users/" . $ytchag_user . "/uploads";
194
- $ytchag_link_url = "http://www.youtube.com/user/" . $ytchag_user;
195
-
196
-
197
- //RSS Feed
198
-
199
- include_once(ABSPATH . WPINC . '/feed.php');
200
-
201
- $rss = fetch_feed($ytchag_rss_url);
202
- $maxitems = ( $ytchag_maxitems ) ? $ytchag_maxitems : 9;
203
- $items = $rss->get_items(0, $maxitems);
204
-
205
-
206
- if (!empty($items)) {
207
- $i = 0;
208
- $column = 0;
209
- foreach ( $items as $item ) {
210
-
211
- $url = $item->get_permalink();
212
- $youtubeid = youtubeid($url);
213
- $title = $item->get_title();
214
-
215
- if ($enclosure = $item->get_enclosure()){
216
-
217
- //extract thumbnail
218
- //-----------------
219
-
220
- //thumbnail index in xml
221
- $big = 0;
222
- $small = 1;
223
- $size = $small;
224
- if($ytchag_thumb_width > '120'){
225
- $size = $big;
226
  }
227
 
228
- $allThumbs = $enclosure->get_thumbnails();
229
- foreach ($allThumbs as $index => $allThumb) {
230
- if ($index == $size) {
231
- $thumb = $allThumbs[$index];
232
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
233
  }
234
- }
235
-
236
- //Show me the player: iframe player
237
- if($i == 0) {
238
- //count the plugin occurrences on page
239
- STATIC $plugincount = 0;
240
- $plugincount++;
241
- ?>
242
- <iframe id="ytcplayer<?php echo $plugincount; ?>" type="text/html" width="<?php echo $ytchag_video_width; ?>" height="<?php echo $ytchag_video_heigh; ?>" src="http://www.youtube.com/embed/<?php echo $youtubeid; ?>?&autoplay=0&theme=<?php echo $ytchag_theme; ?>&enablejsapi=1&origin=<?php echo site_url(); ?>" frameborder="0"></iframe>
243
- <ul class="ytchagallery">
244
-
245
- <?php
246
- } // if player end
247
- $i++;
248
-
249
- $column++;
250
- // list of thumbnail videos
251
  ?>
252
- <li class="ytccell-<?php echo $column; ?>">
253
- <a class="ytcthumb" href="javascript: ytcplayVideo('ytcplayer<?php echo $plugincount; ?>', '<?php echo $youtubeid; ?>');" alt="<?php echo $title; ?>" title="<?php echo $title; ?>" style="background-image: url(<?php echo $thumb; ?>);">
254
- <div class="ytcplay" style="width: <?php echo $ytchag_thumb_width; ?>px; height: <?php echo $ytchag_thumb_height; ?>px"></div>
255
- </a>
256
- </li>
257
-
258
- <?php
259
- if($ytchag_thumb_columns !=0 && $column%$ytchag_thumb_columns === 0){
260
- $column = 0;
261
- }
262
- } //foreach end
263
  ?>
264
- </ul>
265
  <?php
266
- //link to youtube.com gallery
267
- if( $ytchag_link) {
268
- ?>
269
- <a href="<?php echo $ytchag_link_url ?>" class="more"><?php _e('Show more videos»', 'youtube-channel-gallery') ?></a>
270
- <?php
271
- }
272
  }
273
- } else {
274
- ?>
275
- <p class="empty"><?php _e('There is no video to show.', 'youtube-channel-gallery') ?></p>
276
- <?php
277
- }
278
- }
279
 
280
- //parse youtube url to extract id
281
- function youtubeid($url) {
282
- $url_string = parse_url($url, PHP_URL_QUERY);
283
- parse_str($url_string, $args);
284
- return isset($args['v']) ? $args['v'] : false;
285
- }
286
 
287
 
 
 
 
 
 
 
288
 
289
- /*--------------------------------------------------*/
290
- /* Shortcode
291
- /*--------------------------------------------------*/
292
 
293
- function YoutubeChannelGallery_Shortcode($atts) {
 
 
 
294
 
295
  extract( shortcode_atts( array(
296
  'user' => '',
@@ -312,7 +303,21 @@ function ytchag_rss_markup($instance){
312
  $instance['ytchag_theme'] = $theme;
313
 
314
 
315
- ytchag_rss_markup($instance);
316
- }
317
- add_shortcode('Youtube_Channel_Gallery', 'YoutubeChannelGallery_Shortcode');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
318
  ?>
5
  Description: Show a youtube video and a gallery of thumbnails for a youtube channel.
6
  Author: Javier Gómez Pose
7
  Author URI: http://www.poselab.com/
8
+ Version: 1.4.5
9
  License: GPL2
10
 
11
  Copyright 2010 Javier Gómez Pose (email : javierpose@gmail.com)
37
  public function __construct() {
38
 
39
  //localization
40
+ load_plugin_textdomain('youtube-channel-gallery', false, dirname(plugin_basename( __FILE__ ) ) . '/languages/' );
41
+ add_shortcode('Youtube_Channel_Gallery', array($this, 'YoutubeChannelGallery_Shortcode'));
42
 
43
  parent::__construct(
44
  'youtubechannelgallery_widget', // Base ID
45
  __( 'Youtube Channel Gallery', 'youtube-channel-gallery' ), // Name
46
  array( 'description' => __( 'Show a youtube video and a gallery of thumbnails for a youtube channel', 'youtube-channel-gallery' ), ) // Args
47
  );
 
 
 
48
  }
49
 
50
  /**
51
  * Front-end display of widget.
52
  */
53
  public function widget( $args, $instance ) {
54
+
55
+ // Load JavaScript and stylesheets
56
+ $this->register_scripts_and_styles();
57
+
58
  extract( $args );
59
  $title = apply_filters( 'widget_title', $instance['title'] );
60
 
62
  if ( ! empty( $title ) )
63
  echo $before_title . $title . $after_title;
64
 
65
+ $this->ytchag_rss_markup($instance);
66
 
67
  echo $after_widget;
68
  }
148
  /*--------------------------------------------------*/
149
  /* Private Functions
150
  /*--------------------------------------------------*/
151
+ private function ytchag_rss_markup($instance){
152
+
153
+ //$instance variables
154
+ $ytchag_user = apply_filters('ytchag_user', $instance['ytchag_user']);
155
+ $ytchag_link = apply_filters('ytchag_link', $instance['ytchag_link']);
156
+ $ytchag_maxitems = apply_filters('ytchag_maxitems', $instance['ytchag_maxitems']);
157
+ $ytchag_video_width = apply_filters('ytchag_video_width', $instance['ytchag_video_width']);
158
+ $ytchag_thumb_width = apply_filters('ytchag_thumb_width', $instance['ytchag_thumb_width']);
159
+ $ytchag_thumb_columns = apply_filters('ytchag_thumb_columns', $instance['ytchag_thumb_columns']);
160
+ $ytchag_theme = apply_filters('ytchag_theme', $instance['ytchag_theme']);
161
+
162
+ //defaults
163
+ $ytchag_video_width = ( $ytchag_video_width ) ? $ytchag_video_width : 250;
164
+ $ytchag_thumb_width = ( $ytchag_thumb_width ) ? $ytchag_thumb_width : 85;
165
+ $ytchag_thumb_columns = ( $ytchag_thumb_columns ) ? $ytchag_thumb_columns : 0;
166
+ $ytchag_theme = ( $ytchag_theme ) ? $ytchag_theme : 'dark';
167
+
168
+ //heights of video and thumbnail
169
+ $ytchag_video_heigh = round($ytchag_video_width/(16/9) + 32);
170
+ $ytchag_thumb_height = $ytchag_thumb_width*75/100; // 75% 'cos sizes of thumbnail in xml file are 480x360 and 120x90
171
+
172
+ if( $ytchag_user ) { // only if user name inserted
173
+
174
+ // links
175
+ $ytchag_rss_url = "http://gdata.youtube.com/feeds/api/users/" . $ytchag_user . "/uploads";
176
+ $ytchag_link_url = "http://www.youtube.com/user/" . $ytchag_user;
177
+
178
+
179
+ //RSS Feed
180
+
181
+ include_once(ABSPATH . WPINC . '/feed.php');
182
+
183
+ $rss = fetch_feed($ytchag_rss_url);
184
+ $maxitems = ( $ytchag_maxitems ) ? $ytchag_maxitems : 9;
185
+ $items = $rss->get_items(0, $maxitems);
186
+
187
+
188
+ if (!empty($items)) {
189
+ $i = 0;
190
+ $column = 0;
191
+ foreach ( $items as $item ) {
192
+
193
+ $url = $item->get_permalink();
194
+ $youtubeid = $this->youtubeid($url);
195
+ $title = $item->get_title();
196
+
197
+ if ($enclosure = $item->get_enclosure()){
198
+
199
+ //extract thumbnail
200
+ //-----------------
201
+
202
+ //thumbnail index in xml
203
+ $big = 0;
204
+ $small = 1;
205
+ $size = $small;
206
+ if($ytchag_thumb_width > '120'){
207
+ $size = $big;
208
+ }
209
 
210
+ $allThumbs = $enclosure->get_thumbnails();
211
+ foreach ($allThumbs as $index => $allThumb) {
212
+ if ($index == $size) {
213
+ $thumb = $allThumbs[$index];
214
+ }
215
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
216
  }
217
 
218
+ //Show me the player: iframe player
219
+ if($i == 0) {
220
+ //count the plugin occurrences on page
221
+ STATIC $plugincount = 0;
222
+ $plugincount++;
223
+ ?>
224
+ <iframe id="ytcplayer<?php echo $plugincount; ?>" class="ytcplayer" type="text/html" width="<?php echo $ytchag_video_width; ?>" height="<?php echo $ytchag_video_heigh; ?>" src="http://www.youtube.com/embed/<?php echo $youtubeid; ?>?&autoplay=0&theme=<?php echo $ytchag_theme; ?>&enablejsapi=1&origin=<?php echo site_url(); ?>" frameborder="0"></iframe>
225
+ <ul class="ytchagallery">
226
+
227
+ <?php
228
+ } // if player end
229
+ $i++;
230
+
231
+ $column++;
232
+ // list of thumbnail videos
233
+ ?>
234
+ <li class="ytccell-<?php echo $column; ?>">
235
+ <a class="ytcthumb" href="javascript: ytcplayVideo('ytcplayer<?php echo $plugincount; ?>', '<?php echo $youtubeid; ?>');" alt="<?php echo $title; ?>" title="<?php echo $title; ?>" style="background-image: url(<?php echo $thumb; ?>);">
236
+ <div class="ytcplay" style="width: <?php echo $ytchag_thumb_width; ?>px; height: <?php echo $ytchag_thumb_height; ?>px"></div>
237
+ </a>
238
+ </li>
239
+
240
+ <?php
241
+ if($ytchag_thumb_columns !=0 && $column%$ytchag_thumb_columns === 0){
242
+ $column = 0;
243
  }
244
+ } //foreach end
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
245
  ?>
246
+ </ul>
247
+ <?php
248
+ //link to youtube.com gallery
249
+ if( $ytchag_link) {
250
+ ?>
251
+ <a href="<?php echo $ytchag_link_url ?>" class="more"><?php _e('Show more videos»', 'youtube-channel-gallery') ?></a>
252
+ <?php
253
+ }
254
+ }
255
+ } else {
 
256
  ?>
257
+ <p class="empty"><?php _e('There is no video to show.', 'youtube-channel-gallery') ?></p>
258
  <?php
 
 
 
 
 
 
259
  }
260
+ }//ytchag_rss_markup
 
 
 
 
 
261
 
262
+ //parse youtube url to extract id
263
+ private function youtubeid($url) {
264
+ $url_string = parse_url($url, PHP_URL_QUERY);
265
+ parse_str($url_string, $args);
266
+ return isset($args['v']) ? $args['v'] : false;
267
+ }//youtubeid
268
 
269
 
270
+ // load css or js
271
+ private function register_scripts_and_styles() {
272
+ wp_enqueue_script('youtube_player_api', 'http://www.youtube.com/player_api', false, false, true);
273
+ wp_enqueue_script('youtube-channel-gallery', plugins_url('/scripts.js', __FILE__), false, false, true);
274
+ wp_enqueue_style('youtube-channel-gallery', plugins_url('/styles.css', __FILE__), false, false, 'all');
275
+ }//register_scripts_and_styles
276
 
277
+ /*--------------------------------------------------*/
278
+ /* Shortcode
279
+ /*--------------------------------------------------*/
280
 
281
+ public function YoutubeChannelGallery_Shortcode($atts) {
282
+
283
+ // Load JavaScript and stylesheets
284
+ $this->register_scripts_and_styles();
285
 
286
  extract( shortcode_atts( array(
287
  'user' => '',
303
  $instance['ytchag_theme'] = $theme;
304
 
305
 
306
+ $this->ytchag_rss_markup($instance);
307
+
308
+ } // YoutubeChannelGallery_Shortcode
309
+
310
+
311
+ } // class YoutubeChannelGallery_Widget
312
+
313
+ // register YoutubeChannelGallery_Widget widget
314
+ add_action( 'widgets_init', create_function( '', 'register_widget( "YoutubeChannelGallery_Widget" );' ) );
315
+
316
+
317
+
318
+ /*--------------------------------------------------*/
319
+ /* Functions
320
+ /*--------------------------------------------------*/
321
+
322
+
323
  ?>