elementor / includes / widgets / testimonial.php

testimonial.php in Elementor Website Builder – more than just a page builder 3.17.1, at includes/widgets/testimonial.php

606 lines 15.7 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 testimonial widget.
13	*
14	* Elementor widget that displays customer testimonials that show social proof.
15	*
16	* @since 1.0.0
17	*/
18	class Widget_Testimonial extends Widget_Base {
19
20	/**
21	* Get widget name.
22	*
23	* Retrieve testimonial 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 'testimonial';
32	}
33
34	/**
35	* Get widget title.
36	*
37	* Retrieve testimonial 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__( 'Testimonial', 'elementor' );
46	}
47
48	/**
49	* Get widget icon.
50	*
51	* Retrieve testimonial 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-testimonial';
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 [ 'testimonial', 'blockquote' ];
74	}
75
76	/**
77	* Register testimonial widget controls.
78	*
79	* Adds different input fields to allow the user to change and customize the widget settings.
80	*
81	* @since 3.1.0
82	* @access protected
83	*/
84	protected function register_controls() {
85	$this->start_controls_section(
86	'section_testimonial',
87	[
88	'label' => esc_html__( 'Testimonial', 'elementor' ),
89	]
90	);
91
92	$this->add_control(
93	'testimonial_content',
94	[
95	'label' => esc_html__( 'Content', 'elementor' ),
96	'type' => Controls_Manager::TEXTAREA,
97	'dynamic' => [
98	'active' => true,
99	],
100	'rows' => '10',
101	'default' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
102	]
103	);
104
105	$this->add_control(
106	'testimonial_image',
107	[
108	'label' => esc_html__( 'Choose Image', 'elementor' ),
109	'type' => Controls_Manager::MEDIA,
110	'dynamic' => [
111	'active' => true,
112	],
113	'default' => [
114	'url' => Utils::get_placeholder_image_src(),
115	],
116	]
117	);
118
119	$this->add_group_control(
120	Group_Control_Image_Size::get_type(),
121	[
122	'name' => 'testimonial_image', // Usage: `{name}_size` and `{name}_custom_dimension`, in this case `testimonial_image_size` and `testimonial_image_custom_dimension`.
123	'default' => 'full',
124	'separator' => 'none',
125	]
126	);
127
128	$this->add_control(
129	'testimonial_name',
130	[
131	'label' => esc_html__( 'Name', 'elementor' ),
132	'type' => Controls_Manager::TEXT,
133	'dynamic' => [
134	'active' => true,
135	],
136	'default' => 'John Doe',
137	]
138	);
139
140	$this->add_control(
141	'testimonial_job',
142	[
143	'label' => esc_html__( 'Title', 'elementor' ),
144	'type' => Controls_Manager::TEXT,
145	'dynamic' => [
146	'active' => true,
147	],
148	'default' => 'Designer',
149	]
150	);
151
152	$this->add_control(
153	'link',
154	[
155	'label' => esc_html__( 'Link', 'elementor' ),
156	'type' => Controls_Manager::URL,
157	'dynamic' => [
158	'active' => true,
159	],
160	]
161	);
162
163	$this->add_control(
164	'testimonial_image_position',
165	[
166	'label' => esc_html__( 'Image Position', 'elementor' ),
167	'type' => Controls_Manager::SELECT,
168	'default' => 'aside',
169	'options' => [
170	'aside' => esc_html__( 'Aside', 'elementor' ),
171	'top' => esc_html__( 'Top', 'elementor' ),
172	],
173	'condition' => [
174	'testimonial_image[url]!' => '',
175	],
176	'separator' => 'before',
177	'style_transfer' => true,
178	]
179	);
180
181	$this->add_responsive_control(
182	'testimonial_alignment',
183	[
184	'label' => esc_html__( 'Alignment', 'elementor' ),
185	'type' => Controls_Manager::CHOOSE,
186	'default' => 'center',
187	'options' => [
188	'left' => [
189	'title' => esc_html__( 'Left', 'elementor' ),
190	'icon' => 'eicon-text-align-left',
191	],
192	'center' => [
193	'title' => esc_html__( 'Center', 'elementor' ),
194	'icon' => 'eicon-text-align-center',
195	],
196	'right' => [
197	'title' => esc_html__( 'Right', 'elementor' ),
198	'icon' => 'eicon-text-align-right',
199	],
200	],
201	'selectors' => [
202	'{{WRAPPER}} .elementor-testimonial-wrapper' => 'text-align: {{VALUE}}',
203	],
204	'style_transfer' => true,
205	]
206	);
207
208	$this->add_control(
209	'view',
210	[
211	'label' => esc_html__( 'View', 'elementor' ),
212	'type' => Controls_Manager::HIDDEN,
213	'default' => 'traditional',
214	]
215	);
216
217	$this->end_controls_section();
218
219	// Content.
220	$this->start_controls_section(
221	'section_style_testimonial_content',
222	[
223	'label' => esc_html__( 'Content', 'elementor' ),
224	'tab' => Controls_Manager::TAB_STYLE,
225	]
226	);
227
228	$this->add_control(
229	'content_content_color',
230	[
231	'label' => esc_html__( 'Text Color', 'elementor' ),
232	'type' => Controls_Manager::COLOR,
233	'global' => [
234	'default' => Global_Colors::COLOR_TEXT,
235	],
236	'default' => '',
237	'selectors' => [
238	'{{WRAPPER}} .elementor-testimonial-content' => 'color: {{VALUE}};',
239	],
240	]
241	);
242
243	$this->add_group_control(
244	Group_Control_Typography::get_type(),
245	[
246	'name' => 'content_typography',
247	'global' => [
248	'default' => Global_Typography::TYPOGRAPHY_TEXT,
249	],
250	'selector' => '{{WRAPPER}} .elementor-testimonial-content',
251	]
252	);
253
254	$this->add_group_control(
255	Group_Control_Text_Shadow::get_type(),
256	[
257	'name' => 'content_shadow',
258	'selector' => '{{WRAPPER}} .elementor-testimonial-content',
259	]
260	);
261
262	$this->end_controls_section();
263
264	// Image.
265	$this->start_controls_section(
266	'section_style_testimonial_image',
267	[
268	'label' => esc_html__( 'Image', 'elementor' ),
269	'tab' => Controls_Manager::TAB_STYLE,
270	'condition' => [
271	'testimonial_image[url]!' => '',
272	],
273	]
274	);
275
276	$this->add_control(
277	'image_size',
278	[
279	'label' => esc_html__( 'Image Size', 'elementor' ),
280	'type' => Controls_Manager::SLIDER,
281	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
282	'range' => [
283	'px' => [
284	'min' => 20,
285	'max' => 200,
286	],
287	],
288	'selectors' => [
289	'{{WRAPPER}} .elementor-testimonial-wrapper .elementor-testimonial-image img' => 'width: {{SIZE}}{{UNIT}};height: {{SIZE}}{{UNIT}};',
290	],
291	]
292	);
293
294	$this->add_group_control(
295	Group_Control_Border::get_type(),
296	[
297	'name' => 'image_border',
298	'selector' => '{{WRAPPER}} .elementor-testimonial-wrapper .elementor-testimonial-image img',
299	'separator' => 'before',
300	]
301	);
302
303	$this->add_responsive_control(
304	'image_border_radius',
305	[
306	'label' => esc_html__( 'Border Radius', 'elementor' ),
307	'type' => Controls_Manager::DIMENSIONS,
308	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
309	'selectors' => [
310	'{{WRAPPER}} .elementor-testimonial-wrapper .elementor-testimonial-image img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
311	],
312	]
313	);
314
315	$this->end_controls_section();
316
317	// Name.
318	$this->start_controls_section(
319	'section_style_testimonial_name',
320	[
321	'label' => esc_html__( 'Name', 'elementor' ),
322	'tab' => Controls_Manager::TAB_STYLE,
323	]
324	);
325
326	$this->add_control(
327	'name_text_color',
328	[
329	'label' => esc_html__( 'Text Color', 'elementor' ),
330	'type' => Controls_Manager::COLOR,
331	'global' => [
332	'default' => Global_Colors::COLOR_PRIMARY,
333	],
334	'default' => '',
335	'selectors' => [
336	'{{WRAPPER}} .elementor-testimonial-name' => 'color: {{VALUE}};',
337	],
338	]
339	);
340
341	$this->add_group_control(
342	Group_Control_Typography::get_type(),
343	[
344	'name' => 'name_typography',
345	'global' => [
346	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
347	],
348	'selector' => '{{WRAPPER}} .elementor-testimonial-name',
349	]
350	);
351
352	$this->add_group_control(
353	Group_Control_Text_Shadow::get_type(),
354	[
355	'name' => 'name_shadow',
356	'selector' => '{{WRAPPER}} .elementor-testimonial-name',
357	]
358	);
359
360	$this->end_controls_section();
361
362	// Job.
363	$this->start_controls_section(
364	'section_style_testimonial_job',
365	[
366	'label' => esc_html__( 'Title', 'elementor' ),
367	'tab' => Controls_Manager::TAB_STYLE,
368	]
369	);
370
371	$this->add_control(
372	'job_text_color',
373	[
374	'label' => esc_html__( 'Text Color', 'elementor' ),
375	'type' => Controls_Manager::COLOR,
376	'global' => [
377	'default' => Global_Colors::COLOR_SECONDARY,
378	],
379	'default' => '',
380	'selectors' => [
381	'{{WRAPPER}} .elementor-testimonial-job' => 'color: {{VALUE}};',
382	],
383	]
384	);
385
386	$this->add_group_control(
387	Group_Control_Typography::get_type(),
388	[
389	'name' => 'job_typography',
390	'global' => [
391	'default' => Global_Typography::TYPOGRAPHY_SECONDARY,
392	],
393	'selector' => '{{WRAPPER}} .elementor-testimonial-job',
394	]
395	);
396
397	$this->add_group_control(
398	Group_Control_Text_Shadow::get_type(),
399	[
400	'name' => 'job_shadow',
401	'selector' => '{{WRAPPER}} .elementor-testimonial-job',
402	]
403	);
404
405	$this->end_controls_section();
406	}
407
408	/**
409	* Render testimonial widget output on the frontend.
410	*
411	* Written in PHP and used to generate the final HTML.
412	*
413	* @since 1.0.0
414	* @access protected
415	*/
416	protected function render() {
417	$settings = $this->get_settings_for_display();
418
419	$this->add_render_attribute( 'wrapper', 'class', 'elementor-testimonial-wrapper' );
420
421	$this->add_render_attribute( 'meta', 'class', 'elementor-testimonial-meta' );
422
423	if ( $settings['testimonial_image']['url'] ) {
424	$this->add_render_attribute( 'meta', 'class', 'elementor-has-image' );
425	}
426
427	if ( $settings['testimonial_image_position'] ) {
428	$this->add_render_attribute( 'meta', 'class', 'elementor-testimonial-image-position-' . $settings['testimonial_image_position'] );
429	}
430
431	$has_content = ! ! $settings['testimonial_content'];
432	$has_image = ! ! $settings['testimonial_image']['url'];
433	$has_name = ! ! $settings['testimonial_name'];
434	$has_job = ! ! $settings['testimonial_job'];
435
436	if ( ! $has_content && ! $has_image && ! $has_name && ! $has_job ) {
437	return;
438	}
439
440	if ( ! empty( $settings['link']['url'] ) ) {
441	$this->add_link_attributes( 'link', $settings['link'] );
442	}
443	?>
444	<div <?php $this->print_render_attribute_string( 'wrapper' ); ?>>
445	<?php
446	if ( $has_content ) :
447	$this->add_render_attribute( 'testimonial_content', 'class', 'elementor-testimonial-content' );
448	$this->add_inline_editing_attributes( 'testimonial_content' );
449	?>
450	<div <?php $this->print_render_attribute_string( 'testimonial_content' ); ?>><?php $this->print_unescaped_setting( 'testimonial_content' ); ?></div>
451	<?php endif; ?>
452
453	<?php if ( $has_image \|\| $has_name \|\| $has_job ) : ?>
454	<div <?php $this->print_render_attribute_string( 'meta' ); ?>>
455	<div class="elementor-testimonial-meta-inner">
456	<?php if ( $has_image ) : ?>
457	<div class="elementor-testimonial-image">
458	<?php
459	$image_html = Group_Control_Image_Size::get_attachment_image_html( $settings, 'testimonial_image' );
460	if ( ! empty( $settings['link']['url'] ) ) :
461	$image_html = '<a ' . $this->get_render_attribute_string( 'link' ) . '>' . $image_html . '</a>';
462	endif;
463	echo wp_kses_post( $image_html );
464	?>
465	</div>
466	<?php endif; ?>
467
468	<?php if ( $has_name \|\| $has_job ) : ?>
469	<div class="elementor-testimonial-details">
470	<?php
471	if ( $has_name ) :
472	$this->add_render_attribute( 'testimonial_name', 'class', 'elementor-testimonial-name' );
473	$this->add_inline_editing_attributes( 'testimonial_name', 'none' );
474
475	if ( ! empty( $settings['link']['url'] ) ) :
476	?>
477	<a <?php $this->print_render_attribute_string( 'testimonial_name' ); ?> <?php $this->print_render_attribute_string( 'link' ); ?>><?php $this->print_unescaped_setting( 'testimonial_name' ); ?></a>
478	<?php
479	else :
480	?>
481	<div <?php $this->print_render_attribute_string( 'testimonial_name' ); ?>><?php $this->print_unescaped_setting( 'testimonial_name' ); ?></div>
482	<?php
483	endif;
484	endif; ?>
485	<?php
486	if ( $has_job ) :
487	$this->add_render_attribute( 'testimonial_job', 'class', 'elementor-testimonial-job' );
488
489	$this->add_inline_editing_attributes( 'testimonial_job', 'none' );
490
491	if ( ! empty( $settings['link']['url'] ) ) :
492	?>
493	<a <?php $this->print_render_attribute_string( 'testimonial_job' ); ?> <?php $this->print_render_attribute_string( 'link' ); ?>><?php $this->print_unescaped_setting( 'testimonial_job' ); ?></a>
494	<?php
495	else :
496	?>
497	<div <?php $this->print_render_attribute_string( 'testimonial_job' ); ?>><?php $this->print_unescaped_setting( 'testimonial_job' ); ?></div>
498	<?php
499	endif;
500	endif; ?>
501	</div>
502	<?php endif; ?>
503	</div>
504	</div>
505	<?php endif; ?>
506	</div>
507	<?php
508	}
509
510	/**
511	* Render testimonial widget output in the editor.
512	*
513	* Written as a Backbone JavaScript template and used to generate the live preview.
514	*
515	* @since 2.9.0
516	* @access protected
517	*/
518	protected function content_template() {
519	?>
520	<#
521	var image = {
522	id: settings.testimonial_image.id,
523	url: settings.testimonial_image.url,
524	size: settings.testimonial_image_size,
525	dimension: settings.testimonial_image_custom_dimension,
526	model: view.getEditModel()
527	};
528	var imageUrl = false, hasImage = '';
529
530	if ( '' !== settings.testimonial_image.url ) {
531	imageUrl = elementor.imagesManager.getImageUrl( image );
532	hasImage = ' elementor-has-image';
533
534	var imageHtml = '<img src="' + imageUrl + '" alt="testimonial" />';
535	if ( settings.link.url ) {
536	imageHtml = '<a href="' + settings.link.url + '">' + imageHtml + '</a>';
537	}
538	}
539
540	var testimonial_image_position = settings.testimonial_image_position ? ' elementor-testimonial-image-position-' + settings.testimonial_image_position : '';
541	#>
542	<div class="elementor-testimonial-wrapper">
543	<# if ( '' !== settings.testimonial_content ) {
544	view.addRenderAttribute( 'testimonial_content', {
545	'data-binding-type': 'content',
546	'data-binding-setting': 'testimonial_content',
547	} );
548	view.addRenderAttribute( 'testimonial_content', 'class', 'elementor-testimonial-content' );
549
550	view.addInlineEditingAttributes( 'testimonial_content' );
551	#>
552	<div {{{ view.getRenderAttributeString( 'testimonial_content' ) }}}>{{{ settings.testimonial_content }}}</div>
553	<# } #>
554	<div class="elementor-testimonial-meta{{ hasImage }}{{ testimonial_image_position }}">
555	<div class="elementor-testimonial-meta-inner">
556	<# if ( imageUrl ) { #>
557	<div class="elementor-testimonial-image">{{{ imageHtml }}}</div>
558	<# } #>
559	<div class="elementor-testimonial-details">
560	<?php $this->render_testimonial_description(); ?>
561	</div>
562	</div>
563	</div>
564	</div>
565	<?php
566	}
567
568	protected function render_testimonial_description() {
569	?>
570	<#
571	if ( '' !== settings.testimonial_name ) {
572	view.addRenderAttribute( 'testimonial_name', 'class', 'elementor-testimonial-name' );
573
574	view.addInlineEditingAttributes( 'testimonial_name', 'none' );
575
576	if ( settings.link.url ) {
577	#>
578	<a href="{{{ settings.link.url }}}" {{{ view.getRenderAttributeString( 'testimonial_name' ) }}}>{{{ settings.testimonial_name }}}</a>
579	<#
580	} else {
581	#>
582	<div {{{ view.getRenderAttributeString( 'testimonial_name' ) }}}>{{{ settings.testimonial_name }}}</div>
583	<#
584	}
585	}
586
587	if ( '' !== settings.testimonial_job ) {
588	view.addRenderAttribute( 'testimonial_job', 'class', 'elementor-testimonial-job' );
589
590	view.addInlineEditingAttributes( 'testimonial_job', 'none' );
591
592	if ( settings.link.url ) {
593	#>
594	<a href="{{{ settings.link.url }}}" {{{ view.getRenderAttributeString( 'testimonial_job' ) }}}>{{{ settings.testimonial_job }}}</a>
595	<#
596	} else {
597	#>
598	<div {{{ view.getRenderAttributeString( 'testimonial_job' ) }}}>{{{ settings.testimonial_job }}}</div>
599	<#
600	}
601	}
602	#>
603	<?php
604	}
605	}
606