ultimate-post / blocks / Image.php

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

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