Youtube Channel Gallery - Version 1.6.1

Version Description

  • Added options to show title and description with thumbnails.
  • Added new classes to better manage the final appearance (rows, columns, even, odd, number of row an column).
  • Calculated width between thumbnails.
Download this release

Release Info

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

Code changes from version 1.5.4 to 1.6.1

Files changed (12) hide show
  1. admin-styles.css +9 -5
  2. languages/youtube-channel-gallery-es_ES.mo +0 -0
  3. languages/youtube-channel-gallery-es_ES.po +76 -28
  4. languages/youtube-channel-gallery-pt_BR.mo +0 -0
  5. languages/youtube-channel-gallery-pt_BR.po +0 -178
  6. readme.txt +47 -69
  7. screenshot-1.jpg +0 -0
  8. screenshot-3.jpg +0 -0
  9. screenshot-4.jpg +0 -0
  10. scripts.js +41 -1
  11. styles.css +87 -61
  12. youtube-channel-gallery.php +209 -24
admin-styles.css CHANGED
@@ -31,16 +31,20 @@
31
 
32
 
33
  /*tabs a*/
34
- .ytchgtabs a{
35
  padding: 5px;
36
  display: inline-block;
37
  }
38
 
39
  /*content*/
40
  .ytchgtabs div {
41
-
42
  border: 1px solid #DFDFDF;
43
- padding: 1em 1.4em;
44
- background: none;
45
  background: #FAFAFA;
46
- }
 
 
 
 
 
 
31
 
32
 
33
  /*tabs a*/
34
+ .ytchgtabs-tabs a{
35
  padding: 5px;
36
  display: inline-block;
37
  }
38
 
39
  /*content*/
