appscms-tools-theme 2.2.7 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/_data/feature/en/theframe.json +12 -7
- data/_data/home/en/photoeffects.json +24 -0
- data/_data/photo-categories.json +0 -117
- data/_data/photoeffects.json +117 -0
- data/_includes/script.html +8 -1
- data/_layouts/feature.html +1 -1
- data/_layouts/frame.html +59 -49
- data/_layouts/photo-effects-home.html +84 -0
- data/assets/css/frame.css +260 -29
- data/assets/images/loader.gif +0 -0
- data/assets/js/frame.js +22 -8
- data/assets/js/photo-effects.json +11 -0
- metadata +6 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 1f78ea3fc9eba752da1b32275ac62621b711f58dc43629c4212d82b5f4fcde6b
|
|
4
|
+
data.tar.gz: 3195c5483f102e649beaaa8eca3ca6270368fc34c947ebe283744136141f97c1
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 665ec48d3a2bcbbf867698e406055de6af11c82fbfbbddfbea2717b3e59a8296723dd98b6c378a0a44f69733161a99d4fd2afe1112d6624402f70042692ae377
|
|
7
|
+
data.tar.gz: 12506bbe273d42ba90f976fc4874cb54ffae1fd3a6489bff416f6d284e2c7f9da97a7aa1475ebd3656fb3c5bf91796720ec87a0821b4aa187ee79314b50c9858
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"htmlLangAtt": "en",
|
|
4
4
|
"H1": "The frame",
|
|
5
5
|
"H2": "Upload the image and apply your favourite border",
|
|
6
|
-
"color": "#
|
|
6
|
+
"color": "#ff6131",
|
|
7
7
|
"imgwidth": "35px",
|
|
8
8
|
"imgheight": "35px",
|
|
9
9
|
"imgalt": "altvalue",
|
|
@@ -27,12 +27,12 @@
|
|
|
27
27
|
"https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.css",
|
|
28
28
|
"/assets/css/frame.css"
|
|
29
29
|
],
|
|
30
|
-
"mainPreviewImage": "https://cdn.photofunia.com/effects/
|
|
30
|
+
"mainPreviewImage": "https://cdn.photofunia.com/effects/balloon/icons/medium.jpg",
|
|
31
31
|
"imageSamples": [
|
|
32
|
-
"https://cdn.photofunia.com/effects/
|
|
33
|
-
"https://cdn.photofunia.com/effects/
|
|
34
|
-
"https://cdn.photofunia.com/effects/
|
|
35
|
-
"https://cdn.photofunia.com/effects/
|
|
32
|
+
"https://cdn.photofunia.com/effects/balloon/icons/medium.jpg",
|
|
33
|
+
"https://cdn.photofunia.com/effects/balloon/icons/medium.jpg",
|
|
34
|
+
"https://cdn.photofunia.com/effects/balloon/icons/medium.jpg",
|
|
35
|
+
"https://cdn.photofunia.com/effects/balloon/icons/medium.jpg"
|
|
36
36
|
],
|
|
37
37
|
"image": {
|
|
38
38
|
"src": "/assets/images/gallary.png",
|
|
@@ -45,7 +45,12 @@
|
|
|
45
45
|
"elements": [
|
|
46
46
|
{
|
|
47
47
|
"type": "image",
|
|
48
|
-
"label": "
|
|
48
|
+
"label": "Choose Your Image"
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"type": "text",
|
|
52
|
+
"id": "text-1",
|
|
53
|
+
"label": "text"
|
|
49
54
|
}
|
|
50
55
|
]
|
|
51
56
|
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
{
|
|
2
|
+
"Language": "English",
|
|
3
|
+
"htmlLangAtt": "en",
|
|
4
|
+
"H1": "All effects",
|
|
5
|
+
"H2": "Largest and best collection of photo effects",
|
|
6
|
+
"color": "#ff6131",
|
|
7
|
+
"imgwidth": "35px",
|
|
8
|
+
"imgheight": "35px",
|
|
9
|
+
"imgalt": "altvalue",
|
|
10
|
+
"nofileupload": true,
|
|
11
|
+
"variant": "primary",
|
|
12
|
+
"TITLE": "Image border tool- Surround your images with a border",
|
|
13
|
+
"META": "Image border tool helps you to add a simple border frame to your image. You can customize border colour and width. Border sets the focal subject.",
|
|
14
|
+
"TEXTUAL_CONTENT": [],
|
|
15
|
+
"FAQ": [
|
|
16
|
+
{
|
|
17
|
+
"question": "",
|
|
18
|
+
"answer": ""
|
|
19
|
+
}
|
|
20
|
+
],
|
|
21
|
+
"cssfilepaths": [
|
|
22
|
+
"/assets/css/frame.css"
|
|
23
|
+
]
|
|
24
|
+
}
|
data/_data/photo-categories.json
CHANGED
|
@@ -323,123 +323,6 @@
|
|
|
323
323
|
}
|
|
324
324
|
]
|
|
325
325
|
},
|
|
326
|
-
{
|
|
327
|
-
"category": "All effects",
|
|
328
|
-
"features": [
|
|
329
|
-
{
|
|
330
|
-
"name": "Calendar",
|
|
331
|
-
"link": "/calendar"
|
|
332
|
-
}
|
|
333
|
-
]
|
|
334
|
-
},
|
|
335
|
-
{
|
|
336
|
-
"category": "All effects",
|
|
337
|
-
"features": [
|
|
338
|
-
{
|
|
339
|
-
"name": "Calendar",
|
|
340
|
-
"link": "/calendar"
|
|
341
|
-
}
|
|
342
|
-
]
|
|
343
|
-
},
|
|
344
|
-
{
|
|
345
|
-
"category": "All effects",
|
|
346
|
-
"features": [
|
|
347
|
-
{
|
|
348
|
-
"name": "Calendar",
|
|
349
|
-
"link": "/calendar"
|
|
350
|
-
}
|
|
351
|
-
]
|
|
352
|
-
},
|
|
353
|
-
{
|
|
354
|
-
"category": "All effects",
|
|
355
|
-
"features": [
|
|
356
|
-
{
|
|
357
|
-
"name": "Calendar",
|
|
358
|
-
"link": "/calendar"
|
|
359
|
-
}
|
|
360
|
-
]
|
|
361
|
-
},
|
|
362
|
-
{
|
|
363
|
-
"category": "All effects",
|
|
364
|
-
"features": [
|
|
365
|
-
{
|
|
366
|
-
"name": "Calendar",
|
|
367
|
-
"link": "/calendar"
|
|
368
|
-
}
|
|
369
|
-
]
|
|
370
|
-
},
|
|
371
|
-
{
|
|
372
|
-
"category": "All effects",
|
|
373
|
-
"features": [
|
|
374
|
-
{
|
|
375
|
-
"name": "Calendar",
|
|
376
|
-
"link": "/calendar"
|
|
377
|
-
}
|
|
378
|
-
]
|
|
379
|
-
},
|
|
380
|
-
{
|
|
381
|
-
"category": "All effects",
|
|
382
|
-
"features": [
|
|
383
|
-
{
|
|
384
|
-
"name": "Calendar",
|
|
385
|
-
"link": "/calendar"
|
|
386
|
-
}
|
|
387
|
-
]
|
|
388
|
-
},
|
|
389
|
-
{
|
|
390
|
-
"category": "All effects",
|
|
391
|
-
"features": [
|
|
392
|
-
{
|
|
393
|
-
"name": "Calendar",
|
|
394
|
-
"link": "/calendar"
|
|
395
|
-
}
|
|
396
|
-
]
|
|
397
|
-
},
|
|
398
|
-
{
|
|
399
|
-
"category": "All effects",
|
|
400
|
-
"features": [
|
|
401
|
-
{
|
|
402
|
-
"name": "Calendar",
|
|
403
|
-
"link": "/calendar"
|
|
404
|
-
}
|
|
405
|
-
]
|
|
406
|
-
},
|
|
407
|
-
{
|
|
408
|
-
"category": "All effects",
|
|
409
|
-
"features": [
|
|
410
|
-
{
|
|
411
|
-
"name": "Calendar",
|
|
412
|
-
"link": "/calendar"
|
|
413
|
-
}
|
|
414
|
-
]
|
|
415
|
-
},
|
|
416
|
-
{
|
|
417
|
-
"category": "All effects",
|
|
418
|
-
"features": [
|
|
419
|
-
{
|
|
420
|
-
"name": "Calendar",
|
|
421
|
-
"link": "/calendar"
|
|
422
|
-
}
|
|
423
|
-
]
|
|
424
|
-
},
|
|
425
|
-
{
|
|
426
|
-
"category": "All effects",
|
|
427
|
-
"features": [
|
|
428
|
-
{
|
|
429
|
-
"name": "Calendar",
|
|
430
|
-
"link": "/calendar"
|
|
431
|
-
}
|
|
432
|
-
]
|
|
433
|
-
},
|
|
434
|
-
{
|
|
435
|
-
"category": "All effects",
|
|
436
|
-
"features": [
|
|
437
|
-
{
|
|
438
|
-
"name": "Calendar",
|
|
439
|
-
"link": "/calendar"
|
|
440
|
-
}
|
|
441
|
-
]
|
|
442
|
-
},
|
|
443
326
|
{
|
|
444
327
|
"category": "All effects",
|
|
445
328
|
"features": [
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
[
|
|
2
|
+
{
|
|
3
|
+
"featureName": "Hot Air Balloon",
|
|
4
|
+
"url": "/",
|
|
5
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
6
|
+
},
|
|
7
|
+
{
|
|
8
|
+
"featureName": "Hot Air Balloon",
|
|
9
|
+
"url": "/",
|
|
10
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
"featureName": "Hot Air Balloon",
|
|
14
|
+
"url": "/",
|
|
15
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"featureName": "Hot Air Balloon",
|
|
19
|
+
"url": "/",
|
|
20
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"featureName": "Hot Air Balloon",
|
|
24
|
+
"url": "/",
|
|
25
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"featureName": "Hot Air Balloon",
|
|
29
|
+
"url": "/",
|
|
30
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"featureName": "Hot Air Balloon",
|
|
34
|
+
"url": "/",
|
|
35
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"featureName": "Hot Air Balloon",
|
|
39
|
+
"url": "/",
|
|
40
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"featureName": "Hot Air Balloon",
|
|
44
|
+
"url": "/",
|
|
45
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"featureName": "Hot Air Balloon",
|
|
49
|
+
"url": "/",
|
|
50
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"featureName": "Hot Air Balloon",
|
|
54
|
+
"url": "/",
|
|
55
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"featureName": "Hot Air Balloon",
|
|
59
|
+
"url": "/",
|
|
60
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"featureName": "Hot Air Balloon",
|
|
64
|
+
"url": "/",
|
|
65
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"featureName": "Hot Air Balloon",
|
|
69
|
+
"url": "/",
|
|
70
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
"featureName": "Hot Air Balloon",
|
|
74
|
+
"url": "/",
|
|
75
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
"featureName": "Hot Air Balloon",
|
|
79
|
+
"url": "/",
|
|
80
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"featureName": "Hot Air Balloon",
|
|
84
|
+
"url": "/",
|
|
85
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"featureName": "Hot Air Balloon",
|
|
89
|
+
"url": "/",
|
|
90
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"featureName": "Hot Air Balloon",
|
|
94
|
+
"url": "/",
|
|
95
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"featureName": "Hot Air Balloon",
|
|
99
|
+
"url": "/",
|
|
100
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
"featureName": "Hot Air Balloon",
|
|
104
|
+
"url": "/",
|
|
105
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
"featureName": "Hot Air Balloon",
|
|
109
|
+
"url": "/",
|
|
110
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
"featureName": "Hot Air Balloon",
|
|
114
|
+
"url": "/",
|
|
115
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
116
|
+
}
|
|
117
|
+
]
|
data/_includes/script.html
CHANGED
|
@@ -26,7 +26,14 @@ replace: "$tool", page.tool }}
|
|
|
26
26
|
{%- endfor -%}
|
|
27
27
|
{%- endif -%}
|
|
28
28
|
<script src="//cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js" crossorigin="anonymous"></script>
|
|
29
|
-
|
|
29
|
+
{%- assign font = "Source Sans Pro" -%}
|
|
30
|
+
{%- if page.layout == "frame" -%}
|
|
31
|
+
{%- assign font = "PT Sans" -%}
|
|
32
|
+
{%- endif -%}
|
|
33
|
+
{%- if page.layout == "photo-effects-home" -%}
|
|
34
|
+
{%- assign font = "PT Sans" -%}
|
|
35
|
+
{%- endif -%}
|
|
36
|
+
<script>WebFont.load({ google: { families: ['{{font}}:200,300,400,500,600,700,800&display=swap'] } })</script>
|
|
30
37
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
|
|
31
38
|
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
|
|
32
39
|
crossorigin="anonymous" referrerpolicy="no-referrer" />
|
data/_layouts/feature.html
CHANGED
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
</div>
|
|
28
28
|
</div>
|
|
29
29
|
{%- endif -%}
|
|
30
|
-
{%- if page.layout != "frame" -%}
|
|
30
|
+
{%- if page.layout != "frame" and page.layout != "photo-effects-home" -%}
|
|
31
31
|
<div class="flex-container pb-3">
|
|
32
32
|
<div class="flex-class py-4 mt-4 mt-md-0 ">
|
|
33
33
|
<div class="d-flex justify-content-center align-items-center"><span class="fHhdVc">
|
data/_layouts/frame.html
CHANGED
|
@@ -3,7 +3,7 @@ layout: feature
|
|
|
3
3
|
---
|
|
4
4
|
|
|
5
5
|
{%- assign fileData = site.data[page.folderName][page.lang][page.fileName] -%}
|
|
6
|
-
<div class="container mt-
|
|
6
|
+
<div class="container mt-4">
|
|
7
7
|
<div class="col-md-11 mx-auto">
|
|
8
8
|
<div class="row">
|
|
9
9
|
<div class="col-md-3">
|
|
@@ -12,22 +12,20 @@ layout: feature
|
|
|
12
12
|
<div class="categories-list">
|
|
13
13
|
<div class="accordion" id="accordionExample">
|
|
14
14
|
{%- for item in site.data.photo-categories -%}
|
|
15
|
-
<div class="card">
|
|
15
|
+
<div class="card card-hover">
|
|
16
16
|
<div class="card-header" id="heading-{{forloop.index}}">
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
</button>
|
|
23
|
-
</h3>
|
|
17
|
+
<button class="btn btn-block text-left p-0" type="button" data-toggle="collapse"
|
|
18
|
+
data-target="#collapse-{{forloop.index}}" aria-expanded="true"
|
|
19
|
+
aria-controls="collapse-{{forloop.index}}">
|
|
20
|
+
{{item.category}} <i class="fas fa-angle-down"></i>
|
|
21
|
+
</button>
|
|
24
22
|
</div>
|
|
25
23
|
|
|
26
24
|
<div id="collapse-{{forloop.index}}" class="collapse"
|
|
27
25
|
aria-labelledby="heading-{{forloop.index}}" data-parent="#accordionExample">
|
|
28
26
|
<div class="card-body">
|
|
29
27
|
{%- for i in item.features -%}
|
|
30
|
-
<a href="{{i.link}}">{{i.name}}</a>
|
|
28
|
+
<a href="{{i.link}}">{{i.name}} </a>
|
|
31
29
|
{%- endfor -%}
|
|
32
30
|
</div>
|
|
33
31
|
</div>
|
|
@@ -38,11 +36,11 @@ layout: feature
|
|
|
38
36
|
|
|
39
37
|
</div>
|
|
40
38
|
<div class="col-md-9">
|
|
41
|
-
<div class="row">
|
|
39
|
+
<div class="row" id="upper-panel">
|
|
42
40
|
<div class="col-md-8">
|
|
43
|
-
<div
|
|
44
|
-
<div
|
|
45
|
-
<div
|
|
41
|
+
<div>
|
|
42
|
+
<div>
|
|
43
|
+
<div>
|
|
46
44
|
{%- assign frameh1 = fileData.H1 | replace: "$variable", page.value -%}
|
|
47
45
|
<h1 class="frame-h1">{%- for word in frameh1-%}
|
|
48
46
|
{%- if forloop.first == true -%}
|
|
@@ -67,7 +65,7 @@ layout: feature
|
|
|
67
65
|
<div class="preview-section">
|
|
68
66
|
<img src="{{fileData.mainPreviewImage}}" alt="">
|
|
69
67
|
</div>
|
|
70
|
-
<h3>Examples</h3>
|
|
68
|
+
<h3 id="example-h3">Examples</h3>
|
|
71
69
|
<div class="image-samples" onclick="openExamplesModal()">
|
|
72
70
|
{%- for item in fileData.imageSamples -%}
|
|
73
71
|
<img src="{{item}}" alt="sample">
|
|
@@ -80,23 +78,63 @@ layout: feature
|
|
|
80
78
|
{%- for item in fileData.elements -%}
|
|
81
79
|
{%- if item.type == "image" -%}
|
|
82
80
|
<label for="{{item.id}}">{{item.label}}</label>
|
|
83
|
-
<
|
|
84
|
-
|
|
85
|
-
|
|
81
|
+
<div class="d-flex mb-15">
|
|
82
|
+
<button class="choose-image" type="button" id="{{item.id}}"
|
|
83
|
+
data-index="{{forloop.index}}" onclick="clickInput(this)">Choose
|
|
84
|
+
image</button>
|
|
85
|
+
<button class="cam-image" id="cam-{{forloop.index}}"><i
|
|
86
|
+
class="fas fa-camera"></i></button>
|
|
87
|
+
<img class="small-image-preview" style="display: none;"
|
|
88
|
+
id="image-pre-{{forloop.index}}"></img>
|
|
89
|
+
</div>
|
|
86
90
|
<input class="d-none" id="file-{{forloop.index}}" type="file" onchange="fileOnChange(this)"
|
|
87
91
|
data-index="{{forloop.index}}" accept=".webp,.png,.jpg,.jpeg" required />
|
|
88
92
|
{%- endif -%}
|
|
89
93
|
{%- if item.type == "text" -%}
|
|
90
94
|
<label for="{{item.id}}">{{item.label}}</label>
|
|
91
|
-
<input type="text" id="{{item.id}}">
|
|
95
|
+
<input class="mb-15" type="text" placeholder="Your Text" id="{{item.id}}">
|
|
92
96
|
{%- endif -%}
|
|
93
97
|
{%- endfor -%}
|
|
94
|
-
<div>
|
|
95
|
-
<button type="submit">Go</button>
|
|
98
|
+
<div class="d-flex">
|
|
99
|
+
<button class="submit-btn" type="submit">Go</button>
|
|
96
100
|
</div>
|
|
97
101
|
</form>
|
|
98
102
|
</div>
|
|
99
103
|
</div>
|
|
104
|
+
<div class="row">
|
|
105
|
+
<div id="workspace" data-name="together_forever" style="display: none;">
|
|
106
|
+
<div class="row">
|
|
107
|
+
<div class="col-12 mb-4">
|
|
108
|
+
<div class="d-flex justify-content-between">
|
|
109
|
+
<div class="result-info">
|
|
110
|
+
<a href="{{page.permalink}}" target="_blank">{{page.featureName}}</a>
|
|
111
|
+
<i class="fas fa-chevron-right"></i>
|
|
112
|
+
<div>result</div>
|
|
113
|
+
</div>
|
|
114
|
+
<button id="download-button" style="background-color: {{fileData.color}};"><svg
|
|
115
|
+
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
116
|
+
<path
|
|
117
|
+
d="M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM382.6 302.6l-103.1 103.1C270.7 414.6 260.9 416 256 416c-4.881 0-14.65-1.391-22.65-9.398L129.4 302.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 306.8V128c0-17.69 14.33-32 32-32s32 14.31 32 32v178.8l49.38-49.38c12.5-12.5 32.75-12.5 45.25 0S395.1 290.1 382.6 302.6z" />
|
|
118
|
+
</svg>Download</button>
|
|
119
|
+
</div>
|
|
120
|
+
|
|
121
|
+
</div>
|
|
122
|
+
<div class="col-md-12 mx-auto">
|
|
123
|
+
<div class="select-img-panel">
|
|
124
|
+
<div id="saving-data" style="display: block;">
|
|
125
|
+
<img loading="lazy" src="/assets/images/loader.gif" alt="saving"> <span
|
|
126
|
+
class="ml-2">Saving
|
|
127
|
+
your
|
|
128
|
+
images...</span>
|
|
129
|
+
</div>
|
|
130
|
+
<div id="canvas-panel">
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
</div>
|
|
134
|
+
|
|
135
|
+
</div>
|
|
136
|
+
</div>
|
|
137
|
+
</div>
|
|
100
138
|
|
|
101
139
|
<div class="crop-image-modal-container">
|
|
102
140
|
<div class="row w-100">
|
|
@@ -160,35 +198,7 @@ layout: feature
|
|
|
160
198
|
</div>
|
|
161
199
|
</div>
|
|
162
200
|
</div>
|
|
163
|
-
<div id="workspace" data-name="together_forever" style="display: none;">
|
|
164
|
-
<div class="row">
|
|
165
|
-
<div class="col-md-8 mx-auto">
|
|
166
|
-
<div class="select-img-panel">
|
|
167
|
-
<div id="saving-data" style="display: none;">
|
|
168
|
-
<img loading="lazy" src="/img/save.gif" alt="saving"> <span class="ml-2">Saving your
|
|
169
|
-
images...</span>
|
|
170
|
-
</div>
|
|
171
|
-
<div id="canvas-panel">
|
|
172
|
-
</div>
|
|
173
|
-
</div>
|
|
174
|
-
</div>
|
|
175
|
-
<div class="col-md-4">
|
|
176
|
-
<div class="options-panel">
|
|
177
|
-
<div class="title">
|
|
178
|
-
|
|
179
|
-
</div>
|
|
180
|
-
<div class="download-wrapper">
|
|
181
|
-
<button id="download-button" style="background-color: {{fileData.color}};"><svg
|
|
182
|
-
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
183
|
-
<path
|
|
184
|
-
d="M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM382.6 302.6l-103.1 103.1C270.7 414.6 260.9 416 256 416c-4.881 0-14.65-1.391-22.65-9.398L129.4 302.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 306.8V128c0-17.69 14.33-32 32-32s32 14.31 32 32v178.8l49.38-49.38c12.5-12.5 32.75-12.5 45.25 0S395.1 290.1 382.6 302.6z" />
|
|
185
|
-
</svg>Download</button>
|
|
186
|
-
</div>
|
|
187
|
-
</div>
|
|
188
201
|
|
|
189
|
-
</div>
|
|
190
|
-
</div>
|
|
191
|
-
</div>
|
|
192
202
|
</div>
|
|
193
203
|
</div>
|
|
194
204
|
</div>
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: feature
|
|
3
|
+
---
|
|
4
|
+
{%- assign fileData = site.data[page.folderName][page.lang][page.fileName] -%}
|
|
5
|
+
{%- assign photoEffectsData = site.data.photoeffects -%}
|
|
6
|
+
<div class="container mt-4">
|
|
7
|
+
<div class="col-md-11 mx-auto">
|
|
8
|
+
<div class="row">
|
|
9
|
+
<div class="col-md-3">
|
|
10
|
+
<div class="categories-section">
|
|
11
|
+
</div>
|
|
12
|
+
<div class="categories-list">
|
|
13
|
+
<div class="accordion" id="accordionExample">
|
|
14
|
+
{%- for item in site.data.photo-categories -%}
|
|
15
|
+
<div class="card card-hover">
|
|
16
|
+
<div class="card-header" id="heading-{{forloop.index}}">
|
|
17
|
+
<button class="btn btn-block text-left p-0" type="button" data-toggle="collapse"
|
|
18
|
+
data-target="#collapse-{{forloop.index}}" aria-expanded="true"
|
|
19
|
+
aria-controls="collapse-{{forloop.index}}">
|
|
20
|
+
{{item.category}} <i class="fas fa-angle-down"></i>
|
|
21
|
+
</button>
|
|
22
|
+
</div>
|
|
23
|
+
|
|
24
|
+
<div id="collapse-{{forloop.index}}" class="collapse"
|
|
25
|
+
aria-labelledby="heading-{{forloop.index}}" data-parent="#accordionExample">
|
|
26
|
+
<div class="card-body">
|
|
27
|
+
{%- for i in item.features -%}
|
|
28
|
+
<a href="{{i.link}}">{{i.name}} </a>
|
|
29
|
+
{%- endfor -%}
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
{%- endfor -%}
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
|
|
37
|
+
</div>
|
|
38
|
+
<div class="col-md-9">
|
|
39
|
+
<div class="row" id="upper-panel">
|
|
40
|
+
<div class="col-12 ">
|
|
41
|
+
<div>
|
|
42
|
+
<div>
|
|
43
|
+
<div>
|
|
44
|
+
{%- assign frameh1 = fileData.H1 | replace: "$variable", page.value -%}
|
|
45
|
+
<h1 class="frame-h1">{%- for word in frameh1-%}
|
|
46
|
+
{%- if forloop.first == true -%}
|
|
47
|
+
{{word | capitalize }}
|
|
48
|
+
{%- else -%}
|
|
49
|
+
{{word}}
|
|
50
|
+
{%- endif -%}
|
|
51
|
+
{%- endfor -%}</h1>
|
|
52
|
+
</div>
|
|
53
|
+
{%- assign frameh2 = fileData.H2 | replace: "$variable", page.value -%}
|
|
54
|
+
<h2 class="frame-h2">
|
|
55
|
+
{%- for word in frameh2 -%}
|
|
56
|
+
{%- if forloop.first == true -%}
|
|
57
|
+
{{word | capitalize }}
|
|
58
|
+
{%- else -%}
|
|
59
|
+
{{word}}
|
|
60
|
+
{%- endif -%}
|
|
61
|
+
{%- endfor -%}
|
|
62
|
+
</h2>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
{%- for item in photoEffectsData -%}
|
|
67
|
+
<div class="col-md-3 px-0">
|
|
68
|
+
<a class="photo-card" href="{{item.url}}">
|
|
69
|
+
<div>
|
|
70
|
+
<img src="{{item.image}}" alt="">
|
|
71
|
+
<div class="photo-effect-feature-name">
|
|
72
|
+
{{item.featureName}}
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
</a>
|
|
76
|
+
|
|
77
|
+
</div>
|
|
78
|
+
{%- endfor -%}
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
|
|
84
|
+
</div>
|
data/assets/css/frame.css
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
body {
|
|
2
|
+
font-family: 'PT Sans', sans-serif !important;
|
|
3
|
+
}
|
|
1
4
|
#img-svg {
|
|
2
5
|
margin: auto;
|
|
3
6
|
margin-top: 16px;
|
|
@@ -325,26 +328,19 @@ input {
|
|
|
325
328
|
text-align: left;
|
|
326
329
|
}
|
|
327
330
|
#download-button {
|
|
328
|
-
cursor: pointer;
|
|
329
|
-
display: inline-block;
|
|
330
|
-
width: 100%;
|
|
331
|
-
padding: 14px 0;
|
|
332
|
-
margin-bottom: 20px;
|
|
333
|
-
text-align: center;
|
|
334
|
-
border-radius: 50px;
|
|
335
|
-
background: #0050e5;
|
|
336
|
-
font-size: 18px;
|
|
337
|
-
color: #fff;
|
|
338
|
-
font-weight: 700;
|
|
339
331
|
text-decoration: none;
|
|
340
|
-
|
|
341
|
-
border:
|
|
332
|
+
border-radius: 2px;
|
|
333
|
+
border: 1px solid #ff6131;
|
|
334
|
+
box-shadow: 0;
|
|
335
|
+
color: #fff;
|
|
336
|
+
margin: 3px;
|
|
337
|
+
padding: 4px 15px;
|
|
342
338
|
}
|
|
343
339
|
#download-button svg {
|
|
344
340
|
fill: #fff;
|
|
345
341
|
margin-right: 4px;
|
|
346
342
|
margin-bottom: 4px;
|
|
347
|
-
height:
|
|
343
|
+
height: 15px;
|
|
348
344
|
}
|
|
349
345
|
.download-wrapper {
|
|
350
346
|
display: flex;
|
|
@@ -356,20 +352,6 @@ input {
|
|
|
356
352
|
#canvas-panel canvas {
|
|
357
353
|
max-width: 100%;
|
|
358
354
|
}
|
|
359
|
-
.options-panel select,
|
|
360
|
-
textarea,
|
|
361
|
-
input {
|
|
362
|
-
width: 100%;
|
|
363
|
-
text-align: left;
|
|
364
|
-
background: #fff;
|
|
365
|
-
height: 34px;
|
|
366
|
-
display: flex;
|
|
367
|
-
border-radius: 4px;
|
|
368
|
-
justify-content: space-between;
|
|
369
|
-
box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
|
|
370
|
-
color: #0f0c0c;
|
|
371
|
-
border: 1px solid #ccc;
|
|
372
|
-
}
|
|
373
355
|
.example-images-modal-container,
|
|
374
356
|
.crop-image-modal-container {
|
|
375
357
|
position: fixed;
|
|
@@ -456,9 +438,258 @@ input {
|
|
|
456
438
|
border: none;
|
|
457
439
|
border-bottom: 1px solid #f2f2f2 !important;
|
|
458
440
|
display: block;
|
|
459
|
-
|
|
441
|
+
|
|
460
442
|
color: #444;
|
|
461
443
|
text-decoration: none;
|
|
462
444
|
font-size: 0.95em;
|
|
463
445
|
border-radius: 1px;
|
|
464
446
|
}
|
|
447
|
+
.card-header:hover {
|
|
448
|
+
background: #f8f8f8 !important;
|
|
449
|
+
}
|
|
450
|
+
.categories-list .card-body {
|
|
451
|
+
padding: 0px;
|
|
452
|
+
}
|
|
453
|
+
.categories-list .card-body a {
|
|
454
|
+
width: 100%;
|
|
455
|
+
text-align: left;
|
|
456
|
+
display: block;
|
|
457
|
+
border-top: 1px solid #dadada;
|
|
458
|
+
padding: 9px 9px;
|
|
459
|
+
}
|
|
460
|
+
.categories-list .accordion > .card > .card-header {
|
|
461
|
+
display: flex;
|
|
462
|
+
justify-content: space-between;
|
|
463
|
+
background-color: transparent;
|
|
464
|
+
padding: 7px 9px;
|
|
465
|
+
}
|
|
466
|
+
.categories-list .accordion > .card > .card-header i {
|
|
467
|
+
color: #888888;
|
|
468
|
+
margin-bottom: 0;
|
|
469
|
+
font-size: 19px;
|
|
470
|
+
}
|
|
471
|
+
.categories-list .accordion > .card > .card-header {
|
|
472
|
+
height: auto;
|
|
473
|
+
}
|
|
474
|
+
.categories-list .accordion > .card > .card-header > button {
|
|
475
|
+
display: flex;
|
|
476
|
+
justify-content: space-between;
|
|
477
|
+
align-items: center;
|
|
478
|
+
width: 100%;
|
|
479
|
+
}
|
|
480
|
+
.frame-h1 {
|
|
481
|
+
margin: 0;
|
|
482
|
+
font-size: 17pt;
|
|
483
|
+
line-height: 24pt;
|
|
484
|
+
font-weight: 600;
|
|
485
|
+
text-align: left;
|
|
486
|
+
color: #555;
|
|
487
|
+
}
|
|
488
|
+
.frame-h2 {
|
|
489
|
+
font-size: 15px;
|
|
490
|
+
line-height: 16px;
|
|
491
|
+
color: #656464;
|
|
492
|
+
max-width: 345px;
|
|
493
|
+
color: #555;
|
|
494
|
+
padding: 4px 0;
|
|
495
|
+
text-align: left;
|
|
496
|
+
}
|
|
497
|
+
.image-samples {
|
|
498
|
+
display: flex;
|
|
499
|
+
flex-wrap: wrap;
|
|
500
|
+
margin-top: 5px;
|
|
501
|
+
margin-bottom: 18px;
|
|
502
|
+
gap: 5px;
|
|
503
|
+
cursor: pointer;
|
|
504
|
+
}
|
|
505
|
+
.image-samples img {
|
|
506
|
+
cursor: pointer;
|
|
507
|
+
width: 52px;
|
|
508
|
+
height: 52px;
|
|
509
|
+
float: left;
|
|
510
|
+
background-color: #eee;
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
#example-h3 {
|
|
514
|
+
font-size: 0.98em;
|
|
515
|
+
padding: 3px 0 3px;
|
|
516
|
+
text-align: left;
|
|
517
|
+
color: #555;
|
|
518
|
+
margin: 0 0 8px;
|
|
519
|
+
font-weight: 600;
|
|
520
|
+
border-bottom: 1px solid #dadada;
|
|
521
|
+
}
|
|
522
|
+
.preview-section {
|
|
523
|
+
display: flex;
|
|
524
|
+
justify-content: left;
|
|
525
|
+
margin-top: 15px;
|
|
526
|
+
}
|
|
527
|
+
.preview-section img {
|
|
528
|
+
width: auto;
|
|
529
|
+
height: auto;
|
|
530
|
+
}
|
|
531
|
+
#effect-form label {
|
|
532
|
+
display: block;
|
|
533
|
+
font-weight: 600;
|
|
534
|
+
margin: 0 0 5px;
|
|
535
|
+
color: #666;
|
|
536
|
+
text-align: left;
|
|
537
|
+
text-transform: capitalize;
|
|
538
|
+
font-size: 14px;
|
|
539
|
+
}
|
|
540
|
+
|
|
541
|
+
.submit-btn {
|
|
542
|
+
margin: 0;
|
|
543
|
+
width: 180px;
|
|
544
|
+
padding: 10px 0;
|
|
545
|
+
font-size: 13pt;
|
|
546
|
+
position: relative;
|
|
547
|
+
border: 1px solid #ff6131;
|
|
548
|
+
box-shadow: 0;
|
|
549
|
+
color: #fff;
|
|
550
|
+
padding: 4px 15px;
|
|
551
|
+
-webkit-border-radius: 2px;
|
|
552
|
+
-moz-border-radius: 2px;
|
|
553
|
+
border-radius: 2px;
|
|
554
|
+
background: #ff6d41;
|
|
555
|
+
background: -webkit-gradient(
|
|
556
|
+
linear,
|
|
557
|
+
left bottom,
|
|
558
|
+
left top,
|
|
559
|
+
color-stop(0, #ff6537),
|
|
560
|
+
color-stop(1, #ff754b)
|
|
561
|
+
);
|
|
562
|
+
background: -ms-linear-gradient(bottom, #ff6537, #ff754b);
|
|
563
|
+
background: -moz-linear-gradient(center bottom, #ff6537 0, #ff754b 100%);
|
|
564
|
+
background: -o-linear-gradient(#ff754b, #ff6537);
|
|
565
|
+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff754b', endColorstr='#ff6537', GradientType=0);
|
|
566
|
+
}
|
|
567
|
+
.cam-image {
|
|
568
|
+
color: #666;
|
|
569
|
+
height: 40px;
|
|
570
|
+
width: 50px;
|
|
571
|
+
display: flex;
|
|
572
|
+
align-items: center;
|
|
573
|
+
justify-content: center;
|
|
574
|
+
border: 1px solid #ccc;
|
|
575
|
+
background: #eee;
|
|
576
|
+
background: -webkit-gradient(
|
|
577
|
+
linear,
|
|
578
|
+
left bottom,
|
|
579
|
+
left top,
|
|
580
|
+
color-stop(0, #ececec),
|
|
581
|
+
color-stop(1, #f6f6f6)
|
|
582
|
+
);
|
|
583
|
+
}
|
|
584
|
+
.cam-image i {
|
|
585
|
+
margin-bottom: 0px;
|
|
586
|
+
color: #666;
|
|
587
|
+
}
|
|
588
|
+
.small-image-preview {
|
|
589
|
+
height: 40px;
|
|
590
|
+
width: 50px !important;
|
|
591
|
+
width: 100%;
|
|
592
|
+
}
|
|
593
|
+
.choose-image {
|
|
594
|
+
color: #666;
|
|
595
|
+
margin-right: 6px;
|
|
596
|
+
border: 1px solid #ccc;
|
|
597
|
+
background: #eee;
|
|
598
|
+
background: -webkit-gradient(
|
|
599
|
+
linear,
|
|
600
|
+
left bottom,
|
|
601
|
+
left top,
|
|
602
|
+
color-stop(0, #ececec),
|
|
603
|
+
color-stop(1, #f6f6f6)
|
|
604
|
+
);
|
|
605
|
+
padding: 0;
|
|
606
|
+
width: 186px;
|
|
607
|
+
height: 40px;
|
|
608
|
+
line-height: 40px;
|
|
609
|
+
font-size: 13pt;
|
|
610
|
+
}
|
|
611
|
+
|
|
612
|
+
#effect-form {
|
|
613
|
+
display: flex;
|
|
614
|
+
flex-direction: column;
|
|
615
|
+
justify-content: left;
|
|
616
|
+
}
|
|
617
|
+
|
|
618
|
+
#effect-form input[type='text'] {
|
|
619
|
+
box-shadow: none;
|
|
620
|
+
border: 1px solid #ccc;
|
|
621
|
+
background: #fff;
|
|
622
|
+
padding: 5px 2%;
|
|
623
|
+
margin: 4px 0;
|
|
624
|
+
min-width: 190px;
|
|
625
|
+
-webkit-border-radius: 2px;
|
|
626
|
+
-moz-border-radius: 2px;
|
|
627
|
+
border-radius: 2px;
|
|
628
|
+
margin: 0;
|
|
629
|
+
width: 216px;
|
|
630
|
+
}
|
|
631
|
+
.mb-15 {
|
|
632
|
+
margin-bottom: 15px !important;
|
|
633
|
+
}
|
|
634
|
+
.btn:focus {
|
|
635
|
+
box-shadow: none !important;
|
|
636
|
+
}
|
|
637
|
+
.result-info {
|
|
638
|
+
display: flex;
|
|
639
|
+
}
|
|
640
|
+
.result-info a {
|
|
641
|
+
color: #ff754b !important;
|
|
642
|
+
cursor: pointer;
|
|
643
|
+
text-decoration: underline;
|
|
644
|
+
float: left;
|
|
645
|
+
font-size: 17pt;
|
|
646
|
+
line-height: 24pt;
|
|
647
|
+
margin: 0 0 5px;
|
|
648
|
+
font-weight: 600;
|
|
649
|
+
color: #444;
|
|
650
|
+
text-transform: capitalize;
|
|
651
|
+
}
|
|
652
|
+
.result-info i {
|
|
653
|
+
margin-left: 6px;
|
|
654
|
+
margin-right: 6px;
|
|
655
|
+
color: black;
|
|
656
|
+
font-size: 17px;
|
|
657
|
+
margin-bottom: 0px;
|
|
658
|
+
margin-top: 11px;
|
|
659
|
+
}
|
|
660
|
+
.result-info div {
|
|
661
|
+
float: left;
|
|
662
|
+
font-size: 17pt;
|
|
663
|
+
font-weight: 600;
|
|
664
|
+
text-transform: capitalize;
|
|
665
|
+
line-height: 24pt;
|
|
666
|
+
margin: 0 0 5px;
|
|
667
|
+
color: #444;
|
|
668
|
+
}
|
|
669
|
+
#saving-data {
|
|
670
|
+
display: flex;
|
|
671
|
+
flex-direction: column;
|
|
672
|
+
align-items: center;
|
|
673
|
+
}
|
|
674
|
+
#saving-data img {
|
|
675
|
+
height: 200px;
|
|
676
|
+
}
|
|
677
|
+
.photo-card {
|
|
678
|
+
display: inline-block;
|
|
679
|
+
zoom: 1;
|
|
680
|
+
margin: 10px 6px 6px;
|
|
681
|
+
padding: 8px 12px 4px;
|
|
682
|
+
border: 1px solid #e5e5e5;
|
|
683
|
+
border-bottom-color: #dcdcdc;
|
|
684
|
+
border-right-color: #e0e0e0;
|
|
685
|
+
text-decoration: none;
|
|
686
|
+
position: relative;
|
|
687
|
+
overflow: hidden;
|
|
688
|
+
-webkit-border-radius: 2px;
|
|
689
|
+
-moz-border-radius: 2px;
|
|
690
|
+
border-radius: 2px;
|
|
691
|
+
}
|
|
692
|
+
.photo-effect-feature-name {
|
|
693
|
+
text-align: center;
|
|
694
|
+
color: #777;
|
|
695
|
+
}
|
|
Binary file
|
data/assets/js/frame.js
CHANGED
|
@@ -91,6 +91,9 @@ const drawInputImage = (ctx, item, indexValue) => {
|
|
|
91
91
|
}
|
|
92
92
|
|
|
93
93
|
const drawImage = () => {
|
|
94
|
+
workspace.style.display = 'block'
|
|
95
|
+
document.querySelector('#upper-panel').style.display = 'none'
|
|
96
|
+
document.querySelector('#saving-data').style.display = 'flex'
|
|
94
97
|
let img = new Image()
|
|
95
98
|
img.src = featureData.effectImagePath
|
|
96
99
|
var canvas = document.createElement('canvas')
|
|
@@ -117,6 +120,19 @@ const drawImage = () => {
|
|
|
117
120
|
myFont.load().then(function (font) {
|
|
118
121
|
ctx.save()
|
|
119
122
|
document.fonts.add(font)
|
|
123
|
+
let textValue = document.querySelector(`#${item.id}`).value
|
|
124
|
+
if (textValue.length > 10 && item.fontSizeOption1) {
|
|
125
|
+
item.fontSize = item.fontSizeOption1
|
|
126
|
+
}
|
|
127
|
+
if (textValue.length > 12 && item.fontSizeOption2) {
|
|
128
|
+
item.fontSize = item.fontSizeOption2
|
|
129
|
+
}
|
|
130
|
+
if (textValue.length > 15 && item.fontSizeOption3) {
|
|
131
|
+
item.fontSize = item.fontSizeOption3
|
|
132
|
+
}
|
|
133
|
+
if (textValue.length > 20 && item.fontSizeOption4) {
|
|
134
|
+
item.fontSize = item.fontSizeOption4
|
|
135
|
+
}
|
|
120
136
|
ctx.font = `${item.fontSize}px ${item.font}`
|
|
121
137
|
if (item.shadowColor) {
|
|
122
138
|
ctx.shadowColor = `${item.shadowColor}`
|
|
@@ -136,11 +152,7 @@ const drawImage = () => {
|
|
|
136
152
|
}
|
|
137
153
|
ctx.textAlign = 'center'
|
|
138
154
|
ctx.fillStyle = `${item.color}`
|
|
139
|
-
ctx.fillText(
|
|
140
|
-
document.querySelector(`#${item.id}`).value,
|
|
141
|
-
item.x,
|
|
142
|
-
item.y
|
|
143
|
-
)
|
|
155
|
+
ctx.fillText(textValue, item.x, item.y)
|
|
144
156
|
ctx.restore()
|
|
145
157
|
})
|
|
146
158
|
}
|
|
@@ -148,8 +160,8 @@ const drawImage = () => {
|
|
|
148
160
|
}
|
|
149
161
|
})
|
|
150
162
|
canvasPanel.innerHTML = ''
|
|
163
|
+
document.querySelector('#saving-data').style.display = 'none'
|
|
151
164
|
canvasPanel.appendChild(canvas)
|
|
152
|
-
workspace.style.display = 'block'
|
|
153
165
|
})
|
|
154
166
|
}
|
|
155
167
|
}
|
|
@@ -163,7 +175,6 @@ const cropImage = (result, id) => {
|
|
|
163
175
|
cropper = new Cropper(img, {
|
|
164
176
|
viewMode: 3,
|
|
165
177
|
ready() {
|
|
166
|
-
console.log(id)
|
|
167
178
|
let find = featureData.elements.find((i) => i.id === id)
|
|
168
179
|
console.log(find)
|
|
169
180
|
cropper.setAspectRatio(Number(find.width) / Number(find.height))
|
|
@@ -191,6 +202,9 @@ document.querySelector('#crop').addEventListener('click', () => {
|
|
|
191
202
|
})
|
|
192
203
|
.toDataURL()
|
|
193
204
|
files[index - 1] = cropperImg
|
|
205
|
+
document.querySelector(`#image-pre-${index}`).src = cropperImg
|
|
206
|
+
document.querySelector(`#image-pre-${index}`).style.display = 'block'
|
|
207
|
+
document.querySelector(`#cam-${index}`).style.display = 'none'
|
|
194
208
|
cropModal.style.display = 'none'
|
|
195
209
|
})
|
|
196
210
|
const openExamplesModal = () => {
|
|
@@ -224,7 +238,7 @@ download.addEventListener('click', () => {
|
|
|
224
238
|
let url = canvas.toDataURL(`image/png`)
|
|
225
239
|
let a = document.createElement('a')
|
|
226
240
|
a.href = url
|
|
227
|
-
a.download = `safeimagekit-
|
|
241
|
+
a.download = `safeimagekit-photo-effect-image.png`
|
|
228
242
|
document.body.appendChild(a)
|
|
229
243
|
a.click()
|
|
230
244
|
if (lang === 'en') {
|
|
@@ -16,6 +16,17 @@
|
|
|
16
16
|
"x": 100,
|
|
17
17
|
"y": 100,
|
|
18
18
|
"id": "file-1"
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"type": "text",
|
|
22
|
+
"x": "200",
|
|
23
|
+
"y": "200",
|
|
24
|
+
"color": "red",
|
|
25
|
+
"fontFamily": "Calligraphy",
|
|
26
|
+
"fontPath": "/assets/fonts/Calligraphy.ttf",
|
|
27
|
+
"id": "text-1",
|
|
28
|
+
"fontSize": 50,
|
|
29
|
+
"fontSizeOption1": 10
|
|
19
30
|
}
|
|
20
31
|
]
|
|
21
32
|
}
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: appscms-tools-theme
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 2.
|
|
4
|
+
version: 2.3.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- vivek-appscms
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2022-08-
|
|
11
|
+
date: 2022-08-27 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|
|
@@ -2374,10 +2374,12 @@ files:
|
|
|
2374
2374
|
- _data/header/hi/data.json
|
|
2375
2375
|
- _data/help/en/help.json
|
|
2376
2376
|
- _data/home/en/en.json
|
|
2377
|
+
- _data/home/en/photoeffects.json
|
|
2377
2378
|
- _data/home/hi/hi.json
|
|
2378
2379
|
- _data/languagesupport/compress-pdf-langs.json
|
|
2379
2380
|
- _data/languagesupport/index-langs.json
|
|
2380
2381
|
- _data/photo-categories.json
|
|
2382
|
+
- _data/photoeffects.json
|
|
2381
2383
|
- _data/privacy/en/privacyPolicy.json
|
|
2382
2384
|
- _data/rating/rating.json
|
|
2383
2385
|
- _data/termAndCondition/en/termAndCondition.json
|
|
@@ -2440,6 +2442,7 @@ files:
|
|
|
2440
2442
|
- _layouts/home.html
|
|
2441
2443
|
- _layouts/homeResultPage.html
|
|
2442
2444
|
- _layouts/page.html
|
|
2445
|
+
- _layouts/photo-effects-home.html
|
|
2443
2446
|
- _layouts/post.html
|
|
2444
2447
|
- _layouts/privacyPolicy.html
|
|
2445
2448
|
- _layouts/termAndCondition.html
|
|
@@ -2590,6 +2593,7 @@ files:
|
|
|
2590
2593
|
- assets/images/gallary.png
|
|
2591
2594
|
- assets/images/keshav.webp
|
|
2592
2595
|
- assets/images/krutika.jpeg
|
|
2596
|
+
- assets/images/loader.gif
|
|
2593
2597
|
- assets/images/logo.png
|
|
2594
2598
|
- assets/images/paavan.webp
|
|
2595
2599
|
- assets/images/rating.png
|