appscms-tools-theme 4.2.1 → 4.2.3
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/compress-pdf.json +1 -309
- data/_data/home/en/en.json +429 -1
- data/_data/rating/rating.json +1 -1
- data/_includes/appscms/customblog/relatedposts.html +2 -2
- data/_includes/appscms/head/bloghead.html +7 -0
- data/_includes/appscms/head/head.html +9 -1
- data/_includes/appscms/headings/devtool-headings.html +38 -0
- data/_includes/appscms/home/devtool-feature-boxes.html +71 -0
- data/_includes/appscms/howto/howto.html +35 -45
- data/_includes/appscms/navbars/devtool-navbar.html +50 -0
- data/_includes/appscms/navbars/devtool-toolbar.html +100 -0
- data/_includes/appscms/searchbar/devtool-searchbar.html +63 -0
- data/_includes/customblog/pageRelatedPosts.html +1 -1
- data/_includes/customblog/recentposts.html +1 -1
- data/_includes/customblog/relatedBlogs.html +1 -1
- data/_includes/customblog/relatedposts.html +2 -2
- data/_includes/postbox.html +1 -1
- data/_includes/section/recent_posts.html +1 -1
- data/_includes/section/related_categories_post.html +2 -2
- data/_layouts/appscms-author.html +2 -2
- data/_layouts/appscms-blog.html +1 -1
- data/_layouts/author.html +2 -2
- data/_layouts/blog-1.html +1 -1
- data/_layouts/blog.html +1 -1
- data/_layouts/devtool-blog.html +132 -0
- data/_layouts/devtool-feature.html +55 -0
- data/_layouts/devtool-home.html +54 -0
- data/_layouts/devtools.html +1 -1
- data/_layouts/feature.html +299 -387
- data/_layouts/home.html +248 -266
- data/assets/css/appscms-blog.css +1 -0
- data/assets/css/appscms-contenttool.css +1 -0
- data/assets/css/appscms-theme.css +1 -0
- data/assets/css/blog.css +1 -0
- data/assets/css/devtool-main.css +1351 -0
- data/assets/css/tools.css +21 -0
- metadata +12 -3
data/_layouts/feature.html
CHANGED
|
@@ -2,435 +2,347 @@
|
|
|
2
2
|
= page.folderName %} {% assign featureData= site.data[folder][lang][file] %}
|
|
3
3
|
<!DOCTYPE html>
|
|
4
4
|
<html lang="{{page.lang}}">
|
|
5
|
-
|
|
5
|
+
{% include head/index.html %}
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
{%- if featureData.alertmsg -%} {{featureData.alertmsg}} {%- else -%} We
|
|
16
|
-
do not upload any files to server, hence your data is 100% secure. {%-
|
|
17
|
-
endif -%}
|
|
18
|
-
</div>
|
|
7
|
+
<body>
|
|
8
|
+
{% include header/index.html %} {%- if site.safeui -%}
|
|
9
|
+
<div class="alert alert-{{featureData.variant | default: 'info'}} fade show text-center" role="alert"
|
|
10
|
+
id="safeui-alert">
|
|
11
|
+
<div class="container">
|
|
12
|
+
{%- if featureData.alertmsg -%} {{featureData.alertmsg}} {%- else -%} We
|
|
13
|
+
do not upload any files to server, hence your data is 100% secure. {%-
|
|
14
|
+
endif -%}
|
|
19
15
|
</div>
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
16
|
+
</div>
|
|
17
|
+
{%- endif -%} {%- if page.layout != "frame" and page.layout !=
|
|
18
|
+
"photo-effects-home" and page.layout != "video" and page.layout != "audio"
|
|
19
|
+
-%} {%- if site.newFeatureBox -%}
|
|
20
|
+
<div class="appscms-sidebar-left"></div>
|
|
21
|
+
<div class="appscms-sidebar-right"></div>
|
|
22
|
+
{%- endif -%}
|
|
26
23
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
class="
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
{%- else -%}
|
|
50
|
-
<svg
|
|
51
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
52
|
-
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
53
|
-
viewBox="0 0 36 36"
|
|
54
|
-
fill="#000"
|
|
55
|
-
>
|
|
56
|
-
<path
|
|
57
|
-
d="M6,6 L9,18 L6,30 L18,27 L30,30 L27,18 L30,6 L18,9 L6,6 Z M3,3 L18,6.75 L33,3 L29.25,18 L33,33 L18,29.25 L3,33 L6.75,18 L3,3 Z"
|
|
58
|
-
></path>
|
|
59
|
-
</svg>
|
|
60
|
-
{%- endif -%}
|
|
61
|
-
</div>
|
|
62
|
-
</span>
|
|
63
|
-
{%- assign featureh1 = featureData.H1 | replace: "$variable",
|
|
64
|
-
page.value -%}
|
|
65
|
-
<h1 id="feature-h1" class="feature-h1">
|
|
66
|
-
{%- for word in featureh1-%} {%- if forloop.first == true -%} {{word
|
|
67
|
-
| capitalize }} {%- else -%} {{word}} {%- endif -%} {%- endfor -%}
|
|
68
|
-
</h1>
|
|
69
|
-
</div>
|
|
70
|
-
{%- assign featureh2 = featureData.H2 | replace: "$variable", page.value
|
|
71
|
-
-%}
|
|
72
|
-
<h2 id="feature-h2" class="feature-h2">
|
|
73
|
-
{%- for word in featureh2 -%} {%- if forloop.first == true -%} {{word
|
|
24
|
+
<div class="flex-container pb-3">
|
|
25
|
+
<div class="flex-class py-4 mt-4 mt-md-0">
|
|
26
|
+
<div id="h1-img-wrapper" class="d-flex justify-content-center align-items-center">
|
|
27
|
+
<span id="h1-img" class="fHhdVc">
|
|
28
|
+
<div class="div-cont feature-img mr-2">
|
|
29
|
+
{%- if featureData.img -%}
|
|
30
|
+
<img style="width:{{featureData.imgwidth}};height:{{featureData.imgheight}};" src="{{featureData.img}}"
|
|
31
|
+
alt="{{featureData.imgalt}}" {%- if site.crossorigin -%} crossorigin {%- endif -%} />
|
|
32
|
+
{%- else -%}
|
|
33
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 36 36"
|
|
34
|
+
fill="#000">
|
|
35
|
+
<path
|
|
36
|
+
d="M6,6 L9,18 L6,30 L18,27 L30,30 L27,18 L30,6 L18,9 L6,6 Z M3,3 L18,6.75 L33,3 L29.25,18 L33,33 L18,29.25 L3,33 L6.75,18 L3,3 Z">
|
|
37
|
+
</path>
|
|
38
|
+
</svg>
|
|
39
|
+
{%- endif -%}
|
|
40
|
+
</div>
|
|
41
|
+
</span>
|
|
42
|
+
{%- assign featureh1 = featureData.H1 | replace: "$variable",
|
|
43
|
+
page.value -%}
|
|
44
|
+
<h1 id="feature-h1" class="feature-h1">
|
|
45
|
+
{%- for word in featureh1-%} {%- if forloop.first == true -%} {{word
|
|
74
46
|
| capitalize }} {%- else -%} {{word}} {%- endif -%} {%- endfor -%}
|
|
75
|
-
</
|
|
47
|
+
</h1>
|
|
76
48
|
</div>
|
|
49
|
+
{%- assign featureh2 = featureData.H2 | replace: "$variable", page.value
|
|
50
|
+
-%}
|
|
51
|
+
<h2 id="feature-h2" class="feature-h2">
|
|
52
|
+
{%- for word in featureh2 -%} {%- if forloop.first == true -%} {{word
|
|
53
|
+
| capitalize }} {%- else -%} {{word}} {%- endif -%} {%- endfor -%}
|
|
54
|
+
</h2>
|
|
77
55
|
</div>
|
|
56
|
+
</div>
|
|
78
57
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
class="
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
id="Inputbox"
|
|
126
|
-
class="boxes"
|
|
127
|
-
style="background: {{boxColor}};"
|
|
128
|
-
>
|
|
129
|
-
<img
|
|
130
|
-
height="21px"
|
|
131
|
-
width="21px"
|
|
132
|
-
src="/assets/images/add.svg"
|
|
133
|
-
alt="add"
|
|
134
|
-
{%-
|
|
135
|
-
if
|
|
136
|
-
site.crossorigin
|
|
137
|
-
-%}
|
|
138
|
-
crossorigin
|
|
139
|
-
{%-
|
|
140
|
-
endif
|
|
141
|
-
-%}
|
|
142
|
-
/>
|
|
143
|
-
<span class="ml-3">CHOOSE FILE</span>
|
|
144
|
-
</div>
|
|
145
|
-
<div class="file-pick-dropdown" style="background:{{boxColor}}">
|
|
146
|
-
<i class="fas fa-angle-down arrow-sign"></i>
|
|
147
|
-
<div class="file-picker-dropdown" style="display: none">
|
|
148
|
-
<button id="filepicker">
|
|
149
|
-
<svg
|
|
150
|
-
class="mr-3"
|
|
151
|
-
viewBox="0 0 24 24"
|
|
152
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
153
|
-
>
|
|
154
|
-
<path
|
|
155
|
-
id="Path"
|
|
156
|
-
d="M8.33331 3H15.6666L23 15H15.6666L8.33331 3Z"
|
|
157
|
-
fill="#FFC107"
|
|
158
|
-
></path>
|
|
159
|
-
<path
|
|
160
|
-
id="Path_2"
|
|
161
|
-
d="M4.6012 21L8.30086 15H23L19.3333 21H4.6012Z"
|
|
162
|
-
fill="#1976D2"
|
|
163
|
-
></path>
|
|
164
|
-
<path
|
|
165
|
-
id="Path_3"
|
|
166
|
-
d="M1 15.0625L4.60119 21L12 9L8.33333 3L1 15.0625Z"
|
|
167
|
-
fill="#4CAF50"
|
|
168
|
-
></path>
|
|
169
|
-
</svg>
|
|
170
|
-
Google Drive
|
|
171
|
-
</button>
|
|
172
|
-
<button id="dropbox">
|
|
173
|
-
<svg
|
|
174
|
-
class="mr-3"
|
|
175
|
-
viewBox="0 0 24 24"
|
|
176
|
-
fill="#0061FF"
|
|
177
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
178
|
-
>
|
|
179
|
-
<path
|
|
180
|
-
id="icon"
|
|
181
|
-
d="M12.0146 6.57367L6.50732 10.1473L12.0146 13.721L6.50732 17.2947L1 13.6912L6.50732 10.1176L1 6.57367L6.50732 3L12.0146 6.57367ZM6.47803 18.4263L11.9854 14.8527L17.4927 18.4263L11.9854 22L6.47803 18.4263ZM12.0146 13.6912L17.522 10.1176L12.0146 6.57367L17.4927 3L23 6.57367L17.4927 10.1473L23 13.721L17.4927 17.2947L12.0146 13.6912Z"
|
|
182
|
-
></path>
|
|
183
|
-
</svg>
|
|
184
|
-
Dropbox
|
|
185
|
-
</button>
|
|
186
|
-
</div>
|
|
58
|
+
{%- endif -%} {%- if site.noFeatureBox == true -%}
|
|
59
|
+
<div class="feature-content-box" id="theme-content-box">{{content}}</div>
|
|
60
|
+
{%- elsif site.newFeatureBox and page.newBox -%}
|
|
61
|
+
<div class="feature-content-box" id="theme-content-box">
|
|
62
|
+
<div class="container">
|
|
63
|
+
{%- assign boxColor =
|
|
64
|
+
site.data[page.folderName][page.lang][page.fileName].color -%} {%- if
|
|
65
|
+
page.removeBox != true -%}
|
|
66
|
+
<div class="custom-box" data-color="{{boxColor}}">
|
|
67
|
+
<div style="display: none" id="file-loader">
|
|
68
|
+
<img src="/assets/images/spinner.gif" alt="spinner" {%- if site.crossorigin -%} crossorigin {%- endif -%} />
|
|
69
|
+
<p>Please Wait ,Loading Your file</p>
|
|
70
|
+
</div>
|
|
71
|
+
<div class="saving-file-download-wrap" style="display: none">
|
|
72
|
+
<img loading="lazy" class="trust-img" src="/trust.svg" alt="trust" {%- if site.crossorigin -%} crossorigin {%-
|
|
73
|
+
endif -%} />
|
|
74
|
+
<p class="text-white my-2">Thanks for your patience</p>
|
|
75
|
+
<button class="btn" id="download-zip">Download</button>
|
|
76
|
+
</div>
|
|
77
|
+
<div class="file-input" id="inputbox" style="color: #fff">
|
|
78
|
+
<div class="m-auto">
|
|
79
|
+
<div class="d-flex justify-content-center align-items-center">
|
|
80
|
+
<div id="Inputbox" class="boxes" style="background: {{boxColor}};">
|
|
81
|
+
<img height="21px" width="21px" src="/assets/images/add.svg" alt="add" {%- if site.crossorigin -%}
|
|
82
|
+
crossorigin {%- endif -%} />
|
|
83
|
+
<span class="ml-3">CHOOSE FILE</span>
|
|
84
|
+
</div>
|
|
85
|
+
<div class="file-pick-dropdown" style="background:{{boxColor}}">
|
|
86
|
+
<i class="fas fa-angle-down arrow-sign"></i>
|
|
87
|
+
<div class="file-picker-dropdown" style="display: none">
|
|
88
|
+
<button id="filepicker">
|
|
89
|
+
<svg class="mr-3" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
90
|
+
<path id="Path" d="M8.33331 3H15.6666L23 15H15.6666L8.33331 3Z" fill="#FFC107"></path>
|
|
91
|
+
<path id="Path_2" d="M4.6012 21L8.30086 15H23L19.3333 21H4.6012Z" fill="#1976D2"></path>
|
|
92
|
+
<path id="Path_3" d="M1 15.0625L4.60119 21L12 9L8.33333 3L1 15.0625Z" fill="#4CAF50"></path>
|
|
93
|
+
</svg>
|
|
94
|
+
Google Drive
|
|
95
|
+
</button>
|
|
96
|
+
<button id="dropbox">
|
|
97
|
+
<svg class="mr-3" viewBox="0 0 24 24" fill="#0061FF" xmlns="http://www.w3.org/2000/svg">
|
|
98
|
+
<path id="icon"
|
|
99
|
+
d="M12.0146 6.57367L6.50732 10.1473L12.0146 13.721L6.50732 17.2947L1 13.6912L6.50732 10.1176L1 6.57367L6.50732 3L12.0146 6.57367ZM6.47803 18.4263L11.9854 14.8527L17.4927 18.4263L11.9854 22L6.47803 18.4263ZM12.0146 13.6912L17.522 10.1176L12.0146 6.57367L17.4927 3L23 6.57367L17.4927 10.1473L23 13.721L17.4927 17.2947L12.0146 13.6912Z">
|
|
100
|
+
</path>
|
|
101
|
+
</svg>
|
|
102
|
+
Dropbox
|
|
103
|
+
</button>
|
|
187
104
|
</div>
|
|
188
105
|
</div>
|
|
189
106
|
</div>
|
|
190
|
-
<p id="dropfile" class="text-dark">or drop your file here</p>
|
|
191
|
-
<p id="error" class="p-3"></p>
|
|
192
107
|
</div>
|
|
108
|
+
<p id="dropfile" class="text-dark">or drop your file here</p>
|
|
109
|
+
<p id="error" class="p-3"></p>
|
|
193
110
|
</div>
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
</div>
|
|
111
|
+
</div>
|
|
112
|
+
<div class="workspace">
|
|
113
|
+
<div class="row mx-auto">
|
|
114
|
+
<div class="col-md-10 mx-auto">{{content}}</div>
|
|
198
115
|
</div>
|
|
199
|
-
{%- endif -%}
|
|
200
116
|
</div>
|
|
117
|
+
{%- endif -%}
|
|
201
118
|
</div>
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
>
|
|
214
|
-
|
|
215
|
-
<div class="content-box">{{content}}</div>
|
|
216
|
-
</div>
|
|
119
|
+
</div>
|
|
120
|
+
{%- else -%} {%- if page.noBox == true -%}
|
|
121
|
+
<div class="feature-content-box" id="theme-content-box">{{content}}</div>
|
|
122
|
+
{%- else -%}
|
|
123
|
+
<div class="box-padding" id="theme-content-box">
|
|
124
|
+
<div class="d-flex" id="__cond-922051">
|
|
125
|
+
<div class="flex-container">
|
|
126
|
+
<div class="flex-class">
|
|
127
|
+
<div class="d-flex flex-column">
|
|
128
|
+
<div class="box"
|
|
129
|
+
style="background:{{featureData.color}};min-height:{{featureData.height}};width:{{featureData.width}}">
|
|
130
|
+
<div class="box-border"></div>
|
|
131
|
+
<div class="content-box">{{content}}</div>
|
|
217
132
|
</div>
|
|
218
133
|
</div>
|
|
219
134
|
</div>
|
|
220
135
|
</div>
|
|
221
136
|
</div>
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
></div>
|
|
227
|
-
{%- endif -%}
|
|
137
|
+
</div>
|
|
138
|
+
{%- endif -%} {%- endif -%} {%- if page.layout == "batch" -%}
|
|
139
|
+
<div class="w-100 line" style="border-top: 1px solid rgb(224, 224, 224)"></div>
|
|
140
|
+
{%- endif -%}
|
|
228
141
|
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
>
|
|
242
|
-
<
|
|
243
|
-
|
|
244
|
-
class="feature-card-img"
|
|
245
|
-
src="{{data.logoUrl}}"
|
|
246
|
-
loading="lazy"
|
|
247
|
-
height="48px"
|
|
248
|
-
width="48px"
|
|
249
|
-
alt="{{data.header}}"
|
|
250
|
-
{%-
|
|
251
|
-
if
|
|
252
|
-
site.crossorigin
|
|
253
|
-
-%}
|
|
254
|
-
crossorigin
|
|
255
|
-
{%-
|
|
256
|
-
endif
|
|
257
|
-
-%}
|
|
258
|
-
/>
|
|
142
|
+
<div class="container mt-4 mb-5">
|
|
143
|
+
<div class="row px-0">
|
|
144
|
+
{%- if site.monumetricId and page.url != '/' and page.lang == 'en' -%}
|
|
145
|
+
<div class="col-md-9 mx-auto">
|
|
146
|
+
<div class="row">
|
|
147
|
+
{%- endif -%} {% assign totalHeaderCount = 0 %} {% for data in
|
|
148
|
+
featureData.TEXTUAL_CONTENT %} {% assign words = data.header |
|
|
149
|
+
split: " " %} {% assign word_count = words | size %} {% assign
|
|
150
|
+
totalHeaderCount = totalHeaderCount | plus: word_count %} {% endfor
|
|
151
|
+
%} {% for data in featureData.TEXTUAL_CONTENT %}
|
|
152
|
+
<div
|
|
153
|
+
class="{%- if site.monumetricId and page.url != '/' and page.lang == 'en' -%} col-md-6 my-4 {%- else -%} col-md-4 my-4 {%- endif -%}">
|
|
154
|
+
<div>
|
|
155
|
+
<img class="feature-card-img" src="{{data.logoUrl}}" loading="lazy" height="48px" width="48px"
|
|
156
|
+
alt="{{data.header}}" {%- if site.crossorigin -%} crossorigin {%- endif -%} />
|
|
259
157
|
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
</div>
|
|
158
|
+
{%- if totalHeaderCount > site.count_of_words_in_headings -%}
|
|
159
|
+
<h2 class="feature-card-title">
|
|
160
|
+
{{data.header | replace: "$variable", page.value}}
|
|
161
|
+
</h2>
|
|
162
|
+
{%- else -%}
|
|
163
|
+
<div class="feature-card-title">
|
|
164
|
+
{{data.header | replace: "$variable", page.value}}
|
|
165
|
+
</div>
|
|
166
|
+
{%- endif -%}
|
|
167
|
+
<div class="feature-card-desc">
|
|
168
|
+
{{data.content | replace: "$variable", page.value}}
|
|
272
169
|
</div>
|
|
273
170
|
</div>
|
|
274
|
-
{% endfor %} {%- if site.monumetricId and page.url != '/' and
|
|
275
|
-
page.lang == 'en' -%}
|
|
276
171
|
</div>
|
|
172
|
+
{% endfor %} {%- if site.monumetricId and page.url != '/' and
|
|
173
|
+
page.lang == 'en' -%}
|
|
277
174
|
</div>
|
|
278
|
-
{%- endif -%}
|
|
279
175
|
</div>
|
|
176
|
+
{%- endif -%}
|
|
280
177
|
</div>
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
>
|
|
308
|
-
</iframe>
|
|
309
|
-
{%- else -%}
|
|
310
|
-
<iframe
|
|
311
|
-
height="100%"
|
|
312
|
-
width="100%"
|
|
313
|
-
loading="lazy"
|
|
314
|
-
class="youtubeVideoPlayer mb-5"
|
|
315
|
-
src="https://www.youtube.com/embed/{{video_id}}?autoplay=1&mute=1"
|
|
316
|
-
allowfullscreen
|
|
317
|
-
>
|
|
318
|
-
</iframe>
|
|
319
|
-
{%- endif -%}
|
|
178
|
+
</div>
|
|
179
|
+
<section class="how-to-section">
|
|
180
|
+
<div class="container">
|
|
181
|
+
<div class="row">
|
|
182
|
+
{%- if site.monumetricId and page.url != '/' and page.lang == 'en' -%}
|
|
183
|
+
<div class="col-md-9 mx-auto">
|
|
184
|
+
<div class="row">
|
|
185
|
+
{%- endif -%}
|
|
186
|
+
<div class="col-md-6 order-0">
|
|
187
|
+
{%- if featureData.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
|
|
188
|
+
<div class="how-to-video-wrapper">
|
|
189
|
+
{% assign video_url =
|
|
190
|
+
featureData.HOW_TO_CONTENT.YoutubeVideoUrl %} {% assign
|
|
191
|
+
video_id = "" %} {% if video_url contains "youtu.be/" %} {%
|
|
192
|
+
assign parts = video_url | split: "/" %} {% assign video_id =
|
|
193
|
+
parts[3] %} {% elsif video_url contains "youtube.com/watch" %}
|
|
194
|
+
{% assign params = video_url | split: "?" | last | split: "&"
|
|
195
|
+
%} {% for param in params %} {% if param contains "v=" %} {%
|
|
196
|
+
assign video_id = param | split: "=" | last %} {% endif %} {%
|
|
197
|
+
endfor %} {% endif %}
|
|
198
|
+
{%- if site.monumetricId -%}
|
|
199
|
+
<div class="how-to-video h-100 w-100" data-videoid="{{video_id}}">
|
|
200
|
+
<img class="youtubeVideoPlayer" width="100%" height="100%" id="thumbnail-img" alt="thumbnail-img" />
|
|
201
|
+
<div class="youtube-play-btn-wrapper">
|
|
202
|
+
<button class="play-btn btn btn-primary" onClick="loadVideo()">►</button>
|
|
203
|
+
</div>
|
|
320
204
|
</div>
|
|
321
205
|
{%- else -%}
|
|
322
|
-
<div class="how-to-
|
|
323
|
-
<img
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
src="{{featureData.HOW_TO_CONTENT.logoImageUrl}}"
|
|
328
|
-
loading="lazy"
|
|
329
|
-
alt="{{featureData.HOW_TO_CONTENT.logoImageAlt | default: 'how to image' }}"
|
|
330
|
-
{%-
|
|
331
|
-
if
|
|
332
|
-
site.crossorigin
|
|
333
|
-
-%}
|
|
334
|
-
crossorigin
|
|
335
|
-
{%-
|
|
336
|
-
endif
|
|
337
|
-
-%}
|
|
338
|
-
/>
|
|
206
|
+
<div class="how-to-video h-100 w-100" data-videoid="{{video_id}}">
|
|
207
|
+
<img class="youtubeVideoPlayer" width="100%" height="100%" id="thumbnail-img" alt="thumbnail-img" />
|
|
208
|
+
<div class="youtube-play-btn-wrapper">
|
|
209
|
+
<button class="play-btn btn btn-primary" onClick="loadVideo()">►</button>
|
|
210
|
+
</div>
|
|
339
211
|
</div>
|
|
340
212
|
{%- endif -%}
|
|
341
213
|
</div>
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
214
|
+
{%- else -%}
|
|
215
|
+
<div class="how-to-img-wrapper">
|
|
216
|
+
<img class="how-to-leftimg" height="180px" width="300px"
|
|
217
|
+
src="{{featureData.HOW_TO_CONTENT.logoImageUrl}}" loading="lazy"
|
|
218
|
+
alt="{{featureData.HOW_TO_CONTENT.logoImageAlt | default: 'how to image' }}" {%- if site.crossorigin
|
|
219
|
+
-%} crossorigin {%- endif -%} />
|
|
220
|
+
</div>
|
|
221
|
+
{%- endif -%}
|
|
222
|
+
</div>
|
|
223
|
+
<div class="col-md-6 order-1">
|
|
224
|
+
<div class="how-to-right">
|
|
225
|
+
<h3 class="how-to-title text-left">
|
|
226
|
+
{{featureData.HOW_TO_CONTENT.heading | replace: "$variable",
|
|
227
|
+
page.value}}
|
|
228
|
+
</h3>
|
|
229
|
+
<ol class="how-to-list">
|
|
230
|
+
{% for data in featureData.HOW_TO_CONTENT.steps %}
|
|
350
231
|
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
</div>
|
|
232
|
+
<li id="step{{forloop.index}}" class="how-to-list-item">
|
|
233
|
+
<span>{{forloop.index}}.</span>{{data | replace:
|
|
234
|
+
"$variable", page.value}}
|
|
235
|
+
</li>
|
|
236
|
+
{% endfor %}
|
|
237
|
+
</ol>
|
|
358
238
|
</div>
|
|
359
|
-
{%- if site.monumetricId and page.url != '/' and page.lang == 'en'
|
|
360
|
-
-%}
|
|
361
239
|
</div>
|
|
240
|
+
{%- if site.monumetricId and page.url != '/' and page.lang == 'en'
|
|
241
|
+
-%}
|
|
362
242
|
</div>
|
|
363
|
-
{%- endif -%}
|
|
364
243
|
</div>
|
|
244
|
+
{%- endif -%}
|
|
365
245
|
</div>
|
|
366
|
-
</
|
|
246
|
+
</div>
|
|
247
|
+
</section>
|
|
367
248
|
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
</li>
|
|
398
|
-
{% endfor %}
|
|
399
|
-
</ul>
|
|
400
|
-
</div>
|
|
249
|
+
{%- if page.layout == "feature" -%} {%- include bookmark.html -%} {%- endif
|
|
250
|
+
-%} {%- assign showFaqs= true -%} {%- for item in site.noFaqsList -%} {%- if
|
|
251
|
+
item == page.lang -%} {%- assign showFaqs = false -%} {%- break -%} {%- else
|
|
252
|
+
-%} {%- assign showFaqs = true -%} {%- endif -%} {%- endfor -%} {%- if
|
|
253
|
+
showFaqs == true -%} {%- if featureData.FAQ.size>0 -%}
|
|
254
|
+
<section class="faq-section">
|
|
255
|
+
<div class="container">
|
|
256
|
+
<div class="row">
|
|
257
|
+
<div class="col-md-8 mx-auto">
|
|
258
|
+
<div class="faq">
|
|
259
|
+
<h3 class="feature-h1 text-center mb-4">
|
|
260
|
+
{{featureData.faqheading | default: 'Frequently Asked
|
|
261
|
+
Questions'}}
|
|
262
|
+
</h3>
|
|
263
|
+
<ul class="list-unstyled">
|
|
264
|
+
{% for data in featureData.FAQ %}
|
|
265
|
+
<li>
|
|
266
|
+
<h3 class="faq-question" itemprop="name">
|
|
267
|
+
{{data.question | replace: "$variable", page.value}}<em style="transform: rotate(-135deg)">
|
|
268
|
+
<i></i></em>
|
|
269
|
+
</h3>
|
|
270
|
+
<div style="display: block">
|
|
271
|
+
<p class="faq-answer" itemprop="text">
|
|
272
|
+
{{data.answer | replace: "$variable", page.value}}
|
|
273
|
+
</p>
|
|
274
|
+
</div>
|
|
275
|
+
</li>
|
|
276
|
+
{% endfor %}
|
|
277
|
+
</ul>
|
|
401
278
|
</div>
|
|
402
279
|
</div>
|
|
403
280
|
</div>
|
|
404
|
-
</section>
|
|
405
|
-
{%- endif -%} {%- endif -%} {%- include share/socialshare.html -%} {%-
|
|
406
|
-
include Rating/rating.html -%} {%- if featureData.infographics.size > 0 -%}
|
|
407
|
-
{%- include infographics/infographics.html -%} {%- endif -%} {%- include
|
|
408
|
-
/Usp/usp.html -%} {%- if featureData.display_formats -%}
|
|
409
|
-
<div class="container compare-table">
|
|
410
|
-
{%- include fileformat/fileformatdetail.html -%}
|
|
411
|
-
</div>
|
|
412
|
-
{%- endif -%} {%- if featureData.compare_formats -%}
|
|
413
|
-
<div class="container file-detail-table">
|
|
414
|
-
{%- include fileformat/comparisonfiles.html -%}
|
|
415
281
|
</div>
|
|
282
|
+
</section>
|
|
283
|
+
{%- endif -%} {%- endif -%} {%- include share/socialshare.html -%} {%-
|
|
284
|
+
include Rating/rating.html -%} {%- if featureData.infographics.size > 0 -%}
|
|
285
|
+
{%- include infographics/infographics.html -%} {%- endif -%} {%- include
|
|
286
|
+
/Usp/usp.html -%} {%- if featureData.display_formats -%}
|
|
287
|
+
<div class="container compare-table">
|
|
288
|
+
{%- include fileformat/fileformatdetail.html -%}
|
|
289
|
+
</div>
|
|
290
|
+
{%- endif -%} {%- if featureData.compare_formats -%}
|
|
291
|
+
<div class="container file-detail-table">
|
|
292
|
+
{%- include fileformat/comparisonfiles.html -%}
|
|
293
|
+
</div>
|
|
294
|
+
|
|
295
|
+
{%- endif -%} {%- if site.userTrackingCount -%} {%- include
|
|
296
|
+
userTracking.html -%} {%- endif -%} {%- assign langen = "en" -%} {%- if
|
|
297
|
+
site.data[folder][langen][file].categories -%} {% assign categories=
|
|
298
|
+
site.data[folder][langen][file].categories %} {%- else -%} {% assign
|
|
299
|
+
categories= page.categories %} {%- endif -%} {%- if
|
|
300
|
+
site.data[folder][langen][file].tags -%} {% assign tags=
|
|
301
|
+
site.data[folder][langen][file].tags %} {%- else -%} {% assign tags=
|
|
302
|
+
page.tags %} {%- endif -%} {%- if featureData.posts.size > 0 -%} {%- include
|
|
303
|
+
customblog/pageRelatedPosts.html -%} {%- else -%} {%- if categories.size > 0
|
|
304
|
+
or tags.size > 0 -%} {%- include section/related_categories_post.html -%}
|
|
305
|
+
{%- else -%} {%- include section/recent_posts.html -%} {%- endif -%} {%-
|
|
306
|
+
endif -%} {%- if site.customblogdata -%} {%- if categories.size> 0 or
|
|
307
|
+
tags.size>0-%} {%- include customblog/relatedposts.html -%} {%- else -%} {%-
|
|
308
|
+
include customblog/recentposts.html -%} {% endif %} {%- endif -%} {%- if
|
|
309
|
+
featureData.author.size > 0 -%} {% include
|
|
310
|
+
featurePageAuthors/featurePageAuthors.html %} {%- endif -%} {% include
|
|
311
|
+
footer/index.html %} {%- if site.customCode -%} {%- include customCode.html
|
|
312
|
+
-%} {%- endif -%} {% include script.html %}
|
|
313
|
+
|
|
314
|
+
|
|
315
|
+
|
|
316
|
+
{%- if featureData.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
|
|
317
|
+
<script>
|
|
318
|
+
let videoContainer = document.querySelector('.how-to-video');
|
|
319
|
+
let thumbnail = document.getElementById('thumbnail-img');
|
|
320
|
+
let videoId = videoContainer.getAttribute("data-videoid")
|
|
321
|
+
let thumbnailUrl = 'https://img.youtube.com/vi/' + videoId + '/maxresdefault.jpg';
|
|
322
|
+
console.log(videoId)
|
|
323
|
+
|
|
324
|
+
// Function to load video
|
|
325
|
+
function loadVideo() {
|
|
326
|
+
videoContainer.innerHTML = '<iframe loading="lazy" class="youtubeVideoPlayer" width="100%" height="100%" src="https://www.youtube.com/embed/' + videoId + '?autoplay=1&mute=1" allowfullscreen></iframe>';
|
|
327
|
+
}
|
|
328
|
+
// Function to handle lazy loading of the thumbnail
|
|
329
|
+
function lazyLoadThumbnail(entries, observer) {
|
|
330
|
+
entries.forEach(entry => {
|
|
331
|
+
if (entry.isIntersecting) {
|
|
332
|
+
// Load thumbnail when it becomes visible
|
|
333
|
+
thumbnail.src = thumbnailUrl;
|
|
334
|
+
// Stop observing once loaded
|
|
335
|
+
observer.unobserve(entry.target);
|
|
336
|
+
}
|
|
337
|
+
});
|
|
338
|
+
}
|
|
339
|
+
// Set up the Intersection Observer
|
|
340
|
+
var observer = new IntersectionObserver(lazyLoadThumbnail, { threshold: 0.1 });
|
|
341
|
+
observer.observe(thumbnail);
|
|
342
|
+
// Optionally, you can add an event listener to trigger video loading on click or other interactions
|
|
343
|
+
thumbnail.addEventListener('click', loadVideo);
|
|
344
|
+
</script>
|
|
345
|
+
{%- endif -%}
|
|
346
|
+
</body>
|
|
416
347
|
|
|
417
|
-
|
|
418
|
-
userTracking.html -%} {%- endif -%} {%- assign langen = "en" -%} {%- if
|
|
419
|
-
site.data[folder][langen][file].categories -%} {% assign categories=
|
|
420
|
-
site.data[folder][langen][file].categories %} {%- else -%} {% assign
|
|
421
|
-
categories= page.categories %} {%- endif -%} {%- if
|
|
422
|
-
site.data[folder][langen][file].tags -%} {% assign tags=
|
|
423
|
-
site.data[folder][langen][file].tags %} {%- else -%} {% assign tags=
|
|
424
|
-
page.tags %} {%- endif -%} {%- if featureData.posts.size > 0 -%} {%- include
|
|
425
|
-
customblog/pageRelatedPosts.html -%} {%- else -%} {%- if categories.size > 0
|
|
426
|
-
or tags.size > 0 -%} {%- include section/related_categories_post.html -%}
|
|
427
|
-
{%- else -%} {%- include section/recent_posts.html -%} {%- endif -%} {%-
|
|
428
|
-
endif -%} {%- if site.customblogdata -%} {%- if categories.size> 0 or
|
|
429
|
-
tags.size>0-%} {%- include customblog/relatedposts.html -%} {%- else -%} {%-
|
|
430
|
-
include customblog/recentposts.html -%} {% endif %} {%- endif -%} {%- if
|
|
431
|
-
featureData.author.size > 0 -%} {% include
|
|
432
|
-
featurePageAuthors/featurePageAuthors.html %} {%- endif -%} {% include
|
|
433
|
-
footer/index.html %} {%- if site.customCode -%} {%- include customCode.html
|
|
434
|
-
-%} {%- endif -%} {% include script.html %}
|
|
435
|
-
</body>
|
|
436
|
-
</html>
|
|
348
|
+
</html>
|