appscms-tools-theme 3.8.0 → 3.8.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,42 +1,94 @@
1
1
  {% assign file = page.fileName %} {% assign lang = page.lang %} {% assign folder
2
- = page.folderName %} {% assign featureData= site.data[folder][lang][file] %}
3
- <!DOCTYPE html>
4
- <html lang="{{page.lang}}">
5
- {% include head/index.html %}
6
-
7
- <body>
8
- {% include header/index.html %} {%- if site.safeui -%}
9
- <div
10
- class="alert alert-{{featureData.variant | default: 'info'}} fade show text-center"
11
- role="alert"
12
- id="safeui-alert"
13
- >
14
- <div class="container">
15
- {%- if featureData.alertmsg -%} {{featureData.alertmsg}} {%- else -%} We
16
- do not upload any files to server, hence your data is 100% secure. {%-
17
- endif -%}
2
+ = page.folderName %} {% assign featureData= site.data[folder][lang][file] %}
3
+ <!DOCTYPE html>
4
+ <html lang="{{page.lang}}">
5
+ {% include head/index.html %}
6
+
7
+ <body>
8
+ {% include header/index.html %} {%- if site.safeui -%}
9
+ <div
10
+ class="alert alert-{{featureData.variant | default: 'info'}} fade show text-center"
11
+ role="alert"
12
+ id="safeui-alert"
13
+ >
14
+ <div class="container">
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>
18
19
  </div>
19
- </div>
20
- {%- endif -%} {%- if page.layout != "frame" and page.layout !=
21
- "photo-effects-home" and page.layout != "video" and page.layout != "audio"
22
- -%} {%- if site.newFeatureBox -%}
23
- <div class="appscms-sidebar-left"></div>
24
- <div class="appscms-sidebar-right"></div>
25
- {%- endif -%}
26
-
27
- <div class="flex-container pb-3">
28
- <div class="flex-class py-4 mt-4 mt-md-0">
29
- <div
30
- id="h1-img-wrapper"
31
- class="d-flex justify-content-center align-items-center"
32
- >
33
- <span id="h1-img" class="fHhdVc">
34
- <div class="div-cont feature-img mr-2">
35
- {%- if featureData.img -%}
20
+ {%- endif -%} {%- if page.layout != "frame" and page.layout !=
21
+ "photo-effects-home" and page.layout != "video" and page.layout != "audio"
22
+ -%} {%- if site.newFeatureBox -%}
23
+ <div class="appscms-sidebar-left"></div>
24
+ <div class="appscms-sidebar-right"></div>
25
+ {%- endif -%}
26
+
27
+ <div class="flex-container pb-3">
28
+ <div class="flex-class py-4 mt-4 mt-md-0">
29
+ <div
30
+ id="h1-img-wrapper"
31
+ class="d-flex justify-content-center align-items-center"
32
+ >
33
+ <span id="h1-img" class="fHhdVc">
34
+ <div class="div-cont feature-img mr-2">
35
+ {%- if featureData.img -%}
36
+ <img
37
+ style="width:{{featureData.imgwidth}};height:{{featureData.imgheight}};"
38
+ src="{{featureData.img}}"
39
+ alt="{{featureData.imgalt}}"
40
+ {%-
41
+ if
42
+ site.crossorigin
43
+ -%}
44
+ crossorigin
45
+ {%-
46
+ endif
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
74
+ | capitalize }} {%- else -%} {{word}} {%- endif -%} {%- endfor -%}
75
+ </h2>
76
+ </div>
77
+ </div>
78
+
79
+ {%- endif -%} {%- if site.noFeatureBox == true -%}
80
+ <div class="feature-content-box" id="theme-content-box">{{content}}</div>
81
+ {%- elsif site.newFeatureBox and page.newBox -%}
82
+ <div class="feature-content-box" id="theme-content-box">
83
+ <div class="container">
84
+ {%- assign boxColor =
85
+ site.data[page.folderName][page.lang][page.fileName].color -%} {%- if
86
+ page.removeBox != true -%}
87
+ <div class="custom-box" data-color="{{boxColor}}">
88
+ <div style="display: none" id="file-loader">
36
89
  <img
