media.php 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. <?php
  2. namespace Elementor;
  3. use Elementor\Modules\DynamicTags\Module as TagsModule;
  4. if ( ! defined( 'ABSPATH' ) ) {
  5. exit; // Exit if accessed directly.
  6. }
  7. /**
  8. * Elementor media control.
  9. *
  10. * A base control for creating a media chooser control. Based on the WordPress
  11. * media library. Used to select an image from the WordPress media library.
  12. *
  13. * @since 1.0.0
  14. */
  15. class Control_Media extends Control_Base_Multiple {
  16. /**
  17. * Get media control type.
  18. *
  19. * Retrieve the control type, in this case `media`.
  20. *
  21. * @since 1.0.0
  22. * @access public
  23. *
  24. * @return string Control type.
  25. */
  26. public function get_type() {
  27. return 'media';
  28. }
  29. /**
  30. * Get media control default values.
  31. *
  32. * Retrieve the default value of the media control. Used to return the default
  33. * values while initializing the media control.
  34. *
  35. * @since 1.0.0
  36. * @access public
  37. *
  38. * @return array Control default value.
  39. */
  40. public function get_default_value() {
  41. return [
  42. 'url' => '',
  43. 'id' => '',
  44. ];
  45. }
  46. /**
  47. * Import media images.
  48. *
  49. * Used to import media control files from external sites while importing
  50. * Elementor template JSON file, and replacing the old data.
  51. *
  52. * @since 1.0.0
  53. * @access public
  54. *
  55. * @param array $settings Control settings
  56. *
  57. * @return array Control settings.
  58. */
  59. public function on_import( $settings ) {
  60. if ( empty( $settings['url'] ) ) {
  61. return $settings;
  62. }
  63. $settings = Plugin::$instance->templates_manager->get_import_images_instance()->import( $settings );
  64. if ( ! $settings ) {
  65. $settings = [
  66. 'id' => '',
  67. 'url' => Utils::get_placeholder_image_src(),
  68. ];
  69. }
  70. return $settings;
  71. }
  72. /**
  73. * Enqueue media control scripts and styles.
  74. *
  75. * Used to register and enqueue custom scripts and styles used by the media
  76. * control.
  77. *
  78. * @since 1.0.0
  79. * @access public
  80. */
  81. public function enqueue() {
  82. global $wp_version;
  83. $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
  84. wp_enqueue_media();
  85. wp_enqueue_style(
  86. 'media',
  87. admin_url( '/css/media' . $suffix . '.css' ),
  88. [],
  89. $wp_version
  90. );
  91. wp_register_script(
  92. 'image-edit',
  93. '/wp-admin/js/image-edit' . $suffix . '.js',
  94. [
  95. 'jquery',
  96. 'json2',
  97. 'imgareaselect',
  98. ],
  99. $wp_version,
  100. true
  101. );
  102. wp_enqueue_script( 'image-edit' );
  103. }
  104. /**
  105. * Render media control output in the editor.
  106. *
  107. * Used to generate the control HTML in the editor using Underscore JS
  108. * template. The variables for the class are available using `data` JS
  109. * object.
  110. *
  111. * @since 1.0.0
  112. * @access public
  113. */
  114. public function content_template() {
  115. ?>
  116. <div class="elementor-control-field">
  117. <label class="elementor-control-title">{{{ data.label }}}</label>
  118. <div class="elementor-control-input-wrapper">
  119. <div class="elementor-control-media elementor-control-tag-area elementor-control-preview-area elementor-aspect-ratio-169">
  120. <div class="elementor-control-media-upload-button">
  121. <i class="fa fa-plus-circle" aria-hidden="true"></i>
  122. </div>
  123. <div class="elementor-control-media-area{{{ 'video' === data.media_type ? ' elementor-fit-aspect-ratio' : '' }}}">
  124. <# if( 'image' === data.media_type ) { #>
  125. <div class="elementor-control-media-image"></div>
  126. <# } else if( 'video' === data.media_type ) { #>
  127. <video class="elementor-control-media-video" preload="metadata"></video>
  128. <i class="fa fa-video-camera"></i>
  129. <# } #>
  130. <div class="elementor-control-media-delete"><?php echo __( 'Delete', 'elementor' ); ?></div>
  131. </div>
  132. </div>
  133. </div>
  134. <# if ( data.description ) { #>
  135. <div class="elementor-control-field-description">{{{ data.description }}}</div>
  136. <# } #>
  137. <input type="hidden" data-setting="{{ data.name }}" />
  138. </div>
  139. <?php
  140. }
  141. /**
  142. * Get media control default settings.
  143. *
  144. * Retrieve the default settings of the media control. Used to return the default
  145. * settings while initializing the media control.
  146. *
  147. * @since 1.0.0
  148. * @access protected
  149. *
  150. * @return array Control default settings.
  151. */
  152. protected function get_default_settings() {
  153. return [
  154. 'label_block' => true,
  155. 'media_type' => 'image',
  156. 'dynamic' => [
  157. 'categories' => [ TagsModule::IMAGE_CATEGORY ],
  158. 'returnType' => 'object',
  159. ],
  160. ];
  161. }
  162. /**
  163. * Get media control image title.
  164. *
  165. * Retrieve the `title` of the image selected by the media control.
  166. *
  167. * @since 1.0.0
  168. * @access public
  169. * @static
  170. *
  171. * @param array $attachment Media attachment.
  172. *
  173. * @return string Image title.
  174. */
  175. public static function get_image_title( $attachment ) {
  176. if ( empty( $attachment['id'] ) ) {
  177. return '';
  178. }
  179. return get_the_title( $attachment['id'] );
  180. }
  181. /**
  182. * Get media control image alt.
  183. *
  184. * Retrieve the `alt` value of the image selected by the media control.
  185. *
  186. * @since 1.0.0
  187. * @access public
  188. * @static
  189. *
  190. * @param array $instance Media attachment.
  191. *
  192. * @return string Image alt.
  193. */
  194. public static function get_image_alt( $instance ) {
  195. if ( empty( $instance['id'] ) ) {
  196. return '';
  197. }
  198. $attachment_id = $instance['id'];
  199. if ( ! $attachment_id ) {
  200. return '';
  201. }
  202. $attachment = get_post( $attachment_id );
  203. if ( ! $attachment ) {
  204. return '';
  205. }
  206. $alt = get_post_meta( $attachment_id, '_wp_attachment_image_alt', true );
  207. if ( ! $alt ) {
  208. $alt = $attachment->post_excerpt;
  209. if ( ! $alt ) {
  210. $alt = $attachment->post_title;
  211. }
  212. }
  213. return trim( strip_tags( $alt ) );
  214. }
  215. }