media.php (8870B)
1 <?php 2 namespace Elementor; 3 4 use Elementor\Modules\DynamicTags\Module as TagsModule; 5 6 if ( ! defined( 'ABSPATH' ) ) { 7 exit; // Exit if accessed directly. 8 } 9 10 /** 11 * Elementor media control. 12 * 13 * A base control for creating a media chooser control. Based on the WordPress 14 * media library. Used to select an image from the WordPress media library. 15 * 16 * @since 1.0.0 17 */ 18 class Control_Media extends Control_Base_Multiple { 19 20 /** 21 * Get media control type. 22 * 23 * Retrieve the control type, in this case `media`. 24 * 25 * @since 1.0.0 26 * @access public 27 * 28 * @return string Control type. 29 */ 30 public function get_type() { 31 return 'media'; 32 } 33 34 /** 35 * Get media control default values. 36 * 37 * Retrieve the default value of the media control. Used to return the default 38 * values while initializing the media control. 39 * 40 * @since 1.0.0 41 * @access public 42 * 43 * @return array Control default value. 44 */ 45 public function get_default_value() { 46 return [ 47 'url' => '', 48 'id' => '', 49 ]; 50 } 51 52 /** 53 * Import media images. 54 * 55 * Used to import media control files from external sites while importing 56 * Elementor template JSON file, and replacing the old data. 57 * 58 * @since 1.0.0 59 * @access public 60 * 61 * @param array $settings Control settings 62 * 63 * @return array Control settings. 64 */ 65 public function on_import( $settings ) { 66 if ( empty( $settings['url'] ) ) { 67 return $settings; 68 } 69 70 $settings = Plugin::$instance->templates_manager->get_import_images_instance()->import( $settings ); 71 72 if ( ! $settings ) { 73 $settings = [ 74 'id' => '', 75 'url' => Utils::get_placeholder_image_src(), 76 ]; 77 } 78 79 return $settings; 80 } 81 82 /** 83 * Enqueue media control scripts and styles. 84 * 85 * Used to register and enqueue custom scripts and styles used by the media 86 * control. 87 * 88 * @since 1.0.0 89 * @access public 90 */ 91 public function enqueue() { 92 global $wp_version; 93 94 $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min'; 95 wp_enqueue_media(); 96 97 wp_enqueue_style( 98 'media', 99 admin_url( '/css/media' . $suffix . '.css' ), 100 [], 101 $wp_version 102 ); 103 104 wp_register_script( 105 'image-edit', 106 '/wp-admin/js/image-edit' . $suffix . '.js', 107 [ 108 'jquery', 109 'json2', 110 'imgareaselect', 111 ], 112 $wp_version, 113 true 114 ); 115 116 wp_enqueue_script( 'image-edit' ); 117 } 118 119 /** 120 * Render media control output in the editor. 121 * 122 * Used to generate the control HTML in the editor using Underscore JS 123 * template. The variables for the class are available using `data` JS 124 * object. 125 * 126 * @since 1.0.0 127 * @access public 128 */ 129 public function content_template() { 130 ?> 131 <# 132 // For BC. 133 if ( data.media_type ) { 134 data.media_types = [ data.media_type ]; 135 } 136 137 if ( data.should_include_svg_inline_option ) { 138 data.media_types.push( 'svg' ); 139 } 140 141 // Determine if the current media type is viewable. 142 const isViewable = () => { 143 const viewable = [ 144 'image', 145 'video', 146 'svg', 147 ]; 148 149 // Make sure that all media types are viewable. 150 return data.media_types.every( ( type ) => viewable.includes( type ) ); 151 }; 152 153 // Get the preview type for the current media type. 154 const getPreviewType = () => { 155 if ( data.media_types.includes( 'video' ) ) { 156 return 'video'; 157 } 158 159 if ( data.media_types.includes( 'image' ) || data.media_types.includes( 'svg' ) ) { 160 return 'image'; 161 } 162 163 return 'none'; 164 } 165 166 // Retrieve a button label by media type. 167 const getButtonLabel = ( mediaType ) => { 168 switch( mediaType ) { 169 case 'image': 170 return '<?php esc_html_e( 'Choose Image', 'elementor' ); ?>'; 171 172 case 'video': 173 return '<?php esc_html_e( 'Choose Video', 'elementor' ); ?>'; 174 175 case 'svg': 176 return '<?php esc_html_e( 'Choose SVG', 'elementor' ); ?>'; 177 178 default: 179 return '<?php esc_html_e( 'Choose File', 'elementor' ); ?>'; 180 } 181 } 182 #> 183 <div class="elementor-control-field elementor-control-media"> 184 <label class="elementor-control-title">{{{ data.label }}}</label> 185 <# 186 if ( isViewable() ) { 187 let inputWrapperClasses = 'elementor-control-input-wrapper elementor-aspect-ratio-219'; 188 189 if ( ! data.label_block ) { 190 inputWrapperClasses += ' elementor-control-unit-5'; 191 } 192 #> 193 <div class="{{{ inputWrapperClasses }}}"> 194 <div class="elementor-control-media__content elementor-control-tag-area elementor-control-preview-area elementor-fit-aspect-ratio"> 195 <div class="elementor-control-media-area elementor-fit-aspect-ratio"> 196 <div class="elementor-control-media__remove elementor-control-media__content__remove" title="<?php echo esc_html__( 'Remove', 'elementor' ); ?>"> 197 <i class="eicon-trash-o"></i> 198 </div> 199 <# 200 switch( getPreviewType() ) { 201 case 'image': 202 #> 203 <div class="elementor-control-media__preview elementor-fit-aspect-ratio"></div> 204 <# 205 break; 206 207 case 'video': 208 #> 209 <video class="elementor-control-media-video" preload="metadata"></video> 210 <i class="eicon-video-camera"></i> 211 <# 212 break; 213 } 214 #> 215 </div> 216 <div class="elementor-control-media-upload-button elementor-control-media__content__upload-button"> 217 <i class="eicon-plus-circle" aria-hidden="true"></i> 218 </div> 219 <div class="elementor-control-media__tools elementor-control-dynamic-switcher-wrapper"> 220 <# 221 data.media_types.forEach( ( type ) => { 222 #> 223 <div class="elementor-control-media__tool elementor-control-media__replace" data-media-type="{{{ type }}}">{{{ getButtonLabel( type ) }}}</div> 224 <# 225 } ); 226 #> 227 </div> 228 </div> 229 </div> 230 <# } /* endif isViewable() */ else { #> 231 <div class="elementor-control-media__file elementor-control-preview-area"> 232 <div class="elementor-control-media__file__content"> 233 <div class="elementor-control-media__file__content__label"><?php echo esc_html__( 'Click the media icon to upload file', 'elementor' ); ?></div> 234 <div class="elementor-control-media__file__content__info"> 235 <div class="elementor-control-media__file__content__info__icon"> 236 <i class="eicon-document-file"></i> 237 </div> 238 <div class="elementor-control-media__file__content__info__name"></div> 239 </div> 240 </div> 241 <div class="elementor-control-media__file__controls"> 242 <div class="elementor-control-media__remove elementor-control-media__file__controls__remove" title="<?php echo esc_html__( 'Remove', 'elementor' ); ?>"> 243 <i class="eicon-trash-o"></i> 244 </div> 245 <div class="elementor-control-media__file__controls__upload-button elementor-control-media-upload-button" title="<?php echo esc_html__( 'Upload', 'elementor' ); ?>"> 246 <i class="eicon-upload"></i> 247 </div> 248 </div> 249 </div> 250 <# } #> 251 <# if ( data.description ) { #> 252 <div class="elementor-control-field-description">{{{ data.description }}}</div> 253 <# } #> 254 <input type="hidden" data-setting="{{ data.name }}"/> 255 </div> 256 <?php 257 } 258 259 /** 260 * Get media control default settings. 261 * 262 * Retrieve the default settings of the media control. Used to return the default 263 * settings while initializing the media control. 264 * 265 * @since 1.0.0 266 * @access protected 267 * 268 * @return array Control default settings. 269 */ 270 protected function get_default_settings() { 271 return [ 272 'label_block' => true, 273 'media_types' => [ 274 'image', 275 ], 276 'dynamic' => [ 277 'categories' => [ TagsModule::IMAGE_CATEGORY ], 278 'returnType' => 'object', 279 ], 280 ]; 281 } 282 283 /** 284 * Get media control image title. 285 * 286 * Retrieve the `title` of the image selected by the media control. 287 * 288 * @since 1.0.0 289 * @access public 290 * @static 291 * 292 * @param array $attachment Media attachment. 293 * 294 * @return string Image title. 295 */ 296 public static function get_image_title( $attachment ) { 297 if ( empty( $attachment['id'] ) ) { 298 return ''; 299 } 300 301 return get_the_title( $attachment['id'] ); 302 } 303 304 /** 305 * Get media control image alt. 306 * 307 * Retrieve the `alt` value of the image selected by the media control. 308 * 309 * @since 1.0.0 310 * @access public 311 * @static 312 * 313 * @param array $instance Media attachment. 314 * 315 * @return string Image alt. 316 */ 317 public static function get_image_alt( $instance ) { 318 if ( empty( $instance['id'] ) ) { 319 // For `Insert From URL` images. 320 return isset( $instance['alt'] ) ? trim( strip_tags( $instance['alt'] ) ) : ''; 321 } 322 323 $attachment_id = $instance['id']; 324 if ( ! $attachment_id ) { 325 return ''; 326 } 327 328 $attachment = get_post( $attachment_id ); 329 if ( ! $attachment ) { 330 return ''; 331 } 332 333 $alt = get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ); 334 if ( ! $alt ) { 335 $alt = $attachment->post_excerpt; 336 if ( ! $alt ) { 337 $alt = $attachment->post_title; 338 } 339 } 340 return trim( strip_tags( $alt ) ); 341 } 342 }