37
- style="width:{{featureData.imgwidth}};height:{{featureData.imgheight}};"
38
- src="{{featureData.img}}"
39
- alt="{{featureData.imgalt}}"
90
+ src="/spinner.gif"
91
+ alt="spinner"
40
92
  {%-
41
93
  if
42
94
  site.crossorigin
@@ -46,285 +98,158 @@
46
98
  endif
47
99
  -%}
48
100
  />
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 -%}
101
+ <p>Please Wait ,Loading Your file</p>
61
102
  </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
74
- | capitalize }} {%- else -%} {{word}} {%- endif -%} {%- endfor -%}
75
- </h2>
76
- </div>
77
- </div>
78
-
79
- {%- endif -%} {%- if site.noFeatureBox == true -%}
80
- <div class="feature-content-box" id="theme-content-box">{{content}}</div>
81
- {%- elsif site.newFeatureBox and page.newBox -%}
82
- <div class="feature-content-box" id="theme-content-box">
83
- <div class="container">
84
- {%- assign boxColor =
85
- site.data[page.folderName][page.lang][page.fileName].color -%} {%- if
86
- page.removeBox != true -%}
87
- <div class="custom-box" data-color="{{boxColor}}">
88
- <div style="display: none" id="file-loader">
89
- <img
90
- src="/spinner.gif"
91
- alt="spinner"
92
- {%-
93
- if
94
- site.crossorigin
95
- -%}
96
- crossorigin
97
- {%-
98
- endif
99
- -%}
100
- />
101
- <p>Please Wait ,Loading Your file</p>
102
- </div>
103
- <div class="saving-file-download-wrap" style="display: none">
104
- <img
105
- loading="lazy"
106
- class="trust-img"
107
- src="/trust.svg"
108
- alt="trust"
109
- {%-
110
- if
111
- site.crossorigin
112
- -%}
113
- crossorigin
114
- {%-
115
- endif
116
- -%}
117
- />
118
- <p class="text-white my-2">Thanks for your patience</p>
119
- <button class="btn" id="download-zip">Download</button>
120
- </div>
121
- <div class="file-input" id="inputbox" style="color: #fff">
122
- <div class="m-auto">
123
- <div class="d-flex justify-content-center align-items-center">
124
- <div
125
- id="Inputbox"
126
- class="boxes"
127
- style="background-color: {{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
146
- class="file-pick-dropdown"
147
- style="background-color:{{boxColor}}"
148
- >
149
- <i class="fas fa-angle-down arrow-sign"></i>
150
- <div class="file-picker-dropdown" style="display: none">
151
- <button id="filepicker">
152
- <svg
153
- class="mr-3"
154
- viewBox="0 0 24 24"
155
- xmlns="http://www.w3.org/2000/svg"
156
- >
157
- <path
158
- id="Path"
159
- d="M8.33331 3H15.6666L23 15H15.6666L8.33331 3Z"
160
- fill="#FFC107"
161
- ></path>
162
- <path
163
- id="Path_2"
164
- d="M4.6012 21L8.30086 15H23L19.3333 21H4.6012Z"
165
- fill="#1976D2"
166
- ></path>
167
- <path
168
- id="Path_3"
169
- d="M1 15.0625L4.60119 21L12 9L8.33333 3L1 15.0625Z"
170
- fill="#4CAF50"
171
- ></path>
172
- </svg>
173
- Google Drive
174
- </button>
175
- <button id="dropbox">
176
- <svg
177
- class="mr-3"
178
- viewBox="0 0 24 24"
179
- fill="#0061FF"
180
- xmlns="http://www.w3.org/2000/svg"
181
- >
182
- <path
183
- id="icon"
184
- 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"
185
- ></path>
186
- </svg>
187
- Dropbox
188
- </button>
103
+ <div class="saving-file-download-wrap" style="display: none">
104
+ <img
105
+ loading="lazy"
106
+ class="trust-img"
107
+ src="/trust.svg"
108
+ alt="trust"
109
+ {%-
110
+ if
111
+ site.crossorigin
112
+ -%}
113
+ crossorigin
114
+ {%-
115
+ endif
116
+ -%}
117
+ />
118
+ <p class="text-white my-2">Thanks for your patience</p>
119
+ <button class="btn" id="download-zip">Download</button>
120
+ </div>
121
+ <div class="file-input" id="inputbox" style="color: #fff">
122
+ <div class="m-auto">
123
+ <div class="d-flex justify-content-center align-items-center">
124
+ <div
125
+ id="Inputbox"
126
+ class="boxes"
127
+ style="background-color: {{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
146
+ class="file-pick-dropdown"
147
+ style="background-color:{{boxColor}}"
148
+ >
149
+ <i class="fas fa-angle-down arrow-sign"></i>
150
+ <div class="file-picker-dropdown" style="display: none">
151
+ <button id="filepicker">
152
+ <svg
153
+ class="mr-3"
154
+ viewBox="0 0 24 24"
155
+ xmlns="http://www.w3.org/2000/svg"
156
+ >
157
+ <path
158
+ id="Path"
159
+ d="M8.33331 3H15.6666L23 15H15.6666L8.33331 3Z"
160
+ fill="#FFC107"
161
+ ></path>
162
+ <path
163
+ id="Path_2"
164
+ d="M4.6012 21L8.30086 15H23L19.3333 21H4.6012Z"
165
+ fill="#1976D2"
166
+ ></path>
167
+ <path
168
+ id="Path_3"
169
+ d="M1 15.0625L4.60119 21L12 9L8.33333 3L1 15.0625Z"
170
+ fill="#4CAF50"
171
+ ></path>
172
+ </svg>
173
+ Google Drive
174
+ </button>
175
+ <button id="dropbox">
176
+ <svg
177
+ class="mr-3"
178
+ viewBox="0 0 24 24"
179
+ fill="#0061FF"
180
+ xmlns="http://www.w3.org/2000/svg"
181
+ >
182
+ <path
183
+ id="icon"
184
+ 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"
185
+ ></path>
186
+ </svg>
187
+ Dropbox
188
+ </button>
189
+ </div>
189
190
  </div>