40
  .ytchgtabs div {
 
41
  border: 1px solid #DFDFDF;
42
+ padding: 15px 12px;
 
43
  background: #FAFAFA;
44
+ }
45
+
46
+ /*title and description*/
47
+ .ytchgtabs div.ytchg-title-and-description{border: none; background: none;}
48
+
49
+
50
+ .ytchgtabs fieldset.ytchg-fieldborder{border: 1px solid #DFDFDF;border-radius: 5px;}
languages/youtube-channel-gallery-es_ES.mo CHANGED
Binary file
languages/youtube-channel-gallery-es_ES.po CHANGED
@@ -7,8 +7,8 @@ msgid ""
7
  msgstr ""
8
  "Project-Id-Version: youtube-channel-gallery\n"
9
  "Report-Msgid-Bugs-To: \n"
10
- "POT-Creation-Date: 2012-10-17 10:30+0100\n"
11
- "PO-Revision-Date: 2012-10-17 10:34+0100\n"
12
  "Last-Translator: Javier <javierpose@gmail.com>\n"
13
  "Language-Team: PoseLab <javierpose@gmail.com>\n"
14
  "MIME-Version: 1.0\n"
@@ -31,98 +31,146 @@ msgstr "Galería de Canal de Youtube"
31
  msgid "Show a youtube video and a gallery of thumbnails for a youtube channel"
32
  msgstr "Muestra un vídeo y una galería de miniaturas de una canal de Youtube "
33
 
34
- #: youtube-channel-gallery.php:134
35
  msgid "Title:"
36
  msgstr "Título:"
37
 
38
- #: youtube-channel-gallery.php:139
39
  msgid "YouTube user name:"
40
  msgstr "Nombre de usuario de Youtube:"
41
 
42
- #: youtube-channel-gallery.php:181
 
 
 
 
 
 
 
 
 
 
 
 
43
  msgid "Video width:"
44
  msgstr "Ancho del vídeo:"
45
 
46
- #: youtube-channel-gallery.php:187
47
- #: youtube-channel-gallery.php:241
48
  msgid "Aspect ratio:"
49
  msgstr "Relación de aspecto:"
50
 
51
- #: youtube-channel-gallery.php:189
52
- #: youtube-channel-gallery.php:243
53
  msgid "Standard (4x3)"
54
  msgstr "Estándar (4x3)"
55
 
56
- #: youtube-channel-gallery.php:190
57
- #: youtube-channel-gallery.php:244
58
  msgid "Widescreen (16x9)"
59
  msgstr "Panorámico (16x9)"
60
 
61
- #: youtube-channel-gallery.php:196
62
  msgid "Theme:"
63
  msgstr "Tema:"
64
 
65
- #: youtube-channel-gallery.php:198
66
  msgid "Dark"
67
  msgstr "Oscuro"
68
 
69
- #: youtube-channel-gallery.php:199
70
  msgid "Light"
71
  msgstr "Claro"
72
 
73
- #: youtube-channel-gallery.php:205
74
  msgid "Progress bar color:"
75
  msgstr "Color de barra de progreso:"
76
 
77
- #: youtube-channel-gallery.php:207
78
  msgid "Red"
79
  msgstr "Rojo"
80
 
81
- #: youtube-channel-gallery.php:208
82
  msgid "White"
83
  msgstr "Blanco"
84
 
85
- #: youtube-channel-gallery.php:213
86
  msgid "Autoplay"
87
  msgstr "Autoplay"
88
 
89
- #: youtube-channel-gallery.php:218
90
  msgid "Show related videos"
91
  msgstr "Mostrar los vídeos relacionados"
92
 
93
- #: youtube-channel-gallery.php:223
94
  msgid "Show info (title, uploader)"
95
  msgstr "Mostrar información (título, cargador)"
96
 
97
- #: youtube-channel-gallery.php:230
98
  msgid "Number of videos to show:"
99
  msgstr "Número de vídeos a mostrar:"
100
 
101
- #: youtube-channel-gallery.php:235
102
  msgid "Thumbnail width:"
103
  msgstr "Ancho de miniaturas:"
104
 
105
- #: youtube-channel-gallery.php:249
106
  msgid "Thumbnail columns:"
107
  msgstr "Columnas de las miniaturas:"
108
 
109
- #: youtube-channel-gallery.php:258
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
110
  msgid "Link text:"
111
  msgstr "Texto del enlace"
112
 
113
- #: youtube-channel-gallery.php:264
114
  msgid "Show link to channel:"
115
  msgstr "Mostrar enlace al canal:"
116
 
117
- #: youtube-channel-gallery.php:325
118
  msgid "Show more videos»"
119
  msgstr "Ver más vídeos»"
120
 
121
- #: youtube-channel-gallery.php:358
122
  msgid "You must insert a valid YouTube user name."
123
  msgstr "Debe introducir un nombre válido de usuario de YouTube."
124
 
125
- #: youtube-channel-gallery.php:447
126
  msgid "There is no video to show."
127
  msgstr "No hay ningún vídeo para mostrar."
128
 
7
  msgstr ""
8
  "Project-Id-Version: youtube-channel-gallery\n"
9
  "Report-Msgid-Bugs-To: \n"
10
+ "POT-Creation-Date: 2012-11-07 13:47+0100\n"
11
+ "PO-Revision-Date: 2012-11-07 13:50+0100\n"
12
  "Last-Translator: Javier <javierpose@gmail.com>\n"
13
  "Language-Team: PoseLab <javierpose@gmail.com>\n"
14
  "MIME-Version: 1.0\n"
31
  msgid "Show a youtube video and a gallery of thumbnails for a youtube channel"
32
  msgstr "Muestra un vídeo y una galería de miniaturas de una canal de Youtube "
33
 
34
+ #: youtube-channel-gallery.php:142
35
  msgid "Title:"
36
  msgstr "Título:"
37
 
38
+ #: youtube-channel-gallery.php:147
39
  msgid "YouTube user name:"
40
  msgstr "Nombre de usuario de Youtube:"
41
 
42
+ #: youtube-channel-gallery.php:223
43
+ msgid "Player"
44
+ msgstr "Reproductor"
45
+
46
+ #: youtube-channel-gallery.php:224
47
+ msgid "Thumbnails"
48
+ msgstr "Miniaturas"
49
+
50
+ #: youtube-channel-gallery.php:225
51
+ msgid "Link"
52
+ msgstr "Enlace"
53
+
54
+ #: youtube-channel-gallery.php:238
55
  msgid "Video width:"
56
  msgstr "Ancho del vídeo:"
57
 
58
+ #: youtube-channel-gallery.php:244
59
+ #: youtube-channel-gallery.php:304
60
  msgid "Aspect ratio:"
61
  msgstr "Relación de aspecto:"
62
 
63
+ #: youtube-channel-gallery.php:246
64
+ #: youtube-channel-gallery.php:306
65
  msgid "Standard (4x3)"
66
  msgstr "Estándar (4x3)"
67
 
68
+ #: youtube-channel-gallery.php:247
69
+ #: youtube-channel-gallery.php:307
70
  msgid "Widescreen (16x9)"
71
  msgstr "Panorámico (16x9)"
72
 
73
+ #: youtube-channel-gallery.php:253
74
  msgid "Theme:"
75
  msgstr "Tema:"
76
 
77
+ #: youtube-channel-gallery.php:255
78
  msgid "Dark"
79
  msgstr "Oscuro"
80
 
81
+ #: youtube-channel-gallery.php:256
82
  msgid "Light"
83
  msgstr "Claro"
84
 
85
+ #: youtube-channel-gallery.php:262
86
  msgid "Progress bar color:"
87
  msgstr "Color de barra de progreso:"
88
 
89
+ #: youtube-channel-gallery.php:264
90
  msgid "Red"
91
  msgstr "Rojo"
92
 
93
+ #: youtube-channel-gallery.php:265
94
  msgid "White"
95
  msgstr "Blanco"
96
 
97
+ #: youtube-channel-gallery.php:270
98
  msgid "Autoplay"
99
  msgstr "Autoplay"
100
 
101
+ #: youtube-channel-gallery.php:275
102
  msgid "Show related videos"
103
  msgstr "Mostrar los vídeos relacionados"
104
 
105
+ #: youtube-channel-gallery.php:280
106
  msgid "Show info (title, uploader)"
107
  msgstr "Mostrar información (título, cargador)"
108
 
109
+ #: youtube-channel-gallery.php:293
110
  msgid "Number of videos to show:"
111
  msgstr "Número de vídeos a mostrar:"
112
 
113
+ #: youtube-channel-gallery.php:298
114
  msgid "Thumbnail width:"
115
  msgstr "Ancho de miniaturas:"
116
 
117
+ #: youtube-channel-gallery.php:312
118
  msgid "Thumbnail columns:"
119
  msgstr "Columnas de las miniaturas:"
120
 
121
+ #: youtube-channel-gallery.php:319
122
+ msgid "Show title or description"
123
+ msgstr "Mostrar título y descripción"
124
+
125
+ #: youtube-channel-gallery.php:326
126
+ msgid "Show title"
127
+ msgstr "Mostrar Título"
128
+
129
+ #: youtube-channel-gallery.php:331
130
+ msgid "Show description"
131
+ msgstr "Mostrar descripción"
132
+
133
+ #: youtube-channel-gallery.php:335
134
+ msgid "Thumbnail alignment:"
135
+ msgstr "Alineación de miniaturas:"
136
+
137
+ #: youtube-channel-gallery.php:337
138
+ msgid "Left"
139
+ msgstr "Izquierda"
140
+
141
+ #: youtube-channel-gallery.php:338
142
+ msgid "Right"
143
+ msgstr "Derecha"
144
+
145
+ #: youtube-channel-gallery.php:339
146
+ msgid "Top"
147
+ msgstr "Arriba"
148
+
149
+ #: youtube-channel-gallery.php:340
150
+ msgid "Bottom"
151
+ msgstr "Abajo"
152
+
153
+ #: youtube-channel-gallery.php:345
154
+ msgid "Description words number:"
155
+ msgstr "Número de palabras en la descripción:"
156
+
157
+ #: youtube-channel-gallery.php:366
158
  msgid "Link text:"
159
  msgstr "Texto del enlace"
160
 
161
+ #: youtube-channel-gallery.php:372
162
  msgid "Show link to channel:"
163
  msgstr "Mostrar enlace al canal:"
164
 
165
+ #: youtube-channel-gallery.php:443
166
  msgid "Show more videos»"
167
  msgstr "Ver más vídeos»"
168
 
169
+ #: youtube-channel-gallery.php:614
170
  msgid "You must insert a valid YouTube user name."
171
  msgstr "Debe introducir un nombre válido de usuario de YouTube."
172
 
173
+ #: youtube-channel-gallery.php:619
174
  msgid "There is no video to show."
175
  msgstr "No hay ningún vídeo para mostrar."
176
 
languages/youtube-channel-gallery-pt_BR.mo DELETED
Binary file
languages/youtube-channel-gallery-pt_BR.po DELETED
@@ -1,178 +0,0 @@
1
- # Spanish translation for duplicate-post
2
- # Copyright (c) 2010 Rosetta Contributors and Canonical Ltd 2010
3
- # This file is distributed under the same license as the duplicate-post package.
4
- # FIRST AUTHOR <EMAIL@ADDRESS>, 2010.
5
- #
6
- msgid ""
7
- msgstr ""
8
- "Project-Id-Version: youtube-channel-gallery\n"
9
- "Report-Msgid-Bugs-To: \n"
10
- "POT-Creation-Date: 2012-07-24 14:14+0100\n"
11
- "PO-Revision-Date: 2012-09-18 13:07+0100\n"
12
- "Last-Translator: Javier <javierpose@gmail.com>\n"
13
- "Language-Team: PoseLab <javierpose@gmail.com>\n"
14
- "MIME-Version: 1.0\n"
15
- "Content-Type: text/plain; charset=UTF-8\n"
16
- "Content-Transfer-Encoding: 8bit\n"
17
- "X-Launchpad-Export-Date: 2010-06-23 21:48+0000\n"
18
- "X-Generator: Launchpad (build Unknown)\n"
19
- "X-Poedit-Basepath: ..\n"
20
- "X-Poedit-Language: Portuguese\n"
21
- "X-Poedit-Country: PORTUGAL\n"
22
- "X-Poedit-KeywordsList: _e;__\n"
23
- "X-Poedit-SourceCharset: utf-8\n"
24
- "X-Poedit-SearchPath-0: .\n"
25
-
26
- #: youtube-channel-gallery.php:44
27
- #: pruebas/youtube-channel-gallery_bueno.php:46
28
- #: pruebas/youtube-channel-gallery_bueno2.php:46
29
- msgid "Youtube Channel Gallery"
30
- msgstr "Galería do Canal Youtube"
31
-
32
- #: youtube-channel-gallery.php:45
33
- #: pruebas/youtube-channel-gallery_bueno.php:47
34
- #: pruebas/youtube-channel-gallery_bueno2.php:47
35
- msgid "Show a youtube video and a gallery of thumbnails for a youtube channel"
36
- msgstr "Mostrar um video youtube e a gelaria de miniaturas para o canal Youtube"
37
-
38
- #: youtube-channel-gallery.php:100
39
- #: pruebas/youtube-channel-gallery_bueno.php:109
40
- #: pruebas/youtube-channel-gallery_bueno2.php:107
41
- msgid "Title:"
42
- msgstr "Título:"
43
-
44
- #: youtube-channel-gallery.php:105
45
- #: pruebas/youtube-channel-gallery_bueno.php:114
46
- #: pruebas/youtube-channel-gallery_bueno2.php:112
47
- msgid "YouTube user name:"
48
- msgstr "Nome do usuário Youtube:"
49
-
50
- #: youtube-channel-gallery.php:111
51
- #: pruebas/youtube-channel-gallery_bueno.php:120
52
- #: pruebas/youtube-channel-gallery_bueno2.php:118
53
- msgid "Show link to channel:"
54
- msgstr "Mostrar link do canal:"
55
-
56
- #: youtube-channel-gallery.php:115
57
- #: pruebas/youtube-channel-gallery_bueno.php:124
58
- #: pruebas/youtube-channel-gallery_bueno2.php:122
59
- msgid "Number of videos to show:"
60
- msgstr "Quantidade de vídeos a mostrar:"
61
-
62
- #: youtube-channel-gallery.php:120
63
- #: pruebas/youtube-channel-gallery_bueno.php:129
64
- #: pruebas/youtube-channel-gallery_bueno2.php:127
65
- msgid "Video width:"
66
- msgstr "Largura do vídeo:"
67
-
68
- #: youtube-channel-gallery.php:125
69
- #: pruebas/youtube-channel-gallery_bueno.php:134
70
- #: pruebas/youtube-channel-gallery_bueno2.php:132
71
- msgid "Thumbnail width:"
72
- msgstr "Largura das miniaturas:"
73
-
74
- #: youtube-channel-gallery.php:130
75
- #: pruebas/youtube-channel-gallery_bueno.php:139
76
- #: pruebas/youtube-channel-gallery_bueno.php:144
77
- #: pruebas/youtube-channel-gallery_bueno2.php:137
78
- msgid "Thumbnail columns:"
79
- msgstr "Colunas das miniaturas:"
80
-
81
- #: youtube-channel-gallery.php:135
82
- #: pruebas/youtube-channel-gallery_bueno.php:149
83
- msgid "Theme:"
84
- msgstr "Tema:"
85
-
86
- #: youtube-channel-gallery.php:137
87
- #: pruebas/youtube-channel-gallery_bueno.php:151
88
- msgid "Dark"
89
- msgstr "Escuro"
90
-
91
- #: youtube-channel-gallery.php:138
92
- msgid "Light"
93
- msgstr "Claro"
94
-
95
- #: youtube-channel-gallery.php:270
96
- #: pruebas/youtube-channel-gallery_bueno.php:345
97
- #: pruebas/youtube-channel-gallery_bueno2.php:315
98
- msgid "Show more videos»"
99
- msgstr "Ver mais vídeos»"
100
-
101
- #: youtube-channel-gallery.php:276
102
- #: pruebas/youtube-channel-gallery_bueno.php:351
103
- #: pruebas/youtube-channel-gallery_bueno2.php:321
104
- msgid "There is no video to show."
105
- msgstr "Não tem nenhum vídeo para mostrar."
106
-
107
- #: pruebas/youtube-channel-gallery_bueno.php:152
108
- msgid "Light:"
109
- msgstr "Claro:"
110
-
111
- #~ msgid "No post to duplicate has been supplied!"
112
- #~ msgstr "No se facilitó ninguna entrada a copiar"
113
- #~ msgid "Post creation failed, could not find original post:"
114
- #~ msgstr ""
115
- #~ "Creación realizada sin éxito, no ha sido posible encontrar la entrada "
116
- #~ "original:"
117
- #~ msgid "No page to duplicate has been supplied!"
118
- #~ msgstr "No se facilitó ninguna página a copiar"
119
- #~ msgid "Make a duplicate from this post"
120
- #~ msgstr "Crea una copia de esta entrada"
121
- #~ msgid "Duplicate"
122
- #~ msgstr "Duplicar"
123
- #~ msgid "Make a duplicate from this page"
124
- #~ msgstr "Crea una copia de esta página"
125
- #~ msgid "Copy to a new draft"
126
- #~ msgstr "Copia en un borrador nuevo"
127
- #~ msgid "Duplicate Post Options"
128
- #~ msgstr "Opciones"
129
- #~ msgid "Duplicate Post"
130
- #~ msgstr "Duplicate Post"
131
- #~ msgid "Copy post/page date also"
132
- #~ msgstr "Copiar también fecha del post o la página"
133
- #~ msgid ""
134
- #~ "Normally, the new draft has publication date set to current time: check "
135
- #~ "the box to copy the original post/page date"
136
- #~ msgstr ""
137
- #~ "Normalmente se establece la fecha de publicación del nuevo borrador a la "
138
- #~ "fecha actual: compruebe la casilla para copiar la fecha original del post "
139
- #~ "o la página"
140
- #~ msgid "Do not copy these fields"
141
- #~ msgstr "No copiar estos campos"
142
- #~ msgid ""
143
- #~ "Comma-separated list of meta fields that must not be copied when cloning "
144
- #~ "a post/page"
145
- #~ msgstr ""
146
- #~ "Lista separada por comas de meta campos que no pueden ser copiados cuando "
147
- #~ "se clona una entrada/pagina."
148
- #~ msgid "Title prefix"
149
- #~ msgstr "Prefijo del titulo"
150
- #~ msgid ""
151
- #~ "Prefix to be added before the original title when cloning a post/page, e."
152
- #~ "g. \"Copy of\" (blank for no prefix)"
153
- #~ msgstr ""
154
- #~ "Prefijo a ser agregado antes del titulo original cuando se clona una "
155
- #~ "entrada/pagina, ej. \"Copia de\" (en blanco para no agregar prefijo)"
156
- #~ msgid "Minimum level to copy posts"
157
- #~ msgstr "Nivel mínimo para copiar posts"
158
- #~ msgid ""
159
- #~ "Warning: users will be able to copy all posts, even those of higher level "
160
- #~ "users"
161
- #~ msgstr ""
162
- #~ "Atención: los usuarios podrán copiar todos los posts, incluso aquellos de "
163
- #~ "usuarios de nivel más alto"
164
- #~ msgid "Save Changes"
165
- #~ msgstr "Guardar los cambios"
166
- #~ msgid "Donate"
167
- #~ msgstr "Hacer una donación"
168
- #~ msgid "Translate"
169
- #~ msgstr "Traducir"
170
- #~ msgid "http://www.lopo.it/duplicate-post-plugin/"
171
- #~ msgstr "Copy text \t http://www.lopo.it/duplicate-post-plugin/"
172
- #~ msgid "Creates a copy of a post."
173
- #~ msgstr "Crear una copia de las entradas."
174
- #~ msgid "Enrico Battocchi"
175
- #~ msgstr "Enrico Battocchi"
176
- #~ msgid "http://www.lopo.it"
177
- #~ msgstr "http://www.lopo.it"
178
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
readme.txt CHANGED
@@ -1,10 +1,10 @@
1
  === Youtube Channel Gallery ===
2
  Contributors: javitxu123
3
  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.5.4
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
@@ -14,6 +14,18 @@ Show a YouTube video and a gallery of thumbnails for a youtube channel.
14
 
15
  Show a youtube video and a gallery of thumbnails for a youtube user channel.
16
 
 
 
 
 
 
 
 
 
 
 
 
 
17
  = Features: =
18
  * Display latest thumbnail videos from YouTube user channel.
19
  * When you click on one of the thumbnails the video plays at the top.
@@ -22,88 +34,47 @@ Show a youtube video and a gallery of thumbnails for a youtube user channel.
22
  * You can use multiple instances of the plugin on the same page.
23
 
24
 
25
- = Demo: =
26
- You can see a demo of the plugin at the following URL:
27
-
28
- [Youtube Channel Gallery Demo](http://poselab.com/youtube-channel-gallery)
29
-
30
-
31
  = Widget fields: =
32
- Description of the different fields of the widget.
33
 
34
- * Title: Widget Title.
35
- * YouTube user name: the username of the user's Youtube videos you want to show.
36
 
37
- Player:
38
 
39
- * Video width: indicates the width of the video player. Value: Number.
40
- * Aspect ratio: indicates the proportions of the player, widescreen (16:9) or standard (4:3) format.
41
- * Theme: display player controls (like a 'play' button or volume control) within a dark or light control bar.
42
- * Progress bar color: specifies the color that will be used in the player's video progress bar to highlight the amount of the video that the viewer has already seen.
43
- * Autoplay: Automatically play the initial video when the player loads.
44
- * Show related videos: Load related videos once playback of initial video starts and display in "genie menu" when menu button is pressed.
45
- * Show info (title, uploader): Display information like the video title and rating before the video starts playing.
46
 
47
- Thumbnails:
48
 
49
- * Number of videos to show: It must be a number indicating the number of thumbnails to be displayed.
50
- * Thumbnail size: indicates the width of the thumbnails. The height is automatically generated.
51
- * Aspect ratio: indicates the proportions of the thumbnails, widescreen (16:9) or standard (4:3) format.
52
- * Thumbnail columns: assign a numeric class to each thumbnail based on the number of columns to apply styles to each column.
 
 
 
 
53
 
54
- Link:
55
 
56
- * Link text: field to customize the text of the link to the gallery on YouTube.
57
- * Show link to channel: option to display a link to the youtube user channel.
58
 
59
 
60
  = Shortcode syntax: =
61
- If you want to use it as Shortcode:
62
 
63
- `[Youtube_Channel_Gallery
64
- user="MaxonC4D"
65
- videowidth="500"
66
- ratio="16x9"
67
- theme="light"
68
- color="white"
69
- autoplay="1"
70
- rel="1"
71
- showinfo="1"
72
- maxitems="9"
73
- thumbwidth="90"
74
- thumbratio="16x9"
75
- thumbcolumns="3"
76
- ]`
77
 
78
- The attributes used in the shortcode are the same as the fields available in the widget, except the title field.
79
-
80
- * user: YouTube user name (required).
81
-
82
- Player:
83
-
84
- * videowidth: Video width. Values: Number. (optional).
85
- * ratio: Aspect ratio. Values: 4/3 (default) / 16x9. (optional).
86
- * theme: Theme. Values: dark (default) / light. (optional).
87
- * color: Progress bar color. Values: red (default) / white. (optional).
88
- * autoplay: Autoplay. Values: 0 (default) / 1. (optional).
89
- * rel: Show related videos. Values: 0 (default) / 1. (optional).
90
- * showinfo: Show info (title, uploader). Values: 0 (default) / 1. (optional).
91
-
92
- Thumbnails:
93
-
94
- * maxitems: Number of videos to show. Values: Number. (optional).
95
- * thumbwidth: Thumbnail size. Values: Number. (optional).
96
- * thumbratio: Aspect ratio. Values: 4/3 (default) / 16x9. (optional).
97
- * thumbcolumns: Thumbnail columns. Values: Number. (optional).
98
-
99
- Link:
100
-
101
- * link_tx: Link text. Values: String. (optional).
102
- * link: Show link to channel. Values: 0 (default) / 1. (optional).
103
 
104
  = Languages: =
105
  * Spanish (es_ES) - [PoseLab](http://poselab.com/)
106
- * Brazilian Portuguese (pt_BR). Thanks to Rodny.
107
 
108
  If you have created your own language pack, or have an update of an existing one, you can [send me](mailto:javierpose@gmail.com) your gettext PO and MO so that I can bundle it into the Youtube Channel Gallery.
109
 
@@ -129,11 +100,18 @@ The username who uploaded a video to Youtube is located below each video, where
129
  == Screenshots ==
130
 
131
  1. Youtube Channel Gallery admin area.
132
- 2. Youtube Channel Gallery.
 
 
133
 
134
 
135
  == Changelog ==
136
 
 
 
 
 
 
137
  = 1.5.4 =
138
  * Corrected error when file_get_contents() is disabled in the server configuration by allow_url_fopen=0.
139
  * Corrected error with Show info (title, uploader) field.
1
  === Youtube Channel Gallery ===
2
  Contributors: javitxu123
3
  Donate link: http://poselab.com/
4
+ Tags: widget, gallery, youtube, channel, user, sidebar, video, youtube playlist, html5, iframe, Youtube channel, youtube videos
5
  Requires at least: 2.8
6
  Tested up to: 3.4.1
7
+ Stable tag: 1.6.1
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
14
 
15
  Show a youtube video and a gallery of thumbnails for a youtube user channel.
16
 
17
+
18
+ = Demo: =
19
+ You can see a demo of the plugin in the following URLs:
20
+
21
+ * [Widget Demo](http://poselab.com/youtube-channel-gallery)
22
+ * [Demo only with thumbnails](http://poselab.com/youtube-channel-gallery-demo-solo-con-miniaturas)
23
+ * [Demo with title and description and thumbnail at top](http://poselab.com/youtube-channel-gallery-demo-con-titulo-y-descripcion-y-miniatura-arriba)
24
+ * [Demo with title and thumbnail at top](http://poselab.com/youtube-channel-gallery-demo-con-titulo-y-miniatura-arriba)
25
+ * [Demo with title and description and thumbnail on the left](http://poselab.com/youtube-channel-gallery-demo-con-titulo-y-descripcion-y-miniatura-a-la-izquierda)
26
+ * [Demo with title and thumbnail at bottom](http://poselab.com/youtube-channel-gallery-demo-con-titulo-y-miniatura-abajo)
27
+
28
+
29
  = Features: =
30
  * Display latest thumbnail videos from YouTube user channel.
31
  * When you click on one of the thumbnails the video plays at the top.
34
  * You can use multiple instances of the plugin on the same page.
35
 
36
 
 
 
 
 
 
 
37
  = Widget fields: =
38
+ Description of the different fields of the plugin:
39
 
40
+ * **Title:** Widget Title.
41
+ * **YouTube user name:** the username of the user's Youtube videos you want to show. Shortcode attribute: user; value: String. (Required).
42
 
43
+ **Player tab:**
44
 
45
+ * **Video width:** indicates the width of the video player. Shortcode attribute: videowidth; value: Number. (Optional).
46
+ * **Aspect ratio:** indicates the proportions of the player, standard (4:3) or widescreen (16:9) format. Shortcode attribute:** ratio; values: 4x3 (default) or 16x9. (Optional).
47
+ * **Theme:** display player controls (like a 'play' button or volume control) within a dark or light control bar. Shortcode attribute: theme; values: dark (default) or light. (Optional).
48
+ * **Progress bar color:** specifies the color that will be used in the player's video progress bar to highlight the amount of the video that the viewer has already seen. Shortcode attribute: color; values: red (default) or white. (Optional).
49
+ * **Autoplay:** automatically play the initial video when the player loads. Shortcode attribute: autoplay; values: 0 (default) or 1. (Optional).
50
+ * **Show related videos:** this parameter indicates whether the player should show related videos when playback of the initial video ends. Shortcode attribute: rel; values: 0 (default) or 1. (Optional).
51
+ * **Show info (title, uploader):** display information like the video title and rating before the video starts playing. Shortcode attribute: showinfo; values: 0 (default) or 1. (Optional).
52
 
53
+ **Thumbnails tab:**
54
 
55
+ * **Number of videos to show:** it must be a number indicating the number of thumbnails to be displayed. Shortcode attribute: maxitems; value: Number. (Optional).
56
+ * **Thumbnail width:** indicates the width of the thumbnails. The height is automatically generated based on the aspect ratio selected. Shortcode attribute: thumbwidth; value: Number. (Optional).
57
+ * **Aspect ratio:** indicates the proportions of the thumbnails, standard (4:3) or widescreen (16:9) format. Shortcode attribute: thumbratio; values: 4x3 (default) or 16x9. (Optional).
58
+ * **Thumbnail columns:** it allows to control the number of columns in which the thumbnails are distributed. Shortcode attribute: thumbcolumns; value: Number. (Optional).
59
+ * **Show title:** it displays the title of the thumbnail with a link to play the video in the player. Shortcode attribute: title; values: 0 (default) or 1. (Optional).
60
+ * **Show description:** it shows the description of the thumbnail with the number of specified words. Shortcode attribute: description; values: 0 (default) or 1. (Optional).
61
+ * **Thumbnail alignment:** it defines the alignment of the thumbnail respect to its description and title. Shortcode attribute: thumbnail_alignment; values: left (default), right, top or bottom. (Optional).
62
+ * **Description words number:** the maximum number of words displayed in the description. Shortcode attribute: descriptionwordsnumber; value: Number. (Optional).
63
 
64
+ **Link tab:**
65
 
66
+ * **Link text:** field to customize the text of the link to the gallery on YouTube. Shortcode attribute: link_tx; value: String. (Optional).
67
+ * **Show link to channel:** option to display a link to the youtube user channel. Shortcode attribute: link; values: 0 (default) or 1. (Optional).
68
 
69
 
70
  = Shortcode syntax: =
71
+ In the following example are all attributes that can be used with the shortcode and explained above:
72
 
73
+ `[Youtube_Channel_Gallery user="MaxonC4D" videowidth="500" ratio="16x9" theme="light" color="white" autoplay="1" rel="1" showinfo="1" maxitems="9" thumbwidth="90" thumbratio="16x9" thumbcolumns="3" title="1" description="1" thumbnail_alignment="left" descriptionwordsnumber="10"]`
 
 
 
 
 
 
 
 
 
 
 
 
 
74
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
75
 
76
  = Languages: =
77
  * Spanish (es_ES) - [PoseLab](http://poselab.com/)
 
78
 
79
  If you have created your own language pack, or have an update of an existing one, you can [send me](mailto:javierpose@gmail.com) your gettext PO and MO so that I can bundle it into the Youtube Channel Gallery.
80
 
100
  == Screenshots ==
101
 
102
  1. Youtube Channel Gallery admin area.
103
+ 2. Youtube Channel Gallery example.
104
+ 3. Youtube Channel Gallery example.
105
+ 4. Youtube Channel Gallery example.
106
 
107
 
108
  == Changelog ==
109
 
110
+ = 1.6.1 =
111
+ * Added options to show title and description with thumbnails.
112
+ * Added new classes to better manage the final appearance (rows, columns, even, odd, number of row an column).
113
+ * Calculated width between thumbnails.
114
+
115
  = 1.5.4 =
116
  * Corrected error when file_get_contents() is disabled in the server configuration by allow_url_fopen=0.
117
  * Corrected error with Show info (title, uploader) field.
screenshot-1.jpg CHANGED
Binary file
screenshot-3.jpg ADDED
Binary file
screenshot-4.jpg ADDED
Binary file
scripts.js CHANGED
@@ -1,3 +1,4 @@
 
1
  var ytcplayer = {};
2
 
3
  function ytcplayVideo (iframeid, youtubeid) {
@@ -14,4 +15,43 @@ function ytcplayVideo (iframeid, youtubeid) {
14
  });
15
  }
16
 
17
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ //thumbnails
2
  var ytcplayer = {};
3
 
4
  function ytcplayVideo (iframeid, youtubeid) {
15
  });
16
  }
17
 
18
+ }
19
+
20
+ jQuery(document).ready(function(){
21
+ //Equal Height Blocks in Rows
22
+ //http://css-tricks.com/equal-height-blocks-in-rows/
23
+ var currentTallest = 0,
24
+ currentRowStart = 0,
25
+ rowDivs = new Array(),
26
+ $el,
27
+ topPosition = 0;
28
+
29
+ jQuery('.ytc-td-bottom .ytc-row .ytctitledesc-cont').each(function() {
30
+
31
+ $el = jQuery(this);
32
+ topPostion = $el.position().top;
33
+
34
+ if (currentRowStart != topPostion) {
35
+ // we just came to a new row. Set all the heights on the completed row
36
+ for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
37
+ rowDivs[currentDiv].height(currentTallest);
38
+ }
39
+ // set the variables for the new row
40
+ rowDivs.length = 0; // empty the array
41
+ currentRowStart = topPostion;
42
+ currentTallest = $el.height();
43
+ rowDivs.push($el);
44
+ } else {
45
+ // another div on the current row. Add it to the list and check if it's taller
46
+ rowDivs.push($el);
47
+ currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
48
+ }
49
+
50
+ // do the last row
51
+ for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
52
+ rowDivs[currentDiv].height(currentTallest);
53
+ }
54
+
55
+ });
56
+
57
+ });
styles.css CHANGED
@@ -1,70 +1,96 @@
1
- /*------------------------------*/
2
- /*Youtube Channel Gallery plugin*/
3
- /*------------------------------*/
 
 
4
 
5
  /*clearfix*/
6
- .ytccf:before,
7
- .ytccf:after {
8
- content: " ";
9
- display: table;
10
- }
11
- .ytccf:after {
12
- clear: both;
13
- }
14
- .ytccf {
15
- *zoom: 1;
16
- }
17
 
18
 
19
  /*shortcode wrapper*/
20
- .ytcshort{
21
- margin: 10px 0
22
- }
23
 
24
  /*Player*/
25
- iframe.ytcplayer{
26
- display: block;
27
- margin-bottom: 10px;
28
- padding: 0;
29
-
30
- }
31
-
32
- /*Thumbnails*/
33
- ul.ytchagallery{
34
- margin: 0; padding: 0;
35
- list-style: none;
36
- }
37
-
38
- ul.ytchagallery li{
39
- float:left;
40
- margin: 0 10px 10px 0;padding: 0
41
- }
42
- ul.ytchagallery li.ytccell-first{
43
- clear: left;
44
- }
45
- ul.ytchagallery li.ytccell-last{
46
- margin-right: 0;
47
- }
48
- ul.ytchagallery li a{
49
- display: block;
50
- border:1px solid #999;
51
- background-position: center center;
52
- background-repeat: no-repeat;
53
- background-size: 110%;
54
- }
55
- ul.ytchagallery li a .ytcplay{
56
- background: url(img/play.png) -9999px -9999px no-repeat;
57
- }
58
- ul.ytchagallery li a:hover{
59
- opacity: 0.75;
60
- }
61
- ul.ytchagallery li a:hover .ytcplay{
62
- background-position: center center;
63
- }
64
-
65
- /*link*/
66
- .ytcmore{
67
- display: block
68
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
69
 
70
 
1
+ /*------------------------------------------------------------
2
+ Plugin Name: Youtube Channel Gallery
3
+ Plugin URI: http://www.poselab.com/
4
+ Description: Show a youtube video and a gallery of thumbnails for a youtube channel.
5
+ ------------------------------------------------------------*/
6
 
7
  /*clearfix*/
8
+ .ytccf:before,.ytccf:after {content: " "; display: table;}
9
+ .ytccf:after {clear: both;}
10
+ .ytccf {*zoom: 1;}
 
 
 
 
 
 
 
 
11
 
12
 
13
  /*shortcode wrapper*/
14
+ .ytcshort{margin: 10px 0}
 
 
15
 
16
  /*Player*/
17
+ /*---------------------------------------------------*/
18
+ iframe.ytcplayer{display: block;margin-bottom: 10px;padding: 0;}
19
+
20
+ /*Thumbnails, title and description*/
21
+ /*---------------------------------------------------*/
22
+ ul.ytchagallery{margin: 0; padding: 0;list-style: none;}
23
+ ul.ytchagallery li{float:left;padding:0;margin: 0}
24
+ ul.ytchagallery li.ytccell-first{clear: left;}
25
+
26
+ /*Thumbnails*/
27
+ ul.ytchagallery div.ytcthumb-cont{float: left;}
28
+ ul.ytchagallery li a.ytcthumb{display: inline-block;border:1px solid #999;background-position: center center;background-size: 110%;background-repeat: no-repeat;}
29
+ ul.ytchagallery li a.ytcthumb .ytcplay{background: url(img/play.png) -9999px -9999px no-repeat;}
30
+ ul.ytchagallery li a.ytcthumb:hover{opacity: 0.75;}
31
+ ul.ytchagallery li a.ytcthumb:hover .ytcplay{background-position: center center;}
32
+
33
+ /*Title and description*/
34
+
35
+ ul.ytchagallery .ytctitle a{word-wrap: break-word;
36
+ /*delete*/ font-size: 12px; font-family: Arial; /*end delete*/
37
+ }
38
+
39
+ /*delete*/ul.ytchagallery .ytctitle{line-height: 1}
40
+
41
+ /*left*/
42
+ ul.ytchagallery.ytc-td-left div.ytcthumb-cont{margin: 0 5px 5px 0}
43
+
44
+ /*right*/
45
+ ul.ytchagallery.ytc-td-right div.ytcthumb-cont{float: right; margin: 0 0 5px 5px}
46
+
47
+
48
+ /*top*/
49
+ ul.ytchagallery.ytc-td-top div.ytcthumb-cont{float: none;}
50
+
51
+ /*bottom*/
52
+ ul.ytchagallery.ytc-td-bottom div.ytcthumb-cont{float: none; }
53
+ ul.ytchagallery.ytc-td-bottom div.ytctitledesc-cont{margin-bottom: 5px}
54
+ ul.ytchagallery.ytc-td-bottom div.ytctitledesc-cont h5{margin-bottom: 5px}
55
+
56
+
57
+
58
+ /*table*/
59
+ .ytc-row{clear: both;}
60
+
61
+ .ytc-columns2 li{ width: 50%; width:-webkit-calc(100%/2 + 10px/(2 - 1)); width:calc(100%/2 + 10px/(2 - 1));}
62
+ .ytc-columns2 li.ytccell-last{width:-webkit-calc(100%/2 - 10px); width:calc(100%/2 - 10px);}
63
+
64
+ .ytc-columns3 li{ width: 33.33%; width:-webkit-calc(100%/3 + 10px/(3 - 1)); width:calc(100%/3 + 10px/(3 - 1));}
65
+ .ytc-columns3 li.ytccell-last{width:-webkit-calc(100%/3 - 10px); width:calc(100%/3 - 10px);}
66
+
67
+ .ytc-columns4 li{ width: 25%; width:-webkit-calc(100%/4 + 10px/(4 - 1)); width:calc(100%/4 + 10px/(4 - 1));}
68
+ .ytc-columns4 li.ytccell-last{width:-webkit-calc(100%/4 - 10px); width:calc(100%/4 - 10px);}
69
+
70
+ .ytc-columns5 li{ width: 20%; width:-webkit-calc(100%/5 + 10px/(5 - 1)); width:calc(100%/5 + 10px/(5 - 1));}
71
+ .ytc-columns5 li.ytccell-last{width:-webkit-calc(100%/5 - 10px); width:calc(100%/5 - 10px);}
72
+
73
+ .ytc-columns6 li{ width: 20%; width:-webkit-calc(100%/6 + 10px/(6 - 1)); width:calc(100%/6 + 10px/(6 - 1));}
74
+ .ytc-columns6 li.ytccell-last{width:-webkit-calc(100%/6 - 10px); width:calc(100%/6 - 10px);}
75
+
76
+ .ytc-columns7 li{ width: 20%; width:-webkit-calc(100%/7 + 10px/(7 - 1)); width:calc(100%/7 + 10px/(7 - 1));}
77
+ .ytc-columns7 li.ytccell-last{width:-webkit-calc(100%/7 - 10px); width:calc(100%/7 - 10px);}
78
+
79
+ .ytc-columns8 li{ width: 20%; width:-webkit-calc(100%/8 + 10px/(8 - 1)); width:calc(100%/8 + 10px/(8 - 1));}
80
+ .ytc-columns8 li.ytccell-last{width:-webkit-calc(100%/8 - 10px); width:calc(100%/8 - 10px);}
81
+
82
+ .ytc-columns9 li{ width: 20%; width:-webkit-calc(100%/9 + 10px/(9 - 1)); width:calc(100%/9 + 10px/(9 - 1));}
83
+ .ytc-columns9 li.ytccell-last{width:-webkit-calc(100%/9 - 10px); width:calc(100%/9 - 10px);}
84
+
85
+ .ytc-columns10 li{ width: 20%; width:-webkit-calc(100%/10 + 10px/(10 - 1)); width:calc(100%/10 + 10px/(10 - 1));}
86
+ .ytc-columns10 li.ytccell-last{width:-webkit-calc(100%/10 - 10px); width:calc(100%/10 - 10px);}
87
+
88
+ ul.ytchagallery li .ytcliinner{padding: 0 10px 10px 0;overflow: hidden;}
89
+ ul.ytchagallery li.ytccell-last .ytcliinner{padding-right: 0;}
90
+
91
+
92
+ /*link to YouTube*/
93
+ /*---------------------------------------------------*/
94
+ .ytcmore{display: block}
95
 
96
 
youtube-channel-gallery.php CHANGED
@@ -5,7 +5,7 @@
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.5.4
9
  License: GPL2
10
 
11
  Copyright 2010 Javier Gómez Pose (email : javierpose@gmail.com)
@@ -93,6 +93,10 @@
93
  $instance['ytchag_thumb_width'] = strip_tags( $new_instance['ytchag_thumb_width'] );
94
  $instance['ytchag_thumb_ratio'] = strip_tags( $new_instance['ytchag_thumb_ratio'] );
95
  $instance['ytchag_thumb_columns'] = strip_tags( $new_instance['ytchag_thumb_columns'] );
 
 
 
 
96
 
97
  // Link options
98
  $instance['ytchag_link'] = $new_instance['ytchag_link'];
@@ -122,6 +126,10 @@
122
  $ytchag_thumb_width = strip_tags($instance['ytchag_thumb_width']);
123
  $ytchag_thumb_ratio = strip_tags($instance['ytchag_thumb_ratio']);
124
  $ytchag_thumb_columns = strip_tags($instance['ytchag_thumb_columns']);
 
 
 
 
125
 
126
  // Link options
127
  $ytchag_link = esc_attr($instance['ytchag_link']);
@@ -143,7 +151,10 @@
143
 
144
  <script type="text/javascript">
145
  jQuery(document).ready(function($) {
146
- $('#tabs-<?php echo $this->id; ?> div').hide();
 
 
 
147
  $('#tabs-<?php echo $this->id; ?>-1').show();
148
  $('#tabs-<?php echo $this->id; ?> ul li:first').addClass('active');
149
 
@@ -154,11 +165,51 @@
154
  $(this).parent().addClass('active');
155
  var currentTab = $(this).attr('href');
156
  //slideUp and slideDown to give it animation
157
- $('#tabs-<?php echo $this->id; ?> div').slideUp('fast');
158
  $(currentTab).slideDown('fast');
159
  }
160
  return false;
161
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
162
  });
163
  </script>
164
 
@@ -168,14 +219,20 @@
168
  <div id="tabs-<?php echo $this->id; ?>" class="ytchgtabs">
169
 
170
 
171
- <ul>
172
- <li><a href="#tabs-<?php echo $this->id; ?>-1">Player</a></li>
173
- <li><a href="#tabs-<?php echo $this->id; ?>-2">Thumbnails</a></li>
174
- <li><a href="#tabs-<?php echo $this->id; ?>-3">Link</a></li>
175
  </ul>
176
 
177
 
178
- <div id="tabs-<?php echo $this->id; ?>-1">
 
 
 
 
 
 
179
 
180
  <p>
181
  <label for="ytchag_video_width"><?php _e( 'Video width:', 'youtube-channel-gallery' ); ?></label>
@@ -225,6 +282,12 @@
225
  </div>
226
 
227
 
 
 
 
 
 
 
228
  <div id="tabs-<?php echo $this->id; ?>-2">
229
  <p>
230
  <label for="ytchag_maxitems"><?php _e( 'Number of videos to show:', 'youtube-channel-gallery' ); ?></label>
@@ -249,9 +312,54 @@
249
  <label for="ytchag_thumb_columns"><?php _e( 'Thumbnail columns:', 'youtube-channel-gallery' ); ?></label>
250
  <input class="widefat" id="<?php echo $this->get_field_id( 'ytchag_thumb_columns' ); ?>" name="<?php echo $this->get_field_name( 'ytchag_thumb_columns' ); ?>" type="text" value="<?php echo esc_attr( $ytchag_thumb_columns ); ?>" />
251
  </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
252
  </div>
253
 
254
 
 
 
 
 
 
 
255
  <div id="tabs-<?php echo $this->id; ?>-3">
256
 
257
  <p>
@@ -298,6 +406,10 @@
298
  $ytchag_thumb_width = apply_filters('ytchag_thumb_width', $instance['ytchag_thumb_width']);
299
  $ytchag_thumb_ratio = apply_filters('ytchag_thumb_ratio', $instance['ytchag_thumb_ratio']);
300
  $ytchag_thumb_columns = apply_filters('ytchag_thumb_columns', $instance['ytchag_thumb_columns']);
 
 
 
 
301
 
302
  // Link options
303
  $ytchag_link = apply_filters('ytchag_link', $instance['ytchag_link']);
@@ -320,6 +432,12 @@
320
  $ytchag_thumb_width = ( $ytchag_thumb_width ) ? $ytchag_thumb_width : 85;
321
  $ytchag_thumb_columns = ( $ytchag_thumb_columns ) ? $ytchag_thumb_columns : 0;
322
 
 
 
 
 
 
 
323
  // Link options
324
  $ytchag_link = ( $ytchag_link ) ? $ytchag_link : 0;
325
  $ytchag_link_tx = ( $ytchag_link_tx ) ? $ytchag_link_tx : __('Show more videos»', 'youtube-channel-gallery');
@@ -371,6 +489,7 @@
371
  $url = $item->get_permalink();
372
  $youtubeid = $this->youtubeid($url);
373
  $title = $item->get_title();
 
374
 
375
  if ($enclosure = $item->get_enclosure()){
376
 
@@ -393,6 +512,45 @@
393
  }
394
  }
395
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
396
  //Show me the player: iframe player
397
  if($i == 0) {
398
  //count the plugin occurrences on page
@@ -401,29 +559,47 @@
401
 
402
  $content = '<iframe id="ytcplayer' . $plugincount . '" class="ytcplayer" allowfullscreen width="' . $ytchag_video_width . '" height="' . $ytchag_video_heigh . '" src="http://www.youtube.com/embed/' . $youtubeid . '?version=3' . $ytchag_theme . $ytchag_color . $ytchag_autoplay . $ytchag_rel . $ytchag_showinfo .'&enablejsapi=1" frameborder="0"></iframe>';
403
 
404
- $content.= '<ul class="ytchagallery ytccf">';
405
 
406
  } // if player end
407
  $i++;
408
 
409
- //columns control
410
- $column++;
411
- $columnnumber = '';
412
- if($ytchag_thumb_columns !=0 && $column%$ytchag_thumb_columns === 0){
413
- $columnnumber = ' ytccell-last';
414
- } else if($ytchag_thumb_columns !=0 && $column === 1){
415
- $columnnumber = ' ytccell-first';
416
- }
417
- $content.= '<li class="ytccell-' . $column . $columnnumber .'">';
418
 
419
- if($ytchag_thumb_columns !=0 && $column%$ytchag_thumb_columns === 0 ){
420
- $column = 0;
 
421
  }
422
 
423
- $content.= '<a class="ytcthumb" href="javascript: ytcplayVideo(\'ytcplayer' . $plugincount . '\', \'' . $youtubeid . '\');" alt="' . $title . '" title="' . $title . '" style="background-image: url(' . $thumb . ');">';
424
- $content.= '<div class="ytcplay" style="width: ' . $ytchag_thumb_width . 'px; height: ' . $ytchag_thumb_height . 'px"></div>';
425
- $content.= '</a></li>';
426
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
427
 
428
  } //foreach end
429
 
@@ -457,6 +633,7 @@
457
 
458
  // load css or js
459
  private function register_scripts_and_styles() {
 
460
  wp_enqueue_script('youtube_player_api', 'http://www.youtube.com/player_api', false, false, true);
461
  wp_enqueue_script('youtube-channel-gallery', plugins_url('/scripts.js', __FILE__), false, false, true);
462
  wp_enqueue_style('youtube-channel-gallery', plugins_url('/styles.css', __FILE__), false, false, 'all');
@@ -493,6 +670,10 @@
493
  'thumbwidth' => '',
494
  'thumbratio' => '',
495
  'thumbcolumns' => '',
 
 
 
 
496
 
497
  // Link options
498
  'link' => '',
@@ -516,6 +697,10 @@
516
  $instance['ytchag_thumb_width'] = $thumbwidth;
517
  $instance['ytchag_thumb_ratio'] = $thumbratio;
518
  $instance['ytchag_thumb_columns'] = $thumbcolumns;
 
 
 
 
519
 
520
  // Link options
521
  $instance['ytchag_link'] = $link;
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.6.1
9
  License: GPL2
10
 
11
  Copyright 2010 Javier Gómez Pose (email : javierpose@gmail.com)
93
  $instance['ytchag_thumb_width'] = strip_tags( $new_instance['ytchag_thumb_width'] );
94
  $instance['ytchag_thumb_ratio'] = strip_tags( $new_instance['ytchag_thumb_ratio'] );
95
  $instance['ytchag_thumb_columns'] = strip_tags( $new_instance['ytchag_thumb_columns'] );
96
+ $instance['ytchag_title'] = strip_tags( $new_instance['ytchag_title'] );
97
+ $instance['ytchag_description'] = strip_tags( $new_instance['ytchag_description'] );
98
+ $instance['ytchag_thumbnail_alignment'] = strip_tags( $new_instance['ytchag_thumbnail_alignment'] );
99
+ $instance['ytchag_description_words_number'] = strip_tags( $new_instance['ytchag_description_words_number'] );
100
 
101
  // Link options
102
  $instance['ytchag_link'] = $new_instance['ytchag_link'];
126
  $ytchag_thumb_width = strip_tags($instance['ytchag_thumb_width']);
127
  $ytchag_thumb_ratio = strip_tags($instance['ytchag_thumb_ratio']);
128
  $ytchag_thumb_columns = strip_tags($instance['ytchag_thumb_columns']);
129
+ $ytchag_title = strip_tags($instance['ytchag_title']);
130
+ $ytchag_description = strip_tags($instance['ytchag_description']);
131
+ $ytchag_thumbnail_alignment = strip_tags($instance['ytchag_thumbnail_alignment']);
132
+ $ytchag_description_words_number = strip_tags($instance['ytchag_description_words_number']);
133
 
134
  // Link options
135
  $ytchag_link = esc_attr($instance['ytchag_link']);
151
 
152
  <script type="text/javascript">
153
  jQuery(document).ready(function($) {
154
+
155
+ //tabs
156
+ //---------------
157
+ $('#tabs-<?php echo $this->id; ?> > div').hide();
158
  $('#tabs-<?php echo $this->id; ?>-1').show();
159
  $('#tabs-<?php echo $this->id; ?> ul li:first').addClass('active');
160
 
165
  $(this).parent().addClass('active');
166
  var currentTab = $(this).attr('href');
167
  //slideUp and slideDown to give it animation
168
+ $('#tabs-<?php echo $this->id; ?> > div').slideUp('fast');
169
  $(currentTab).slideDown('fast');
170
  }
171
  return false;
172
  });
173
+
174
+
175
+ //checkboxes with associated content
176
+ //---------------
177
+ show_title_description ();
178
+
179
+
180
+ $('#tabs-<?php echo $this->id; ?>-2 .ytchg-tit-desc a').click(function(){
181
+ if(!$(this).parent().parent().hasClass('active')){
182
+ slide_title_description ( 'slideDown' );
183
+ } else{
184
+ slide_title_description ( 'slideUp' );
185
+ }
186
+ return false;
187
+ });
188
+
189
+
190
+ function slide_title_description ( action ){
191
+ if(action == 'slideDown'){
192
+ $('#tabs-<?php echo $this->id; ?>-2 .ytchg-title-and-description').slideDown('fast');
193
+ $('#tabs-<?php echo $this->id; ?>-2 fieldset.ytchg-field-tit-desc').addClass('ytchg-fieldborder active');
194
+ } else if(action == 'slideUp'){
195
+ $('#tabs-<?php echo $this->id; ?>-2 .ytchg-title-and-description').slideUp('fast');
196
+ $('#tabs-<?php echo $this->id; ?>-2 fieldset.ytchg-field-tit-desc').removeClass('ytchg-fieldborder active');
197
+ }
198
+ }
199
+
200
+ function show_title_description (){
201
+ if( $('#tabs-<?php echo $this->id; ?>-2 .ytchg-tit').is(':checked') || $('#tabs-<?php echo $this->id; ?>-2 .ytchg-desc').is(':checked')){
202
+ $('#tabs-<?php echo $this->id; ?>-2 .ytchg-title-and-description').show();
203
+ $('#tabs-<?php echo $this->id; ?>-2 fieldset.ytchg-field-tit-desc').addClass('ytchg-fieldborder active');
204
+ } else{
205
+ $('#tabs-<?php echo $this->id; ?>-2 .ytchg-title-and-description').hide();
206
+
207
+ }
208
+ }
209
+
210
+ /*
211
+ */
212
+
213
  });
214
  </script>
215
 
219
  <div id="tabs-<?php echo $this->id; ?>" class="ytchgtabs">
220
 
221
 
222
+ <ul class="ytchgtabs-tabs">
223
+ <li><a href="#tabs-<?php echo $this->id; ?>-1"><?php _e( 'Player', 'youtube-channel-gallery' ); ?></a></li>
224
+ <li><a href="#tabs-<?php echo $this->id; ?>-2"><?php _e( 'Thumbnails', 'youtube-channel-gallery' ); ?></a></li>
225
+ <li><a href="#tabs-<?php echo $this->id; ?>-3"><?php _e( 'Link', 'youtube-channel-gallery' ); ?></a></li>
226
  </ul>
227
 
228
 
229
+ <?php
230
+ /*
231
+ Player Tab
232
+ --------------------
233
+ */
234
+ ?>
235
+ <div id="tabs-<?php echo $this->id; ?>-1" class="ytchgtabs-content">
236
 
237
  <p>
238
  <label for="ytchag_video_width"><?php _e( 'Video width:', 'youtube-channel-gallery' ); ?></label>
282
  </div>
283
 
284
 
285
+ <?php
286
+ /*
287
+ Thumbnails Tab
288
+ --------------------
289
+ */
290
+ ?>
291
  <div id="tabs-<?php echo $this->id; ?>-2">
292
  <p>
293
  <label for="ytchag_maxitems"><?php _e( 'Number of videos to show:', 'youtube-channel-gallery' ); ?></label>
312
  <label for="ytchag_thumb_columns"><?php _e( 'Thumbnail columns:', 'youtube-channel-gallery' ); ?></label>
313
  <input class="widefat" id="<?php echo $this->get_field_id( 'ytchag_thumb_columns' ); ?>" name="<?php echo $this->get_field_name( 'ytchag_thumb_columns' ); ?>" type="text" value="<?php echo esc_attr( $ytchag_thumb_columns ); ?>" />
314
  </p>
315
+
316
+ <p>
317
+ <fieldset class="ytchg-field-tit-desc">
318
+ <legend class="ytchg-tit-desc">
319
+ <a href="#"><?php _e('Show title or description', 'youtube-channel-gallery'); ?></a>
320
+ </legend>
321
+
322
+ <div class="ytchg-title-and-description">
323
+
324
+ <p>
325
+ <input class="checkbox ytchg-tit" type="checkbox" <?php checked( (bool) $instance['ytchag_title'], true ); ?> id="<?php echo $this->get_field_id( 'ytchag_title' ); ?>" name="<?php echo $this->get_field_name( 'ytchag_title' ); ?>" />
326
+ <label for="<?php echo $this->get_field_id( 'ytchag_title' ); ?>"><?php _e('Show title', 'youtube-channel-gallery'); ?></label>
327
+ </p>
328
+
329
+ <p>
330
+ <input class="checkbox ytchg-desc" type="checkbox" <?php checked( (bool) $instance['ytchag_description'], true ); ?> id="<?php echo $this->get_field_id( 'ytchag_description' ); ?>" name="<?php echo $this->get_field_name( 'ytchag_description' ); ?>" />
331
+ <label for="<?php echo $this->get_field_id( 'ytchag_description' ); ?>"><?php _e('Show description', 'youtube-channel-gallery'); ?></label>
332
+ </p>
333
+
334
+ <p>
335
+ <label for="ytchag_thumbnail_alignment"><?php _e( 'Thumbnail alignment:', 'youtube-channel-gallery' ); ?></label>
336
+ <select class="widefat" id="<?php echo $this->get_field_id( 'ytchag_thumbnail_alignment' ); ?>" name="<?php echo $this->get_field_name( 'ytchag_thumbnail_alignment' ); ?>">
337
+ <option value="left"<?php selected( $instance['ytchag_thumbnail_alignment'], 'left' ); ?>><?php _e( 'Left', 'youtube-channel-gallery' ); ?></option>
338
+ <option value="right"<?php selected( $instance['ytchag_thumbnail_alignment'], 'right' ); ?>><?php _e( 'Right', 'youtube-channel-gallery' ); ?></option>
339
+ <option value="top"<?php selected( $instance['ytchag_thumbnail_alignment'], 'top' ); ?>><?php _e( 'Top', 'youtube-channel-gallery' ); ?></option>
340
+ <option value="bottom"<?php selected( $instance['ytchag_thumbnail_alignment'], 'bottom' ); ?>><?php _e( 'Bottom', 'youtube-channel-gallery' ); ?></option>
341
+ </select>
342
+ </p>
343
+
344
+ <p>
345
+ <label for="ytchag_description_words_number"><?php _e( 'Description words number:', 'youtube-channel-gallery' ); ?></label>
346
+ <input class="widefat" id="<?php echo $this->get_field_id( 'ytchag_description_words_number' ); ?>" name="<?php echo $this->get_field_name( 'ytchag_description_words_number' ); ?>" type="text" value="<?php echo esc_attr( $ytchag_description_words_number ); ?>" />
347
+ </p>
348
+ </div>
349
+ </fieldset>
350
+ </p>
351
+
352
+
353
+
354
  </div>
355
 
356
 
357
+ <?php
358
+ /*
359
+ Link Tab
360
+ --------------------
361
+ */
362
+ ?>
363
  <div id="tabs-<?php echo $this->id; ?>-3">
364
 
365
  <p>
406
  $ytchag_thumb_width = apply_filters('ytchag_thumb_width', $instance['ytchag_thumb_width']);
407
  $ytchag_thumb_ratio = apply_filters('ytchag_thumb_ratio', $instance['ytchag_thumb_ratio']);
408
  $ytchag_thumb_columns = apply_filters('ytchag_thumb_columns', $instance['ytchag_thumb_columns']);
409
+ $ytchag_title = apply_filters('ytchag_title', $instance['ytchag_title']);
410
+ $ytchag_description = apply_filters('ytchag_description', $instance['ytchag_description']);
411
+ $ytchag_thumbnail_alignment = apply_filters('ytchag_thumbnail_alignment', $instance['ytchag_thumbnail_alignment']);
412
+ $ytchag_description_words_number = apply_filters('ytchag_description_words_number', $instance['ytchag_description_words_number']);
413
 
414
  // Link options
415
  $ytchag_link = apply_filters('ytchag_link', $instance['ytchag_link']);
432
  $ytchag_thumb_width = ( $ytchag_thumb_width ) ? $ytchag_thumb_width : 85;
433
  $ytchag_thumb_columns = ( $ytchag_thumb_columns ) ? $ytchag_thumb_columns : 0;
434
 
435
+ //title and desc
436
+ $ytchag_title = ( $ytchag_title ) ? $ytchag_title : 0;
437
+ $ytchag_description = ( $ytchag_description ) ? $ytchag_description : 0;
438
+ $ytchag_thumbnail_alignment = ( $ytchag_thumbnail_alignment ) ? $ytchag_thumbnail_alignment : 'left';
439
+ $ytchag_description_words_number = ( $ytchag_description_words_number ) ? $ytchag_description_words_number : 10;
440
+
441
  // Link options
442
  $ytchag_link = ( $ytchag_link ) ? $ytchag_link : 0;
443
  $ytchag_link_tx = ( $ytchag_link_tx ) ? $ytchag_link_tx : __('Show more videos»', 'youtube-channel-gallery');
489
  $url = $item->get_permalink();
490
  $youtubeid = $this->youtubeid($url);
491
  $title = $item->get_title();
492
+ $description = $item->get_description();
493
 
494
  if ($enclosure = $item->get_enclosure()){
495
 
512
  }
513
  }
