elementor / includes / widgets / image-box.php

image-box.php in Elementor Website Builder – more than just a page builder 4.2.0-dev2, at includes/widgets/image-box.php

925 lines 22.4 KB

Raw Download Zip

1	<?php
2	namespace Elementor;
3
4	if ( ! defined( 'ABSPATH' ) ) {
5	exit; // Exit if accessed directly.
6	}
7
8	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
9	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
10
11	/**
12	* Elementor image box widget.
13	*
14	* Elementor widget that displays an image, a headline and a text.
15	*
16	* @since 1.0.0
17	*/
18	class Widget_Image_Box extends Widget_Base {
19
20	/**
21	* Get widget name.
22	*
23	* Retrieve image box widget name.
24	*
25	* @since 1.0.0
26	* @access public
27	*
28	* @return string Widget name.
29	*/
30	public function get_name() {
31	return 'image-box';
32	}
33
34	/**
35	* Get widget title.
36	*
37	* Retrieve image box widget title.
38	*
39	* @since 1.0.0
40	* @access public
41	*
42	* @return string Widget title.
43	*/
44	public function get_title() {
45	return esc_html__( 'Image Box', 'elementor' );
46	}
47
48	/**
49	* Get widget icon.
50	*
51	* Retrieve image box widget icon.
52	*
53	* @since 1.0.0
54	* @access public
55	*
56	* @return string Widget icon.
57	*/
58	public function get_icon() {
59	return 'eicon-image-box';
60	}
61
62	/**
63	* Get widget keywords.
64	*
65	* Retrieve the list of keywords the widget belongs to.
66	*
67	* @since 2.1.0
68	* @access public
69	*
70	* @return array Widget keywords.
71	*/
72	public function get_keywords() {
73	return [ 'image', 'photo', 'visual', 'box' ];
74	}
75
76	protected function is_dynamic_content(): bool {
77	return false;
78	}
79
80	/**
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	* Register image box widget controls.
100	*
101	* Adds different input fields to allow the user to change and customize the widget settings.
102	*
103	* @since 3.1.0
104	* @access protected
105	*/
106	protected function register_controls() {
107	$this->start_controls_section(
108	'section_image',
109	[
110	'label' => esc_html__( 'Image Box', 'elementor' ),
111	]
112	);
113
114	$this->add_control(
115	'image',
116	[
117	'label' => esc_html__( 'Choose Image', 'elementor' ),
118	'type' => Controls_Manager::MEDIA,
119	'dynamic' => [
120	'active' => true,
121	],
122	'default' => [
123	'url' => Utils::get_placeholder_image_src(),
124	],
125	]
126	);
127
128	$this->add_group_control(
129	Group_Control_Image_Size::get_type(),
130	[
131	'name' => 'thumbnail', // Usage: `{name}_size` and `{name}_custom_dimension`, in this case `thumbnail_size` and `thumbnail_custom_dimension`.
132	'default' => 'full',
133	'condition' => [
134	'image[url]!' => '',
135	],
136	]
137	);
138
139	$this->add_control(
140	'title_text',
141	[
142	'label' => esc_html__( 'Title', 'elementor' ),
143	'type' => Controls_Manager::TEXT,
144	'dynamic' => [
145	'active' => true,
146	],
147	'default' => esc_html__( 'This is the heading', 'elementor' ),
148	'placeholder' => esc_html__( 'Enter your title', 'elementor' ),
149	'label_block' => true,
150	]
151	);
152
153	$this->add_control(
154	'description_text',
155	[
156	'label' => esc_html__( 'Description', 'elementor' ),
157	'type' => Controls_Manager::TEXTAREA,
158	'dynamic' => [
159	'active' => true,
160	],
161	'default' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
162	'placeholder' => esc_html__( 'Enter your description', 'elementor' ),
163	'rows' => 10,
164	]
165	);
166
167	$this->add_control(
168	'link',
169	[
170	'label' => esc_html__( 'Link', 'elementor' ),
171	'type' => Controls_Manager::URL,
172	'dynamic' => [
173	'active' => true,
174	],
175	'separator' => 'before',
176	]
177	);
178
179	$this->add_control(
180	'title_size',
181	[
182	'label' => esc_html__( 'Title HTML Tag', 'elementor' ),
183	'type' => Controls_Manager::SELECT,
184	'options' => [
185	'h1' => 'H1',
186	'h2' => 'H2',
187	'h3' => 'H3',
188	'h4' => 'H4',
189	'h5' => 'H5',
190	'h6' => 'H6',
191	'div' => 'div',
192	'span' => 'span',
193	'p' => 'p',
194	],
195	'default' => 'h3',
196	]
197	);
198
199	$this->end_controls_section();
200
201	$this->start_controls_section(
202	'section_style_box',
203	[
204	'label' => esc_html__( 'Box', 'elementor' ),
205	'tab' => Controls_Manager::TAB_STYLE,
206	]
207	);
208
209	$this->add_responsive_control(
210	'position',
211	[
212	'label' => esc_html__( 'Image Position', 'elementor' ),
213	'type' => Controls_Manager::CHOOSE,
214	'default' => 'top',
215	'options' => [
216	'left' => [
217	'title' => esc_html__( 'Left', 'elementor' ),
218	'icon' => 'eicon-h-align-left',
219	],
220	'top' => [
221	'title' => esc_html__( 'Top', 'elementor' ),
222	'icon' => 'eicon-v-align-top',
223	],
224	'right' => [
225	'title' => esc_html__( 'Right', 'elementor' ),
226	'icon' => 'eicon-h-align-right',
227	],
228	],
229	'prefix_class' => 'elementor-position-',
230	'toggle' => false,
231	'condition' => [
232	'image[url]!' => '',
233	],
234	]
235	);
236
237	$this->add_responsive_control(
238	'content_vertical_alignment',
239	[
240	'label' => esc_html__( 'Vertical Alignment', 'elementor' ),
241	'type' => Controls_Manager::CHOOSE,
242	'options' => [
243	'top' => [
244	'title' => esc_html__( 'Top', 'elementor' ),
245	'icon' => 'eicon-v-align-top',
246	],
247	'middle' => [
248	'title' => esc_html__( 'Middle', 'elementor' ),
249	'icon' => 'eicon-v-align-middle',
250	],
251	'bottom' => [
252	'title' => esc_html__( 'Bottom', 'elementor' ),
253	'icon' => 'eicon-v-align-bottom',
254	],
255	],
256	'default' => 'top',
257	'toggle' => false,
258	'prefix_class' => 'elementor-vertical-align-',
259	'condition' => [
260	'position!' => 'top',
261	],
262	]
263	);
264
265	$this->add_responsive_control(
266	'text_align',
267	[
268	'label' => esc_html__( 'Alignment', 'elementor' ),
269	'type' => Controls_Manager::CHOOSE,
270	'options' => [
271	'start' => [
272	'title' => esc_html__( 'Start', 'elementor' ),
273	'icon' => 'eicon-text-align-left',
274	],
275	'center' => [
276	'title' => esc_html__( 'Center', 'elementor' ),
277	'icon' => 'eicon-text-align-center',
278	],
279	'end' => [
280	'title' => esc_html__( 'End', 'elementor' ),
281	'icon' => 'eicon-text-align-right',
282	],
283	'justify' => [
284	'title' => esc_html__( 'Justified', 'elementor' ),
285	'icon' => 'eicon-text-align-justify',
286	],
287	],
288	'classes' => 'elementor-control-start-end',
289	'selectors_dictionary' => [
290	'left' => is_rtl() ? 'end' : 'start',
291	'right' => is_rtl() ? 'start' : 'end',
292	],
293	'selectors' => [
294	'{{WRAPPER}} .elementor-image-box-wrapper' => 'text-align: {{VALUE}};',
295	],
296	'separator' => 'after',
297	]
298	);
299
300	$this->add_responsive_control(
301	'image_space',
302	[
303	'label' => esc_html__( 'Image Spacing', 'elementor' ),
304	'type' => Controls_Manager::SLIDER,
305	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
306	'default' => [
307	'size' => 15,
308	],
309	'range' => [
310	'px' => [
311	'max' => 100,
312	],
313	],
314	'selectors' => [
315	'{{WRAPPER}}.elementor-position-right .elementor-image-box-img' => 'margin-left: {{SIZE}}{{UNIT}};',
316	'{{WRAPPER}}.elementor-position-left .elementor-image-box-img' => 'margin-right: {{SIZE}}{{UNIT}};',
317	'{{WRAPPER}}.elementor-position-top .elementor-image-box-img' => 'margin-bottom: {{SIZE}}{{UNIT}};',
318	'(mobile){{WRAPPER}} .elementor-image-box-img' => 'margin-bottom: {{SIZE}}{{UNIT}};',
319	],
320	'condition' => [
321	'image[url]!' => '',
322	],
323	]
324	);
325
326	$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	'image_size',
366	[
367	'label' => esc_html__( 'Width', 'elementor' ),
368	'type' => Controls_Manager::SLIDER,
369	'default' => [
370	'size' => 30,
371	'unit' => '%',
372	],
373	'tablet_default' => [
374	'unit' => '%',
375	],
376	'mobile_default' => [
377	'unit' => '%',
378	],
379	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
380	'range' => [
381	'%' => [
382	'min' => 5,
383	'max' => 100,
384	],
385	],
386	'selectors' => [
387	'{{WRAPPER}} .elementor-image-box-wrapper .elementor-image-box-img' => 'width: {{SIZE}}{{UNIT}};',
388	],
389	]
390	);
391
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	$this->add_group_control(
453	Group_Control_Border::get_type(),
454	[
455	'name' => 'image_border',
456	'selector' => '{{WRAPPER}} .elementor-image-box-img img',
457	'separator' => 'before',
458	]
459	);
460
461	$this->add_responsive_control(
462	'image_border_radius',
463	[
464	'label' => esc_html__( 'Border Radius', 'elementor' ),
465	'type' => Controls_Manager::SLIDER,
466	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
467	'selectors' => [
468	'{{WRAPPER}} .elementor-image-box-img img' => 'border-radius: {{SIZE}}{{UNIT}};',
469	],
470	]
471	);
472
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	$this->add_control(
482	'separator_panel_style',
483	[
484	'type' => Controls_Manager::DIVIDER,
485	'style' => 'thick',
486	]
487	);
488
489	$this->start_controls_tabs( 'image_effects' );
490
491	$this->start_controls_tab(
492	'normal',
493	[
494	'label' => esc_html__( 'Normal', 'elementor' ),
495	]
496	);
497
498	$this->add_group_control(
499	Group_Control_Css_Filter::get_type(),
500	[
501	'name' => 'css_filters',
502	'selector' => '{{WRAPPER}} .elementor-image-box-img img',
503	]
504	);
505
506	$this->add_control(
507	'image_opacity',
508	[
509	'label' => esc_html__( 'Opacity', 'elementor' ),
510	'type' => Controls_Manager::SLIDER,
511	'range' => [
512	'px' => [
513	'max' => 1,
514	'min' => 0.10,
515	'step' => 0.01,
516	],
517	],
518	'selectors' => [
519	'{{WRAPPER}} .elementor-image-box-img img' => 'opacity: {{SIZE}};',
520	],
521	]
522	);
523
524	$this->end_controls_tab();
525
526	$this->start_controls_tab(
527	'hover',
528	[
529	'label' => esc_html__( 'Hover', 'elementor' ),
530	]
531	);
532
533	$this->add_group_control(
534	Group_Control_Css_Filter::get_type(),
535	[
536	'name' => 'css_filters_hover',
537	'selector' => '{{WRAPPER}}:hover .elementor-image-box-img img',
538	]
539	);
540
541	$this->add_control(
542	'image_opacity_hover',
543	[
544	'label' => esc_html__( 'Opacity', 'elementor' ),
545	'type' => Controls_Manager::SLIDER,
546	'range' => [
547	'px' => [
548	'max' => 1,
549	'min' => 0.10,
550	'step' => 0.01,
551	],
552	],
553	'selectors' => [
554	'{{WRAPPER}}:hover .elementor-image-box-img img' => 'opacity: {{SIZE}};',
555	],
556	]
557	);
558
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	$this->end_controls_tab();
589
590	$this->end_controls_tabs();
591
592	$this->end_controls_section();
593
594	$this->start_controls_section(
595	'section_style_content',
596	[
597	'label' => esc_html__( 'Content', 'elementor' ),
598	'tab' => Controls_Manager::TAB_STYLE,
599	]
600	);
601
602	$this->add_control(
603	'heading_title',
604	[
605	'label' => esc_html__( 'Title', 'elementor' ),
606	'type' => Controls_Manager::HEADING,
607	'separator' => 'before',
608	]
609	);
610
611	$this->add_group_control(
612	Group_Control_Typography::get_type(),
613	[
614	'name' => 'title_typography',
615	'selector' => '{{WRAPPER}} .elementor-image-box-title',
616	'global' => [
617	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
618	],
619	]
620	);
621
622	$this->add_group_control(
623	Group_Control_Text_Stroke::get_type(),
624	[
625	'name' => 'title_stroke',
626	'selector' => '{{WRAPPER}} .elementor-image-box-title',
627	]
628	);
629
630	$this->add_group_control(
631	Group_Control_Text_Shadow::get_type(),
632	[
633	'name' => 'title_shadow',
634	'selector' => '{{WRAPPER}} .elementor-image-box-title',
635	]
636	);
637
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	$this->add_control(
648	'title_color',
649	[
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	],
659	]
660	);
661
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	$this->add_control(
672	'hover_title_color',
673	[
674	'label' => esc_html__( 'Color', 'elementor' ),
675	'type' => Controls_Manager::COLOR,
676	'default' => '',
677	'selectors' => [
678	'{{WRAPPER}}:has(:hover) .elementor-image-box-title,
679	{{WRAPPER}}:has(:focus) .elementor-image-box-title' => 'color: {{VALUE}};',
680	],
681	'global' => [
682	'default' => Global_Colors::COLOR_PRIMARY,
683	],
684	]
685	);
686
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	$this->add_group_control(
716	Group_Control_Typography::get_type(),
717	[
718	'name' => 'description_typography',
719	'selector' => '{{WRAPPER}} .elementor-image-box-description',
720	'global' => [
721	'default' => Global_Typography::TYPOGRAPHY_TEXT,
722	],
723	]
724	);
725
726	$this->add_group_control(
727	Group_Control_Text_Shadow::get_type(),
728	[
729	'name' => 'description_shadow',
730	'selector' => '{{WRAPPER}} .elementor-image-box-description',
731	]
732	);
733
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	$this->end_controls_section();
750	}
751
752	/**
753	* Render image box widget output on the frontend.
754	*
755	* Written in PHP and used to generate the final HTML.
756	*
757	* @since 1.0.0
758	* @access protected
759	*/
760	protected function render() {
761	$settings = $this->get_settings_for_display();
762
763	$description_text = wp_kses_post( $settings['description_text'] );
764	$title_text = wp_kses_post( $settings['title_text'] );
765
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	$html = '<div class="elementor-image-box-wrapper">';
774
775	if ( ! empty( $settings['link']['url'] ) ) {
776	$this->add_link_attributes( 'link', $settings['link'] );
777	}
778
779	if ( $has_image ) {
780
781	$image_html = wp_kses_post( Group_Control_Image_Size::get_attachment_image_html( $settings, 'thumbnail', 'image' ) );
782
783	if ( ! empty( $settings['link']['url'] ) ) {
784	$image_html = '<a ' . $this->get_render_attribute_string( 'link' ) . ' tabindex="-1">' . $image_html . '</a>';
785	}
786
787	$html .= '<figure class="elementor-image-box-img">' . $image_html . '</figure>';
788	}
789
790	if ( $has_content ) {
791	$html .= '<div class="elementor-image-box-content">';
792
793	if ( ! Utils::is_empty( $title_text ) ) {
794	$title_html = $title_text;
795	$this->add_render_attribute( 'title_text', 'class', 'elementor-image-box-title' );
796
797	$this->add_inline_editing_attributes( 'title_text', 'none' );
798
799	if ( ! empty( $settings['link']['url'] ) ) {
800	$title_html = '<a ' . $this->get_render_attribute_string( 'link' ) . '>' . $title_text . '</a>';
801	}
802
803	$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	}
805
806	if ( ! Utils::is_empty( $description_text ) ) {
807	$this->add_render_attribute( 'description_text', 'class', 'elementor-image-box-description' );
808
809	$this->add_inline_editing_attributes( 'description_text' );
810
811	$html .= sprintf( '<p %1$s>%2$s</p>', $this->get_render_attribute_string( 'description_text' ), $description_text );
812	}
813
814	$html .= '</div>';
815	}
816
817	$html .= '</div>';
818
819	Utils::print_unescaped_internal_string( $html );
820	}
821
822	/**
823	* Render image box widget output in the editor.
824	*
825	* Written as a Backbone JavaScript template and used to generate the live preview.
826	*
827	* @since 2.9.0
828	* @access protected
829	*/
830	protected function content_template() {
831	?>
832	<#
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	var html = '<div class="elementor-image-box-wrapper">';
844
845	if ( hasImage ) {
846	var image = {
847	id: settings.image.id,
848	url: settings.image.url,
849	size: settings.thumbnail_size,
850	dimension: settings.thumbnail_custom_dimension,
851	model: view.getEditModel()
852	};
853
854	var image_url = elementor.imagesManager.getImageUrl( image );
855
856	var imageHtml = '<img src="' + _.escape( image_url ) + '" class="elementor-animation-' + _.escape( settings.hover_animation ) + '" />';
857
858	if ( settings.link?.url ) {
859	imageHtml = '<a href="' + elementor.helpers.sanitizeUrl( settings.link?.url ) + '" tabindex="-1">' + imageHtml + '</a>';
860	}
861
862	html += '<figure class="elementor-image-box-img">' + imageHtml + '</figure>';
863	}
864
865	if ( hasContent ) {
866	html += '<div class="elementor-image-box-content">';
867
868	if ( titleText ) {
869	var titleSizeTag = elementor.helpers.validateHTMLTag( settings.title_size );
870
871	if ( settings.link?.url ) {
872	title_html = '<a href="' + elementor.helpers.sanitizeUrl( settings.link?.url ) + '">' + titleText + '</a>';
873	}
874
875	view.addRenderAttribute( 'title_text', 'class', 'elementor-image-box-title' );
876
877	view.addInlineEditingAttributes( 'title_text', 'none' );
878
879	html += '<' + titleSizeTag + ' ' + view.getRenderAttributeString( 'title_text' ) + '>' + titleText + '</' + titleSizeTag + '>';
880	}
881
882	if ( descriptionText ) {
883	view.addRenderAttribute( 'description_text', 'class', 'elementor-image-box-description' );
884
885	view.addInlineEditingAttributes( 'description_text' );
886
887	html += '<p ' + view.getRenderAttributeString( 'description_text' ) + '>' + descriptionText + '</p>';
888	}
889
890	html += '</div>';
891	}
892
893	html += '</div>';
894
895	print( html );
896	#>
897	<?php
898	}
899
900	public function render_markdown(): string {
901	$settings = $this->get_settings_for_display();
902	$title = Utils::html_to_plain_text( $settings['title_text'] ?? '' );
903	$description = Utils::html_to_plain_text( $settings['description_text'] ?? '' );
904	$image_url = $settings['image']['url'] ?? '';
905	if ( empty( $title ) && empty( $description ) && empty( $image_url ) ) {
906	return '';
907	}
908	$parts = [];
909	if ( ! empty( $image_url ) ) {
910	$parts[] = '![' . $title . '](' . esc_url( $image_url ) . ')';
911	}
912	if ( ! empty( $title ) ) {
913	if ( ! empty( $settings['link']['url'] ) ) {
914	$parts[] = '### [' . $title . '](' . esc_url( $settings['link']['url'] ) . ')';
915	} else {
916	$parts[] = '### ' . $title;
917	}
918	}
919	if ( ! empty( $description ) ) {
920	$parts[] = $description;
921	}
922	return implode( "\n\n", $parts );
923	}
924	}
925