uicore-elements / includes / widgets / theme-builder / post-featured-image.php

post-featured-image.php in UiCore Elements – Free widgets and templates for Elementor 1.3.17, at includes/widgets/theme-builder/post-featured-image.php

611 lines 18.9 KB

Raw Download Zip

1	<?php
2
3	namespace UiCoreElements\ThemeBuilder\Widgets;
4
5	defined('ABSPATH') \|\| exit();
6
7	use UiCoreElements\UiCoreWidget;
8	use UiCoreELements\Helper;
9
10	use Elementor\Controls_Manager;
11	use Elementor\Group_Control_Typography;
12	use Elementor\Group_Control_Text_Shadow;
13	use Elementor\Group_Control_Image_Size;
14	use Elementor\Group_Control_Css_Filter;
15	use Elementor\Group_Control_Border;
16	use Elementor\Group_Control_Box_Shadow;
17	use Elementor\Utils;
18
19	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
20	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
21
22	/**
23	* Featured Image widget.
24	*
25	* @since 1.3.3
26	*/
27	class Featured_Image extends UiCoreWidget
28	{
29
30	public function get_name()
31	{
32	return 'featured-image';
33	}
34	public function get_title()
35	{
36	return esc_html__('Post Featured Image', 'uicore-elements');
37	}
38	public function get_icon()
39	{
40	return 'eicon-featured-image ui-e-widget';
41	}
42	public function get_categories()
43	{
44	return ['uicore', 'uicore-theme-builder'];
45	}
46	public function get_keywords()
47	{
48	return ['image', 'photo', 'visual', 'featured', 'post', 'page', 'uicore'];
49	}
50	public function get_styles()
51	{
52	return [];
53	}
54	public function get_scripts()
55	{
56	return [];
57	}
58	public function has_widget_inner_wrapper(): bool
59	{
60	return ! \Elementor\Plugin::$instance->experiments->is_feature_active('e_optimized_markup');
61	}
62
63	protected function register_controls()
64	{
65	$this->start_controls_section(
66	'section_image',
67	[
68	'label' => esc_html__('Image', 'uicore-elements'),
69	]
70	);
71
72	$this->add_control(
73	'image_size',
74	[
75	'label' => esc_html__('Image Size', 'uicore-elements'),
76	'type' => Controls_Manager::SELECT,
77	'default' => 'uicore-medium',
78	'options' => Helper::get_images_sizes(),
79	]
80	);
81
82	$this->add_control(
83	'link_to',
84	[
85	'label' => esc_html__('Link', 'uicore-elements'),
86	'type' => Controls_Manager::SELECT,
87	'default' => 'none',
88	'options' => [
89	'none' => esc_html__('None', 'uicore-elements'),
90	'post' => esc_html__('Post', 'uicore-elements'),
91	'custom' => esc_html__('Custom URL', 'uicore-elements'),
92	],
93	]
94	);
95
96	$this->add_control(
97	'link',
98	[
99	'label' => esc_html__('Link', 'uicore-elements'),
100	'type' => Controls_Manager::URL,
101	'dynamic' => [
102	'active' => true,
103	],
104	'condition' => [
105	'link_to' => 'custom',
106	],
107	'show_label' => false,
108	]
109	);
110
111	$this->end_controls_section();
112
113	$this->start_controls_section(
114	'section_style_image',
115	[
116	'label' => esc_html__('Image', 'uicore-elements'),
117	'tab' => Controls_Manager::TAB_STYLE,
118	]
119	);
120
121	$this->add_responsive_control(
122	'align',
123	[
124	'label' => esc_html__('Alignment', 'uicore-elements'),
125	'type' => Controls_Manager::CHOOSE,
126	'options' => [
127	'left' => [
128	'title' => esc_html__('Left', 'uicore-elements'),
129	'icon' => 'eicon-text-align-left',
130	],
131	'center' => [
132	'title' => esc_html__('Center', 'uicore-elements'),
133	'icon' => 'eicon-text-align-center',
134	],
135	'right' => [
136	'title' => esc_html__('Right', 'uicore-elements'),
137	'icon' => 'eicon-text-align-right',
138	],
139	],
140	'selectors' => [
141	'{{WRAPPER}}' => 'text-align: {{VALUE}};',
142	],
143	]
144	);
145
146	$this->add_responsive_control(
147	'width',
148	[
149	'label' => esc_html__('Width', 'uicore-elements'),
150	'type' => Controls_Manager::SLIDER,
151	'default' => [
152	'unit' => '%',
153	],
154	'tablet_default' => [
155	'unit' => '%',
156	],
157	'mobile_default' => [
158	'unit' => '%',
159	],
160	'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
161	'range' => [
162	'%' => [
163	'min' => 1,
164	'max' => 100,
165	],
166	'px' => [
167	'min' => 1,
168	'max' => 1000,
169	],
170	'vw' => [
171	'min' => 1,
172	'max' => 100,
173	],
174	],
175	'selectors' => [
176	'{{WRAPPER}} img' => 'width: {{SIZE}}{{UNIT}};',
177	],
178	]
179	);
180
181	$this->add_responsive_control(
182	'space',
183	[
184	'label' => esc_html__('Max Width', 'uicore-elements'),
185	'type' => Controls_Manager::SLIDER,
186	'default' => [
187	'unit' => '%',
188	],
189	'tablet_default' => [
190	'unit' => '%',
191	],
192	'mobile_default' => [
193	'unit' => '%',
194	],
195	'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
196	'range' => [
197	'%' => [
198	'min' => 1,
199	'max' => 100,
200	],
201	'px' => [
202	'min' => 1,
203	'max' => 1000,
204	],
205	'vw' => [
206	'min' => 1,
207	'max' => 100,
208	],
209	],
210	'selectors' => [
211	'{{WRAPPER}} img' => 'max-width: {{SIZE}}{{UNIT}};',
212	],
213	]
214	);
215
216	$this->add_responsive_control(
217	'height',
218	[
219	'label' => esc_html__('Height', 'uicore-elements'),
220	'type' => Controls_Manager::SLIDER,
221	'size_units' => ['px', '%', 'em', 'rem', 'vh', 'custom'],
222	'range' => [
223	'px' => [
224	'min' => 1,
225	'max' => 500,
226	],
227	'vh' => [
228	'min' => 1,
229	'max' => 100,
230	],
231	],
232	'selectors' => [
233	'{{WRAPPER}} img' => 'height: {{SIZE}}{{UNIT}};',
234	],
235	]
236	);
237
238	$this->add_responsive_control(
239	'object-fit',
240	[
241	'label' => esc_html__('Object Fit', 'uicore-elements'),
242	'type' => Controls_Manager::SELECT,
243	'condition' => [
244	'height[size]!' => '',
245	],
246	'options' => [
247	'' => esc_html__('Default', 'uicore-elements'),
248	'fill' => esc_html__('Fill', 'uicore-elements'),
249	'cover' => esc_html__('Cover', 'uicore-elements'),
250	'contain' => esc_html__('Contain', 'uicore-elements'),
251	'scale-down' => esc_html__('Scale Down', 'uicore-elements'),
252	],
253	'default' => '',
254	'selectors' => [
255	'{{WRAPPER}} img' => 'object-fit: {{VALUE}};',
256	],
257	]
258	);
259
260	$this->add_responsive_control(
261	'object-position',
262	[
263	'label' => esc_html__('Object Position', 'uicore-elements'),
264	'type' => Controls_Manager::SELECT,
265	'options' => [
266	'center center' => esc_html__('Center Center', 'uicore-elements'),
267	'center left' => esc_html__('Center Left', 'uicore-elements'),
268	'center right' => esc_html__('Center Right', 'uicore-elements'),
269	'top center' => esc_html__('Top Center', 'uicore-elements'),
270	'top left' => esc_html__('Top Left', 'uicore-elements'),
271	'top right' => esc_html__('Top Right', 'uicore-elements'),
272	'bottom center' => esc_html__('Bottom Center', 'uicore-elements'),
273	'bottom left' => esc_html__('Bottom Left', 'uicore-elements'),
274	'bottom right' => esc_html__('Bottom Right', 'uicore-elements'),
275	],
276	'default' => 'center center',
277	'selectors' => [
278	'{{WRAPPER}} img' => 'object-position: {{VALUE}};',
279	],
280	'condition' => [
281	'height[size]!' => '',
282	'object-fit' => ['cover', 'contain', 'scale-down'],
283	],
284	]
285	);
286
287	$this->add_control(
288	'separator_panel_style',
289	[
290	'type' => Controls_Manager::DIVIDER,
291	'style' => 'thick',
292	]
293	);
294
295	$this->start_controls_tabs('image_effects');
296
297	$this->start_controls_tab(
298	'normal',
299	[
300	'label' => esc_html__('Normal', 'uicore-elements'),
301	]
302	);
303
304	$this->add_control(
305	'opacity',
306	[
307	'label' => esc_html__('Opacity', 'uicore-elements'),
308	'type' => Controls_Manager::SLIDER,
309	'range' => [
310	'px' => [
311	'max' => 1,
312	'min' => 0.10,
313	'step' => 0.01,
314	],
315	],
316	'selectors' => [
317	'{{WRAPPER}} img' => 'opacity: {{SIZE}};',
318	],
319	]
320	);
321
322	$this->add_group_control(
323	Group_Control_Css_Filter::get_type(),
324	[
325	'name' => 'css_filters',
326	'selector' => '{{WRAPPER}} img',
327	]
328	);
329
330	$this->end_controls_tab();
331
332	$this->start_controls_tab(
333	'hover',
334	[
335	'label' => esc_html__('Hover', 'uicore-elements'),
336	]
337	);
338
339	$this->add_control(
340	'opacity_hover',
341	[
342	'label' => esc_html__('Opacity', 'uicore-elements'),
343	'type' => Controls_Manager::SLIDER,
344	'range' => [
345	'px' => [
346	'max' => 1,
347	'min' => 0.10,
348	'step' => 0.01,
349	],
350	],
351	'selectors' => [
352	'{{WRAPPER}}:hover img' => 'opacity: {{SIZE}};',
353	],
354	]
355	);
356
357	$this->add_group_control(
358	Group_Control_Css_Filter::get_type(),
359	[
360	'name' => 'css_filters_hover',
361	'selector' => '{{WRAPPER}}:hover img',
362	]
363	);
364
365	$this->add_control(
366	'background_hover_transition',
367	[
368	'label' => esc_html__('Transition Duration', 'uicore-elements') . ' (s)',
369	'type' => Controls_Manager::SLIDER,
370	'range' => [
371	'px' => [
372	'min' => 0,
373	'max' => 3,
374	'step' => 0.1,
375	],
376	],
377	'selectors' => [
378	'{{WRAPPER}} img' => 'transition-duration: {{SIZE}}s',
379	],
380	]
381	);
382
383	$this->add_control(
384	'hover_animation',
385	[
386	'label' => esc_html__('Hover Animation', 'uicore-elements'),
387	'type' => Controls_Manager::HOVER_ANIMATION,
388	]
389	);
390
391	$this->end_controls_tab();
392
393	$this->end_controls_tabs();
394
395	$this->add_group_control(
396	Group_Control_Border::get_type(),
397	[
398	'name' => 'image_border',
399	'selector' => '{{WRAPPER}} img',
400	'separator' => 'before',
401	]
402	);
403
404	$this->add_responsive_control(
405	'image_border_radius',
406	[
407	'label' => esc_html__('Border Radius', 'uicore-elements'),
408	'type' => Controls_Manager::DIMENSIONS,
409	'size_units' => ['px', '%', 'em', 'rem', 'custom'],
410	'selectors' => [
411	'{{WRAPPER}} img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
412	],
413	]
414	);
415
416	$this->add_group_control(
417	Group_Control_Box_Shadow::get_type(),
418	[
419	'name' => 'image_box_shadow',
420	'exclude' => [
421	'box_shadow_position',
422	],
423	'selector' => '{{WRAPPER}} img',
424	]
425	);
426
427	$this->end_controls_section();
428
429	$this->start_controls_section(
430	'section_style_caption',
431	[
432	'label' => esc_html__('Caption', 'uicore-elements'),
433	'tab' => Controls_Manager::TAB_STYLE,
434	'condition' => [
435	'image[url]!' => '',
436	'caption_source!' => 'none',
437	],
438	]
439	);
440
441	$this->add_responsive_control(
442	'caption_align',
443	[
444	'label' => esc_html__('Alignment', 'uicore-elements'),
445	'type' => Controls_Manager::CHOOSE,
446	'options' => [
447	'left' => [
448	'title' => esc_html__('Left', 'uicore-elements'),
449	'icon' => 'eicon-text-align-left',
450	],
451	'center' => [
452	'title' => esc_html__('Center', 'uicore-elements'),
453	'icon' => 'eicon-text-align-center',
454	],
455	'right' => [
456	'title' => esc_html__('Right', 'uicore-elements'),
457	'icon' => 'eicon-text-align-right',
458	],
459	'justify' => [
460	'title' => esc_html__('Justified', 'uicore-elements'),
461	'icon' => 'eicon-text-align-justify',
462	],
463	],
464	'default' => '',
465	'selectors' => [
466	'{{WRAPPER}} .widget-image-caption' => 'text-align: {{VALUE}};',
467	],
468	]
469	);
470
471	$this->add_control(
472	'text_color',
473	[
474	'label' => esc_html__('Text Color', 'uicore-elements'),
475	'type' => Controls_Manager::COLOR,
476	'selectors' => [
477	'{{WRAPPER}} .widget-image-caption' => 'color: {{VALUE}};',
478	],
479	'default' => 'var(--e-global-color-uicore_body)',
480
481	]
482	);
483
484	$this->add_control(
485	'caption_background_color',
486	[
487	'label' => esc_html__('Background Color', 'uicore-elements'),
488	'type' => Controls_Manager::COLOR,
489	'selectors' => [
490	'{{WRAPPER}} .widget-image-caption' => 'background-color: {{VALUE}};',
491	],
492	]
493	);
494
495	$this->add_group_control(
496	Group_Control_Typography::get_type(),
497	[
498	'name' => 'caption_typography',
499	'selector' => '{{WRAPPER}} .widget-image-caption',
500	'global' => [
501	'default' => Global_Typography::TYPOGRAPHY_TEXT,
502	],
503	]
504	);
505
506	$this->add_group_control(
507	Group_Control_Text_Shadow::get_type(),
508	[
509	'name' => 'caption_text_shadow',
510	'selector' => '{{WRAPPER}} .widget-image-caption',
511	]
512	);
513
514	$this->add_responsive_control(
515	'caption_space',
516	[
517	'label' => esc_html__('Spacing', 'uicore-elements'),
518	'type' => Controls_Manager::SLIDER,
519	'size_units' => ['px', 'em', 'rem', 'custom'],
520	'range' => [
521	'px' => [
522	'max' => 100,
523	],
524	'em' => [
525	'min' => 0,
526	'max' => 10,
527	],
528	'rem' => [
529	'min' => 0,
530	'max' => 10,
531	],
532	],
533	'selectors' => [
534	'{{WRAPPER}} .widget-image-caption' => 'margin-block-start: {{SIZE}}{{UNIT}};',
535	],
536	]
537	);
538
539	$this->end_controls_section();
540	}
541
542	protected function render()
543	{
544	$settings = $this->get_settings_for_display();
545
546	$id = get_post_thumbnail_id(get_the_ID());
547	$url = get_the_post_thumbnail_url(get_the_ID(), $settings['image_size']);
548
549	// Build image data to be used in Elementor render method
550	if (!$id \|\| !$url) {
551	if ($this->is_edit_mode()) {
552	$settings['image'] = [
553	'url' => Utils::get_placeholder_image_src(),
554	'id' => 0,
555	];
556	} else {
557	return;
558	}
559
560	// Featured image set case
561	} else {
562	$settings['image'] = [
563	'id' => $id,
564	'url' => $url,
565	];
566	}
567
568	$link = $this->get_link_url($settings);
569
570	if ($link) {
571	$this->add_link_attributes('link', $link);
572
573	if ($this->is_edit_mode()) {
574	$this->add_render_attribute('link', [
575	'class' => 'elementor-clickable',
576	]);
577	}
578	} ?>
579
580	<?php if ($link) : ?>
581	<a <?php $this->print_render_attribute_string('link'); ?>>
582	<?php endif; ?>
583	<?php Group_Control_Image_Size::print_attachment_image_html($settings); ?>
584	<?php if ($link) : ?>
585	</a>
586	<?php endif; ?>
587	<?php
588
589	}
590
591	protected function get_link_url($settings)
592	{
593	if ('none' === $settings['link_to']) {
594	return false;
595	}
596
597	if ('custom' === $settings['link_to']) {
598	if (empty($settings['link']['url'])) {
599	return false;
600	}
601
602	return $settings['link'];
603	}
604
605	return [
606	'url' => get_permalink(get_the_ID()),
607	];
608	}
609	}
610	\Elementor\Plugin::instance()->widgets_manager->register(new Featured_Image());
611