appscms-tools-theme 4.2.1 → 4.2.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/_data/home/en/en.json +429 -1
- data/_includes/appscms/howto/howto.html +35 -45
- data/_layouts/feature.html +299 -387
- data/_layouts/home.html +248 -266
- data/assets/css/tools.css +21 -0
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 3de4e802df8fceece556c85e96a6246947a6694c519046f8831d4e0fc3f0480a
|
|
4
|
+
data.tar.gz: de4090a1dc61e3ed5e350e1e87377e9a88cc5f5d1bda9a0ba41ee509e91be7c7
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 50908d773d9ac23beca3a2847404cea70da444502991cc4ee77e7dad39d5d4fc0dd631f84b380c0f951161a8a991229779edb88b6328092da036cbc0350f5691
|
|
7
|
+
data.tar.gz: 307f387cbb3febe362728f7c7ace806dc28d47571659fa0a8fc394a19c520637020b3045ddd9ef12045494841127e600b268b7cd210d87d4ec5d7b5b0db24295
|
data/_data/home/en/en.json
CHANGED
|
@@ -1 +1,429 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"Language": "English",
|
|
3
|
+
"htmlLangAtt": "en",
|
|
4
|
+
"h1": "Welcome to the home page",
|
|
5
|
+
"h2": "All-in-one easy-to-use online PDF tools",
|
|
6
|
+
"TITLE": "Home Title",
|
|
7
|
+
"META": "See collection of all Android alarm libraries, filter by license, modified date, languages, and select best for your usecase.",
|
|
8
|
+
"keywords": "key1,key2,key3,key4",
|
|
9
|
+
"img": "/assets/bulb.svg",
|
|
10
|
+
"imgwidth": "40px",
|
|
11
|
+
"imgheight": "40px",
|
|
12
|
+
"imgalt": "altvalue",
|
|
13
|
+
"nofileupload": true,
|
|
14
|
+
"author": "ankita",
|
|
15
|
+
"contributors": [
|
|
16
|
+
{
|
|
17
|
+
"name": "Ankita"
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"name": "udit"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"name": "Compress"
|
|
24
|
+
}
|
|
25
|
+
],
|
|
26
|
+
"features": [
|
|
27
|
+
{
|
|
28
|
+
"name": "Appscms Media tool",
|
|
29
|
+
"description": "Appscms feature layout with new design",
|
|
30
|
+
"color": "linear-gradient(148deg, #835af2 20%, #1220d8 100%)",
|
|
31
|
+
"icon": "/assets/images/digipaint.svg",
|
|
32
|
+
"url": "/appscms-feature"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"name": "Erase tool",
|
|
36
|
+
"description": "Appscms feature layout with new design",
|
|
37
|
+
"color": "linear-gradient(148deg, #31d3bd 20%, #187cca 100%)",
|
|
38
|
+
"icon": "/assets/images/digipaint.svg",
|
|
39
|
+
"url": "/appscms-feature"
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"name": "Pdf tool",
|
|
43
|
+
"description": "Appscms feature layout with new design",
|
|
44
|
+
"color": "linear-gradient(148deg, #32a0f7 20%, #114793 100%)",
|
|
45
|
+
"icon": "/assets/images/digipaint.svg",
|
|
46
|
+
"url": "/appscms-feature"
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"name": "Appscms Video Split",
|
|
50
|
+
"description": "Appscms feature layout with new design",
|
|
51
|
+
"color": "linear-gradient(148deg, #ffa16b 20%, #db410a 100%)",
|
|
52
|
+
"icon": "/assets/images/digipaint.svg",
|
|
53
|
+
"url": "/appscms-feature"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"name": "Appscms resize tool",
|
|
57
|
+
"description": "Appscms feature layout with new design",
|
|
58
|
+
"color": "#1A2EE7",
|
|
59
|
+
"icon": "/assets/images/digipaint.svg",
|
|
60
|
+
"url": "/appscms-feature"
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"name": "Appscms Audio kit",
|
|
64
|
+
"description": "Appscms feature layout with new design",
|
|
65
|
+
"color": "#1A2EE7",
|
|
66
|
+
"icon": "/assets/images/digipaint.svg",
|
|
67
|
+
"url": "/appscms-feature"
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"name": "Appscms feature",
|
|
71
|
+
"description": "Appscms feature layout with new design",
|
|
72
|
+
"color": "#1A2EE7",
|
|
73
|
+
"icon": "/assets/images/digipaint.svg",
|
|
74
|
+
"url": "/appscms-feature"
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"name": "Appscms feature",
|
|
78
|
+
"description": "Appscms feature layout with new design",
|
|
79
|
+
"color": "#1A2EE7",
|
|
80
|
+
"icon": "/assets/images/digipaint.svg",
|
|
81
|
+
"url": "/appscms-feature"
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"name": "Appscms feature",
|
|
85
|
+
"description": "Appscms feature layout with new design",
|
|
86
|
+
"color": "#1A2EE7",
|
|
87
|
+
"icon": "/assets/images/digipaint.svg",
|
|
88
|
+
"url": "/appscms-feature"
|
|
89
|
+
}
|
|
90
|
+
],
|
|
91
|
+
"TEXTUAL_CONTENT": [
|
|
92
|
+
{
|
|
93
|
+
"priority": 1,
|
|
94
|
+
"logoUrl": "/assets/bulb.svg",
|
|
95
|
+
"header": "Simple to use",
|
|
96
|
+
"content": "Setalarmforme.com provides simplest way to set alarms for X minutes from now."
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
"priority": 1,
|
|
100
|
+
"logoUrl": "/assets/guaranty.svg",
|
|
101
|
+
"header": "Accurate alarms",
|
|
102
|
+
"content": "Alarms setup by Setalarmforme.com are accurate. You can rely on us completely to start alarm after $variable minutes."
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
"priority": 1,
|
|
106
|
+
"logoUrl": "/assets/support.svg",
|
|
107
|
+
"header": "Cross platform",
|
|
108
|
+
"content": "You can setup alarm for $variable minutes from now on any operating system, like Windows/Mac/Linux/Android/iPhone."
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
"priority": 1,
|
|
112
|
+
"logoUrl": "/assets/protect.svg",
|
|
113
|
+
"header": "Secure and trustworthy",
|
|
114
|
+
"content": "Setalarmforme.com does not require users to login for setting alarm for $variable minutes from now. No user information is send to our servers."
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"priority": 1,
|
|
118
|
+
"logoUrl": "/assets/easy.svg",
|
|
119
|
+
"header": "All timezones supported",
|
|
120
|
+
"content": "Using Setalarmforme.com you can set alarm to start after $variable minutes from current time, in any time zone."
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
"priority": 1,
|
|
124
|
+
"logoUrl": "/assets/cloud.svg",
|
|
125
|
+
"header": "No need to install any software",
|
|
126
|
+
"content": "Setalarmforme.com is a cloud and web based application. You do not need to install any software to use Setalarmforme.com while setting alarms for $variable minutes from now."
|
|
127
|
+
}
|
|
128
|
+
],
|
|
129
|
+
"FAQ": [
|
|
130
|
+
{
|
|
131
|
+
"question": "How many seconds from now, will the alarm ring ?",
|
|
132
|
+
"answer": "When you setup alarm for $variable minutes from now, the alarm will ring after { % $variable * 60 % } seconds.When you setup alarm for $variable minutes from now,"
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
"question": "Can I rely on Setalarmforme.com to setup alarm for $variable minutes from now ?",
|
|
136
|
+
"answer": "If you have set alarm for $variable minutes from now, you can be 100% sure that alarm will ring after $variable minutes. You can trust us completely.When you setup alarm for $variable minutes from now,"
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
"question": "What will happen to the alarm that I have set, if I refresh the browser ?",
|
|
140
|
+
"answer": "The alarm will still ring after $variable minutes, even if you refresh the browser, since we store the information in browser's local cache."
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
"question": "What will happen to the alarm that I have set, if I close the tab of browser in which Setalarmforme.com is opened ?",
|
|
144
|
+
"answer": "It will be gone. The alarm will not ring after $variable minutes, if you close the tab."
|
|
145
|
+
},
|
|
146
|
+
{
|
|
147
|
+
"question": "What will happen to the alarm that I have set, if I close the browser ?",
|
|
148
|
+
"answer": "Boosting the bass of your track will definitely affect the volume of your audio track. But that is very natural because you might be increasing or decreasing the decibels in the \"Gain\" feature according to your requirements. Boosting or reducing the volume of your soundtrack is exactly what this feature does."
|
|
149
|
+
}
|
|
150
|
+
],
|
|
151
|
+
"megaMenu": {
|
|
152
|
+
"nav-link-name": "Tools",
|
|
153
|
+
"dropdown": [
|
|
154
|
+
{
|
|
155
|
+
"categoryName": "Compress Pdf",
|
|
156
|
+
"links": [
|
|
157
|
+
{
|
|
158
|
+
"iconSrc": "/assets/cloud.svg",
|
|
159
|
+
"name": "Compress",
|
|
160
|
+
"url": "/",
|
|
161
|
+
"hover": "red"
|
|
162
|
+
},
|
|
163
|
+
{
|
|
164
|
+
"iconSrc": "/assets/cloud.svg",
|
|
165
|
+
"name": "Split",
|
|
166
|
+
"url": "/",
|
|
167
|
+
"hover": "blue"
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
"iconSrc": "/assets/easy.svg",
|
|
171
|
+
"name": "Merge Pdf",
|
|
172
|
+
"url": "/",
|
|
173
|
+
"hover": "green"
|
|
174
|
+
}
|
|
175
|
+
]
|
|
176
|
+
},
|
|
177
|
+
{
|
|
178
|
+
"categoryName": "Compress Pdf",
|
|
179
|
+
"links": [
|
|
180
|
+
{
|
|
181
|
+
"iconSrc": "/assets/cloud.svg",
|
|
182
|
+
"name": "Compress",
|
|
183
|
+
"url": "/",
|
|
184
|
+
"hover": "red"
|
|
185
|
+
},
|
|
186
|
+
{
|
|
187
|
+
"iconSrc": "/assets/cloud.svg",
|
|
188
|
+
"name": "Split",
|
|
189
|
+
"url": "/",
|
|
190
|
+
"hover": "blue"
|
|
191
|
+
},
|
|
192
|
+
{
|
|
193
|
+
"iconSrc": "/assets/easy.svg",
|
|
194
|
+
"name": "Merge Pdf",
|
|
195
|
+
"url": "/",
|
|
196
|
+
"hover": "green"
|
|
197
|
+
}
|
|
198
|
+
]
|
|
199
|
+
},
|
|
200
|
+
{
|
|
201
|
+
"categoryName": "Compress Pdf",
|
|
202
|
+
"links": [
|
|
203
|
+
{
|
|
204
|
+
"iconSrc": "/assets/cloud.svg",
|
|
205
|
+
"name": "Compress",
|
|
206
|
+
"url": "/",
|
|
207
|
+
"hover": "red"
|
|
208
|
+
},
|
|
209
|
+
{
|
|
210
|
+
"iconSrc": "/assets/cloud.svg",
|
|
211
|
+
"name": "Split",
|
|
212
|
+
"url": "/",
|
|
213
|
+
"hover": "blue"
|
|
214
|
+
},
|
|
215
|
+
{
|
|
216
|
+
"iconSrc": "/assets/easy.svg",
|
|
217
|
+
"name": "Merge Pdf",
|
|
218
|
+
"url": "/",
|
|
219
|
+
"hover": "green"
|
|
220
|
+
}
|
|
221
|
+
]
|
|
222
|
+
},
|
|
223
|
+
{
|
|
224
|
+
"categoryName": "Compress Pdf",
|
|
225
|
+
"links": [
|
|
226
|
+
{
|
|
227
|
+
"iconSrc": "/assets/cloud.svg",
|
|
228
|
+
"name": "Compress",
|
|
229
|
+
"url": "/",
|
|
230
|
+
"hover": "red"
|
|
231
|
+
},
|
|
232
|
+
{
|
|
233
|
+
"iconSrc": "/assets/cloud.svg",
|
|
234
|
+
"name": "Split",
|
|
235
|
+
"url": "/",
|
|
236
|
+
"hover": "blue"
|
|
237
|
+
},
|
|
238
|
+
{
|
|
239
|
+
"iconSrc": "/assets/easy.svg",
|
|
240
|
+
"name": "Merge Pdf",
|
|
241
|
+
"url": "/",
|
|
242
|
+
"hover": "green"
|
|
243
|
+
}
|
|
244
|
+
]
|
|
245
|
+
}
|
|
246
|
+
]
|
|
247
|
+
},
|
|
248
|
+
"filelang": "en",
|
|
249
|
+
"display_formats": [
|
|
250
|
+
"3gp",
|
|
251
|
+
"aac",
|
|
252
|
+
"acc",
|
|
253
|
+
"aff",
|
|
254
|
+
"ai",
|
|
255
|
+
"aiff",
|
|
256
|
+
"avi",
|
|
257
|
+
"bmp",
|
|
258
|
+
"cr2",
|
|
259
|
+
"dvd",
|
|
260
|
+
"flac",
|
|
261
|
+
"flv",
|
|
262
|
+
"gif",
|
|
263
|
+
"heic",
|
|
264
|
+
"html",
|
|
265
|
+
"jfif",
|
|
266
|
+
"jpeg",
|
|
267
|
+
"jpg",
|
|
268
|
+
"m4a",
|
|
269
|
+
"mkv",
|
|
270
|
+
"mov",
|
|
271
|
+
"mp3",
|
|
272
|
+
"mp4",
|
|
273
|
+
"mpeg",
|
|
274
|
+
"opus",
|
|
275
|
+
"pdf",
|
|
276
|
+
"png",
|
|
277
|
+
"psd",
|
|
278
|
+
"svg",
|
|
279
|
+
"tiff",
|
|
280
|
+
"vmv",
|
|
281
|
+
"wav",
|
|
282
|
+
"webm",
|
|
283
|
+
"webp",
|
|
284
|
+
"wma"
|
|
285
|
+
],
|
|
286
|
+
"compare_formats": [
|
|
287
|
+
"JPG",
|
|
288
|
+
"png"
|
|
289
|
+
],
|
|
290
|
+
"HOW_TO_CONTENT": {
|
|
291
|
+
"logoImageUrl": "/assets/idea.svg",
|
|
292
|
+
"YoutubeVideoUrl": "https://www.youtube.com/watch?v=DbpF0IXibkM&t=2s&ab_channel=Hwtests",
|
|
293
|
+
"heading": "How to generate the ASCII art from our image.",
|
|
294
|
+
"steps": [
|
|
295
|
+
"Upload the image or Click on the drop down arrow and select Dropbox/Google Drive",
|
|
296
|
+
"Hit the convert option to convert the image to an ASCII art.",
|
|
297
|
+
"Hit the download option to download the ASCII art.",
|
|
298
|
+
"Hurray!!! the ASCII art is ready to rock."
|
|
299
|
+
]
|
|
300
|
+
},
|
|
301
|
+
"USP_Heading": "USP Heading",
|
|
302
|
+
"USPS": [
|
|
303
|
+
{
|
|
304
|
+
"USP_VALUE": "USP_VALUE",
|
|
305
|
+
"USP_FACTOR": "USP_FACTOR"
|
|
306
|
+
},
|
|
307
|
+
{
|
|
308
|
+
"USP_VALUE": "USP_VALUE",
|
|
309
|
+
"USP_FACTOR": "USP_FACTOR"
|
|
310
|
+
},
|
|
311
|
+
{
|
|
312
|
+
"USP_VALUE": "USP_VALUE",
|
|
313
|
+
"USP_FACTOR": "USP_FACTOR"
|
|
314
|
+
},
|
|
315
|
+
{
|
|
316
|
+
"USP_VALUE": "USP_VALUE",
|
|
317
|
+
"USP_FACTOR": "USP_FACTOR"
|
|
318
|
+
},
|
|
319
|
+
{
|
|
320
|
+
"USP_VALUE": "USP_VALUE",
|
|
321
|
+
"USP_FACTOR": "USP_FACTOR"
|
|
322
|
+
}
|
|
323
|
+
],
|
|
324
|
+
"jsfilepaths": [],
|
|
325
|
+
"posts": [
|
|
326
|
+
{
|
|
327
|
+
"tags": [
|
|
328
|
+
"ok"
|
|
329
|
+
],
|
|
330
|
+
"categories": [
|
|
331
|
+
"Scrabble",
|
|
332
|
+
"history"
|
|
333
|
+
],
|
|
334
|
+
"layout": "appscms-post",
|
|
335
|
+
"title": "Everything has beauty, but not everyone can see",
|
|
336
|
+
"image": "/uploads/output-1.png",
|
|
337
|
+
"image2": "/uploads/8-jan.PNG",
|
|
338
|
+
"author": "Balark",
|
|
339
|
+
"comments": true,
|
|
340
|
+
"url": "history-of-company-copy-10",
|
|
341
|
+
"path": "_posts/2021-01-08-history-of-company copy 10.md"
|
|
342
|
+
},
|
|
343
|
+
{
|
|
344
|
+
"tags": [
|
|
345
|
+
"ok"
|
|
346
|
+
],
|
|
347
|
+
"categories": [
|
|
348
|
+
"Scrabble",
|
|
349
|
+
"history"
|
|
350
|
+
],
|
|
351
|
+
"layout": "appscms-post",
|
|
352
|
+
"title": "Everything has beauty, but not everyone can see",
|
|
353
|
+
"image": "/uploads/output-1.png",
|
|
354
|
+
"image2": "/uploads/8-jan.PNG",
|
|
355
|
+
"author": "Balark",
|
|
356
|
+
"comments": true,
|
|
357
|
+
"url": "history-of-company-copy-11",
|
|
358
|
+
"path": "_posts/2021-01-08-history-of-company copy 11.md"
|
|
359
|
+
},
|
|
360
|
+
{
|
|
361
|
+
"tags": [
|
|
362
|
+
"ok"
|
|
363
|
+
],
|
|
364
|
+
"categories": [
|
|
365
|
+
"Scrabble",
|
|
366
|
+
"history"
|
|
367
|
+
],
|
|
368
|
+
"layout": "appscms-post",
|
|
369
|
+
"title": "Everything has beauty, but not everyone can see",
|
|
370
|
+
"image": "/uploads/output-1.png",
|
|
371
|
+
"image2": "/uploads/8-jan.PNG",
|
|
372
|
+
"author": "Balark",
|
|
373
|
+
"comments": true,
|
|
374
|
+
"url": "history-of-company-copy-12",
|
|
375
|
+
"path": "_posts/2021-01-08-history-of-company copy 12.md"
|
|
376
|
+
},
|
|
377
|
+
{
|
|
378
|
+
"tags": [
|
|
379
|
+
"ok"
|
|
380
|
+
],
|
|
381
|
+
"categories": [
|
|
382
|
+
"Scrabble",
|
|
383
|
+
"history"
|
|
384
|
+
],
|
|
385
|
+
"layout": "appscms-post",
|
|
386
|
+
"title": "Everything has beauty, but not everyone can see",
|
|
387
|
+
"image": "/uploads/output-1.png",
|
|
388
|
+
"image2": "/uploads/8-jan.PNG",
|
|
389
|
+
"author": "Balark",
|
|
390
|
+
"comments": true,
|
|
391
|
+
"url": "history-of-company-copy-13",
|
|
392
|
+
"path": "_posts/2021-01-08-history-of-company copy 13.md"
|
|
393
|
+
},
|
|
394
|
+
{
|
|
395
|
+
"tags": [
|
|
396
|
+
"ok"
|
|
397
|
+
],
|
|
398
|
+
"categories": [
|
|
399
|
+
"Scrabble",
|
|
400
|
+
"history"
|
|
401
|
+
],
|
|
402
|
+
"layout": "appscms-post",
|
|
403
|
+
"title": "Everything has beauty, but not everyone can see",
|
|
404
|
+
"image": "/uploads/output-1.png",
|
|
405
|
+
"image2": "/uploads/8-jan.PNG",
|
|
406
|
+
"author": "Balark",
|
|
407
|
+
"comments": true,
|
|
408
|
+
"url": "history-of-company-copy-14",
|
|
409
|
+
"path": "_posts/2021-01-08-history-of-company copy 14.md"
|
|
410
|
+
},
|
|
411
|
+
{
|
|
412
|
+
"tags": [
|
|
413
|
+
"ok"
|
|
414
|
+
],
|
|
415
|
+
"categories": [
|
|
416
|
+
"Scrabble",
|
|
417
|
+
"history"
|
|
418
|
+
],
|
|
419
|
+
"layout": "appscms-post",
|
|
420
|
+
"title": "Everything has beauty, but not everyone can see",
|
|
421
|
+
"image": "/uploads/output-1.png",
|
|
422
|
+
"image2": "/uploads/8-jan.PNG",
|
|
423
|
+
"author": "Balark",
|
|
424
|
+
"comments": true,
|
|
425
|
+
"url": "history-of-company-copy-15",
|
|
426
|
+
"path": "_posts/2021-01-08-history-of-company copy 15.md"
|
|
427
|
+
}
|
|
428
|
+
]
|
|
429
|
+
}
|
|
@@ -8,43 +8,32 @@
|
|
|
8
8
|
{%- if pageData.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
|
|
9
9
|
<div class="how-to-video-wrapper">
|
|
10
10
|
{% assign video_url = pageData.HOW_TO_CONTENT.YoutubeVideoUrl %}
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
11
|
+
{% assign video_id = "" %}
|
|
12
|
+
{% if video_url contains "youtu.be/" %}
|
|
13
|
+
{% assign parts = video_url | split: "/" %}
|
|
14
|
+
{% assign video_id = parts[3] %}
|
|
15
|
+
{% elsif video_url contains "youtube.com/watch" %}
|
|
16
|
+
{% assign params = video_url | split: "?" | last | split: "&" %}
|
|
17
|
+
{% for param in params %}
|
|
18
|
+
{% if param contains "v=" %}
|
|
19
|
+
{% assign video_id = param | split: "=" | last %}
|
|
20
|
+
{% endif %}
|
|
21
|
+
{% endfor %}
|
|
22
|
+
{% endif %}
|
|
23
|
+
|
|
24
|
+
<div class="how-to-video h-100 w-100" data-videoid="{{video_id}}">
|
|
25
|
+
<img class="youtubeVideoPlayer" width="100%" height="100%" id="thumbnail-img" alt="thumbnail-img" />
|
|
26
|
+
<div class="youtube-play-btn-wrapper">
|
|
27
|
+
<button class="play-btn btn btn-primary" onClick="loadVideo()">►</button>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
30
|
</div>
|
|
31
31
|
{%- else -%}
|
|
32
32
|
<div class="how-to-img-wrapper">
|
|
33
|
-
<img
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
{%-
|
|
38
|
-
if
|
|
39
|
-
site.crossorigin
|
|
40
|
-
-%}
|
|
41
|
-
crossorigin
|
|
42
|
-
{%-
|
|
43
|
-
endif
|
|
44
|
-
-%}class="img-fluid align-self-end"
|
|
45
|
-
alt="Your Image"
|
|
46
|
-
style="width: 100%; height: 100%"
|
|
47
|
-
/>
|
|
33
|
+
<img src="{{pageData.HOW_TO_CONTENT.logoImageUrl}}" loading="lazy"
|
|
34
|
+
alt="{{pageData.HOW_TO_CONTENT.logoImageAlt | default: 'how to image' }}" {%- if site.crossorigin -%}
|
|
35
|
+
crossorigin {%- endif -%}class="img-fluid align-self-end" alt="Your Image"
|
|
36
|
+
style="width: 100%; height: 100%" />
|
|
48
37
|
</div>
|
|
49
38
|
{%- endif -%}
|
|
50
39
|
</div>
|
|
@@ -67,28 +56,29 @@
|
|
|
67
56
|
{%- endif -%}
|
|
68
57
|
</div>
|
|
69
58
|
</div>
|
|
59
|
+
|
|
70
60
|
{%- if pageData.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
|
|
71
61
|
<script>
|
|
72
62
|
let videoContainer = document.querySelector('.how-to-video');
|
|
73
63
|
let thumbnail = document.getElementById('thumbnail-img');
|
|
74
|
-
let videoId =videoContainer.getAttribute("data-videoid")
|
|
64
|
+
let videoId = videoContainer.getAttribute("data-videoid")
|
|
75
65
|
let thumbnailUrl = 'https://img.youtube.com/vi/' + videoId + '/maxresdefault.jpg';
|
|
76
66
|
console.log(videoId)
|
|
77
67
|
|
|
78
68
|
// Function to load video
|
|
79
69
|
function loadVideo() {
|
|
80
|
-
|
|
70
|
+
videoContainer.innerHTML = '<iframe loading="lazy" class="youtubeVideoPlayer" width="100%" height="100%" src="https://www.youtube.com/embed/' + videoId + '?autoplay=1&mute=1" allowfullscreen></iframe>';
|
|
81
71
|
}
|
|
82
72
|
// Function to handle lazy loading of the thumbnail
|
|
83
73
|
function lazyLoadThumbnail(entries, observer) {
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
74
|
+
entries.forEach(entry => {
|
|
75
|
+
if (entry.isIntersecting) {
|
|
76
|
+
// Load thumbnail when it becomes visible
|
|
77
|
+
thumbnail.src = thumbnailUrl;
|
|
78
|
+
// Stop observing once loaded
|
|
79
|
+
observer.unobserve(entry.target);
|
|
80
|
+
}
|
|
81
|
+
});
|
|
92
82
|
}
|
|
93
83
|
// Set up the Intersection Observer
|
|
94
84
|
var observer = new IntersectionObserver(lazyLoadThumbnail, { threshold: 0.1 });
|
|
@@ -96,4 +86,4 @@
|
|
|
96
86
|
// Optionally, you can add an event listener to trigger video loading on click or other interactions
|
|
97
87
|
thumbnail.addEventListener('click', loadVideo);
|
|
98
88
|
</script>
|
|
99
|
-
{%- endif -%}
|
|
89
|
+
{%- endif -%}
|