← All changes | includes/widgets/image-box.php +121 -293 4.0.9 → 3.16.2 View file →

		@@ -72,31 +72,9 @@
72	72	public function get_keywords() {
73	73	return [ 'image', 'photo', 'visual', 'box' ];
74	74	}
75	75
76		- protected function is_dynamic_content(): bool {
77		- return false;
78		- }
79		-
80	76	/**
81		- * Get style dependencies.
82		- *
83		- * Retrieve the list of style dependencies the widget requires.
84		- *
85		- * @since 3.24.0
86		- * @access public
87		- *
88		- * @return array Widget style dependencies.
89		- */
90		- public function get_style_depends(): array {
91		- return [ 'widget-image-box' ];
92		- }
93		-
94		- public function has_widget_inner_wrapper(): bool {
95		- return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
96		- }
97		-
98		- /**
99	77	* Register image box widget controls.
100	78	*
101	79	* Adds different input fields to allow the user to change and customize the widget settings.
102	80	*
		@@ -129,8 +107,9 @@
129	107	Group_Control_Image_Size::get_type(),
130	108	[
131	109	'name' => 'thumbnail', // Usage: `{name}_size` and `{name}_custom_dimension`, in this case `thumbnail_size` and `thumbnail_custom_dimension`.
132	110	'default' => 'full',
	111	+ 'separator' => 'none',
133	112	'condition' => [
134	113	'image[url]!' => '',
135	114	],
136	115	]
		@@ -159,8 +138,9 @@
159	138	'active' => true,
160	139	],
161	140	'default' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
162	141	'placeholder' => esc_html__( 'Enter your description', 'elementor' ),
	142	+ 'separator' => 'none',
163	143	'rows' => 10,
164	144	]
165	145	);
166	146
		@@ -195,8 +175,17 @@
195	175	'default' => 'h3',
196	176	]
197	177	);
198	178
	179	+ $this->add_control(
	180	+ 'view',
	181	+ [
	182	+ 'label' => esc_html__( 'View', 'elementor' ),
	183	+ 'type' => Controls_Manager::HIDDEN,
	184	+ 'default' => 'traditional',
	185	+ ]
	186	+ );
	187	+
199	188	$this->end_controls_section();
200	189
201	190	$this->start_controls_section(
202	191	'section_style_box',
		@@ -205,9 +194,9 @@
205	194	'tab' => Controls_Manager::TAB_STYLE,
206	195	]
207	196	);
208	197
209		- $this->add_responsive_control(
	198	+ $this->add_control(
210	199	'position',
211	200	[
212	201	'label' => esc_html__( 'Image Position', 'elementor' ),
213	202	'type' => Controls_Manager::CHOOSE,
		@@ -233,9 +222,9 @@
233	222	],
234	223	]
235	224	);
236	225
237		- $this->add_responsive_control(
	226	+ $this->add_control(
238	227	'content_vertical_alignment',
239	228	[
240	229	'label' => esc_html__( 'Vertical Alignment', 'elementor' ),
241	230	'type' => Controls_Manager::CHOOSE,
		@@ -267,10 +256,10 @@
267	256	[
268	257	'label' => esc_html__( 'Alignment', 'elementor' ),
269	258	'type' => Controls_Manager::CHOOSE,
270	259	'options' => [
271		- 'start' => [
272		- 'title' => esc_html__( 'Start', 'elementor' ),
	260	+ 'left' => [
	261	+ 'title' => esc_html__( 'Left', 'elementor' ),
273	262	'icon' => 'eicon-text-align-left',
274	263	],
275	264	'center' => [
276	265	'title' => esc_html__( 'Center', 'elementor' ),
		@@ -275,10 +264,10 @@
275	264	'center' => [
276	265	'title' => esc_html__( 'Center', 'elementor' ),
277	266	'icon' => 'eicon-text-align-center',
278	267	],
279		- 'end' => [
280		- 'title' => esc_html__( 'End', 'elementor' ),
	268	+ 'right' => [
	269	+ 'title' => esc_html__( 'Right', 'elementor' ),
281	270	'icon' => 'eicon-text-align-right',
282	271	],
283	272	'justify' => [
284	273	'title' => esc_html__( 'Justified', 'elementor' ),
		@@ -284,24 +273,31 @@
284	273	'title' => esc_html__( 'Justified', 'elementor' ),
285	274	'icon' => 'eicon-text-align-justify',
286	275	],
287	276	],
288		- 'classes' => 'elementor-control-start-end',
289		- 'selectors_dictionary' => [
290		- 'left' => is_rtl() ? 'end' : 'start',
291		- 'right' => is_rtl() ? 'start' : 'end',
292		- ],
293	277	'selectors' => [
294	278	'{{WRAPPER}} .elementor-image-box-wrapper' => 'text-align: {{VALUE}};',
295	279	],
296		- 'separator' => 'after',
297	280	]
298	281	);
299	282
	283	+ $this->end_controls_section();
	284	+
	285	+ $this->start_controls_section(
	286	+ 'section_style_image',
	287	+ [
	288	+ 'label' => esc_html__( 'Image', 'elementor' ),
	289	+ 'tab' => Controls_Manager::TAB_STYLE,
	290	+ 'condition' => [
	291	+ 'image[url]!' => '',
	292	+ ],
	293	+ ]
	294	+ );
	295	+
300	296	$this->add_responsive_control(
301	297	'image_space',
302	298	[
303		- 'label' => esc_html__( 'Image Spacing', 'elementor' ),
	299	+ 'label' => esc_html__( 'Spacing', 'elementor' ),
304	300	'type' => Controls_Manager::SLIDER,
305	301	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
306	302	'default' => [
307	303	'size' => 15,
		@@ -307,8 +303,9 @@
307	303	'size' => 15,
308	304	],
309	305	'range' => [
310	306	'px' => [
	307	+ 'min' => 0,
311	308	'max' => 100,
312	309	],
313	310	],
314	311	'selectors' => [
		@@ -316,56 +313,15 @@
316	313	'{{WRAPPER}}.elementor-position-left .elementor-image-box-img' => 'margin-right: {{SIZE}}{{UNIT}};',
317	314	'{{WRAPPER}}.elementor-position-top .elementor-image-box-img' => 'margin-bottom: {{SIZE}}{{UNIT}};',
318	315	'(mobile){{WRAPPER}} .elementor-image-box-img' => 'margin-bottom: {{SIZE}}{{UNIT}};',
319	316	],
320		- 'condition' => [
321		- 'image[url]!' => '',
322		- ],
323	317	]
324	318	);
325	319
326	320	$this->add_responsive_control(
327		- 'title_bottom_space',
328		- [
329		- 'label' => esc_html__( 'Content Spacing', 'elementor' ),
330		- 'type' => Controls_Manager::SLIDER,
331		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
332		- 'range' => [
333		- 'px' => [
334		- 'max' => 100,
335		- ],
336		- 'em' => [
337		- 'min' => 0,
338		- 'max' => 10,
339		- ],
340		- 'rem' => [
341		- 'min' => 0,
342		- 'max' => 10,
343		- ],
344		- ],
345		- 'selectors' => [
346		- '{{WRAPPER}} .elementor-image-box-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
347		- ],
348		- ]
349		- );
350		-
351		- $this->end_controls_section();
352		-
353		- $this->start_controls_section(
354		- 'section_style_image',
355		- [
356		- 'label' => esc_html__( 'Image', 'elementor' ),
357		- 'tab' => Controls_Manager::TAB_STYLE,
358		- 'condition' => [
359		- 'image[url]!' => '',
360		- ],
361		- ]
362		- );
363		-
364		- $this->add_responsive_control(
365	321	'image_size',
366	322	[
367		- 'label' => esc_html__( 'Width', 'elementor' ),
	323	+ 'label' => esc_html__( 'Width', 'elementor' ) . ' (%)',
368	324	'type' => Controls_Manager::SLIDER,
369	325	'default' => [
370	326	'size' => 30,
371	327	'unit' => '%',
		@@ -375,9 +331,9 @@
375	331	],
376	332	'mobile_default' => [
377	333	'unit' => '%',
378	334	],
379		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	335	+ 'size_units' => [ '%' ],
380	336	'range' => [
381	337	'%' => [
382	338	'min' => 5,
383	339	'max' => 100,
		@@ -388,68 +344,8 @@
388	344	],
389	345	]
390	346	);
391	347
392		- $this->add_responsive_control(
393		- 'image_height',
394		- [
395		- 'label' => esc_html__( 'Height', 'elementor' ),
396		- 'type' => Controls_Manager::SLIDER,
397		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vh', 'custom' ],
398		- 'selectors' => [
399		- '{{WRAPPER}} .elementor-image-box-img img' => 'height: {{SIZE}}{{UNIT}};',
400		- ],
401		- ]
402		- );
403		-
404		- $this->add_responsive_control(
405		- 'image_object_fit',
406		- [
407		- 'label' => esc_html__( 'Object Fit', 'elementor' ),
408		- 'type' => Controls_Manager::SELECT,
409		- 'options' => [
410		- '' => esc_html__( 'Default', 'elementor' ),
411		- 'fill' => esc_html__( 'Fill', 'elementor' ),
412		- 'cover' => esc_html__( 'Cover', 'elementor' ),
413		- 'contain' => esc_html__( 'Contain', 'elementor' ),
414		- 'scale-down' => esc_html__( 'Scale Down', 'elementor' ),
415		- ],
416		- 'condition' => [
417		- 'image_height[size]!' => '',
418		- ],
419		- 'selectors' => [
420		- '{{WRAPPER}} .elementor-image-box-img img' => 'object-fit: {{VALUE}};',
421		- ],
422		- ]
423		- );
424		-
425		- $this->add_responsive_control(
426		- 'image_object_position',
427		- [
428		- 'label' => esc_html__( 'Object Position', 'elementor' ),
429		- 'type' => Controls_Manager::SELECT,
430		- 'options' => [
431		- 'center center' => esc_html__( 'Center Center', 'elementor' ),
432		- 'center left' => esc_html__( 'Center Left', 'elementor' ),
433		- 'center right' => esc_html__( 'Center Right', 'elementor' ),
434		- 'top center' => esc_html__( 'Top Center', 'elementor' ),
435		- 'top left' => esc_html__( 'Top Left', 'elementor' ),
436		- 'top right' => esc_html__( 'Top Right', 'elementor' ),
437		- 'bottom center' => esc_html__( 'Bottom Center', 'elementor' ),
438		- 'bottom left' => esc_html__( 'Bottom Left', 'elementor' ),
439		- 'bottom right' => esc_html__( 'Bottom Right', 'elementor' ),
440		- ],
441		- 'default' => 'center center',
442		- 'selectors' => [
443		- '{{WRAPPER}} .elementor-image-box-img img' => 'object-position: {{VALUE}};',
444		- ],
445		- 'condition' => [
446		- 'image_height[size]!' => '',
447		- 'image_object_fit' => [ 'cover', 'contain', 'scale-down' ],
448		- ],
449		- ]
450		- );
451		-
452	348	$this->add_group_control(
453	349	Group_Control_Border::get_type(),
454	350	[
455	351	'name' => 'image_border',
		@@ -463,8 +359,9 @@
463	359	[
464	360	'label' => esc_html__( 'Border Radius', 'elementor' ),
465	361	'type' => Controls_Manager::SLIDER,
466	362	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
	363	+ 'separator' => 'after',
467	364	'selectors' => [
468	365	'{{WRAPPER}} .elementor-image-box-img img' => 'border-radius: {{SIZE}}{{UNIT}};',
469	366	],
470	367	]
		@@ -469,28 +366,19 @@
469	366	],
470	367	]
471	368	);
472	369
473		- $this->add_group_control(
474		- Group_Control_Box_Shadow::get_type(),
475		- [
476		- 'name' => 'image_box_shadow',
477		- 'selector' => '{{WRAPPER}} .elementor-image-box-img img',
478		- ]
479		- );
480		-
481	370	$this->add_control(
482		- 'separator_panel_style',
	371	+ 'hover_animation',
483	372	[
484		- 'type' => Controls_Manager::DIVIDER,
485		- 'style' => 'thick',
	373	+ 'label' => esc_html__( 'Hover Animation', 'elementor' ),
	374	+ 'type' => Controls_Manager::HOVER_ANIMATION,
486	375	]
487	376	);
488	377
489	378	$this->start_controls_tabs( 'image_effects' );
490	379
491		- $this->start_controls_tab(
492		- 'normal',
	380	+ $this->start_controls_tab( 'normal',
493	381	[
494	382	'label' => esc_html__( 'Normal', 'elementor' ),
495	383	]
496	384	);
		@@ -520,12 +408,31 @@
520	408	],
521	409	]
522	410	);
523	411
	412	+ $this->add_control(
	413	+ 'background_hover_transition',
	414	+ [
	415	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
	416	+ 'type' => Controls_Manager::SLIDER,
	417	+ 'default' => [
	418	+ 'size' => 0.3,
	419	+ ],
	420	+ 'range' => [
	421	+ 'px' => [
	422	+ 'max' => 3,
	423	+ 'step' => 0.1,
	424	+ ],
	425	+ ],
	426	+ 'selectors' => [
	427	+ '{{WRAPPER}} .elementor-image-box-img img' => 'transition-duration: {{SIZE}}s',
	428	+ ],
	429	+ ]
	430	+ );
	431	+
524	432	$this->end_controls_tab();
525	433
526		- $this->start_controls_tab(
527		- 'hover',
	434	+ $this->start_controls_tab( 'hover',
528	435	[
529	436	'label' => esc_html__( 'Hover', 'elementor' ),
530	437	]
531	438	);
		@@ -555,37 +462,8 @@
555	462	],
556	463	]
557	464	);
558	465
559		- $this->add_control(
560		- 'background_hover_transition',
561		- [
562		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
563		- 'type' => Controls_Manager::SLIDER,
564		- 'default' => [
565		- 'size' => 0.3,
566		- ],
567		- 'range' => [
568		- 'px' => [
569		- 'min' => 0,
570		- 'max' => 3,
571		- 'step' => 0.1,
572		- ],
573		- ],
574		- 'selectors' => [
575		- '{{WRAPPER}} .elementor-image-box-img img' => 'transition-duration: {{SIZE}}s',
576		- ],
577		- ]
578		- );
579		-
580		- $this->add_control(
581		- 'hover_animation',
582		- [
583		- 'label' => esc_html__( 'Hover Animation', 'elementor' ),
584		- 'type' => Controls_Manager::HOVER_ANIMATION,
585		- ]
586		- );
587		-
588	466	$this->end_controls_tab();
589	467
590	468	$this->end_controls_tabs();
591	469
		@@ -607,8 +485,40 @@
607	485	'separator' => 'before',
608	486	]
609	487	);
610	488
	489	+ $this->add_responsive_control(
	490	+ 'title_bottom_space',
	491	+ [
	492	+ 'label' => esc_html__( 'Spacing', 'elementor' ),
	493	+ 'type' => Controls_Manager::SLIDER,
	494	+ 'range' => [
	495	+ 'px' => [
	496	+ 'min' => 0,
	497	+ 'max' => 100,
	498	+ ],
	499	+ ],
	500	+ 'selectors' => [
	501	+ '{{WRAPPER}} .elementor-image-box-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
	502	+ ],
	503	+ ]
	504	+ );
	505	+
	506	+ $this->add_control(
	507	+ 'title_color',
	508	+ [
	509	+ 'label' => esc_html__( 'Color', 'elementor' ),
	510	+ 'type' => Controls_Manager::COLOR,
	511	+ 'default' => '',
	512	+ 'selectors' => [
	513	+ '{{WRAPPER}} .elementor-image-box-title' => 'color: {{VALUE}};',
	514	+ ],
	515	+ 'global' => [
	516	+ 'default' => Global_Colors::COLOR_PRIMARY,
	517	+ ],
	518	+ ]
	519	+ );
	520	+
611	521	$this->add_group_control(
612	522	Group_Control_Typography::get_type(),
613	523	[
614	524	'name' => 'title_typography',
		@@ -634,85 +544,32 @@
634	544	'selector' => '{{WRAPPER}} .elementor-image-box-title',
635	545	]
636	546	);
637	547
638		- $this->start_controls_tabs( 'image_box_title_colors' );
639		-
640		- $this->start_controls_tab(
641		- 'image_box_title_colors_normal',
642		- [
643		- 'label' => esc_html__( 'Normal', 'elementor' ),
644		- ]
645		- );
646		-
647	548	$this->add_control(
648		- 'title_color',
	549	+ 'heading_description',
649	550	[
650		- 'label' => esc_html__( 'Color', 'elementor' ),
651		- 'type' => Controls_Manager::COLOR,
652		- 'default' => '',
653		- 'selectors' => [
654		- '{{WRAPPER}} .elementor-image-box-title' => 'color: {{VALUE}};',
655		- ],
656		- 'global' => [
657		- 'default' => Global_Colors::COLOR_PRIMARY,
658		- ],
	551	+ 'label' => esc_html__( 'Description', 'elementor' ),
	552	+ 'type' => Controls_Manager::HEADING,
	553	+ 'separator' => 'before',
659	554	]
660	555	);
661	556
662		- $this->end_controls_tab();
663		-
664		- $this->start_controls_tab(
665		- 'image_box_title_colors_hover',
666		- [
667		- 'label' => esc_html__( 'Hover', 'elementor' ),
668		- ]
669		- );
670		-
671	557	$this->add_control(
672		- 'hover_title_color',
	558	+ 'description_color',
673	559	[
674	560	'label' => esc_html__( 'Color', 'elementor' ),
675	561	'type' => Controls_Manager::COLOR,
676	562	'default' => '',
677	563	'selectors' => [
678		- '{{WRAPPER}}:has(:hover) .elementor-image-box-title,
679		- {{WRAPPER}}:has(:focus) .elementor-image-box-title' => 'color: {{VALUE}};',
	564	+ '{{WRAPPER}} .elementor-image-box-description' => 'color: {{VALUE}};',
680	565	],
681	566	'global' => [
682		- 'default' => Global_Colors::COLOR_PRIMARY,
	567	+ 'default' => Global_Colors::COLOR_TEXT,
683	568	],
684	569	]
685	570	);
686	571
687		- $this->add_control(
688		- 'hover_title_color_transition_duration',
689		- [
690		- 'label' => esc_html__( 'Transition Duration', 'elementor' ),
691		- 'type' => Controls_Manager::SLIDER,
692		- 'size_units' => [ 's', 'ms', 'custom' ],
693		- 'default' => [
694		- 'unit' => 's',
695		- ],
696		- 'selectors' => [
697		- '{{WRAPPER}} .elementor-image-box-title' => 'transition-duration: {{SIZE}}{{UNIT}};',
698		- ],
699		- ]
700		- );
701		-
702		- $this->end_controls_tab();
703		-
704		- $this->end_controls_tabs();
705		-
706		- $this->add_control(
707		- 'heading_description',
708		- [
709		- 'label' => esc_html__( 'Description', 'elementor' ),
710		- 'type' => Controls_Manager::HEADING,
711		- 'separator' => 'before',
712		- ]
713		- );
714		-
715	572	$this->add_group_control(
716	573	Group_Control_Typography::get_type(),
717	574	[
718	575	'name' => 'description_typography',
		@@ -730,23 +587,8 @@
730	587	'selector' => '{{WRAPPER}} .elementor-image-box-description',
731	588	]
732	589	);
733	590
734		- $this->add_control(
735		- 'description_color',
736		- [
737		- 'label' => esc_html__( 'Color', 'elementor' ),
738		- 'type' => Controls_Manager::COLOR,
739		- 'default' => '',
740		- 'selectors' => [
741		- '{{WRAPPER}} .elementor-image-box-description' => 'color: {{VALUE}};',
742		- ],
743		- 'global' => [
744		- 'default' => Global_Colors::COLOR_TEXT,
745		- ],
746		- ]
747		- );
748		-
749	591	$this->end_controls_section();
750	592	}
751	593
752	594	/**
		@@ -759,18 +601,10 @@
759	601	*/
760	602	protected function render() {
761	603	$settings = $this->get_settings_for_display();
762	604
763		- $description_text = wp_kses_post( $settings['description_text'] );
764		- $title_text = wp_kses_post( $settings['title_text'] );
	605	+ $has_content = ! Utils::is_empty( $settings['title_text'] ) || ! Utils::is_empty( $settings['description_text'] );
765	606
766		- $has_image = ! empty( $settings['image']['url'] );
767		- $has_content = ! Utils::is_empty( $title_text ) || ! Utils::is_empty( $description_text );
768		-
769		- if ( ! $has_image && ! $has_content ) {
770		- return;
771		- }
772		-
773	607	$html = '<div class="elementor-image-box-wrapper">';
774	608
775	609	if ( ! empty( $settings['link']['url'] ) ) {
776	610	$this->add_link_attributes( 'link', $settings['link'] );
		@@ -775,9 +609,9 @@
775	609	if ( ! empty( $settings['link']['url'] ) ) {
776	610	$this->add_link_attributes( 'link', $settings['link'] );
777	611	}
778	612
779		- if ( $has_image ) {
	613	+ if ( ! empty( $settings['image']['url'] ) ) {
780	614
781	615	$image_html = wp_kses_post( Group_Control_Image_Size::get_attachment_image_html( $settings, 'thumbnail', 'image' ) );
782	616
783	617	if ( ! empty( $settings['link']['url'] ) ) {
		@@ -789,27 +623,28 @@
789	623
790	624	if ( $has_content ) {
791	625	$html .= '<div class="elementor-image-box-content">';
792	626
793		- if ( ! Utils::is_empty( $title_text ) ) {
794		- $title_html = $title_text;
	627	+ if ( ! Utils::is_empty( $settings['title_text'] ) ) {
795	628	$this->add_render_attribute( 'title_text', 'class', 'elementor-image-box-title' );
796	629
797	630	$this->add_inline_editing_attributes( 'title_text', 'none' );
798	631
	632	+ $title_html = $settings['title_text'];
	633	+
799	634	if ( ! empty( $settings['link']['url'] ) ) {
800		- $title_html = '<a ' . $this->get_render_attribute_string( 'link' ) . '>' . $title_text . '</a>';
	635	+ $title_html = '<a ' . $this->get_render_attribute_string( 'link' ) . '>' . $title_html . '</a>';
801	636	}
802	637
803	638	$html .= sprintf( '<%1$s %2$s>%3$s</%1$s>', Utils::validate_html_tag( $settings['title_size'] ), $this->get_render_attribute_string( 'title_text' ), $title_html );
804	639	}
805	640
806		- if ( ! Utils::is_empty( $description_text ) ) {
	641	+ if ( ! Utils::is_empty( $settings['description_text'] ) ) {
807	642	$this->add_render_attribute( 'description_text', 'class', 'elementor-image-box-description' );
808	643
809	644	$this->add_inline_editing_attributes( 'description_text' );
810	645
811		- $html .= sprintf( '<p %1$s>%2$s</p>', $this->get_render_attribute_string( 'description_text' ), $description_text );
	646	+ $html .= sprintf( '<p %1$s>%2$s</p>', $this->get_render_attribute_string( 'description_text' ), $settings['description_text'] );
812	647	}
813	648
814	649	$html .= '</div>';
815	650	}
		@@ -829,21 +664,11 @@
829	664	*/
830	665	protected function content_template() {
831	666	?>
832	667	<#
833		- const titleText = elementor.helpers.sanitize( settings.title_text, { ALLOW_DATA_ATTR: false } )
834		- const descriptionText = elementor.helpers.sanitize( settings.description_text, { ALLOW_DATA_ATTR: false } )
835		-
836		- var hasImage = !! settings.image.url;
837		- var hasContent = !! ( titleText || descriptionText );
838		-
839		- if ( ! hasImage && ! hasContent ) {
840		- return;
841		- }
842		-
843	668	var html = '<div class="elementor-image-box-wrapper">';
844	669
845		- if ( hasImage ) {
	670	+ if ( settings.image.url ) {
846	671	var image = {
847	672	id: settings.image.id,
848	673	url: settings.image.url,
849	674	size: settings.thumbnail_size,
		@@ -852,25 +677,28 @@
852	677	};
853	678
854	679	var image_url = elementor.imagesManager.getImageUrl( image );
855	680
856		- var imageHtml = '<img src="' + _.escape( image_url ) + '" class="elementor-animation-' + _.escape( settings.hover_animation ) + '" />';
	681	+ var imageHtml = '<img src="' + image_url + '" class="elementor-animation-' + settings.hover_animation + '" />';
857	682
858		- if ( settings.link?.url ) {
859		- imageHtml = '<a href="' + elementor.helpers.sanitizeUrl( settings.link?.url ) + '" tabindex="-1">' + imageHtml + '</a>';
	683	+ if ( settings.link.url ) {
	684	+ imageHtml = '<a href="' + settings.link.url + '" tabindex="-1">' + imageHtml + '</a>';
860	685	}
861	686
862	687	html += '<figure class="elementor-image-box-img">' + imageHtml + '</figure>';
863	688	}
864	689
	690	+ var hasContent = !! ( settings.title_text || settings.description_text );
	691	+
865	692	if ( hasContent ) {
866	693	html += '<div class="elementor-image-box-content">';
867	694
868		- if ( titleText ) {
869		- var titleSizeTag = elementor.helpers.validateHTMLTag( settings.title_size );
	695	+ if ( settings.title_text ) {
	696	+ var title_html = settings.title_text,
	697	+ titleSizeTag = elementor.helpers.validateHTMLTag( settings.title_size );
870	698
871		- if ( settings.link?.url ) {
872		- title_html = '<a href="' + elementor.helpers.sanitizeUrl( settings.link?.url ) + '">' + titleText + '</a>';
	699	+ if ( settings.link.url ) {
	700	+ title_html = '<a href="' + settings.link.url + '">' + title_html + '</a>';
873	701	}
874	702
875	703	view.addRenderAttribute( 'title_text', 'class', 'elementor-image-box-title' );
876	704
		@@ -875,17 +703,17 @@
875	703	view.addRenderAttribute( 'title_text', 'class', 'elementor-image-box-title' );
876	704
877	705	view.addInlineEditingAttributes( 'title_text', 'none' );
878	706
879		- html += '<' + titleSizeTag + ' ' + view.getRenderAttributeString( 'title_text' ) + '>' + titleText + '</' + titleSizeTag + '>';
	707	+ html += '<' + titleSizeTag + ' ' + view.getRenderAttributeString( 'title_text' ) + '>' + title_html + '</' + titleSizeTag + '>';
880	708	}
881	709
882		- if ( descriptionText ) {
	710	+ if ( settings.description_text ) {
883	711	view.addRenderAttribute( 'description_text', 'class', 'elementor-image-box-description' );
884	712
885	713	view.addInlineEditingAttributes( 'description_text' );
886	714
887		- html += '<p ' + view.getRenderAttributeString( 'description_text' ) + '>' + descriptionText + '</p>';
	715	+ html += '<p ' + view.getRenderAttributeString( 'description_text' ) + '>' + settings.description_text + '</p>';
888	716	}
889	717
890	718	html += '</div>';
891	719	}