|
1 <?php |
|
2 /** |
|
3 * WordPress media templates. |
|
4 * |
|
5 * @package WordPress |
|
6 * @subpackage Media |
|
7 * @since 3.5.0 |
|
8 */ |
|
9 |
|
10 /** |
|
11 * Prints the templates used in the media manager. |
|
12 * |
|
13 * @since 3.5.0 |
|
14 */ |
|
15 function wp_print_media_templates() { |
|
16 global $is_IE; |
|
17 $class = 'media-modal wp-core-ui'; |
|
18 if ( $is_IE && strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 7') !== false ) |
|
19 $class .= ' ie7'; |
|
20 ?> |
|
21 <script type="text/html" id="tmpl-media-frame"> |
|
22 <div class="media-frame-menu"></div> |
|
23 <div class="media-frame-title"></div> |
|
24 <div class="media-frame-router"></div> |
|
25 <div class="media-frame-content"></div> |
|
26 <div class="media-frame-toolbar"></div> |
|
27 <div class="media-frame-uploader"></div> |
|
28 </script> |
|
29 |
|
30 <script type="text/html" id="tmpl-media-modal"> |
|
31 <div class="<?php echo $class; ?>"> |
|
32 <a class="media-modal-close" href="#" title="<?php esc_attr_e('Close'); ?>"><span class="media-modal-icon"></span></a> |
|
33 <div class="media-modal-content"></div> |
|
34 </div> |
|
35 <div class="media-modal-backdrop"></div> |
|
36 </script> |
|
37 |
|
38 <script type="text/html" id="tmpl-uploader-window"> |
|
39 <div class="uploader-window-content"> |
|
40 <h3><?php _e( 'Drop files to upload' ); ?></h3> |
|
41 </div> |
|
42 </script> |
|
43 |
|
44 <script type="text/html" id="tmpl-uploader-inline"> |
|
45 <# var messageClass = data.message ? 'has-upload-message' : 'no-upload-message'; #> |
|
46 <div class="uploader-inline-content {{ messageClass }}"> |
|
47 <# if ( data.message ) { #> |
|
48 <h3 class="upload-message">{{ data.message }}</h3> |
|
49 <# } #> |
|
50 <?php if ( ! _device_can_upload() ) : ?> |
|
51 <h3 class="upload-instructions"><?php printf( __('The web browser on your device cannot be used to upload files. You may be able to use the <a href="%s">native app for your device</a> instead.'), 'http://wordpress.org/mobile/' ); ?></h3> |
|
52 <?php elseif ( is_multisite() && ! is_upload_space_available() ) : ?> |
|
53 <h3 class="upload-instructions"><?php _e( 'Upload Limit Exceeded' ); ?></h3> |
|
54 <?php do_action( 'upload_ui_over_quota' ); ?> |
|
55 |
|
56 <?php else : ?> |
|
57 <div class="upload-ui"> |
|
58 <h3 class="upload-instructions drop-instructions"><?php _e( 'Drop files anywhere to upload' ); ?></h3> |
|
59 <a href="#" class="browser button button-hero"><?php _e( 'Select Files' ); ?></a> |
|
60 </div> |
|
61 |
|
62 <div class="upload-inline-status"></div> |
|
63 |
|
64 <div class="post-upload-ui"> |
|
65 <?php |
|
66 do_action( 'pre-upload-ui' ); |
|
67 do_action( 'pre-plupload-upload-ui' ); |
|
68 |
|
69 if ( 10 === remove_action( 'post-plupload-upload-ui', 'media_upload_flash_bypass' ) ) { |
|
70 do_action( 'post-plupload-upload-ui' ); |
|
71 add_action( 'post-plupload-upload-ui', 'media_upload_flash_bypass' ); |
|
72 } else { |
|
73 do_action( 'post-plupload-upload-ui' ); |
|
74 } |
|
75 |
|
76 $upload_size_unit = $max_upload_size = wp_max_upload_size(); |
|
77 $byte_sizes = array( 'KB', 'MB', 'GB' ); |
|
78 |
|
79 for ( $u = -1; $upload_size_unit > 1024 && $u < count( $byte_sizes ) - 1; $u++ ) { |
|
80 $upload_size_unit /= 1024; |
|
81 } |
|
82 |
|
83 if ( $u < 0 ) { |
|
84 $upload_size_unit = 0; |
|
85 $u = 0; |
|
86 } else { |
|
87 $upload_size_unit = (int) $upload_size_unit; |
|
88 } |
|
89 |
|
90 ?> |
|
91 |
|
92 <p class="max-upload-size"><?php |
|
93 printf( __( 'Maximum upload file size: %d%s.' ), esc_html($upload_size_unit), esc_html($byte_sizes[$u]) ); |
|
94 ?></p> |
|
95 |
|
96 <?php if ( ( $GLOBALS['is_IE'] || $GLOBALS['is_opera']) && $max_upload_size > 100 * 1024 * 1024 ) : |
|
97 $browser_uploader = admin_url( 'media-new.php?browser-uploader&post_id=' ) . '{{ data.postId }}'; |
|
98 ?> |
|
99 <p class="big-file-warning"><?php printf( __( 'Your browser has some limitations uploading large files with the multi-file uploader. Please use the <a href="%1$s" target="%2$s">browser uploader</a> for files over 100MB.' ), |
|
100 $browser_uploader, '_blank' ); ?></p> |
|
101 <?php endif; ?> |
|
102 |
|
103 <?php do_action( 'post-upload-ui' ); ?> |
|
104 </div> |
|
105 <?php endif; ?> |
|
106 </div> |
|
107 </script> |
|
108 |
|
109 <script type="text/html" id="tmpl-uploader-status"> |
|
110 <h3><?php _e( 'Uploading' ); ?></h3> |
|
111 <a class="upload-dismiss-errors" href="#"><?php _e('Dismiss Errors'); ?></a> |
|
112 |
|
113 <div class="media-progress-bar"><div></div></div> |
|
114 <div class="upload-details"> |
|
115 <span class="upload-count"> |
|
116 <span class="upload-index"></span> / <span class="upload-total"></span> |
|
117 </span> |
|
118 <span class="upload-detail-separator">–</span> |
|
119 <span class="upload-filename"></span> |
|
120 </div> |
|
121 <div class="upload-errors"></div> |
|
122 </script> |
|
123 |
|
124 <script type="text/html" id="tmpl-uploader-status-error"> |
|
125 <span class="upload-error-label"><?php _e('Error'); ?></span> |
|
126 <span class="upload-error-filename">{{{ data.filename }}}</span> |
|
127 <span class="upload-error-message">{{ data.message }}</span> |
|
128 </script> |
|
129 |
|
130 <script type="text/html" id="tmpl-attachment"> |
|
131 <div class="attachment-preview type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}"> |
|
132 <# if ( data.uploading ) { #> |
|
133 <div class="media-progress-bar"><div></div></div> |
|
134 <# } else if ( 'image' === data.type ) { #> |
|
135 <div class="thumbnail"> |
|
136 <div class="centered"> |
|
137 <img src="{{ data.size.url }}" draggable="false" /> |
|
138 </div> |
|
139 </div> |
|
140 <# } else { #> |
|
141 <img src="{{ data.icon }}" class="icon" draggable="false" /> |
|
142 <div class="filename"> |
|
143 <div>{{ data.filename }}</div> |
|
144 </div> |
|
145 <# } #> |
|
146 |
|
147 <# if ( data.buttons.close ) { #> |
|
148 <a class="close media-modal-icon" href="#" title="<?php _e('Remove'); ?>"></a> |
|
149 <# } #> |
|
150 |
|
151 <# if ( data.buttons.check ) { #> |
|
152 <a class="check" href="#" title="<?php _e('Deselect'); ?>"><div class="media-modal-icon"></div></a> |
|
153 <# } #> |
|
154 </div> |
|
155 <# |
|
156 var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; |
|
157 if ( data.describe ) { #> |
|
158 <# if ( 'image' === data.type ) { #> |
|
159 <input type="text" value="{{ data.caption }}" class="describe" data-setting="caption" |
|
160 placeholder="<?php esc_attr_e('Caption this image…'); ?>" {{ maybeReadOnly }} /> |
|
161 <# } else { #> |
|
162 <input type="text" value="{{ data.title }}" class="describe" data-setting="title" |
|
163 <# if ( 'video' === data.type ) { #> |
|
164 placeholder="<?php esc_attr_e('Describe this video…'); ?>" |
|
165 <# } else if ( 'audio' === data.type ) { #> |
|
166 placeholder="<?php esc_attr_e('Describe this audio file…'); ?>" |
|
167 <# } else { #> |
|
168 placeholder="<?php esc_attr_e('Describe this media file…'); ?>" |
|
169 <# } #> {{ maybeReadOnly }} /> |
|
170 <# } #> |
|
171 <# } #> |
|
172 </script> |
|
173 |
|
174 <script type="text/html" id="tmpl-attachment-details"> |
|
175 <h3> |
|
176 <?php _e('Attachment Details'); ?> |
|
177 |
|
178 <span class="settings-save-status"> |
|
179 <span class="spinner"></span> |
|
180 <span class="saved"><?php esc_html_e('Saved.'); ?></span> |
|
181 </span> |
|
182 </h3> |
|
183 <div class="attachment-info"> |
|
184 <div class="thumbnail"> |
|
185 <# if ( data.uploading ) { #> |
|
186 <div class="media-progress-bar"><div></div></div> |
|
187 <# } else if ( 'image' === data.type ) { #> |
|
188 <img src="{{ data.size.url }}" draggable="false" /> |
|
189 <# } else { #> |
|
190 <img src="{{ data.icon }}" class="icon" draggable="false" /> |
|
191 <# } #> |
|
192 </div> |
|
193 <div class="details"> |
|
194 <div class="filename">{{ data.filename }}</div> |
|
195 <div class="uploaded">{{ data.dateFormatted }}</div> |
|
196 |
|
197 <# if ( 'image' === data.type && ! data.uploading ) { #> |
|
198 <# if ( data.width && data.height ) { #> |
|
199 <div class="dimensions">{{ data.width }} × {{ data.height }}</div> |
|
200 <# } #> |
|
201 |
|
202 <# if ( data.can.save ) { #> |
|
203 <a class="edit-attachment" href="{{ data.editLink }}&image-editor" target="_blank"><?php _e( 'Edit Image' ); ?></a> |
|
204 <a class="refresh-attachment" href="#"><?php _e( 'Refresh' ); ?></a> |
|
205 <# } #> |
|
206 <# } #> |
|
207 |
|
208 <# if ( data.fileLength ) { #> |
|
209 <div class="file-length"><?php _e( 'Length:' ); ?> {{ data.fileLength }}</div> |
|
210 <# } #> |
|
211 |
|
212 <# if ( ! data.uploading && data.can.remove ) { #> |
|
213 <a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a> |
|
214 <# } #> |
|
215 |
|
216 <div class="compat-meta"> |
|
217 <# if ( data.compat && data.compat.meta ) { #> |
|
218 {{{ data.compat.meta }}} |
|
219 <# } #> |
|
220 </div> |
|
221 </div> |
|
222 </div> |
|
223 |
|
224 <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #> |
|
225 <label class="setting" data-setting="title"> |
|
226 <span><?php _e('Title'); ?></span> |
|
227 <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} /> |
|
228 </label> |
|
229 <label class="setting" data-setting="caption"> |
|
230 <span><?php _e('Caption'); ?></span> |
|
231 <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea> |
|
232 </label> |
|
233 <# if ( 'image' === data.type ) { #> |
|
234 <label class="setting" data-setting="alt"> |
|
235 <span><?php _e('Alt Text'); ?></span> |
|
236 <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} /> |
|
237 </label> |
|
238 <# } #> |
|
239 <label class="setting" data-setting="description"> |
|
240 <span><?php _e('Description'); ?></span> |
|
241 <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea> |
|
242 </label> |
|
243 </script> |
|
244 |
|
245 <script type="text/html" id="tmpl-media-selection"> |
|
246 <div class="selection-info"> |
|
247 <span class="count"></span> |
|
248 <# if ( data.editable ) { #> |
|
249 <a class="edit-selection" href="#"><?php _e('Edit'); ?></a> |
|
250 <# } #> |
|
251 <# if ( data.clearable ) { #> |
|
252 <a class="clear-selection" href="#"><?php _e('Clear'); ?></a> |
|
253 <# } #> |
|
254 </div> |
|
255 <div class="selection-view"></div> |
|
256 </script> |
|
257 |
|
258 <script type="text/html" id="tmpl-attachment-display-settings"> |
|
259 <h3><?php _e('Attachment Display Settings'); ?></h3> |
|
260 |
|
261 <# if ( 'image' === data.type ) { #> |
|
262 <label class="setting"> |
|
263 <span><?php _e('Alignment'); ?></span> |
|
264 <select class="alignment" |
|
265 data-setting="align" |
|
266 <# if ( data.userSettings ) { #> |
|
267 data-user-setting="align" |
|
268 <# } #>> |
|
269 |
|
270 <option value="left"> |
|
271 <?php esc_attr_e('Left'); ?> |
|
272 </option> |
|
273 <option value="center"> |
|
274 <?php esc_attr_e('Center'); ?> |
|
275 </option> |
|
276 <option value="right"> |
|
277 <?php esc_attr_e('Right'); ?> |
|
278 </option> |
|
279 <option value="none" selected> |
|
280 <?php esc_attr_e('None'); ?> |
|
281 </option> |
|
282 </select> |
|
283 </label> |
|
284 <# } #> |
|
285 |
|
286 <div class="setting"> |
|
287 <label> |
|
288 <# if ( data.model.canEmbed ) { #> |
|
289 <span><?php _e('Embed or Link'); ?></span> |
|
290 <# } else { #> |
|
291 <span><?php _e('Link To'); ?></span> |
|
292 <# } #> |
|
293 |
|
294 <select class="link-to" |
|
295 data-setting="link" |
|
296 <# if ( data.userSettings && ! data.model.canEmbed ) { #> |
|
297 data-user-setting="urlbutton" |
|
298 <# } #>> |
|
299 |
|
300 <# if ( data.model.canEmbed ) { #> |
|
301 <option value="embed" selected> |
|
302 <?php esc_attr_e('Embed Media Player'); ?> |
|
303 </option> |
|
304 <option value="file"> |
|
305 <# } else { #> |
|
306 <option value="file" selected> |
|
307 <# } #> |
|
308 <# if ( data.model.canEmbed ) { #> |
|
309 <?php esc_attr_e('Link to Media File'); ?> |
|
310 <# } else { #> |
|
311 <?php esc_attr_e('Media File'); ?> |
|
312 <# } #> |
|
313 </option> |
|
314 <option value="post"> |
|
315 <# if ( data.model.canEmbed ) { #> |
|
316 <?php esc_attr_e('Link to Attachment Page'); ?> |
|
317 <# } else { #> |
|
318 <?php esc_attr_e('Attachment Page'); ?> |
|
319 <# } #> |
|
320 </option> |
|
321 <# if ( 'image' === data.type ) { #> |
|
322 <option value="custom"> |
|
323 <?php esc_attr_e('Custom URL'); ?> |
|
324 </option> |
|
325 <option value="none"> |
|
326 <?php esc_attr_e('None'); ?> |
|
327 </option> |
|
328 <# } #> |
|
329 </select> |
|
330 </label> |
|
331 <input type="text" class="link-to-custom" data-setting="linkUrl" /> |
|
332 </div> |
|
333 |
|
334 <# if ( 'undefined' !== typeof data.sizes ) { #> |
|
335 <label class="setting"> |
|
336 <span><?php _e('Size'); ?></span> |
|
337 <select class="size" name="size" |
|
338 data-setting="size" |
|
339 <# if ( data.userSettings ) { #> |
|
340 data-user-setting="imgsize" |
|
341 <# } #>> |
|
342 <?php |
|
343 |
|
344 /** This filter is documented in wp-admin/includes/media.php */ |
|
345 $sizes = apply_filters( 'image_size_names_choose', array( |
|
346 'thumbnail' => __('Thumbnail'), |
|
347 'medium' => __('Medium'), |
|
348 'large' => __('Large'), |
|
349 'full' => __('Full Size'), |
|
350 ) ); |
|
351 |
|
352 foreach ( $sizes as $value => $name ) : ?> |
|
353 <# |
|
354 var size = data.sizes['<?php echo esc_js( $value ); ?>']; |
|
355 if ( size ) { #> |
|
356 <option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, 'full' ); ?>> |
|
357 <?php echo esc_html( $name ); ?> – {{ size.width }} × {{ size.height }} |
|
358 </option> |
|
359 <# } #> |
|
360 <?php endforeach; ?> |
|
361 </select> |
|
362 </label> |
|
363 <# } #> |
|
364 </script> |
|
365 |
|
366 <script type="text/html" id="tmpl-gallery-settings"> |
|
367 <h3><?php _e('Gallery Settings'); ?></h3> |
|
368 |
|
369 <label class="setting"> |
|
370 <span><?php _e('Link To'); ?></span> |
|
371 <select class="link-to" |
|
372 data-setting="link" |
|
373 <# if ( data.userSettings ) { #> |
|
374 data-user-setting="urlbutton" |
|
375 <# } #>> |
|
376 |
|
377 <option value="post" selected> |
|
378 <?php esc_attr_e('Attachment Page'); ?> |
|
379 </option> |
|
380 <option value="file"> |
|
381 <?php esc_attr_e('Media File'); ?> |
|
382 </option> |
|
383 <option value="none"> |
|
384 <?php esc_attr_e('None'); ?> |
|
385 </option> |
|
386 </select> |
|
387 </label> |
|
388 |
|
389 <label class="setting"> |
|
390 <span><?php _e('Columns'); ?></span> |
|
391 <select class="columns" name="columns" |
|
392 data-setting="columns"> |
|
393 <?php for ( $i = 1; $i <= 9; $i++ ) : ?> |
|
394 <option value="<?php echo esc_attr( $i ); ?>" <?php selected( $i, 3 ); ?>> |
|
395 <?php echo esc_html( $i ); ?> |
|
396 </option> |
|
397 <?php endfor; ?> |
|
398 </select> |
|
399 </label> |
|
400 |
|
401 <label class="setting"> |
|
402 <span><?php _e( 'Random Order' ); ?></span> |
|
403 <input type="checkbox" data-setting="_orderbyRandom" /> |
|
404 </label> |
|
405 </script> |
|
406 |
|
407 <script type="text/html" id="tmpl-embed-link-settings"> |
|
408 <label class="setting"> |
|
409 <span><?php _e('Title'); ?></span> |
|
410 <input type="text" class="alignment" data-setting="title" /> |
|
411 </label> |
|
412 </script> |
|
413 |
|
414 <script type="text/html" id="tmpl-embed-image-settings"> |
|
415 <div class="thumbnail"> |
|
416 <img src="{{ data.model.url }}" draggable="false" /> |
|
417 </div> |
|
418 |
|
419 <?php if ( ! apply_filters( 'disable_captions', '' ) ) : ?> |
|
420 <label class="setting caption"> |
|
421 <span><?php _e('Caption'); ?></span> |
|
422 <textarea data-setting="caption" /> |
|
423 </label> |
|
424 <?php endif; ?> |
|
425 |
|
426 <label class="setting alt-text"> |
|
427 <span><?php _e('Alt Text'); ?></span> |
|
428 <input type="text" data-setting="alt" /> |
|
429 </label> |
|
430 |
|
431 <div class="setting align"> |
|
432 <span><?php _e('Align'); ?></span> |
|
433 <div class="button-group button-large" data-setting="align"> |
|
434 <button class="button" value="left"> |
|
435 <?php esc_attr_e('Left'); ?> |
|
436 </button> |
|
437 <button class="button" value="center"> |
|
438 <?php esc_attr_e('Center'); ?> |
|
439 </button> |
|
440 <button class="button" value="right"> |
|
441 <?php esc_attr_e('Right'); ?> |
|
442 </button> |
|
443 <button class="button active" value="none"> |
|
444 <?php esc_attr_e('None'); ?> |
|
445 </button> |
|
446 </div> |
|
447 </div> |
|
448 |
|
449 <div class="setting link-to"> |
|
450 <span><?php _e('Link To'); ?></span> |
|
451 <div class="button-group button-large" data-setting="link"> |
|
452 <button class="button" value="file"> |
|
453 <?php esc_attr_e('Image URL'); ?> |
|
454 </button> |
|
455 <button class="button" value="custom"> |
|
456 <?php esc_attr_e('Custom URL'); ?> |
|
457 </button> |
|
458 <button class="button active" value="none"> |
|
459 <?php esc_attr_e('None'); ?> |
|
460 </button> |
|
461 </div> |
|
462 <input type="text" class="link-to-custom" data-setting="linkUrl" /> |
|
463 </div> |
|
464 </script> |
|
465 |
|
466 <script type="text/html" id="tmpl-attachments-css"> |
|
467 <style type="text/css" id="{{ data.id }}-css"> |
|
468 #{{ data.id }} { |
|
469 padding: 0 {{ data.gutter }}px; |
|
470 } |
|
471 |
|
472 #{{ data.id }} .attachment { |
|
473 margin: {{ data.gutter }}px; |
|
474 width: {{ data.edge }}px; |
|
475 } |
|
476 |
|
477 #{{ data.id }} .attachment-preview, |
|
478 #{{ data.id }} .attachment-preview .thumbnail { |
|
479 width: {{ data.edge }}px; |
|
480 height: {{ data.edge }}px; |
|
481 } |
|
482 |
|
483 #{{ data.id }} .portrait .thumbnail img { |
|
484 max-width: {{ data.edge }}px; |
|
485 height: auto; |
|
486 } |
|
487 |
|
488 #{{ data.id }} .landscape .thumbnail img { |
|
489 width: auto; |
|
490 max-height: {{ data.edge }}px; |
|
491 } |
|
492 </style> |
|
493 </script> |
|
494 <?php |
|
495 |
|
496 do_action( 'print_media_templates' ); |
|
497 } |