514
 
515
+
516
+ //title and description content
517
+ if($ytchag_title || $ytchag_description){
518
+ $title_and_description_alignment_class = ' ytc-td-' . $ytchag_thumbnail_alignment;
519
+ $title_and_description_content= '<div class="ytctitledesc-cont">';
520
+
521
+ if($ytchag_title){
522
+ $title_and_description_content.= '<h5 class="ytctitle"><a href="javascript: ytcplayVideo(\'ytcplayer' . $plugincount . '\', \'' . $youtubeid . '\');">' . $title . '</a></h5>';
523
+ }
524
+
525
+ if($ytchag_description){
526
+ $description = wp_trim_words( $description, $num_words = $ytchag_description_words_number, $more = '&hellip;' );
527
+ $title_and_description_content.= '<div class="ytctdescription">' . $description . '</div>';
528
+ }
529
+
530
+ $title_and_description_content.= '</div>';
531
+ }//end title and description content
532
+
533
+
534
+ //rows and columns control
535
+
536
+ $column++;
537
+ $columnlastfirst = '';
538
+ if($ytchag_thumb_columns !=0 && $column%$ytchag_thumb_columns === 0){
539
+ $columnlastfirst = ' ytccell-last';
540
+ } else if($ytchag_thumb_columns !=0 && $column === 1){
541
+ $columnlastfirst = ' ytccell-first';
542
+ STATIC $rowcount = 0;
543
+ $rowcount++;
544
+ $row_oddeven = ($rowcount%2==1)?' ytc-r-odd':' ytc-r-even';
545
+ $tableclass = ' ytc-table';
546
+ $columnnumber = ' ytc-columns'. $ytchag_thumb_columns;
547
+
548
+ }// end columns control
549
+
550
+
551
+ //The content
552
+ //--------------------------------
553
+
554
  //Show me the player: iframe player