190
191
  </div>
191
192
  </div>
193
+ <p id="dropfile" class="text-dark">or drop your file here</p>
194
+ <p id="error" class="p-3"></p>
192
195
  </div>
193
- <p id="dropfile" class="text-dark">or drop your file here</p>
194
- <p id="error" class="p-3"></p>
195
- </div>
196
- </div>
197
- <div class="workspace">
198
- <div class="row mx-auto">
199
- <div class="col-md-10 mx-auto">{{content}}</div>
200
196
  </div>
201
- </div>
202
- {%- endif -%}
203
- </div>
204
- </div>
205
- {%- else -%} {%- if page.noBox == true -%}
206
- <div class="feature-content-box" id="theme-content-box">{{content}}</div>
207
- {%- else -%}
208
- <div class="box-padding" id="theme-content-box">
209
- <div class="d-flex" id="__cond-922051">
210
- <div class="flex-container">
211
- <div class="flex-class">
212
- <div class="d-flex flex-column">
213
- <div
214
- class="box"
215
- style="background:{{featureData.color}};min-height:{{featureData.height}};width:{{featureData.width}}"
216
- >
217
- <div class="box-border"></div>
218
- <div class="content-box">{{content}}</div>
219
- </div>
197
+ <div class="workspace">
198
+ <div class="row mx-auto">
199
+ <div class="col-md-10 mx-auto">{{content}}</div>
220
200
  </div>
221
201
  </div>
202
+ {%- endif -%}
222
203
  </div>
223
204
  </div>
