elementor / includes / widgets / testimonial.php

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

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