ultimate-post / blocks / Image.php

Image.php in Post Grid Gutenberg Blocks – PostX 2.9.2, at blocks/Image.php

629 lines 25.6 KB

Raw Download Zip

1	<?php
2	namespace ULTP\blocks;
3
4	defined('ABSPATH') \|\| exit;
5
6	class Image{
7	public function __construct() {
8	add_action('init', array($this, 'register'));
9	}
10	public function get_attributes($default = false) {
11
12	$attributes = array(
13	'blockId' => [
14	'type' => 'string',
15	'default' => '',
16	],
17	'previewImg' => [
18	'type' => 'string',
19	'default' => '',
20	],
21	//--------------------------
22	// Image Setting/Style
23	//--------------------------
24	'imageUpload' => [
25	'type' => 'object',
26	'default' => (object)[ 'id'=>'999999', 'url' => ULTP_URL.'assets/img/ultp-placeholder.jpg' ],
27	],
28	'linkType' => [
29	'type' => 'string',
30	'default' => 'link',
31	],
32	'imgLink' => [
33	'type' => 'string',
34	'default' => '',
35	],
36	'linkTarget' => [
37	'type' => 'string',
38	'default' => '_blank',
39	],
40	'imgAlt' => [
41	'type' => 'string',
42	'default' => 'Image',
43	],
44	'imgAlignment' => [
45	'type' => 'object',
46	'default' => ['lg' => 'left'],
47	'style' => [
48	(object)[
49	'selector'=>'{{ULTP}} .ultp-image-block-wrapper {text-align: {{imgAlignment}};}'
50	],
51	],
52	],
53	'imgWidth' => [
54	'type' => 'object',
55	'default' => (object)['lg' =>'', 'ulg' =>'px'],
56	'style' => [
57	(object)[
58	'selector'=>'{{ULTP}} .ultp-image-block { max-width: {{imgWidth}}; }'
59	],
60	],
61	],
62	'imgHeight' => [
63	'type' => 'object',
64	'default' => (object)['lg' =>'', 'unit' =>'px'],
65	'style' => [
66	(object)[
67	'selector'=>'{{ULTP}} .ultp-image-block {object-fit: cover; height: {{imgHeight}}; } {{ULTP}} .ultp-image-block .ultp-image {height: 100%;}'
68	],
69	],
70	],
71	'imageScale' => [
72	'type' => 'string',
73	'default' => 'cover',
74	'style' => [
75	(object)[
76	'selector'=>'{{ULTP}} .ultp-image-block img {object-fit: {{imageScale}};}'
77	],
78	],
79	],
80	'imgAnimation' => [
81	'type' => 'string',
82	'default' => 'none',
83	],
84	'imgGrayScale' => [
85	'type' => 'object',
86	'default' => (object)['lg' =>'0', 'ulg' =>'%', 'unit' =>'%'],
87	'style' => [
88	(object)[
89	'selector'=>'{{ULTP}} .ultp-image { filter: grayscale({{imgGrayScale}}); }'
90	],
91	],
92	],
93	'imgHoverGrayScale' => [
94	'type' => 'object',
95	'default' => (object)['lg' =>'0', 'unit' =>'%'],
96	'style' => [
97	(object)[
98	'selector'=>'{{ULTP}} .ultp-image-block-wrapper:hover .ultp-image { filter: grayscale({{imgHoverGrayScale}}); }'
99	],
100	],
101	],
102	'imgRadius' => [
103	'type' => 'object',
104	'default' => (object)['lg' =>'', 'unit' =>'px'],
105	'style' => [
106	(object)[
107	'selector'=>'{{ULTP}} .ultp-image-block { border-radius:{{imgRadius}}; }'
108	],
109	],
110	],
111	'imgHoverRadius' => [
112	'type' => 'object',
113	'default' => (object)['lg' =>'', 'unit' =>'px'],
114	'style' => [
115	(object)[
116	'selector'=>'{{ULTP}} .ultp-image-block-wrapper:hover .ultp-image-block { border-radius:{{imgHoverRadius}}; }'
117	],
118	],
119	],
120	'imgShadow' => [
121	'type' => 'object',
122	'default' => (object)['openShadow' => 0, 'width' => (object)['top' => 1, 'right' => 1, 'bottom' => 1, 'left' => 1],'color' => '#009fd4'],
123	'style' => [
124	(object)[
125	'selector'=>'{{ULTP}} .ultp-image-block'
126	],
127	],
128	],
129	'imgHoverShadow' => [
130	'type' => 'object',
131	'default' => (object)['openShadow' => 0, 'width' => (object)['top' => 1, 'right' => 1, 'bottom' => 1, 'left' => 1],'color' => '#009fd4'],
132	'style' => [
133	(object)[
134	'selector'=>'{{ULTP}} .ultp-image-block-wrapper:hover .ultp-image-block'
135	],
136	],
137	],
138	'imgMargin' => [
139	'type' => 'object',
140	'default' => (object)['lg'=>''],
141	'style' => [
142	(object)[
143	'selector'=>'{{ULTP}} .ultp-image-block-wrapper { margin: {{imgMargin}}; }'
144	],
145	],
146	],
147	'imgOverlay' => [
148	'type' => 'boolean',
149	'default' => false,
150	],
151	'imgOverlayType' => [
152	'type' => 'string',
153	'default' => 'default',
154	'style' => [
155	(object)[
156	'depends' => [
157	(object)['key'=>'imgOverlay','condition'=>'==','value'=>true],
158	]
159	],
160	]
161	],
162	'overlayColor' => [
163	'type' => 'object',
164	'default' => (object)['openColor' => 1, 'type' => 'color', 'color' => '#0e1523'],
165	'style' => [
166	(object)[
167	'depends' => [
168	(object)['key'=>'imgOverlayType','condition'=>'==','value'=>'custom'],
169	],
170	'selector'=>'{{ULTP}} .ultp-image-block::before'
171	],
172	],
173
174	],
175	'imgOpacity' => [
176	'type' => 'string',
177	'default' => .7,
178	'style' => [
179	(object)[
180	'depends' => [
181	(object)['key'=>'imgOverlayType','condition'=>'==','value'=>'custom'],
182	],
183	'selector'=>'{{ULTP}} .ultp-image-block::before { opacity: {{imgOpacity}}; }'
184	],
185	],
186	],
187	'imgLazy' => [
188	'type' => 'boolean',
189	'default' => false,
190	],
191
192	//Caption
193	'headingText' => [
194	'type' => 'string',
195	'default' => 'This is a Image Example',
196	],
197	'headingEnable' => [
198	'type' => 'boolean',
199	'default' => false
200	],
201	'headingColor' => [
202	'type' => 'string',
203	'default' => '',
204	'style' => [
205	(object)[
206	'depends' => [
207	(object)['key'=>'headingEnable','condition'=>'==','value'=>true],
208	],
209	'selector'=>'{{ULTP}} .ultp-image-block-wrapper .ultp-image-caption { color:{{headingColor}}; }'
210	],
211	],
212	],
213	'alignment' => [
214	'type' => 'object',
215	'default' => ['lg' => 'left'],
216	'style' => [
217	(object)[
218	'depends' => [
219	(object)['key'=>'headingEnable','condition'=>'==','value'=>true],
220	],
221	'selector'=>'{{ULTP}} .ultp-image-block-wrapper .ultp-image-caption {text-align: {{alignment}};}'
222	],
223	],
224	],
225	'headingTypo' => [
226	'type' => 'object',
227	'default' => (object)['openTypography' => 1,'size' => (object)['lg' => '14', 'unit' => 'px'], 'height' => (object)['lg' => '', 'unit' => 'px'],'decoration' => '', 'transform' => '', 'family'=>'','weight'=>''],
228	'style' => [
229	(object)[
230	'depends' => [
231	(object)['key'=>'headingEnable','condition'=>'==','value'=>true],
232	],
233	'selector'=>'{{ULTP}} .ultp-image-block-wrapper .ultp-image-caption'
234	],
235	],
236	],
237	'headingMargin' => [
238	'type' => 'object',
239	'default' => (object)['lg' =>(object)['top' => '','bottom' => '','left' => '', 'right' => '', 'unit' =>'px']],
240	'style' => [
241	(object)[
242	'depends' => [
243	(object)['key'=>'headingEnable','condition'=>'==','value'=>true],
244	],
245	'selector'=>'{{ULTP}} .ultp-image-block-wrapper .ultp-image-caption { margin:{{headingMargin}}; }'
246	],
247	],
248	],
249
250
251	//--------------------------
252	// Button Setting & Style
253	//--------------------------
254	'buttonEnable' => [
255	'type' => 'boolean',
256	'default' => false
257	],
258	'btnText' => [
259	'type' => 'string',
260	'default' => 'Free Download',
261	],
262	'btnLink' => [
263	'type' => 'string',
264	'default' => '#',
265	],
266	'btnTarget' => [
267	'type' => 'string',
268	'default' => '_blank',
269	],
270	'btnPosition' => [
271	'type' => 'string',
272	'default' => 'centerCenter',
273	],
274
275	//style
276	'btnTypo' => [
277	'type' => 'object',
278	'default' => (object)['openTypography' => 1, 'size' => (object)['lg' =>14, 'unit' =>'px'], 'height' => (object)['lg' =>20, 'unit' =>'px'], 'spacing' => (object)['lg' =>0, 'unit' =>'px'], 'transform' => '', 'weight' => '', 'decoration' => 'none','family'=>'' ],
279	'style' => [
280	(object)[
281	'depends' => [
282	(object)['key'=>'linkType','condition'=>'==','value'=>'button'],
283	],
284	'selector'=>'{{ULTP}} .ultp-image-block-wrapper .ultp-image-button a'
285	],
286	],
287	],
288	'btnColor' => [
289	'type' => 'string',
290	'default' => '#fff',
291	'style' => [
292	(object)[
293	'depends' => [
294	(object)['key'=>'linkType','condition'=>'==','value'=>'button'],
295	],
296	'selector'=>'{{ULTP}} .ultp-image-block-wrapper .ultp-image-button a { color:{{btnColor}}; }'
297	],
298	],
299	],
300	'btnBgColor' => [
301	'type' => 'object',
302	'default' => (object)['openColor' => 1,'type' => 'color', 'color' => '#037fff'],
303	'style' => [
304	(object)[
305	'depends' => [
306	(object)['key'=>'linkType','condition'=>'==','value'=>'button'],
307	],
308	'selector'=>'{{ULTP}} .ultp-image-block-wrapper .ultp-image-button a'
309	],
310	],
311	],
312	'btnBorder' => [
313	'type' => 'object',
314	'default' => (object)['openBorder'=>0, 'width' => (object)[ 'top' => 1, 'right' => 1, 'bottom' => 1, 'left' => 1],'color' => '#009fd4','type' => 'solid' ],
315	'style' => [
316	(object)[
317	'depends' => [
318	(object)['key'=>'linkType','condition'=>'==','value'=>'button'],
319	],
320	'selector'=>'{{ULTP}} .ultp-image-block-wrapper .ultp-image-button a'
321	],
322	],
323	],
324	'btnRadius' => [
325	'type' => 'object',
326	'default' => (object)['lg' =>'2', 'unit' =>'px'],
327	'style' => [
328	(object)[
329	'depends' => [
330	(object)['key'=>'linkType','condition'=>'==','value'=>'button'],
331	],
332	'selector'=>'{{ULTP}} .ultp-image-block-wrapper .ultp-image-button a { border-radius:{{btnRadius}}; }'
333	],
334	],
335	],
336	'btnShadow' => [
337	'type' => 'object',
338	'default' => (object)['openShadow' => 0, 'width' => (object)['top' => 1, 'right' => 1, 'bottom' => 1, 'left' => 1],'color' => '#009fd4'],
339	'style' => [
340	(object)[
341	'depends' => [
342	(object)['key'=>'linkType','condition'=>'==','value'=>'button'],
343	],
344	'selector'=>'{{ULTP}} .ultp-image-block-wrapper .ultp-image-button a'
345	],
346	],
347	],
348	'btnHoverColor' => [
349	'type' => 'string',
350	'default' => '#fff',
351	'style' => [
352	(object)[
353	'depends' => [
354	(object)['key'=>'linkType','condition'=>'==','value'=>'button'],
355	],
356	'selector'=>'{{ULTP}} .ultp-image-block-wrapper .ultp-image-button a:hover { color:{{btnHoverColor}}; }'
357	],
358	],
359	],
360	'btnBgHoverColor' => [
361	'type' => 'object',
362	'default' => (object)['openColor' => 1,'type' => 'color', 'color' => '#1239e2'],
363	'style' => [
364	(object)[
365	'depends' => [
366	(object)['key'=>'linkType','condition'=>'==','value'=>'button'],
367	],
368	'selector'=>'{{ULTP}} .ultp-image-block-wrapper .ultp-image-button a:hover'
369	],
370	],
371	],
372	'btnHoverBorder' => [
373	'type' => 'object',
374	'default' => (object)['openBorder'=>0, 'width' => (object)[ 'top' => 1, 'right' => 1, 'bottom' => 1, 'left' => 1],'color' => '#009fd4','type' => 'solid' ],
375	'style' => [
376	(object)[
377	'depends' => [
378	(object)['key'=>'linkType','condition'=>'==','value'=>'button'],
379	],
380	'selector'=>'{{ULTP}} .ultp-image-block-wrapper .ultp-image-button a:hover'
381	],
382	],
383	],
384	'btnHoverRadius' => [
385	'type' => 'object',
386	'default' => (object)['lg' =>'', 'unit' =>'px'],
387	'style' => [
388	(object)[
389	'depends' => [
390	(object)['key'=>'linkType','condition'=>'==','value'=>'button'],
391	],
392	'selector'=>'{{ULTP}} .ultp-image-block-wrapper .ultp-image-button a:hover { border-radius:{{btnHoverRadius}}; }'
393	],
394	],
395	],
396	'btnHoverShadow' => [
397	'type' => 'object',
398	'default' => (object)['openShadow' => 0, 'width' => (object)['top' => 1, 'right' => 1, 'bottom' => 1, 'left' => 1],'color' => '#009fd4'],
399	'style' => [
400	(object)[
401	'depends' => [
402	(object)['key'=>'linkType','condition'=>'==','value'=>'button'],
403	],
404	'selector'=>'{{ULTP}} .ultp-image-block-wrapper .ultp-image-button a:hover'
405	],
406	],
407	],
408	'btnSacing' => [
409	'type' => 'object',
410	'default' => (object)['lg' =>(object)['top' => 0,'bottom' => 0,'left' => 0,'right' => 0, 'unit' =>'px']],
411	'style' => [
412	(object)[
413	'depends' => [
414	(object)['key'=>'linkType','condition'=>'==','value'=>'button'],
415	],
416	'selector'=>'{{ULTP}} .ultp-image-block-wrapper .ultp-image-button a { margin:{{btnSacing}}; }'
417	],
418	],
419	],
420	'btnPadding' => [
421	'type' => 'object',
422	'default' => (object)['lg' =>(object)['top' => "6",'bottom' => "6",'left' => "12",'right' => "12", 'unit' =>'px']],
423	'style' => [
424	(object)[
425	'depends' => [
426	(object)['key'=>'linkType','condition'=>'==','value'=>'button'],
427	],
428	'selector'=>'{{ULTP}} .ultp-image-block-wrapper .ultp-image-button a { padding:{{btnPadding}}; }'
429	],
430	],
431	],
432
433	//--------------------------
434	// Wrapper Style
435	//--------------------------
436	'wrapBg' => [
437	'type' => 'object',
438	'default' => (object)['openColor' => 0, 'type' => 'color', 'color' => '#f5f5f5'],
439	'style' => [
440	(object)[
441	'selector'=>'{{ULTP}} .ultp-block-wrapper'
442	],
443	],
444	],
445	'wrapBorder' => [
446	'type' => 'object',
447	'default' => (object)['openBorder'=>0, 'width' =>(object)['top' => 1, 'right' => 1, 'bottom' => 1, 'left' => 1],'color' => '#009fd4','type' => 'solid'],
448	'style' => [
449	(object)[
450	'selector'=>'{{ULTP}} .ultp-block-wrapper'
451	],
452	],
453	],
454	'wrapShadow' => [
455	'type' => 'object',
456	'default' => (object)['openShadow' => 0, 'width' => (object)['top' => 1, 'right' => 1, 'bottom' => 1, 'left' => 1],'color' => '#009fd4'],
457	'style' => [
458	(object)[
459	'selector'=>'{{ULTP}} .ultp-block-wrapper'
460	],
461	],
462	],
463	'wrapRadius' => [
464	'type' => 'object',
465	'default' => (object)['lg' =>'', 'unit' =>'px'],
466	'style' => [
467	(object)[
468	'selector'=>'{{ULTP}} .ultp-block-wrapper { border-radius:{{wrapRadius}}; }'
469	],
470	],
471	],
472	'wrapHoverBackground' => [
473	'type' => 'object',
474	'default' => (object)['openColor' => 0, 'type' => 'color', 'color' => '#037fff'],
475	'style' => [
476	(object)[
477	'selector'=>'{{ULTP}} .ultp-block-wrapper:hover'
478	],
479	],
480	],
481	'wrapHoverBorder' => [
482	'type' => 'object',
483	'default' => (object)['openBorder'=>0, 'width' => (object)['top' => 1, 'right' => 1, 'bottom' => 1, 'left' => 1],'color' => '#009fd4','type' => 'solid'],
484	'style' => [
485	(object)[
486	'selector'=>'{{ULTP}} .ultp-block-wrapper:hover'
487	],
488	],
489	],
490	'wrapHoverRadius' => [
491	'type' => 'object',
492	'default' => (object)['lg' =>'', 'unit' =>'px'],
493	'style' => [
494	(object)[
495	'selector'=>'{{ULTP}} .ultp-block-wrapper:hover { border-radius:{{wrapHoverRadius}}; }'
496	],
497	],
498	],
499	'wrapHoverShadow' => [
500	'type' => 'object',
501	'default' => (object)['openShadow' => 0, 'width' => (object)['top' => 1, 'right' => 1, 'bottom' => 1, 'left' => 1],'color' => '#009fd4'],
502	'style' => [
503	(object)[
504	'selector'=>'{{ULTP}} .ultp-block-wrapper:hover'
505	],
506	],
507	],
508	'wrapMargin' => [
509	'type' => 'object',
510	'default' => (object)['lg' =>(object)['top' => '','bottom' => '', 'unit' =>'px']],
511	'style' => [
512	(object)[
513	'selector'=>'{{ULTP}} .ultp-block-wrapper { margin:{{wrapMargin}}; }'
514	],
515	],
516	],
517	'wrapOuterPadding' => [
518	'type' => 'object',
519	'default' => (object)['lg' =>(object)['top' => '','bottom' => '','left' => '', 'right' => '', 'unit' =>'px']],
520	'style' => [
521	(object)[
522	'selector'=>'{{ULTP}} .ultp-block-wrapper { padding:{{wrapOuterPadding}}; }'
523	],
524	],
525	],
526	'advanceId' => [
527	'type' => 'string',
528	'default' => '',
529	],
530	'advanceZindex' => [
531	'type' => 'string',
532	'default' => '',
533	'style' => [
534	(object)[
535	'selector' => '{{ULTP}} .ultp-block-wrapper{z-index:{{advanceZindex}};}'
536	],
537	],
538	],
539	'hideExtraLarge' => [
540	'type' => 'boolean',
541	'default' => false,
542	'style' => [
543	(object)[
544	'selector' => '{{ULTP}} {display:none;}'
545	],
546	],
547	],
548	'hideTablet' => [
549	'type' => 'boolean',
550	'default' => false,
551	'style' => [
552	(object)[
553	'selector' => '{{ULTP}} {display:none;}'
554	],
555	],
556	],
557	'hideMobile' => [
558	'type' => 'boolean',
559	'default' => false,
560	'style' => [
561	(object)[
562	'selector' => '{{ULTP}} {display:none;}'
563	],
564	],
565	],
566	'advanceCss' => [
567	'type' => 'string',
568	'default' => '',
569	'style' => [(object)['selector' => '']],
570	]
571
572	);
573
574	if ($default) {
575	$temp = array();
576	foreach ($attributes as $key => $value) {
577	if (isset($value['default'])) {
578	$temp[$key] = $value['default'];
579	}
580	}
581	return $temp;
582	} else {
583	return $attributes;
584	}
585	}
586
587	public function register() {
588	register_block_type( 'ultimate-post/image',
589	array(
590	'editor_script' => 'ultp-blocks-editor-script',
591	'editor_style' => 'ultp-blocks-editor-css',
592	'attributes' => $this->get_attributes(),
593	'render_callback' => array($this, 'content')
594	)
595	);
596	}
597
598	public function content($attr, $noAjax) {
599	$wraper_before = '';
600	$block_name = 'image';
601	$attr['headingShow'] = true;
602	$wraper_before .= '<div '.($attr['advanceId']?'id="'.$attr['advanceId'].'" ':'').' class="wp-block-ultimate-post-'.$block_name.' ultp-block-'.$attr["blockId"].''.(isset($attr["align"])? ' align' .$attr["align"]:'').''.(isset($attr["className"])?' '.$attr["className"]:'').'">';
603	$wraper_before .= '<div class="ultp-block-wrapper">';
604	$wraper_before .= '<figure class="ultp-image-block-wrapper">';
605	$wraper_before .= '<div class="ultp-image-block ultp-image-block-'.$attr['imgAnimation'].($attr["imgOverlay"] ? ' ultp-image-block-overlay ultp-image-block-'.$attr["imgOverlayType"] : '' ).'">';
606	// Single Image
607	$img_arr = (array)$attr['imageUpload'];
608	if (!empty($img_arr)) {
609	if (($attr['linkType'] == 'link') && $attr['imgLink']) {
610	$wraper_before .= '<a href="'.$attr['imgLink'].'" target="'.$attr['linkTarget'].'">'.ultimate_post()->get_image_html($img_arr['url'], 'full', 'ultp-image', $attr['imgAlt'], $attr['imgLazy']).'</a>';
611	} else {
612	$wraper_before .= ultimate_post()->get_image_html($img_arr['url'], 'full', 'ultp-image', $attr['imgAlt'], $attr['imgLazy']);
613	}
614	}
615	if ($attr['btnLink'] && ($attr['linkType'] == 'button')) {
616	$wraper_before .= '<div class="ultp-image-button ultp-image-button-'.$attr['btnPosition'].'"><a href="'.$attr['btnLink'].'" target="'.$attr['btnTarget'].'">'.$attr['btnText'].'</a></div>';
617	}
618	$wraper_before .= '</div>';
619	if ($attr['headingEnable'] == 1) {
620	$wraper_before .= '<figcaption class="ultp-image-caption">'.$attr['headingText'].'</figcaption>';
621	}
622	$wraper_before .= '</figure>';
623	$wraper_before .= '</div>';
624	$wraper_before .= '</div>';
625
626	return $wraper_before;
627	}
628
629	}