elementor / includes / widgets / testimonial.php

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

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