ultimate-post / blocks / Image.php

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

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