easy-elements / widgets / clients-logo-grid / logo.php

logo.php in Easy Elements for Elementor – Addons & Website Templates 1.3.4, at widgets/clients-logo-grid/logo.php

533 lines 23.4 KB

Raw Download Zip

1	<?php
2	namespace Easyel\EasyElements\Widgets;
3	use Elementor\Repeater;
4	use Elementor\Utils;
5	use Elementor\Controls_Manager;
6	use Elementor\Responsive_Control;
7	use Elementor\Group_Control_Image_Size;
8
9	defined( 'ABSPATH' ) \|\| die();
10	class Easyel_Clients_Logo__Widget extends \Elementor\Widget_Base {
11
12	public function get_name() {
13	return 'eel-clients-logo-grid';
14	}
15
16	public function get_title() {
17	return esc_html__( 'Client Logo Grid', 'easy-elements' );
18	}
19
20	public function get_icon() {
21	return 'easyicon easyelIcon-clients-logo-grid';
22	}
23
24	public function get_categories() {
25	return [ 'easyelements_category' ];
26	}
27
28	public function get_keywords() {
29	return [ 'logo', 'clients', 'brand', 'partner', 'image' ];
30	}
31
32	public function get_style_depends() {
33	return [
34	'eel-clients-logo-grid',
35	];
36	}
37
38	protected function register_controls() {
39	$this->start_controls_section(
40	'_section_logo',
41	[
42	'label' => esc_html__( 'Logo Settings', 'easy-elements' ),
43	'tab' => Controls_Manager::TAB_CONTENT,
44	]
45	);
46
47
48	// Repeater
49	$repeater = new Repeater();
50
51	$repeater->add_control(
52	'image',
53	[
54	'label' => esc_html__('Logo', 'easy-elements'),
55	'type' => Controls_Manager::MEDIA,
56	'default' => [
57	'url' => Utils::get_placeholder_image_src(),
58	],
59	]
60	);
61
62	$repeater->add_control(
63	'link',
64	[
65	'label' => esc_html__('Link', 'easy-elements'),
66	'type' => Controls_Manager::URL,
67	'placeholder' => 'https://example.com',
68	'dynamic' => [
69	'active' => true,
70	],
71	]
72	);
73
74	$this->add_control(
75	'easy_logo_list',
76	[
77	'type' => Controls_Manager::REPEATER,
78	'fields' => $repeater->get_controls(),
79	'title_field' => '{{{ image.url }}}',
80	'default' => array_fill(0, 4, [
81	'image' => ['url' => Utils::get_placeholder_image_src()],
82	]),
83	]
84	);
85
86
87	$this->add_group_control(
88	Group_Control_Image_Size::get_type(),
89	[
90	'name' => 'image',
91	'default' => 'full',
92	]
93	);
94
95	$this->add_responsive_control(
96	'image_size_width',
97	[
98	'label' => esc_html__('Image Size', 'easy-elements'),
99	'type' => Controls_Manager::SLIDER,
100	'size_units' => ['px', 'em', '%'],
101	'range' => [
102	'px' => [ 'min' => 0, 'max' => 500 ],
103	'em' => [ 'min' => 0, 'max' => 30 ],
104	'%' => [ 'min' => 0, 'max' => 100 ],
105	],
106	'selectors' => [
107	'{{WRAPPER}} .e-e-grid-img' => 'width: {{SIZE}}{{UNIT}}; height: auto;',
108	],
109	]
110	);
111
112	$this->add_control(
113	'fetchpriority',
114	[
115	'label' => __('Image Fetch Priority', 'easy-elements'),
116	'type' => \Elementor\Controls_Manager::SELECT,
117	'options' => [
118	'' => __('Default', 'easy-elements'),
119	'high' => __('High', 'easy-elements'),
120	'low' => __('Low', 'easy-elements'),
121	],
122	'default' => 'low',
123	]
124	);
125
126
127	$this->add_responsive_control(
128	'columns',
129	[
130	'label' => esc_html__( 'Select Columns', 'easy-elements' ),
131	'type' => Controls_Manager::SELECT,
132	'default' => '4',
133	'tablet_default' => '3',
134	'mobile_default' => '2',
135	'options' => [
136	'1' => '1 Column',
137	'2' => '2 Columns',
138	'3' => '3 Columns',
139	'4' => '4 Columns',
140	'5' => '5 Columns',
141	'6' => '6 Columns',
142	],
143	'selectors' => [
144	'{{WRAPPER}} .e-e-clients-logo .grid-item' => 'width: calc(100% / {{VALUE}});',
145	],
146	]
147	);
148	$this->add_control(
149	'image_hover_swap_effect',
150	[
151	'label' => esc_html__( 'Image Hover Swap Effect', 'easy-elements' ),
152	'type' => Controls_Manager::SWITCHER,
153	'label_on' => esc_html__( 'Yes', 'easy-elements' ),
154	'label_off' => esc_html__( 'No', 'easy-elements' ),
155	'return_value' => 'yes',
156	]
157	);
158	$this->end_controls_section();
159
160	// STYLE
161	$this->start_controls_section(
162	'section_item_style',
163	[
164	'label' => __( 'Style', 'easy-elements' ),
165	'tab' => \Elementor\Controls_Manager::TAB_STYLE,
166	]
167	);
168	$this->add_responsive_control(
169	'item_width',
170	[
171	'label' => esc_html__( 'Item Width', 'easy-elements' ),
172	'type' => \Elementor\Controls_Manager::SLIDER,
173	'size_units' => [ 'px', 'em', '%' ],
174	'range' => [
175	'px' => [
176	'min' => 0,
177	'max' => 1000,
178	],
179	],
180	'selectors' => [
181	'{{WRAPPER}} .e-e-clients-logo .grid-item .ee--logo-img' => 'max-width: {{SIZE}}{{UNIT}};',
182	],
183	]
184	);
185	$this->add_responsive_control(
186	'item_height',
187	[
188	'label' => esc_html__( 'Item Height', 'easy-elements' ),
189	'type' => \Elementor\Controls_Manager::SLIDER,
190	'size_units' => [ 'px', 'em', '%' ],
191	'range' => [
192	'px' => [
193	'min' => 0,
194	'max' => 1000,
195	],
196	],
197	'selectors' => [
198	'{{WRAPPER}} .e-e-clients-logo .grid-item .ee--logo-img' => 'height: {{SIZE}}{{UNIT}};',
199	'{{WRAPPER}} .e-e-clients-logo .grid-item .ee--logo-img .e-e-grid-img' => 'height: 100%;',
200	],
201	]
202	);
203	$this->add_responsive_control(
204	'item_padding',
205	[
206	'label' => esc_html__( 'Space', 'easy-elements' ),
207	'type' => Controls_Manager::DIMENSIONS,
208	'size_units' => [ 'px', 'em', '%' ],
209	'selectors' => [
210	'{{WRAPPER}} .e-e-clients-logo .grid-wrap .grid-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
211	],
212	]
213	);
214
215	$this->add_responsive_control(
216	'item_padding_inner',
217	[
218	'label' => esc_html__( 'Padding', 'easy-elements' ),
219	'type' => Controls_Manager::DIMENSIONS,
220	'size_units' => [ 'px', 'em', '%' ],
221	'selectors' => [
222	'{{WRAPPER}} .e-e-clients-logo .grid-item .ee--logo-img' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
223	],
224	]
225	);
226
227	$this->add_control(
228	'item__border_radius',
229	[
230	'label' => esc_html__( 'Border Radius', 'easy-elements' ),
231	'type' => \Elementor\Controls_Manager::DIMENSIONS,
232	'size_units' => [ 'px', '%' ],
233	'selectors' => [
234	'{{WRAPPER}} .e-e-clients-logo .grid-item .ee--logo-img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
235	],
236	]
237	);
238
239	// Item Normal and Hover Options
240	$this->start_controls_tabs( 'item_normal_hover_style' );
241
242	$this->start_controls_tab(
243	'item_normal_style',
244	[
245	'label' => esc_html__( 'Normal', 'easy-elements' ),
246	]
247	);
248	$this->add_control(
249	'item_bg',
250	[
251	'label' => esc_html__( 'Item Background', 'easy-elements' ),
252	'type' => Controls_Manager::COLOR,
253	'selectors' => [
254	'{{WRAPPER}} .e-e-clients-logo .grid-item .ee--logo-img' => 'background-color: {{VALUE}};',
255	],
256	]
257	);
258	$this->add_group_control(
259	\Elementor\Group_Control_Border::get_type(),
260	[
261	'name' => 'item_border',
262	'selector' => '{{WRAPPER}} .ee--logo-img',
263	]
264	);
265	$this->add_group_control(
266	\Elementor\Group_Control_Box_Shadow::get_type(),
267	[
268	'name' => 'item_box_shadow',
269	'selector' => '{{WRAPPER}} .e-e-clients-logo .grid-item .ee--logo-img',
270	]
271	);
272	$this->add_control(
273	'item_opacity',
274	[
275	'label' => esc_html__( 'Opacity', 'easy-elements' ),
276	'type' => \Elementor\Controls_Manager::SLIDER,
277	'range' => [
278	'px' => [
279	'min' => 0.1,
280	'max' => 1,
281	'step' => .1,
282	],
283	],
284	'selectors' => [
285	'{{WRAPPER}} .e-e-clients-logo .grid-item .ee--logo-img img' => 'opacity: {{SIZE}};',
286	],
287	]
288	);
289	$this->add_control(
290	'item_transform_scale',
291	[
292	'label' => esc_html__( 'Transform Scale', 'easy-elements' ),
293	'type' => \Elementor\Controls_Manager::SLIDER,
294	'range' => [
295	'px' => [
296	'min' => 0.1,
297	'max' => 2,
298	'step' => .1,
299	],
300	],
301	'condition' => [
302	'image_hover_swap_effect!' => 'yes',
303	],
304	'selectors' => [
305	'{{WRAPPER}} .e-e-clients-logo .grid-item .ee--logo-img img' => 'transform: scale({{SIZE}});',
306	],
307	]
308	);
309	$this->add_control(
310	'image_grayscale',
311	[
312	'label' => esc_html__( 'Image Grayscale', 'easy-elements' ),
313	'type' => Controls_Manager::SWITCHER,
314	'label_on' => esc_html__( 'Yes', 'easy-elements' ),
315	'label_off' => esc_html__( 'No', 'easy-elements' ),
316	'return_value' => 'yes',
317	]
318	);
319	$this->add_control(
320	'image_grayscale_option',
321	[
322	'label' => __('Grayscale', 'easy-elements'),
323	'type' => \Elementor\Controls_Manager::SELECT,
324	'default' => 'normal_grayscale',
325	'options' => [
326	'normal_grayscale' => __('Default Grayscale', 'easy-elements'),
327	'hover_grayscale' => __('Hover Grayscale', 'easy-elements'),
328	'hover_to_default' => __('Hover to Default Image', 'easy-elements'),
329	],
330	'condition' => [
331	'image_grayscale' => 'yes',
332	],
333	]
334	);
335	$this->add_group_control(
336	\Elementor\Group_Control_Css_Filter::get_type(),
337	[
338	'name' => 'item_css_filters',
339	'selector' => '{{WRAPPER}} .e-e-clients-logo .grid-item .ee--logo-img img',
340	'condition' => [
341	'image_grayscale!' => 'yes',
342	],
343	]
344	);
345
346
347	$this->end_controls_tab();
348
349	// Hover Styele
350	$this->start_controls_tab(
351	'item_hover_style',
352	[
353	'label' => esc_html__( 'Hover', 'easy-elements' ),
354	]
355	);
356	$this->add_control(
357	'item_hover_bg',
358	[
359	'label' => esc_html__( 'Item Hover BG', 'easy-elements' ),
360	'type' => Controls_Manager::COLOR,
361	'selectors' => [
362	'{{WRAPPER}} .e-e-clients-logo .grid-item .ee--logo-img:hover' => 'background-color: {{VALUE}};',
363	],
364	]
365	);
366	$this->add_group_control(
367	\Elementor\Group_Control_Border::get_type(),
368	[
369	'name' => 'item_hover_border',
370	'selector' => '{{WRAPPER}} .e-e-clients-logo .grid-item .ee--logo-img:hover',
371	]
372	);
373	$this->add_group_control(
374	\Elementor\Group_Control_Box_Shadow::get_type(),
375	[
376	'name' => 'item_hover_box_shadow',
377	'selector' => '{{WRAPPER}} .e-e-clients-logo .grid-item .ee--logo-img:hover',
378	]
379	);
380	$this->add_control(
381	'item_hover_opacity',
382	[
383	'label' => esc_html__( 'Opacity', 'easy-elements' ),
384	'type' => \Elementor\Controls_Manager::SLIDER,
385	'range' => [
386	'px' => [
387	'min' => 0.1,
388	'max' => 1,
389	'step' => .1,
390	],
391	],
392	'selectors' => [
393	'{{WRAPPER}} .e-e-clients-logo .grid-item .ee--logo-img:hover img' => 'opacity: {{SIZE}};',
394	],
395	]
396	);
397	$this->add_control(
398	'item_hover_transform_scale',
399	[
400	'label' => esc_html__( 'Transform Scale', 'easy-elements' ),
401	'type' => \Elementor\Controls_Manager::SLIDER,
402	'range' => [
403	'px' => [
404	'min' => 0.1,
405	'max' => 2,
406	'step' => .1,
407	],
408	],
409	'condition' => [
410	'image_hover_swap_effect!' => 'yes',
411	],
412	'selectors' => [
413	'{{WRAPPER}} .e-e-clients-logo .grid-item .ee--logo-img:hover img' => 'transform: scale({{SIZE}});',
414	],
415	]
416	);
417	$this->add_group_control(
418	\Elementor\Group_Control_Css_Filter::get_type(),
419	[
420	'name' => 'item_hover_css_filters',
421	'selector' => '{{WRAPPER}} .e-e-clients-logo .grid-item .ee--logo-img:hover img',
422	'condition' => [
423	'image_grayscale!' => 'yes',
424	],
425	]
426	);
427	$this->add_control(
428	'item_hover_transition',
429	[
430	'label' => esc_html__( 'Transition', 'easy-elements' ),
431	'type' => \Elementor\Controls_Manager::SLIDER,
432	'range' => [
433	'px' => [
434	'min' => 0.1,
435	'max' => 5,
436	'step' => .1,
437	],
438	],
439	'selectors' => [
440	'{{WRAPPER}} .e-e-clients-logo .grid-item .ee--logo-img, {{WRAPPER}} .e-e-clients-logo .grid-item .ee--logo-img .e-e-grid-img' => 'transition: all {{SIZE}}s ease;',
441	],
442	]
443	);
444
445	$this->end_controls_tab();
446
447	$this->end_controls_tabs();
448
449	$this->end_controls_section();
450	}
451
452	protected function render() {
453	$settings = $this->get_settings_for_display();
454	if ( empty( $settings['easy_logo_list'] ) ) {
455	return;
456	}
457
458	?>
459
460	<div class="e-e-clients-logo grid-layout">
461	<div class="grid-wrap">
462	<?php foreach ( $settings['easy_logo_list'] as $item ) :
463
464	// Image setup with fallback
465	$image_id = $item['image']['id'] ?? '';
466	$image_url = $image_id ? wp_get_attachment_image_src( $image_id, $settings['image_size'] ?? 'full' ) : ($item['image']['url'] ?? \Elementor\Utils::get_placeholder_image_src());
467	$image_data = $image_url ?: [];
468	$alt = $image_id ? get_post_meta( $image_id, '_wp_attachment_image_alt', true ) : '';
469	$title = $image_id ? get_the_title( $image_id ) : '';
470
471	$link = $item['link']['url'] ?? '';
472	$target = ! empty( $item['link']['is_external'] ) ? '_blank' : '';
473	$nofollow = ! empty( $item['link']['nofollow'] ) ? 'nofollow' : '';
474	$fetchpriority = $settings['fetchpriority'] ?? '';
475	$image_grayscale = ! empty( $settings['image_grayscale_option'] ) ? $settings['image_grayscale_option'] : '';
476	?>
477
478	<div class="grid-item">
479	<div class="ee--logo-img <?php echo esc_attr($image_grayscale); ?>">
480
481	<?php if ( $link ) : ?>
482	<a href="<?php echo esc_url( $link ); ?>"
483	<?php if ( $target ) : ?>target="<?php echo esc_attr( $target ); ?>"<?php endif; ?>
484	<?php if ( $nofollow ) : ?>rel="<?php echo esc_attr( $nofollow ); ?>"<?php endif; ?>>
485	<?php endif; ?>
486
487	<?php if ( $image_data ) : ?>
488	<?php if ( ! empty($settings['image_hover_swap_effect']) && $settings['image_hover_swap_effect'] === 'yes' ) { ?>
489	<img class="e-e-grid-img ee--logo-img-hover"
490	src="<?php echo esc_url( is_array($image_data) ? $image_data[0] : $image_data ); ?>"
491	width="<?php echo esc_attr( is_array($image_data) ? $image_data[1] : '' ); ?>"
492	height="<?php echo esc_attr( is_array($image_data) ? $image_data[2] : '' ); ?>"
493	alt="<?php echo esc_attr( $alt ); ?>"
494	title="<?php echo esc_attr( $title ); ?>"
495	loading="lazy"
496	decoding="async"
497	fetchpriority="<?php echo esc_attr( $fetchpriority ); ?>">
498	<img class="e-e-grid-img ee--logo-img-normal"
499	src="<?php echo esc_url( is_array($image_data) ? $image_data[0] : $image_data ); ?>"
500	width="<?php echo esc_attr( is_array($image_data) ? $image_data[1] : '' ); ?>"
501	height="<?php echo esc_attr( is_array($image_data) ? $image_data[2] : '' ); ?>"
502	alt="<?php echo esc_attr( $alt ); ?>"
503	title="<?php echo esc_attr( $title ); ?>"
504	loading="lazy"
505	decoding="async"
506	fetchpriority="<?php echo esc_attr( $fetchpriority ); ?>">
507	<?php } else { ?>
508	<img class="e-e-grid-img"
509	src="<?php echo esc_url( is_array($image_data) ? $image_data[0] : $image_data ); ?>"
510	width="<?php echo esc_attr( is_array($image_data) ? $image_data[1] : '' ); ?>"
511	height="<?php echo esc_attr( is_array($image_data) ? $image_data[2] : '' ); ?>"
512	alt="<?php echo esc_attr( $alt ); ?>"
513	title="<?php echo esc_attr( $title ); ?>"
514	loading="lazy"
515	decoding="async"
516	fetchpriority="<?php echo esc_attr( $fetchpriority ); ?>">
517	<?php } ?>
518	<?php endif; ?>
519
520	<?php if ( $link ) : ?>
521	</a>
522	<?php endif; ?>
523
524	</div>
525	</div>
526
527	<?php endforeach; ?>
528	</div>
529
530	</div>
531	<?php
532	}
533	}