ultimate-post / blocks / Image.php

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

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