224
- </div>
225
- {%- endif -%} {%- endif -%} {%- if page.layout == "batch" -%}
226
- <div
227
- class="w-100 line"
228
- style="border-top: 1px solid rgb(224, 224, 224)"
229
- ></div>
230
- {%- endif -%}
231
-
232
- <div class="container mt-4 mb-5">
233
- <div class="row px-0">
234
- {%- if site.monumetricId and page.url != '/' and page.lang == 'en' -%}
235
- <div class="col-md-9 mx-auto">
236
- <div class="row">
237
- {%- endif -%} {% assign totalHeaderCount = 0 %} {% for data in
238
- featureData.TEXTUAL_CONTENT %} {% assign words = data.header |
239
- split: " " %} {% assign word_count = words | size %} {% assign
240
- totalHeaderCount = totalHeaderCount | plus: word_count %} {% endfor
241
- %} {% for data in featureData.TEXTUAL_CONTENT %}
242
- <div
243
- class="{%- if site.monumetricId and page.url != '/' and page.lang == 'en' -%} col-md-6 my-4 {%- else -%} col-md-4 my-4 {%- endif -%}"
244
- >
245
- <div>
246
- <img
247
- class="feature-card-img"
248
- src="{{data.logoUrl}}"
249
- loading="lazy"
250
- height="48px"
251
- width="48px"
252
- alt="{{data.header}}"
253
- {%-
254
- if
255
- site.crossorigin
256
- -%}
257
- crossorigin
258
- {%-
259
- endif
260
- -%}
261
- />
262
-
263
- {%- if totalHeaderCount > site.count_of_words_in_headings -%}
264
- <h2 class="feature-card-title">
265
- {{data.header | replace: "$variable", page.value}}
266
- </h2>
267
- {%- else -%}
268
- <div class="feature-card-title">
269
- {{data.header | replace: "$variable", page.value}}
270
- </div>
271
- {%- endif -%}
272
- <div class="feature-card-desc">
273
- {{data.content | replace: "$variable", page.value}}
205
+ {%- else -%} {%- if page.noBox == true -%}
206
+ <div class="feature-content-box" id="theme-content-box">{{content}}</div>
207
+ {%- else -%}
208
+ <div class="box-padding" id="theme-content-box">
209
+ <div class="d-flex" id="__cond-922051">
210
+ <div class="flex-container">
211
+ <div class="flex-class">
212
+ <div class="d-flex flex-column">
213
+ <div
214
+ class="box"
215
+ style="background:{{featureData.color}};min-height:{{featureData.height}};width:{{featureData.width}}"
216
+ >
217
+ <div class="box-border"></div>
218
+ <div class="content-box">{{content}}</div>
274
219
  </div>
275
220
  </div>
276
221
  </div>
277
- {% endfor %} {%- if site.monumetricId and page.url != '/' and
278
- page.lang == 'en' -%}
279
222
  </div>
280
223
  </div>
281
- {%- endif -%}
282
224
  </div>
283
- </div>
284
- <section class="how-to-section">
285
- <div class="container">
286
- <div class="row">
225
+ {%- endif -%} {%- endif -%} {%- if page.layout == "batch" -%}
226
+ <div
227
+ class="w-100 line"
228
+ style="border-top: 1px solid rgb(224, 224, 224)"
229
+ ></div>
230
+ {%- endif -%}
231
+
232
+ <div class="container mt-4 mb-5">
233
+ <div class="row px-0">
287
234
  {%- if site.monumetricId and page.url != '/' and page.lang == 'en' -%}
288
235
  <div class="col-md-9 mx-auto">
289
236
  <div class="row">
