class-wp-widget-media-image.php 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376
  1. <?php
  2. /**
  3. * Widget API: WP_Widget_Media_Image class
  4. *
  5. * @package WordPress
  6. * @subpackage Widgets
  7. * @since 4.8.0
  8. */
  9. /**
  10. * Core class that implements an image widget.
  11. *
  12. * @since 4.8.0
  13. *
  14. * @see WP_Widget_Media
  15. * @see WP_Widget
  16. */
  17. class WP_Widget_Media_Image extends WP_Widget_Media {
  18. /**
  19. * Constructor.
  20. *
  21. * @since 4.8.0
  22. */
  23. public function __construct() {
  24. parent::__construct(
  25. 'media_image',
  26. __( 'Image' ),
  27. array(
  28. 'description' => __( 'Displays an image.' ),
  29. 'mime_type' => 'image',
  30. )
  31. );
  32. $this->l10n = array_merge(
  33. $this->l10n,
  34. array(
  35. 'no_media_selected' => __( 'No image selected' ),
  36. 'add_media' => _x( 'Add Image', 'label for button in the image widget' ),
  37. 'replace_media' => _x( 'Replace Image', 'label for button in the image widget; should preferably not be longer than ~13 characters long' ),
  38. 'edit_media' => _x( 'Edit Image', 'label for button in the image widget; should preferably not be longer than ~13 characters long' ),
  39. 'missing_attachment' => sprintf(
  40. /* translators: %s: URL to media library. */
  41. __( 'That image cannot be found. Check your <a href="%s">media library</a> and make sure it was not deleted.' ),
  42. esc_url( admin_url( 'upload.php' ) )
  43. ),
  44. /* translators: %d: Widget count. */
  45. 'media_library_state_multi' => _n_noop( 'Image Widget (%d)', 'Image Widget (%d)' ),
  46. 'media_library_state_single' => __( 'Image Widget' ),
  47. )
  48. );
  49. }
  50. /**
  51. * Get schema for properties of a widget instance (item).
  52. *
  53. * @since 4.8.0
  54. *
  55. * @see WP_REST_Controller::get_item_schema()
  56. * @see WP_REST_Controller::get_additional_fields()
  57. * @link https://core.trac.wordpress.org/ticket/35574
  58. *
  59. * @return array Schema for properties.
  60. */
  61. public function get_instance_schema() {
  62. return array_merge(
  63. array(
  64. 'size' => array(
  65. 'type' => 'string',
  66. 'enum' => array_merge( get_intermediate_image_sizes(), array( 'full', 'custom' ) ),
  67. 'default' => 'medium',
  68. 'description' => __( 'Size' ),
  69. ),
  70. 'width' => array( // Via 'customWidth', only when size=custom; otherwise via 'width'.
  71. 'type' => 'integer',
  72. 'minimum' => 0,
  73. 'default' => 0,
  74. 'description' => __( 'Width' ),
  75. ),
  76. 'height' => array( // Via 'customHeight', only when size=custom; otherwise via 'height'.
  77. 'type' => 'integer',
  78. 'minimum' => 0,
  79. 'default' => 0,
  80. 'description' => __( 'Height' ),
  81. ),
  82. 'caption' => array(
  83. 'type' => 'string',
  84. 'default' => '',
  85. 'sanitize_callback' => 'wp_kses_post',
  86. 'description' => __( 'Caption' ),
  87. 'should_preview_update' => false,
  88. ),
  89. 'alt' => array(
  90. 'type' => 'string',
  91. 'default' => '',
  92. 'sanitize_callback' => 'sanitize_text_field',
  93. 'description' => __( 'Alternative Text' ),
  94. ),
  95. 'link_type' => array(
  96. 'type' => 'string',
  97. 'enum' => array( 'none', 'file', 'post', 'custom' ),
  98. 'default' => 'custom',
  99. 'media_prop' => 'link',
  100. 'description' => __( 'Link To' ),
  101. 'should_preview_update' => true,
  102. ),
  103. 'link_url' => array(
  104. 'type' => 'string',
  105. 'default' => '',
  106. 'format' => 'uri',
  107. 'media_prop' => 'linkUrl',
  108. 'description' => __( 'URL' ),
  109. 'should_preview_update' => true,
  110. ),
  111. 'image_classes' => array(
  112. 'type' => 'string',
  113. 'default' => '',
  114. 'sanitize_callback' => array( $this, 'sanitize_token_list' ),
  115. 'media_prop' => 'extraClasses',
  116. 'description' => __( 'Image CSS Class' ),
  117. 'should_preview_update' => false,
  118. ),
  119. 'link_classes' => array(
  120. 'type' => 'string',
  121. 'default' => '',
  122. 'sanitize_callback' => array( $this, 'sanitize_token_list' ),
  123. 'media_prop' => 'linkClassName',
  124. 'should_preview_update' => false,
  125. 'description' => __( 'Link CSS Class' ),
  126. ),
  127. 'link_rel' => array(
  128. 'type' => 'string',
  129. 'default' => '',
  130. 'sanitize_callback' => array( $this, 'sanitize_token_list' ),
  131. 'media_prop' => 'linkRel',
  132. 'description' => __( 'Link Rel' ),
  133. 'should_preview_update' => false,
  134. ),
  135. 'link_target_blank' => array(
  136. 'type' => 'boolean',
  137. 'default' => false,
  138. 'media_prop' => 'linkTargetBlank',
  139. 'description' => __( 'Open link in a new tab' ),
  140. 'should_preview_update' => false,
  141. ),
  142. 'image_title' => array(
  143. 'type' => 'string',
  144. 'default' => '',
  145. 'sanitize_callback' => 'sanitize_text_field',
  146. 'media_prop' => 'title',
  147. 'description' => __( 'Image Title Attribute' ),
  148. 'should_preview_update' => false,
  149. ),
  150. /*
  151. * There are two additional properties exposed by the PostImage modal
  152. * that don't seem to be relevant, as they may only be derived read-only
  153. * values:
  154. * - originalUrl
  155. * - aspectRatio
  156. * - height (redundant when size is not custom)
  157. * - width (redundant when size is not custom)
  158. */
  159. ),
  160. parent::get_instance_schema()
  161. );
  162. }
  163. /**
  164. * Render the media on the frontend.
  165. *
  166. * @since 4.8.0
  167. *
  168. * @param array $instance Widget instance props.
  169. */
  170. public function render_media( $instance ) {
  171. $instance = array_merge( wp_list_pluck( $this->get_instance_schema(), 'default' ), $instance );
  172. $instance = wp_parse_args(
  173. $instance,
  174. array(
  175. 'size' => 'thumbnail',
  176. )
  177. );
  178. $attachment = null;
  179. if ( $this->is_attachment_with_mime_type( $instance['attachment_id'], $this->widget_options['mime_type'] ) ) {
  180. $attachment = get_post( $instance['attachment_id'] );
  181. }
  182. if ( $attachment ) {
  183. $caption = '';
  184. if ( ! isset( $instance['caption'] ) ) {
  185. $caption = $attachment->post_excerpt;
  186. } elseif ( trim( $instance['caption'] ) ) {
  187. $caption = $instance['caption'];
  188. }
  189. $image_attributes = array(
  190. 'class' => sprintf( 'image wp-image-%d %s', $attachment->ID, $instance['image_classes'] ),
  191. 'style' => 'max-width: 100%; height: auto;',
  192. );
  193. if ( ! empty( $instance['image_title'] ) ) {
  194. $image_attributes['title'] = $instance['image_title'];
  195. }
  196. if ( $instance['alt'] ) {
  197. $image_attributes['alt'] = $instance['alt'];
  198. }
  199. $size = $instance['size'];
  200. if ( 'custom' === $size || ! in_array( $size, array_merge( get_intermediate_image_sizes(), array( 'full' ) ), true ) ) {
  201. $size = array( $instance['width'], $instance['height'] );
  202. $width = $instance['width'];
  203. } else {
  204. $caption_size = _wp_get_image_size_from_meta( $instance['size'], wp_get_attachment_metadata( $attachment->ID ) );
  205. $width = empty( $caption_size[0] ) ? 0 : $caption_size[0];
  206. }
  207. $image_attributes['class'] .= sprintf( ' attachment-%1$s size-%1$s', is_array( $size ) ? implode( 'x', $size ) : $size );
  208. $image = wp_get_attachment_image( $attachment->ID, $size, false, $image_attributes );
  209. } else {
  210. if ( empty( $instance['url'] ) ) {
  211. return;
  212. }
  213. $instance['size'] = 'custom';
  214. $caption = $instance['caption'];
  215. $width = $instance['width'];
  216. $classes = 'image ' . $instance['image_classes'];
  217. if ( 0 === $instance['width'] ) {
  218. $instance['width'] = '';
  219. }
  220. if ( 0 === $instance['height'] ) {
  221. $instance['height'] = '';
  222. }
  223. $image = sprintf(
  224. '<img class="%1$s" src="%2$s" alt="%3$s" width="%4$s" height="%5$s" />',
  225. esc_attr( $classes ),
  226. esc_url( $instance['url'] ),
  227. esc_attr( $instance['alt'] ),
  228. esc_attr( $instance['width'] ),
  229. esc_attr( $instance['height'] )
  230. );
  231. } // End if().
  232. $url = '';
  233. if ( 'file' === $instance['link_type'] ) {
  234. $url = $attachment ? wp_get_attachment_url( $attachment->ID ) : $instance['url'];
  235. } elseif ( $attachment && 'post' === $instance['link_type'] ) {
  236. $url = get_attachment_link( $attachment->ID );
  237. } elseif ( 'custom' === $instance['link_type'] && ! empty( $instance['link_url'] ) ) {
  238. $url = $instance['link_url'];
  239. }
  240. if ( $url ) {
  241. $link = sprintf( '<a href="%s"', esc_url( $url ) );
  242. if ( ! empty( $instance['link_classes'] ) ) {
  243. $link .= sprintf( ' class="%s"', esc_attr( $instance['link_classes'] ) );
  244. }
  245. if ( ! empty( $instance['link_rel'] ) ) {
  246. $link .= sprintf( ' rel="%s"', esc_attr( $instance['link_rel'] ) );
  247. }
  248. if ( ! empty( $instance['link_target_blank'] ) ) {
  249. $link .= ' target="_blank"';
  250. }
  251. $link .= '>';
  252. $link .= $image;
  253. $link .= '</a>';
  254. $image = wp_targeted_link_rel( $link );
  255. }
  256. if ( $caption ) {
  257. $image = img_caption_shortcode(
  258. array(
  259. 'width' => $width,
  260. 'caption' => $caption,
  261. ),
  262. $image
  263. );
  264. }
  265. echo $image;
  266. }
  267. /**
  268. * Loads the required media files for the media manager and scripts for media widgets.
  269. *
  270. * @since 4.8.0
  271. */
  272. public function enqueue_admin_scripts() {
  273. parent::enqueue_admin_scripts();
  274. $handle = 'media-image-widget';
  275. wp_enqueue_script( $handle );
  276. $exported_schema = array();
  277. foreach ( $this->get_instance_schema() as $field => $field_schema ) {
  278. $exported_schema[ $field ] = wp_array_slice_assoc( $field_schema, array( 'type', 'default', 'enum', 'minimum', 'format', 'media_prop', 'should_preview_update' ) );
  279. }
  280. wp_add_inline_script(
  281. $handle,
  282. sprintf(
  283. 'wp.mediaWidgets.modelConstructors[ %s ].prototype.schema = %s;',
  284. wp_json_encode( $this->id_base ),
  285. wp_json_encode( $exported_schema )
  286. )
  287. );
  288. wp_add_inline_script(
  289. $handle,
  290. sprintf(
  291. '
  292. wp.mediaWidgets.controlConstructors[ %1$s ].prototype.mime_type = %2$s;
  293. wp.mediaWidgets.controlConstructors[ %1$s ].prototype.l10n = _.extend( {}, wp.mediaWidgets.controlConstructors[ %1$s ].prototype.l10n, %3$s );
  294. ',
  295. wp_json_encode( $this->id_base ),
  296. wp_json_encode( $this->widget_options['mime_type'] ),
  297. wp_json_encode( $this->l10n )
  298. )
  299. );
  300. }
  301. /**
  302. * Render form template scripts.
  303. *
  304. * @since 4.8.0
  305. */
  306. public function render_control_template_scripts() {
  307. parent::render_control_template_scripts();
  308. ?>
  309. <script type="text/html" id="tmpl-wp-media-widget-image-fields">
  310. <# var elementIdPrefix = 'el' + String( Math.random() ) + '_'; #>
  311. <# if ( data.url ) { #>
  312. <p class="media-widget-image-link">
  313. <label for="{{ elementIdPrefix }}linkUrl"><?php esc_html_e( 'Link to:' ); ?></label>
  314. <input id="{{ elementIdPrefix }}linkUrl" type="text" class="widefat link" value="{{ data.link_url }}" placeholder="https://" pattern="((\w+:)?\/\/\w.*|\w+:(?!\/\/$)|\/|\?|#).*">
  315. </p>
  316. <# } #>
  317. </script>
  318. <script type="text/html" id="tmpl-wp-media-widget-image-preview">
  319. <# if ( data.error && 'missing_attachment' === data.error ) { #>
  320. <div class="notice notice-error notice-alt notice-missing-attachment">
  321. <p><?php echo $this->l10n['missing_attachment']; ?></p>
  322. </div>
  323. <# } else if ( data.error ) { #>
  324. <div class="notice notice-error notice-alt">
  325. <p><?php _e( 'Unable to preview media due to an unknown error.' ); ?></p>
  326. </div>
  327. <# } else if ( data.url ) { #>
  328. <img class="attachment-thumb" src="{{ data.url }}" draggable="false" alt="{{ data.alt }}"
  329. <# if ( ! data.alt && data.currentFilename ) { #>
  330. aria-label="
  331. <?php
  332. echo esc_attr(
  333. sprintf(
  334. /* translators: %s: The image file name. */
  335. __( 'The current image has no alternative text. The file name is: %s' ),
  336. '{{ data.currentFilename }}'
  337. )
  338. );
  339. ?>
  340. "
  341. <# } #>
  342. />
  343. <# } #>
  344. </script>
  345. <?php
  346. }
  347. }