|
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 _e('The web browser on your device cannot be used to upload files. You may be able to use the <a href="http://wordpress.org/extend/mobile/">native app for your device</a> instead.'); ?></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.uploading && data.can.remove ) { #> |
|
209 <a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a> |
|
210 <# } #> |
|
211 |
|
212 <div class="compat-meta"> |
|
213 <# if ( data.compat && data.compat.meta ) { #> |
|
214 {{{ data.compat.meta }}} |
|
215 <# } #> |
|
216 </div> |
|
217 </div> |
|
218 </div> |
|
219 |
|
220 <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #> |
|
221 <label class="setting" data-setting="title"> |
|
222 <span><?php _e('Title'); ?></span> |
|
223 <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} /> |
|
224 </label> |
|
225 <label class="setting" data-setting="caption"> |
|
226 <span><?php _e('Caption'); ?></span> |
|
227 <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea> |
|
228 </label> |
|
229 <# if ( 'image' === data.type ) { #> |
|
230 <label class="setting" data-setting="alt"> |
|
231 <span><?php _e('Alt Text'); ?></span> |
|
232 <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} /> |
|
233 </label> |
|
234 <# } #> |
|
235 <label class="setting" data-setting="description"> |
|
236 <span><?php _e('Description'); ?></span> |
|
237 <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea> |
|
238 </label> |
|
239 </script> |
|
240 |
|
241 <script type="text/html" id="tmpl-media-selection"> |
|
242 <div class="selection-info"> |
|
243 <span class="count"></span> |
|
244 <# if ( data.editable ) { #> |
|
245 <a class="edit-selection" href="#"><?php _e('Edit'); ?></a> |
|
246 <# } #> |
|
247 <# if ( data.clearable ) { #> |
|
248 <a class="clear-selection" href="#"><?php _e('Clear'); ?></a> |
|
249 <# } #> |
|
250 </div> |
|
251 <div class="selection-view"></div> |
|
252 </script> |
|
253 |
|
254 <script type="text/html" id="tmpl-attachment-display-settings"> |
|
255 <h3><?php _e('Attachment Display Settings'); ?></h3> |
|
256 |
|
257 <# if ( 'image' === data.type ) { #> |
|
258 <label class="setting"> |
|
259 <span><?php _e('Alignment'); ?></span> |
|
260 <select class="alignment" |
|
261 data-setting="align" |
|
262 <# if ( data.userSettings ) { #> |
|
263 data-user-setting="align" |
|
264 <# } #>> |
|
265 |
|
266 <option value="left"> |
|
267 <?php esc_attr_e('Left'); ?> |
|
268 </option> |
|
269 <option value="center"> |
|
270 <?php esc_attr_e('Center'); ?> |
|
271 </option> |
|
272 <option value="right"> |
|
273 <?php esc_attr_e('Right'); ?> |
|
274 </option> |
|
275 <option value="none" selected> |
|
276 <?php esc_attr_e('None'); ?> |
|
277 </option> |
|
278 </select> |
|
279 </label> |
|
280 <# } #> |
|
281 |
|
282 <div class="setting"> |
|
283 <label> |
|
284 <span><?php _e('Link To'); ?></span> |
|
285 <select class="link-to" |
|
286 data-setting="link" |
|
287 <# if ( data.userSettings ) { #> |
|
288 data-user-setting="urlbutton" |
|
289 <# } #>> |
|
290 |
|
291 <option value="custom"> |
|
292 <?php esc_attr_e('Custom URL'); ?> |
|
293 </option> |
|
294 <option value="post" selected> |
|
295 <?php esc_attr_e('Attachment Page'); ?> |
|
296 </option> |
|
297 <option value="file"> |
|
298 <?php esc_attr_e('Media File'); ?> |
|
299 </option> |
|
300 <option value="none"> |
|
301 <?php esc_attr_e('None'); ?> |
|
302 </option> |
|
303 </select> |
|
304 </label> |
|
305 <input type="text" class="link-to-custom" data-setting="linkUrl" /> |
|
306 </div> |
|
307 |
|
308 <# if ( 'undefined' !== typeof data.sizes ) { #> |
|
309 <label class="setting"> |
|
310 <span><?php _e('Size'); ?></span> |
|
311 <select class="size" name="size" |
|
312 data-setting="size" |
|
313 <# if ( data.userSettings ) { #> |
|
314 data-user-setting="imgsize" |
|
315 <# } #>> |
|
316 <?php |
|
317 |
|
318 $sizes = apply_filters( 'image_size_names_choose', array( |
|
319 'thumbnail' => __('Thumbnail'), |
|
320 'medium' => __('Medium'), |
|
321 'large' => __('Large'), |
|
322 'full' => __('Full Size'), |
|
323 ) ); |
|
324 |
|
325 foreach ( $sizes as $value => $name ) : ?> |
|
326 <# |
|
327 var size = data.sizes['<?php echo esc_js( $value ); ?>']; |
|
328 if ( size ) { #> |
|
329 <option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, 'full' ); ?>> |
|
330 <?php echo esc_html( $name ); ?> – {{ size.width }} × {{ size.height }} |
|
331 </option> |
|
332 <# } #> |
|
333 <?php endforeach; ?> |
|
334 </select> |
|
335 </label> |
|
336 <# } #> |
|
337 </script> |
|
338 |
|
339 <script type="text/html" id="tmpl-gallery-settings"> |
|
340 <h3><?php _e('Gallery Settings'); ?></h3> |
|
341 |
|
342 <label class="setting"> |
|
343 <span><?php _e('Link To'); ?></span> |
|
344 <select class="link-to" |
|
345 data-setting="link" |
|
346 <# if ( data.userSettings ) { #> |
|
347 data-user-setting="urlbutton" |
|
348 <# } #>> |
|
349 |
|
350 <option value="post" selected> |
|
351 <?php esc_attr_e('Attachment Page'); ?> |
|
352 </option> |
|
353 <option value="file"> |
|
354 <?php esc_attr_e('Media File'); ?> |
|
355 </option> |
|
356 </select> |
|
357 </label> |
|
358 |
|
359 <label class="setting"> |
|
360 <span><?php _e('Columns'); ?></span> |
|
361 <select class="columns" name="columns" |
|
362 data-setting="columns"> |
|
363 <?php for ( $i = 1; $i <= 9; $i++ ) : ?> |
|
364 <option value="<?php echo esc_attr( $i ); ?>" <?php selected( $i, 3 ); ?>> |
|
365 <?php echo esc_html( $i ); ?> |
|
366 </option> |
|
367 <?php endfor; ?> |
|
368 </select> |
|
369 </label> |
|
370 |
|
371 <label class="setting"> |
|
372 <span><?php _e( 'Random Order' ); ?></span> |
|
373 <input type="checkbox" data-setting="_orderbyRandom" /> |
|
374 </label> |
|
375 </script> |
|
376 |
|
377 <script type="text/html" id="tmpl-embed-link-settings"> |
|
378 <label class="setting"> |
|
379 <span><?php _e('Title'); ?></span> |
|
380 <input type="text" class="alignment" data-setting="title" /> |
|
381 </label> |
|
382 </script> |
|
383 |
|
384 <script type="text/html" id="tmpl-embed-image-settings"> |
|
385 <div class="thumbnail"> |
|
386 <img src="{{ data.model.url }}" draggable="false" /> |
|
387 </div> |
|
388 |
|
389 <?php if ( ! apply_filters( 'disable_captions', '' ) ) : ?> |
|
390 <label class="setting caption"> |
|
391 <span><?php _e('Caption'); ?></span> |
|
392 <textarea data-setting="caption" /> |
|
393 </label> |
|
394 <?php endif; ?> |
|
395 |
|
396 <label class="setting alt-text"> |
|
397 <span><?php _e('Alt Text'); ?></span> |
|
398 <input type="text" data-setting="alt" /> |
|
399 </label> |
|
400 |
|
401 <div class="setting align"> |
|
402 <span><?php _e('Align'); ?></span> |
|
403 <div class="button-group button-large" data-setting="align"> |
|
404 <button class="button" value="left"> |
|
405 <?php esc_attr_e('Left'); ?> |
|
406 </button> |
|
407 <button class="button" value="center"> |
|
408 <?php esc_attr_e('Center'); ?> |
|
409 </button> |
|
410 <button class="button" value="right"> |
|
411 <?php esc_attr_e('Right'); ?> |
|
412 </button> |
|
413 <button class="button active" value="none"> |
|
414 <?php esc_attr_e('None'); ?> |
|
415 </button> |
|
416 </div> |
|
417 </div> |
|
418 |
|
419 <div class="setting link-to"> |
|
420 <span><?php _e('Link To'); ?></span> |
|
421 <div class="button-group button-large" data-setting="link"> |
|
422 <button class="button" value="file"> |
|
423 <?php esc_attr_e('Image URL'); ?> |
|
424 </button> |
|
425 <button class="button" value="custom"> |
|
426 <?php esc_attr_e('Custom URL'); ?> |
|
427 </button> |
|
428 <button class="button active" value="none"> |
|
429 <?php esc_attr_e('None'); ?> |
|
430 </button> |
|
431 </div> |
|
432 <input type="text" class="link-to-custom" data-setting="linkUrl" /> |
|
433 </div> |
|
434 </script> |
|
435 |
|
436 <script type="text/html" id="tmpl-attachments-css"> |
|
437 <style type="text/css" id="{{ data.id }}-css"> |
|
438 #{{ data.id }} { |
|
439 padding: 0 {{ data.gutter }}px; |
|
440 } |
|
441 |
|
442 #{{ data.id }} .attachment { |
|
443 margin: {{ data.gutter }}px; |
|
444 width: {{ data.edge }}px; |
|
445 } |
|
446 |
|
447 #{{ data.id }} .attachment-preview, |
|
448 #{{ data.id }} .attachment-preview .thumbnail { |
|
449 width: {{ data.edge }}px; |
|
450 height: {{ data.edge }}px; |
|
451 } |
|
452 |
|
453 #{{ data.id }} .portrait .thumbnail img { |
|
454 max-width: {{ data.edge }}px; |
|
455 height: auto; |
|
456 } |
|
457 |
|
458 #{{ data.id }} .landscape .thumbnail img { |
|
459 width: auto; |
|
460 max-height: {{ data.edge }}px; |
|
461 } |
|
462 </style> |
|
463 </script> |
|
464 <?php |
|
465 |
|
466 do_action( 'print_media_templates' ); |
|
467 } |