555
  if($i == 0) {
556
  //count the plugin occurrences on page
559
 
560
  $content = '<iframe id="ytcplayer' . $plugincount . '" class="ytcplayer" allowfullscreen width="' . $ytchag_video_width . '" height="' . $ytchag_video_heigh . '" src="http://www.youtube.com/embed/' . $youtubeid . '?version=3' . $ytchag_theme . $ytchag_color . $ytchag_autoplay . $ytchag_rel . $ytchag_showinfo .'&enablejsapi=1" frameborder="0"></iframe>';
561
 
562
+ $content.= '<ul class="ytchagallery ytccf' . $tableclass . $title_and_description_alignment_class . $columnnumber . '">';
563
 
564
  } // if player end
565
  $i++;
566
 
 
 
 
 
 
 
 
 
 
567
 
568
+
569
+ if($columnlastfirst == ' ytccell-first'){
570
+ $content.= '<div class="ytccf ytc-row ytc-r-' . $rowcount . $row_oddeven . ' ">';
571
  }
572
 
573
+ $content.= '<li class="ytccell-' . $column . $columnlastfirst . '">';
574
+
575
+ if($ytchag_thumb_columns !=0 && $column%$ytchag_thumb_columns === 0 ){
576
+ $column = 0;
577
+ }
578
+
579
+ $content.= '<div class="ytcliinner">';
580
+
581
+ if($ytchag_thumbnail_alignment == 'bottom'){
582
+ $content.= $title_and_description_content;
583
+
584
+ }
585
+
586
+ $content.= '<div class="ytcthumb-cont">';
587
+ $content.= '<a class="ytcthumb" href="javascript: ytcplayVideo(\'ytcplayer' . $plugincount . '\', \'' . $youtubeid . '\');" alt="' . $title . '" title="' . $title . '" style="background-image: url(' . $thumb . ');">';
588
+ $content.= '<div class="ytcplay" style="width: ' . $ytchag_thumb_width . 'px; height: ' . $ytchag_thumb_height . 'px"></div>';
589
+ $content.= '</a>';
590
+ $content.= '</div>';
591
+
592
+ if($ytchag_thumbnail_alignment != 'bottom'){
593
+ $content.= $title_and_description_content;
594
+ }
595
+
596
+ $content.= '</div>';
597
+
598
+ $content.= '</li>' . "\n\n";
599
+
600
+ if($columnlastfirst == ' ytccell-last'){
601
+ $content.= '</div>';
602
+ }
603
 
