elementor / includes / widgets / image-box.php

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

816 lines 19.0 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	'left' => [
272	'title' => esc_html__( 'Left', 'elementor' ),
273	'icon' => 'eicon-text-align-left',
274	],
275	'center' => [
276	'title' => esc_html__( 'Center', 'elementor' ),
277	'icon' => 'eicon-text-align-center',
278	],
279	'right' => [
280	'title' => esc_html__( 'Right', '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	'selectors' => [
289	'{{WRAPPER}} .elementor-image-box-wrapper' => 'text-align: {{VALUE}};',
290	],
291	'separator' => 'after',
292	]
293	);
294
295	$this->add_responsive_control(
296	'image_space',
297	[
298	'label' => esc_html__( 'Image Spacing', 'elementor' ),
299	'type' => Controls_Manager::SLIDER,
300	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
301	'default' => [
302	'size' => 15,
303	],
304	'range' => [
305	'px' => [
306	'max' => 100,
307	],
308	],
309	'selectors' => [
310	'{{WRAPPER}}.elementor-position-right .elementor-image-box-img' => 'margin-left: {{SIZE}}{{UNIT}};',
311	'{{WRAPPER}}.elementor-position-left .elementor-image-box-img' => 'margin-right: {{SIZE}}{{UNIT}};',
312	'{{WRAPPER}}.elementor-position-top .elementor-image-box-img' => 'margin-bottom: {{SIZE}}{{UNIT}};',
313	'(mobile){{WRAPPER}} .elementor-image-box-img' => 'margin-bottom: {{SIZE}}{{UNIT}};',
314	],
315	'condition' => [
316	'image[url]!' => '',
317	],
318	]
319	);
320
321	$this->add_responsive_control(
322	'title_bottom_space',
323	[
324	'label' => esc_html__( 'Content Spacing', 'elementor' ),
325	'type' => Controls_Manager::SLIDER,
326	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
327	'range' => [
328	'px' => [
329	'max' => 100,
330	],
331	'em' => [
332	'min' => 0,
333	'max' => 10,
334	],
335	'rem' => [
336	'min' => 0,
337	'max' => 10,
338	],
339	],
340	'selectors' => [
341	'{{WRAPPER}} .elementor-image-box-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
342	],
343	]
344	);
345
346	$this->end_controls_section();
347
348	$this->start_controls_section(
349	'section_style_image',
350	[
351	'label' => esc_html__( 'Image', 'elementor' ),
352	'tab' => Controls_Manager::TAB_STYLE,
353	'condition' => [
354	'image[url]!' => '',
355	],
356	]
357	);
358
359	$this->add_responsive_control(
360	'image_size',
361	[
362	'label' => esc_html__( 'Width', 'elementor' ),
363	'type' => Controls_Manager::SLIDER,
364	'default' => [
365	'size' => 30,
366	'unit' => '%',
367	],
368	'tablet_default' => [
369	'unit' => '%',
370	],
371	'mobile_default' => [
372	'unit' => '%',
373	],
374	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
375	'range' => [
376	'%' => [
377	'min' => 5,
378	'max' => 100,
379	],
380	],
381	'selectors' => [
382	'{{WRAPPER}} .elementor-image-box-wrapper .elementor-image-box-img' => 'width: {{SIZE}}{{UNIT}};',
383	],
384	]
385	);
386
387	$this->add_group_control(
388	Group_Control_Border::get_type(),
389	[
390	'name' => 'image_border',
391	'selector' => '{{WRAPPER}} .elementor-image-box-img img',
392	'separator' => 'before',
393	]
394	);
395
396	$this->add_responsive_control(
397	'image_border_radius',
398	[
399	'label' => esc_html__( 'Border Radius', 'elementor' ),
400	'type' => Controls_Manager::SLIDER,
401	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
402	'separator' => 'after',
403	'selectors' => [
404	'{{WRAPPER}} .elementor-image-box-img img' => 'border-radius: {{SIZE}}{{UNIT}};',
405	],
406	]
407	);
408
409	$this->start_controls_tabs( 'image_effects' );
410
411	$this->start_controls_tab(
412	'normal',
413	[
414	'label' => esc_html__( 'Normal', 'elementor' ),
415	]
416	);
417
418	$this->add_group_control(
419	Group_Control_Css_Filter::get_type(),
420	[
421	'name' => 'css_filters',
422	'selector' => '{{WRAPPER}} .elementor-image-box-img img',
423	]
424	);
425
426	$this->add_control(
427	'image_opacity',
428	[
429	'label' => esc_html__( 'Opacity', 'elementor' ),
430	'type' => Controls_Manager::SLIDER,
431	'range' => [
432	'px' => [
433	'max' => 1,
434	'min' => 0.10,
435	'step' => 0.01,
436	],
437	],
438	'selectors' => [
439	'{{WRAPPER}} .elementor-image-box-img img' => 'opacity: {{SIZE}};',
440	],
441	]
442	);
443
444	$this->end_controls_tab();
445
446	$this->start_controls_tab(
447	'hover',
448	[
449	'label' => esc_html__( 'Hover', 'elementor' ),
450	]
451	);
452
453	$this->add_group_control(
454	Group_Control_Css_Filter::get_type(),
455	[
456	'name' => 'css_filters_hover',
457	'selector' => '{{WRAPPER}}:hover .elementor-image-box-img img',
458	]
459	);
460
461	$this->add_control(
462	'image_opacity_hover',
463	[
464	'label' => esc_html__( 'Opacity', 'elementor' ),
465	'type' => Controls_Manager::SLIDER,
466	'range' => [
467	'px' => [
468	'max' => 1,
469	'min' => 0.10,
470	'step' => 0.01,
471	],
472	],
473	'selectors' => [
474	'{{WRAPPER}}:hover .elementor-image-box-img img' => 'opacity: {{SIZE}};',
475	],
476	]
477	);
478
479	$this->add_control(
480	'background_hover_transition',
481	[
482	'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
483	'type' => Controls_Manager::SLIDER,
484	'default' => [
485	'size' => 0.3,
486	],
487	'range' => [
488	'px' => [
489	'min' => 0,
490	'max' => 3,
491	'step' => 0.1,
492	],
493	],
494	'selectors' => [
495	'{{WRAPPER}} .elementor-image-box-img img' => 'transition-duration: {{SIZE}}s',
496	],
497	]
498	);
499
500	$this->add_control(
501	'hover_animation',
502	[
503	'label' => esc_html__( 'Hover Animation', 'elementor' ),
504	'type' => Controls_Manager::HOVER_ANIMATION,
505	]
506	);
507
508	$this->end_controls_tab();
509
510	$this->end_controls_tabs();
511
512	$this->end_controls_section();
513
514	$this->start_controls_section(
515	'section_style_content',
516	[
517	'label' => esc_html__( 'Content', 'elementor' ),
518	'tab' => Controls_Manager::TAB_STYLE,
519	]
520	);
521
522	$this->add_control(
523	'heading_title',
524	[
525	'label' => esc_html__( 'Title', 'elementor' ),
526	'type' => Controls_Manager::HEADING,
527	'separator' => 'before',
528	]
529	);
530
531	$this->add_group_control(
532	Group_Control_Typography::get_type(),
533	[
534	'name' => 'title_typography',
535	'selector' => '{{WRAPPER}} .elementor-image-box-title',
536	'global' => [
537	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
538	],
539	]
540	);
541
542	$this->add_group_control(
543	Group_Control_Text_Stroke::get_type(),
544	[
545	'name' => 'title_stroke',
546	'selector' => '{{WRAPPER}} .elementor-image-box-title',
547	]
548	);
549
550	$this->add_group_control(
551	Group_Control_Text_Shadow::get_type(),
552	[
553	'name' => 'title_shadow',
554	'selector' => '{{WRAPPER}} .elementor-image-box-title',
555	]
556	);
557
558	$this->start_controls_tabs( 'image_box_title_colors' );
559
560	$this->start_controls_tab(
561	'image_box_title_colors_normal',
562	[
563	'label' => esc_html__( 'Normal', 'elementor' ),
564	]
565	);
566
567	$this->add_control(
568	'title_color',
569	[
570	'label' => esc_html__( 'Color', 'elementor' ),
571	'type' => Controls_Manager::COLOR,
572	'default' => '',
573	'selectors' => [
574	'{{WRAPPER}} .elementor-image-box-title' => 'color: {{VALUE}};',
575	],
576	'global' => [
577	'default' => Global_Colors::COLOR_PRIMARY,
578	],
579	]
580	);
581
582	$this->end_controls_tab();
583
584	$this->start_controls_tab(
585	'image_box_title_colors_hover',
586	[
587	'label' => esc_html__( 'Hover', 'elementor' ),
588	]
589	);
590
591	$this->add_control(
592	'hover_title_color',
593	[
594	'label' => esc_html__( 'Color', 'elementor' ),
595	'type' => Controls_Manager::COLOR,
596	'default' => '',
597	'selectors' => [
598	'{{WRAPPER}}:has(:hover) .elementor-image-box-title,
599	{{WRAPPER}}:has(:focus) .elementor-image-box-title' => 'color: {{VALUE}};',
600	],
601	'global' => [
602	'default' => Global_Colors::COLOR_PRIMARY,
603	],
604	]
605	);
606
607	$this->add_control(
608	'hover_title_color_transition_duration',
609	[
610	'label' => esc_html__( 'Transition Duration', 'elementor' ),
611	'type' => Controls_Manager::SLIDER,
612	'size_units' => [ 's', 'ms', 'custom' ],
613	'default' => [
614	'unit' => 's',
615	],
616	'selectors' => [
617	'{{WRAPPER}} .elementor-image-box-title' => 'transition-duration: {{SIZE}}{{UNIT}};',
618	],
619	]
620	);
621
622	$this->end_controls_tab();
623
624	$this->end_controls_tabs();
625
626	$this->add_control(
627	'heading_description',
628	[
629	'label' => esc_html__( 'Description', 'elementor' ),
630	'type' => Controls_Manager::HEADING,
631	'separator' => 'before',
632	]
633	);
634
635	$this->add_group_control(
636	Group_Control_Typography::get_type(),
637	[
638	'name' => 'description_typography',
639	'selector' => '{{WRAPPER}} .elementor-image-box-description',
640	'global' => [
641	'default' => Global_Typography::TYPOGRAPHY_TEXT,
642	],
643	]
644	);
645
646	$this->add_group_control(
647	Group_Control_Text_Shadow::get_type(),
648	[
649	'name' => 'description_shadow',
650	'selector' => '{{WRAPPER}} .elementor-image-box-description',
651	]
652	);
653
654	$this->add_control(
655	'description_color',
656	[
657	'label' => esc_html__( 'Color', 'elementor' ),
658	'type' => Controls_Manager::COLOR,
659	'default' => '',
660	'selectors' => [
661	'{{WRAPPER}} .elementor-image-box-description' => 'color: {{VALUE}};',
662	],
663	'global' => [
664	'default' => Global_Colors::COLOR_TEXT,
665	],
666	]
667	);
668
669	$this->end_controls_section();
670	}
671
672	/**
673	* Render image box widget output on the frontend.
674	*
675	* Written in PHP and used to generate the final HTML.
676	*
677	* @since 1.0.0
678	* @access protected
679	*/
680	protected function render() {
681	$settings = $this->get_settings_for_display();
682
683	$has_image = ! empty( $settings['image']['url'] );
684	$has_content = ! Utils::is_empty( $settings['title_text'] ) \|\| ! Utils::is_empty( $settings['description_text'] );
685
686	if ( ! $has_image && ! $has_content ) {
687	return;
688	}
689
690	$html = '<div class="elementor-image-box-wrapper">';
691
692	if ( ! empty( $settings['link']['url'] ) ) {
693	$this->add_link_attributes( 'link', $settings['link'] );
694	}
695
696	if ( $has_image ) {
697
698	$image_html = wp_kses_post( Group_Control_Image_Size::get_attachment_image_html( $settings, 'thumbnail', 'image' ) );
699
700	if ( ! empty( $settings['link']['url'] ) ) {
701	$image_html = '<a ' . $this->get_render_attribute_string( 'link' ) . ' tabindex="-1">' . $image_html . '</a>';
702	}
703
704	$html .= '<figure class="elementor-image-box-img">' . $image_html . '</figure>';
705	}
706
707	if ( $has_content ) {
708	$html .= '<div class="elementor-image-box-content">';
709
710	if ( ! Utils::is_empty( $settings['title_text'] ) ) {
711	$this->add_render_attribute( 'title_text', 'class', 'elementor-image-box-title' );
712
713	$this->add_inline_editing_attributes( 'title_text', 'none' );
714
715	$title_html = $settings['title_text'];
716
717	if ( ! empty( $settings['link']['url'] ) ) {
718	$title_html = '<a ' . $this->get_render_attribute_string( 'link' ) . '>' . $title_html . '</a>';
719	}
720
721	$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 );
722	}
723
724	if ( ! Utils::is_empty( $settings['description_text'] ) ) {
725	$this->add_render_attribute( 'description_text', 'class', 'elementor-image-box-description' );
726
727	$this->add_inline_editing_attributes( 'description_text' );
728
729	$html .= sprintf( '<p %1$s>%2$s</p>', $this->get_render_attribute_string( 'description_text' ), $settings['description_text'] );
730	}
731
732	$html .= '</div>';
733	}
734
735	$html .= '</div>';
736
737	Utils::print_unescaped_internal_string( $html );
738	}
739
740	/**
741	* Render image box widget output in the editor.
742	*
743	* Written as a Backbone JavaScript template and used to generate the live preview.
744	*
745	* @since 2.9.0
746	* @access protected
747	*/
748	protected function content_template() {
749	?>
750	<#
751	var hasImage = !! settings.image.url;
752	var hasContent = !! ( settings.title_text \|\| settings.description_text );
753
754	if ( ! hasImage && ! hasContent ) {
755	return;
756	}
757
758	var html = '<div class="elementor-image-box-wrapper">';
759
760	if ( hasImage ) {
761	var image = {
762	id: settings.image.id,
763	url: settings.image.url,
764	size: settings.thumbnail_size,
765	dimension: settings.thumbnail_custom_dimension,
766	model: view.getEditModel()
767	};
768
769	var image_url = elementor.imagesManager.getImageUrl( image );
770
771	var imageHtml = '<img src="' + _.escape( image_url ) + '" class="elementor-animation-' + _.escape( settings.hover_animation ) + '" />';
772
773	if ( settings.link.url ) {
774	imageHtml = '<a href="' + elementor.helpers.sanitizeUrl( settings.link.url ) + '" tabindex="-1">' + imageHtml + '</a>';
775	}
776
777	html += '<figure class="elementor-image-box-img">' + imageHtml + '</figure>';
778	}
779
780	if ( hasContent ) {
781	html += '<div class="elementor-image-box-content">';
782
783	if ( settings.title_text ) {
784	var title_html = elementor.helpers.sanitize( settings.title_text ),
785	titleSizeTag = elementor.helpers.validateHTMLTag( settings.title_size );
786
787	if ( settings.link.url ) {
788	title_html = '<a href="' + elementor.helpers.sanitizeUrl( settings.link.url ) + '">' + title_html + '</a>';
789	}
790
791	view.addRenderAttribute( 'title_text', 'class', 'elementor-image-box-title' );
792
793	view.addInlineEditingAttributes( 'title_text', 'none' );
794
795	html += '<' + titleSizeTag + ' ' + view.getRenderAttributeString( 'title_text' ) + '>' + title_html + '</' + titleSizeTag + '>';
796	}
797
798	if ( settings.description_text ) {
799	view.addRenderAttribute( 'description_text', 'class', 'elementor-image-box-description' );
800
801	view.addInlineEditingAttributes( 'description_text' );
802
803	html += '<p ' + view.getRenderAttributeString( 'description_text' ) + '>' + settings.description_text + '</p>';
804	}
805
806	html += '</div>';
807	}
808
809	html += '</div>';
810
811	print( html );
812	#>
813	<?php
814	}
815	}
816