290
- {%- endif -%}
291
- <div class="col-md-6 order-0">
292
- {%- if featureData.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
293
- <div class="how-to-video-wrapper">
294
- {% assign video_url =
295
- featureData.HOW_TO_CONTENT.YoutubeVideoUrl %} {% assign params
296
- = video_url | split: "?" | last | split: "&" %} {% for param
297
- in params %} {% if param contains "v=" %} {% assign video_id =
298
- param | split: "=" | last %} {% endif %} {% endfor %} {%- if
299
- site.monumetricId -%}
300
- <iframe
301
- class="youtubeVideoPlayer mb-5"
302
- width="400"
303
- height="315"
304
- src="https://www.youtube.com/embed/{{video_id}}?autoplay=1&mute=1"
305
- allowfullscreen
306
- >
307
- </iframe>
308
- {%- else -%}
309
- <iframe
310
- class="youtubeVideoPlayer mb-5"
311
- width="500"
312
- height="315"
313
- src="https://www.youtube.com/embed/{{video_id}}?autoplay=1&mute=1"
314
- allowfullscreen
315
- >
316
- </iframe>
317
- {%- endif -%}
318
- </div>
319
- {%- else -%}
320
- <div class="how-to-img-wrapper">
237
+ {%- endif -%} {% assign totalHeaderCount = 0 %} {% for data in
238
+ featureData.TEXTUAL_CONTENT %} {% assign words = data.header |
239
+ split: " " %} {% assign word_count = words | size %} {% assign
240
+ totalHeaderCount = totalHeaderCount | plus: word_count %} {% endfor
241
+ %} {% for data in featureData.TEXTUAL_CONTENT %}
242
+ <div
243
+ class="{%- if site.monumetricId and page.url != '/' and page.lang == 'en' -%} col-md-6 my-4 {%- else -%} col-md-4 my-4 {%- endif -%}"
244
+ >
245
+ <div>
321
246
  <img
322
- class="how-to-leftimg"
323
- height="180px"
324
- width="300px"
325
- src="{{featureData.HOW_TO_CONTENT.logoImageUrl}}"
247
+ class="feature-card-img"
248
+ src="{{data.logoUrl}}"
326
249
  loading="lazy"
327
- alt="{{featureData.HOW_TO_CONTENT.logoImageAlt | default: 'how to image' }}"
250
+ height="48px"
251
+ width="48px"
252
+ alt="{{data.header}}"
328
253
  {%-
329
254
  if
330
255
  site.crossorigin
@@ -334,101 +259,162 @@
334
259
  endif
335
260
  -%}
336
261
  />
337
- </div>
338
- {%- endif -%}
339
- </div>
340
- <div class="col-md-6 order-1">
341
- <div class="how-to-right">
342
- <h3 class="how-to-title text-left">
343
- {{featureData.HOW_TO_CONTENT.heading | replace: "$variable",
344
- page.value}}
345
- </h3>
346
- <ol class="how-to-list">
347
- {% for data in featureData.HOW_TO_CONTENT.steps %}
348
-
349
- <li id="step{{forloop.index}}" class="how-to-list-item">
350
- <span>{{forloop.index}}.</span>{{data | replace:
351
- "$variable", page.value}}
352
- </li>
353
- {% endfor %}
354
- </ol>
262
+
263
+ {%- if totalHeaderCount > site.count_of_words_in_headings -%}
264
+ <h2 class="feature-card-title">
265
+ {{data.header | replace: "$variable", page.value}}
266
+ </h2>
267
+ {%- else -%}
268
+ <div class="feature-card-title">
269
+ {{data.header | replace: "$variable", page.value}}
270
+ </div>
271
+ {%- endif -%}
272
+ <div class="feature-card-desc">
273
+ {{data.content | replace: "$variable", page.value}}
274
+ </div>
355
275
  </div>
356
276
  </div>
357
- {%- if site.monumetricId and page.url != '/' and page.lang == 'en'
358
- -%}
277
+ {% endfor %} {%- if site.monumetricId and page.url != '/' and
278
+ page.lang == 'en' -%}
359
279
  </div>
360
280
  </div>
361
281
  {%- endif -%}
362
282
  </div>
363
283
  </div>
364
- </section>
365
-
366
- {%- if page.layout == "feature" -%} {%- include bookmark.html -%} {%- endif
367
- -%} {%- assign showFaqs= true -%} {%- for item in site.noFaqsList -%} {%- if
368
- item == page.lang -%} {%- assign showFaqs = false -%} {%- break -%} {%- else
369
- -%} {%- assign showFaqs = true -%} {%- endif -%} {%- endfor -%} {%- if
370
- showFaqs == true -%} {%- if featureData.FAQ.size>0 -%}
371
- <section class="faq-section">
372
- <div class="container">
373
- <div class="row">
374
- <div class="col-md-8 mx-auto">
375
- <div class="faq">
376
- <h3 class="feature-h1 text-center mb-4">
377
- {{featureData.faqheading | default: 'Frequently Asked
378
- Questions'}}
379
- </h3>
380
- <ul class="list-unstyled">
381
- {% for data in featureData.FAQ %}
382
- <li>
383
- <h3 class="faq-question" itemprop="name">
384
- {{data.question | replace: "$variable", page.value}}<em
385
- style="transform: rotate(-135deg)"
386
- >
387
- <i></i
388
- ></em>
389
- </h3>
390
- <div style="display: block">
391
- <p class="faq-answer" itemprop="text">
392
- {{data.answer | replace: "$variable", page.value}}
393
- </p>
284
+ <section class="how-to-section">
285
+ <div class="container">
286
+ <div class="row">
287
+ {%- if site.monumetricId and page.url != '/' and page.lang == 'en' -%}
288
+ <div class="col-md-9 mx-auto">
289
+ <div class="row">
290
+ {%- endif -%}
291
+ <div class="col-md-6 order-0">
292
+ {%- if featureData.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
293
+ <div class="how-to-video-wrapper">
294
+ {% assign video_url = featureData.HOW_TO_CONTENT.YoutubeVideoUrl %}
295
+ {% assign video_id = "" %}
296
+ {% if video_url contains "youtu.be/" %}
297
+ {% assign parts = video_url | split: "/" %}
298
+ {% assign video_id = parts[3] %}
299
+ {% elsif video_url contains "youtube.com/watch" %}
300
+ {% assign params = video_url | split: "?" | last | split: "&" %}
301
+ {% for param in params %}
302
+ {% if param contains "v=" %}
303
+ {% assign video_id = param | split: "=" | last %}
304
+ {% endif %}
305
+ {% endfor %}
306
+ {% endif %}
307
+ {%- if site.monumetricId -%}
308
+ <iframe class="youtubeVideoPlayer mb-5" width="400" height="315"
309
+ src="https://www.youtube.com/embed/{{video_id}}?autoplay=1&mute=1" allowfullscreen>
310
+ </iframe>
311
+ {%- else -%}
312
+ <iframe class="youtubeVideoPlayer mb-5" width="500" height="315"
313
+ src="https://www.youtube.com/embed/{{video_id}}?autoplay=1&mute=1" allowfullscreen>
314
+ </iframe>
315
+ {%- endif -%}
316
+ </div>
317
+ {%- else -%}
318
+ <div class="how-to-img-wrapper">
319
+ <img class="how-to-leftimg" height="180px" width="300px"
320
+ src="{{featureData.HOW_TO_CONTENT.logoImageUrl}}" loading="lazy"
321
+ alt="{{featureData.HOW_TO_CONTENT.logoImageAlt | default: 'how to image' }}" {%- if site.crossorigin
322
+ -%} crossorigin {%- endif -%} />
323
+ </div>
324
+ {%- endif -%}
325
+ </div>
326
+ <div class="col-md-6 order-1">
327
+ <div class="how-to-right">
328
+ <h3 class="how-to-title text-left">
329
+ {{featureData.HOW_TO_CONTENT.heading | replace: "$variable",
330
+ page.value}}
331
+ </h3>
332
+ <ol class="how-to-list">
333
+ {% for data in featureData.HOW_TO_CONTENT.steps %}
334
+
335
+ <li id="step{{forloop.index}}" class="how-to-list-item">
336
+ <span>{{forloop.index}}.</span>{{data | replace:
337
+ "$variable", page.value}}
338
+ </li>
339
+ {% endfor %}
340
+ </ol>
394
341
  </div>
395
- </li>
396
- {% endfor %}
397
- </ul>
342
+ </div>
343
+ {%- if site.monumetricId and page.url != '/' and page.lang == 'en'
344
+ -%}
345
+ </div>
398
346
  </div>
347
+ {%- endif -%}
399
348
  </div>
400
349
  </div>
350
+ </section>
351
+
352
+ {%- if page.layout == "feature" -%} {%- include bookmark.html -%} {%- endif
353
+ -%} {%- assign showFaqs= true -%} {%- for item in site.noFaqsList -%} {%- if
354
+ item == page.lang -%} {%- assign showFaqs = false -%} {%- break -%} {%- else
355
+ -%} {%- assign showFaqs = true -%} {%- endif -%} {%- endfor -%} {%- if
356
+ showFaqs == true -%} {%- if featureData.FAQ.size>0 -%}
357
+ <section class="faq-section">
358
+ <div class="container">
359
+ <div class="row">
360
+ <div class="col-md-8 mx-auto">
361
+ <div class="faq">
362
+ <h3 class="feature-h1 text-center mb-4">
363
+ {{featureData.faqheading | default: 'Frequently Asked
364
+ Questions'}}
365
+ </h3>
366
+ <ul class="list-unstyled">
367
+ {% for data in featureData.FAQ %}
368
+ <li>
369
+ <h3 class="faq-question" itemprop="name">
370
+ {{data.question | replace: "$variable", page.value}}<em
371
+ style="transform: rotate(-135deg)"
372
+ >
373
+ <i></i
374
+ ></em>
375
+ </h3>
376
+ <div style="display: block">
377
+ <p class="faq-answer" itemprop="text">
378
+ {{data.answer | replace: "$variable", page.value}}
379
+ </p>
380
+ </div>
381
+ </li>
382
+ {% endfor %}
383
+ </ul>
384
+ </div>
385
+ </div>
386
+ </div>
387
+ </div>
388
+ </section>
389
+ {%- endif -%} {%- endif -%} {%- include share/socialshare.html -%} {%-
390
+ include Rating/rating.html -%} {%- if featureData.infographics.size > 0 -%}
391
+ {%- include infographics/infographics.html -%} {%- endif -%} {%- include
392
+ /Usp/usp.html -%} {%- if featureData.display_formats -%}
393
+ <div class="container compare-table">
394
+ {%- include fileformat/fileformatdetail.html -%}
395
+ </div>
396
+ {%- endif -%} {%- if featureData.compare_formats -%}
397
+ <div class="container file-detail-table">
398
+ {%- include fileformat/comparisonfiles.html -%}
401
399
  </div>
402
- </section>
403
- {%- endif -%} {%- endif -%} {%- include share/socialshare.html -%} {%-
404
- include Rating/rating.html -%} {%- if featureData.infographics.size > 0 -%}
405
- {%- include infographics/infographics.html -%} {%- endif -%} {%- include
406
- /Usp/usp.html -%} {%- if featureData.display_formats -%}
407
- <div class="container compare-table">
408
- {%- include fileformat/fileformatdetail.html -%}
409
- </div>
410
- {%- endif -%} {%- if featureData.compare_formats -%}
411
- <div class="container file-detail-table">
412
- {%- include fileformat/comparisonfiles.html -%}
413
- </div>
414
-
415
- {%- endif -%} {%- if site.userTrackingCount -%} {%- include
416
- userTracking.html -%} {%- endif -%} {%- assign langen = "en" -%} {%- if
417
- site.data[folder][langen][file].categories -%} {% assign categories=
418
- site.data[folder][langen][file].categories %} {%- else -%} {% assign
419
- categories= page.categories %} {%- endif -%} {%- if
420
- site.data[folder][langen][file].tags -%} {% assign tags=
421
- site.data[folder][langen][file].tags %} {%- else -%} {% assign tags=
422
- page.tags %} {%- endif -%} {%- if featureData.posts.size > 0 -%} {%- include
423
- customblog/pageRelatedPosts.html -%} {%- else -%} {%- if categories.size > 0
424
- or tags.size > 0 -%} {%- include section/related_categories_post.html -%}
425
- {%- else -%} {%- include section/recent_posts.html -%} {%- endif -%} {%-
426
- endif -%} {%- if site.customblogdata -%} {%- if categories.size> 0 or
427
- tags.size>0-%} {%- include customblog/relatedposts.html -%} {%- else -%} {%-
428
- include customblog/recentposts.html -%} {% endif %} {%- endif -%} {%- if
429
- featureData.author.size > 0 -%} {% include
430
- featurePageAuthors/featurePageAuthors.html %} {%- endif -%} {% include
431
- footer/index.html %} {%- if site.customCode -%} {%- include customCode.html
432
- -%} {%- endif -%} {% include script.html %}
433
- </body>
434
- </html>
400
+
401
+ {%- endif -%} {%- if site.userTrackingCount -%} {%- include
402
+ userTracking.html -%} {%- endif -%} {%- assign langen = "en" -%} {%- if
403
+ site.data[folder][langen][file].categories -%} {% assign categories=
404
+ site.data[folder][langen][file].categories %} {%- else -%} {% assign
405
+ categories= page.categories %} {%- endif -%} {%- if
406
+ site.data[folder][langen][file].tags -%} {% assign tags=
407
+ site.data[folder][langen][file].tags %} {%- else -%} {% assign tags=
408
+ page.tags %} {%- endif -%} {%- if featureData.posts.size > 0 -%} {%- include
409
+ customblog/pageRelatedPosts.html -%} {%- else -%} {%- if categories.size > 0
410
+ or tags.size > 0 -%} {%- include section/related_categories_post.html -%}
411
+ {%- else -%} {%- include section/recent_posts.html -%} {%- endif -%} {%-
412
+ endif -%} {%- if site.customblogdata -%} {%- if categories.size> 0 or
413
+ tags.size>0-%} {%- include customblog/relatedposts.html -%} {%- else -%} {%-
414
+ include customblog/recentposts.html -%} {% endif %} {%- endif -%} {%- if
415
+ featureData.author.size > 0 -%} {% include
416
+ featurePageAuthors/featurePageAuthors.html %} {%- endif -%} {% include
417
+ footer/index.html %} {%- if site.customCode -%} {%- include customCode.html
418
+ -%} {%- endif -%} {% include script.html %}
419
+ </body>
420
+ </html>