604
  } //foreach end
605
 
633
 
634
  // load css or js
635
  private function register_scripts_and_styles() {
636
+ wp_enqueue_script('jquery');
637
  wp_enqueue_script('youtube_player_api', 'http://www.youtube.com/player_api', false, false, true);
638
  wp_enqueue_script('youtube-channel-gallery', plugins_url('/scripts.js', __FILE__), false, false, true);
639
  wp_enqueue_style('youtube-channel-gallery', plugins_url('/styles.css', __FILE__), false, false, 'all');
670
  'thumbwidth' => '',
671
  'thumbratio' => '',
672
  'thumbcolumns' => '',
673
+ 'title' => '',
674
+ 'description' => '',
675
+ 'thumbnail_alignment' => '',
676
+ 'descriptionwordsnumber' => '',
677
 
678
  // Link options
679
  'link' => '',
697
  $instance['ytchag_thumb_width'] = $thumbwidth;
698
  $instance['ytchag_thumb_ratio'] = $thumbratio;
699
  $instance['ytchag_thumb_columns'] = $thumbcolumns;
700
+ $instance['ytchag_title'] = $title;
701
+ $instance['ytchag_description'] = $description;
702
+ $instance['ytchag_thumbnail_alignment'] = $thumbnail_alignment;
703
+ $instance['ytchag_description_words_number'] = $descriptionwordsnumber;
704
 
705
  // Link options
706
  $instance['ytchag_link'] = $link;