elementor / includes / widgets / testimonial.php

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

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