king-addons / includes / widgets / Image_Grid / Image_Grid.php

Image_Grid.php in King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder 51.1.82, at includes/widgets/Image_Grid/Image_Grid.php

407 lines 14.5 KB

Raw Download Zip

1	<?php /** @noinspection SpellCheckingInspection, DuplicatedCode, PhpUnused */
2
3	namespace King_Addons;
4
5	use Elementor\Controls_Manager;
6	use Elementor\Group_Control_Border;
7	use Elementor\Group_Control_Box_Shadow;
8	use Elementor\Group_Control_Css_Filter;
9	use Elementor\Group_Control_Image_Size;
10	use Elementor\Repeater;
11	use Elementor\Utils;
12	use Elementor\Widget_Base;
13
14	if (!defined('ABSPATH')) {
15	exit; // Exit if accessed directly.
16	}
17
18
19
20	class Image_Grid extends Widget_Base
21	{
22
23
24	public function get_name(): string
25	{
26	return 'king-addons-image-grid';
27	}
28
29	public function get_title(): string
30	{
31	return esc_html__('Image Grid', 'king-addons');
32	}
33
34	public function get_icon(): string
35	{
36	return 'king-addons-icon king-addons-image-grid';
37	}
38
39	public function get_script_depends(): array
40	{
41	return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-isotope-isotope', KING_ADDONS_ASSETS_UNIQUE_KEY . '-imagesloaded-imagesloaded'];
42	}
43
44	public function get_style_depends(): array
45	{
46	return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-image-grid-style'];
47	}
48
49	public function get_categories(): array
50	{
51	return ['king-addons'];
52	}
53
54	public function get_keywords(): array
55	{
56	return ['media', 'image', 'video', 'gallery', 'grid', 'masonry', 'fit', 'fitRows', 'rows', 'images', 'even',
57	'card', 'carousel', 'slider', 'scroller', 'swiper', 'content', 'button', 'dot', 'dots', 'navigation',
58	'cards', 'wheel', 'touch', 'nav', 'navigation', 'animation', 'effect', 'animated', 'template', 'link',
59	'left', 'right', 'top', 'bottom', 'vertical', 'horizontal', 'mouse', 'dragging', 'hover', 'over',
60	'hover over', 'picture', 'float', 'floating', 'sticky', 'click', 'target', 'point', 'king', 'addons',
61	'mouseover', 'page', 'blog posts', 'kingaddons', 'king-addons', 'team', 'members', 'testimonial',
62	'king addons', 'testimonials', 'reviews', ' team memebers', 'drag', 'scroll', 'scrolling', 'tabs', 'tab'];
63	}
64
65	public function get_custom_help_url()
66	{
67	return 'mailto:bug@kingaddons.com?subject=Bug Report - King Addons&body=Please describe the issue';
68	}
69
70	protected function register_controls(): void
71	{
72	$this->start_controls_section(
73	'kng_image_grid_content_section_gallery_settings',
74	[
75	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Grid Settings', 'king-addons'),
76	'tab' => Controls_Manager::TAB_CONTENT,
77	]
78	);
79
80	$this->add_control(
81	'kng_image_grid_grid_layout',
82	array(
83	'label' => esc_html__('Grid Layout', 'king-addons'),
84	'type' => Controls_Manager::SELECT,
85	'options' => [
86	'fitRows' => esc_html__('Fit Rows', 'king-addons'),
87	'masonry' => esc_html__('Masonry', 'king-addons'),
88	],
89	'default' => 'masonry',
90	)
91	);
92
93	$this->add_responsive_control(
94	'kng_image_grid_fitrows_image_height',
95	[
96	'label' => esc_html__('Image Height (px)', 'king-addons'),
97	'type' => Controls_Manager::NUMBER,
98	'step' => 1,
99	'min' => 0,
100	'default' => 200,
101	'render_type' => 'template',
102	'selectors' => [
103	'{{WRAPPER}} .king-addons-image-grid-item' => 'height: {{SIZE}}px;',
104	],
105	'condition' => [
106	'kng_image_grid_grid_layout' => 'fitRows'
107	]
108	]
109	);
110
111	$this->add_responsive_control(
112	'kng_image_grid_fitrows_image_fit',
113	[
114	'label' => esc_html__('Image Fit', 'king-addons'),
115	'type' => Controls_Manager::SELECT,
116	'options' => [
117	'cover' => esc_html__('Cover', 'king-addons'),
118	'contain' => esc_html__('Contain', 'king-addons'),
119	],
120	'default' => 'cover',
121	'selectors' => [
122	'{{WRAPPER}} .king-addons-image-grid-item img' => 'object-fit: {{VALUE}};',
123	],
124	'condition' => [
125	'kng_image_grid_grid_layout' => 'fitRows'
126	]
127	]
128	);
129
130	$this->add_responsive_control(
131	'kng_image_grid_fitrows_image_fit_position',
132	[
133	'label' => esc_html__('Image Fit Position', 'king-addons'),
134	'type' => Controls_Manager::SELECT,
135	'options' => [
136	'top' => esc_html__('Top', 'king-addons'),
137	'bottom' => esc_html__('Bottom', 'king-addons'),
138	'left' => esc_html__('Left', 'king-addons'),
139	'right' => esc_html__('Right', 'king-addons'),
140	'center' => esc_html__('Center', 'king-addons'),
141	],
142	'default' => 'center',
143	'selectors' => [
144	'{{WRAPPER}} .king-addons-image-grid-item img' => 'object-position: {{VALUE}};',
145	],
146	'condition' => [
147	'kng_image_grid_grid_layout' => 'fitRows'
148	]
149	]
150	);
151
152	$this->add_responsive_control(
153	'kng_image_grid_number_of_columns',
154	[
155	'label' => esc_html__('Number of columns', 'king-addons'),
156	'type' => Controls_Manager::NUMBER,
157	'step' => 1,
158	'min' => 1,
159	'render_type' => 'template',
160	'desktop_default' => 4,
161	'tablet_default' => 3,
162	'mobile_default' => 2,
163	'selectors' => [
164	'{{WRAPPER}} .king-addons-image-grid-item' => 'width: calc(100% / {{SIZE}});',
165	],
166	]
167	);
168
169	$this->add_responsive_control(
170	'kng_image_grid_space_between',
171	[
172	'label' => esc_html__('Space between (px)', 'king-addons'),
173	'type' => Controls_Manager::NUMBER,
174	'step' => 1,
175	'min' => 0,
176	'desktop_default' => 5,
177	'tablet_default' => 5,
178	'mobile_default' => 5,
179	'selectors' => [
180	'{{WRAPPER}} .king-addons-image-grid-item' => 'padding: {{SIZE}}px;',
181	],
182	]
183	);
184
185	$this->end_controls_section();
186
187	/** SECTION: Images ===================== */
188	$this->start_controls_section(
189	'kng_image_grid_content_section_items',
190	[
191	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Items', 'king-addons'),
192	'tab' => Controls_Manager::TAB_CONTENT,
193	]
194	);
195
196	$repeater = new Repeater();
197
198	$repeater->add_control(
199	'kng_image_grid_image',
200	[
201	'label' => '<b>' . esc_html__('Image', 'king-addons') . '</b>',
202	'type' => Controls_Manager::MEDIA,
203	'default' => [
204	'url' => Utils::get_placeholder_image_src(),
205	]
206	]
207	);
208
209	$repeater->add_group_control(
210	Group_Control_Image_Size::get_type(),
211	[
212	'name' => 'kng_image_grid_image_size',
213	'default' => 'full',
214	]
215	);
216
217	$default_cards = [
218	'kng_image_grid_image' => Utils::get_placeholder_image_src(),
219	];
220
221	/** @noinspection HtmlUnknownTarget */
222	$this->add_control(
223	'kng_image_grid_content_items',
224	[
225	'type' => Controls_Manager::REPEATER,
226	'fields' => $repeater->get_controls(),
227	'default' => array_fill(0, 8, $default_cards),
228	'title_field' => '<img alt="" class="king-addons-repeater-list-img-icon" src="{{kng_image_grid_image.url}}"> ',
229	]
230	);
231
232	$this->end_controls_section();
233	/** END SECTION: Images ===================== */
234
235	/** STYLE SECTION: Images ===================== */
236	$this->start_controls_section(
237	'kng_image_grid_style_section_image',
238	[
239	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Image', 'king-addons'),
240	'tab' => Controls_Manager::TAB_STYLE,
241	]
242	);
243
244	$this->add_control(
245	'kng_image_grid_image_scale_switcher',
246	[
247	'label' => esc_html__('Scale image on hover', 'king-addons'),
248	'type' => Controls_Manager::SWITCHER,
249	'default' => 'yes',
250	]
251	);
252
253	$this->add_responsive_control(
254	'kng_image_grid_image_scale_hover',
255	[
256	'label' => esc_html__('Scale size', 'king-addons'),
257	'type' => Controls_Manager::NUMBER,
258	'min' => 0,
259	'step' => 0.01,
260	'default' => 1.1,
261	'selectors' => [
262	'{{WRAPPER}} .king-addons-image-grid-item img:hover' => 'transform: scale({{SIZE}});'
263	],
264	'condition' => [
265	'kng_image_grid_image_scale_switcher' => 'yes',
266	]
267	]
268	);
269
270	$this->add_responsive_control(
271	'kng_image_grid_image_transition',
272	[
273	'label' => esc_html__('Transition duration on hover (ms)', 'king-addons'),
274	'type' => Controls_Manager::NUMBER,
275	'min' => 0,
276	'step' => 10,
277	'default' => 300,
278	'selectors' => [
279	'{{WRAPPER}} .king-addons-image-grid-item img' => 'transition: all {{SIZE}}ms cubic-bezier(.25,.46,.45,.94);'
280	],
281	]
282	);
283
284	$this->add_group_control(
285	Group_Control_Css_Filter::get_type(),
286	[
287	'label' => esc_html__('CSS Filter', 'king-addons'),
288	'name' => 'kng_image_grid_image_css_filters',
289	'selector' => '{{WRAPPER}} .king-addons-image-grid-item img',
290	]
291	);
292
293	$this->add_group_control(
294	Group_Control_Css_Filter::get_type(),
295	[
296	'label' => esc_html__('CSS Filter for image on hover', 'king-addons'),
297	'name' => 'kng_image_grid_image_css_filters_hover',
298	'selector' => '{{WRAPPER}} .king-addons-image-grid-item img:hover',
299	]
300	);
301
302	$this->add_group_control(
303	Group_Control_Box_Shadow::get_type(),
304	[
305	'name' => 'kng_image_grid_image_box_shadow',
306	'selector' => '{{WRAPPER}} .king-addons-image-grid-item .king-addons-image-grid-item-inner',
307	]
308	);
309
310	$this->add_group_control(
311	Group_Control_Border::get_type(),
312	[
313	'name' => 'kng_image_grid_image_border',
314	'selector' => '{{WRAPPER}} .king-addons-image-grid-item .king-addons-image-grid-item-inner',
315	'fields_options' => [
316	'border' => [
317	'default' => 'none',
318	],
319	],
320	]
321	);
322
323	$this->add_responsive_control(
324	'kng_image_grid_image_border_radius',
325	[
326	'label' => esc_html__('Border Radius', 'king-addons'),
327	'type' => Controls_Manager::DIMENSIONS,
328	'size_units' => ['px', '%'],
329	'default' => [
330	'top' => 0,
331	'right' => 0,
332	'bottom' => 0,
333	'left' => 0,
334	'unit' => 'px',
335	],
336	'selectors' => [
337	'{{WRAPPER}} .king-addons-image-grid-item .king-addons-image-grid-item-inner' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
338	]
339	]
340	);
341
342	$this->end_controls_section();
343	/** END SECTION: Images ===================== */
344
345	}
346
347	protected function render(): void
348	{
349	$settings = Core::displaySettings($this);
350	$this_ID = $this->get_id();
351
352	// Define allowed tags and attributes
353	$allowed_tags = wp_kses_allowed_html('post');
354	$allowed_tags['img']['srcset'] = true;
355	$allowed_tags['img']['sizes'] = true;
356	$allowed_tags['img']['decoding'] = true;
357	$allowed_tags['img']['loading'] = true;
358
359	echo '<div id="king-addons-image-grid-' . esc_attr($this_ID) . '" class="king-addons-image-grid">';
360
361	/** @noinspection PhpUnusedLocalVariableInspection */
362	foreach ($settings['kng_image_grid_content_items'] as $key => $item) {
363	echo '<div class="king-addons-image-grid-item king-addons-image-grid-item-' . esc_attr($this_ID) . '">';
364	echo '<div class="king-addons-image-grid-item-inner">';
365
366	$image_html = Group_Control_Image_Size::get_attachment_image_html($item, 'kng_image_grid_image_size', 'kng_image_grid_image');
367	echo wp_kses($image_html, $allowed_tags);
368
369	echo '</div>';
370	echo '</div>';
371	}
372
373	echo '</div>';
374
375	$js_grid = "
376	(function ($) {
377	if (document.readyState === 'complete') {
378	let " . '$grid' . "
379	= $('#king-addons-image-grid-" . esc_js($this_ID) . "').isotope({
380	itemSelector: '.king-addons-image-grid-item-" . esc_js($this_ID) . "',
381	layoutMode: '" . esc_js($settings['kng_image_grid_grid_layout']) . "',
382	});
383
384	" . '$grid' . ".imagesLoaded().progress(function () {
385	" . '$grid' . ".isotope('layout');
386	});
387
388	} else {
389	window.addEventListener('load', function () {
390
391	let " . '$grid' . "
392	= $('#king-addons-image-grid-" . esc_js($this_ID) . "').isotope({
393	itemSelector: '.king-addons-image-grid-item-" . esc_js($this_ID) . "',
394	layoutMode: '" . esc_js($settings['kng_image_grid_grid_layout']) . "',
395	});
396
397	" . '$grid' . ".imagesLoaded().progress(function () {
398	" . '$grid' . ".isotope('layout');
399	});
400
401	});
402	}
403	})(jQuery);
404	";
405	wp_print_inline_script_tag($js_grid);
406	}
407	}