appscms-tools-theme 3.3.5 → 3.3.7

Sign up to get free protection for your applications and to get access to all the features.
@@ -2,387 +2,378 @@
2
2
  = page.folderName %} {% assign featureData= site.data[folder][lang][file] %}
3
3
  <!DOCTYPE html>
4
4
  <html lang="{{page.lang}}">
5
- {% include head/index.html %}
5
+ {% include head/index.html %}
6
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>
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
- {%- 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 -%}
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
- <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
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
- </h2>
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>
78
- {%- endif -%} {%- if site.noFeatureBox == true -%}
79
- <div class="feature-content-box" id="theme-content-box">{{content}}</div>
80
- {%- elsif site.newFeatureBox -%}
81
- <div class="feature-content-box" id="theme-content-box">
82
- <div class="container">
83
- {%- assign boxColor =
84
- site.data[page.folderName][page.lang][page.fileName].color -%} {%- if
85
- page.removeBox != true -%}
86
- <div class="custom-box" data-color="{{boxColor}}">
87
- <div style="display: none" id="file-loader">
88
- <img
89
- src="/spinner.gif"
90
- alt="spinner"
91
- {%-
92
- if
93
- site.crossorigin
94
- -%}
95
- crossorigin
96
- {%-
97
- endif
98
- -%}
99
- />
100
- <p>Please Wait ,Loading Your file</p>
101
- </div>
102
- <div class="saving-file-download-wrap" style="display: none">
103
- <img
104
- loading="lazy"
105
- class="trust-img"
106
- src="/trust.svg"
107
- alt="trust"
108
- {%-
109
- if
110
- site.crossorigin
111
- -%}
112
- crossorigin
113
- {%-
114
- endif
115
- -%}
116
- />
117
- <p class="text-white my-2">Thanks for your patience</p>
118
- <button class="btn" id="download-zip">Download</button>
56
+ </div>
57
+ {%- endif -%} {%- if site.noFeatureBox == true -%}
58
+ <div class="feature-content-box" id="theme-content-box">{{content}}</div>
59
+ {%- elsif site.newFeatureBox -%}
60
+ <div class="feature-content-box" id="theme-content-box">
61
+ <div class="container">
62
+ {%- assign boxColor =
63
+ site.data[page.folderName][page.lang][page.fileName].color -%} {%- if
64
+ page.removeBox != true -%}
65
+ <div class="custom-box" data-color="{{boxColor}}">
66
+ <div style="display: none" id="file-loader">
67
+ <img src="/spinner.gif" alt="spinner" {%- if site.crossorigin -%} crossorigin {%- endif -%} />
68
+ <p>Please Wait ,Loading Your file</p>
69
+ </div>
70
+ <div class="saving-file-download-wrap" style="display: none">
71
+ <img loading="lazy" class="trust-img" src="/trust.svg" alt="trust" {%- if site.crossorigin -%} crossorigin {%-
72
+ endif -%} />
73
+ <p class="text-white my-2">Thanks for your patience</p>
74
+ <button class="btn" id="download-zip">Download</button>
75
+ </div>
76
+ <div class="file-input" id="inputbox" style="color: #fff">
77
+ <div class="m-auto">
78
+ <div class="d-flex justify-content-center align-items-center">
79
+ <div id="Inputbox" class="boxes" style="background-color: {{boxColor}};">
80
+ <img height="21px" width="21px" src="/assets/images/add.svg" alt="add" {%- if site.crossorigin -%}
81
+ crossorigin {%- endif -%} />
82
+ <span class="ml-3">CHOOSE FILE</span>
83
+ </div>
84
+ <div class="file-pick-dropdown" style="background-color:{{boxColor}}">
85
+ <i class="fas fa-angle-down arrow-sign"></i>
86
+ <div class="file-picker-dropdown" style="display: none">
87
+ <button id="filepicker">
88
+ <svg class="mr-3" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
89
+ <path id="Path" d="M8.33331 3H15.6666L23 15H15.6666L8.33331 3Z" fill="#FFC107"></path>
90
+ <path id="Path_2" d="M4.6012 21L8.30086 15H23L19.3333 21H4.6012Z" fill="#1976D2"></path>
91
+ <path id="Path_3" d="M1 15.0625L4.60119 21L12 9L8.33333 3L1 15.0625Z" fill="#4CAF50"></path>
92
+ </svg>
93
+ Google Drive
94
+ </button>
95
+ <button id="dropbox">
96
+ <svg class="mr-3" viewBox="0 0 24 24" fill="#0061FF" xmlns="http://www.w3.org/2000/svg">
97
+ <path id="icon"
98
+ 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">
99
+ </path>
100
+ </svg>
101
+ Dropbox
102
+ </button>
103
+ </div>
104
+ </div>
105
+ </div>
119
106
  </div>
120
- <div class="file-input" id="inputbox" style="color: #fff">
121
- <div class="m-auto">
122
- <div class="d-flex justify-content-center align-items-center">
123
- <div
124
- id="Inputbox"
125
- class="boxes"
126
- style="background-color: {{boxColor}};"
127
- >
128
- <img
129
- height="21px"
130
- width="21px"
131
- src="/assets/images/add.svg"
132
- alt="add"
133
- {%-
134
- if
135
- site.crossorigin
136
- -%}
137
- crossorigin
138
- {%-
139
- endif
140
- -%}
141
- />
142
- <span class="ml-3">CHOOSE FILE</span>
107
+ <p id="dropfile" class="text-dark">or drop your file here</p>
108
+ <p id="error" class="p-3"></p>
109
+ </div>
110
+ </div>
111
+ {%- endif -%} {%- if page.workspace -%}
112
+ <div class="workspace" style="display: none">
113
+ <div class="row mx-auto">
114
+ <div class="col-md-10 mx-auto">{{content}}</div>
115
+ </div>
116
+ </div>
117
+ {%- else -%}
118
+ <div class="workspace" style="display: none">
119
+ <div class="row">
120
+ <div class="col-12">
121
+ <div class="download-wrapper mt-3">
122
+ <div class="row rowclass">
123
+ <div class="col-7">
124
+ <div class="d-flex align-items-center">
125
+ <div class="select-format-title">image's format</div>
126
+ <div class="download-format">
127
+ <select name="image-format" id="image-format">
128
+ {%- if pageData.downloadFormats -%} {%- for item in
129
+ pageData.downloadFormats -%}
130
+ <option value="{{item}}">{{item}}</option>
131
+ {%- endfor -%} {%- else -%}
132
+ <option value="png">png</option>
133
+ <option value="jpg">jpg</option>
134
+ <option value="jpeg">jpeg</option>
135
+ <option value="webp">webp</option>
136
+ <option value="gif">gif</option>
137
+ {%- endif -%}
138
+ </select>
139
+ </div>
140
+ </div>
143
141
  </div>
144
- <div
145
- class="file-pick-dropdown"
146
- style="background-color:{{boxColor}}"
147
- >
148
- <i class="fas fa-angle-down arrow-sign"></i>
149
- <div class="file-picker-dropdown" style="display: none">
150
- <button id="filepicker">
151
- <svg
152
- class="mr-3"
153
- viewBox="0 0 24 24"
154
- xmlns="http://www.w3.org/2000/svg"
155
- >
156
- <path
157
- id="Path"
158
- d="M8.33331 3H15.6666L23 15H15.6666L8.33331 3Z"
159
- fill="#FFC107"
160
- ></path>
142
+ <div class="col-5">
143
+ <div class="d-flex align-items-center">
144
+ <button id="download-button" style="background-color: {{pageData.color}};">
145
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
161
146
  <path
162
- id="Path_2"
163
- d="M4.6012 21L8.30086 15H23L19.3333 21H4.6012Z"
164
- fill="#1976D2"
165
- ></path>
166
- <path
167
- id="Path_3"
168
- d="M1 15.0625L4.60119 21L12 9L8.33333 3L1 15.0625Z"
169
- fill="#4CAF50"
170
- ></path>
171
- </svg>
172
- Google Drive
173
- </button>
174
- <button id="dropbox">
175
- <svg
176
- class="mr-3"
177
- viewBox="0 0 24 24"
178
- fill="#0061FF"
179
- xmlns="http://www.w3.org/2000/svg"
180
- >
181
- <path
182
- id="icon"
183
- 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"
184
- ></path>
185
- </svg>
186
- Dropbox
147
+ 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" />
148
+ </svg>Download
187
149
  </button>
188
150
  </div>
189
151
  </div>
190
152
  </div>
191
153
  </div>
192
- <p id="dropfile" class="text-dark">or drop your file here</p>
193
- <p id="error" class="p-3"></p>
194
154
  </div>
195
155
  </div>
196
- <div class="workspace">
197
- <div class="row mx-auto">
198
- <div class="col-md-10 mx-auto">{{content}}</div>
156
+ {%- if page.commonStructure != false -%}
157
+ <div class="row">
158
+ <div class="col-md-7 mx-auto mb-2">
159
+ <div class="select-img-panel">
160
+ <div id="saving-data" style="display: none">
161
+ <img loading="lazy" src="/assets/images/loader.gif" alt="saving" />
162
+ <span class="ml-2" {%- if site.crossorigin -%} crossorigin {%- endif -%}>Saving your images...</span>
163
+ </div>
164
+ <div id="canvas-box-panel"></div>
165
+ </div>
166
+ </div>
167
+ <div class="col-md-5">
168
+ <div class="options-panel">
169
+ {%- if pageData.optionPanelTitle -%}
170
+ <div class="title">{{pageData.optionPanelTitle}}</div>
171
+ {%- endif -%} {{content}}
172
+ </div>
199
173
  </div>
200
174
  </div>
201
- {%- endif -%}
175
+ {%- else -%} {{content}} {%- endif -%}
202
176
  </div>
177
+ {%- endif -%}
203
178
  </div>
204
- {%- else -%} {%- if page.noBox == true -%}
205
- <div class="feature-content-box" id="theme-content-box">{{content}}</div>
206
- {%- else -%}
207
- <div class="box-padding" id="theme-content-box">
208
- <div class="d-flex" id="__cond-922051">
209
- <div class="flex-container">
210
- <div class="flex-class">
211
- <div class="d-flex flex-column">
212
- <div
213
- class="box"
214
- style="background:{{featureData.color}};min-height:{{featureData.height}};width:{{featureData.width}}"
215
- >
216
- <div class="box-border"></div>
217
- <div class="content-box">{{content}}</div>
218
- </div>
179
+ </div>
180
+ {%- else -%} {%- if page.noBox == true -%}
181
+ <div class="feature-content-box" id="theme-content-box">{{content}}</div>
182
+ {%- else -%}
183
+ <div class="box-padding" id="theme-content-box">
184
+ <div class="d-flex" id="__cond-922051">
185
+ <div class="flex-container">
186
+ <div class="flex-class">
187
+ <div class="d-flex flex-column">
188
+ <div class="box"
189
+ style="background:{{featureData.color}};min-height:{{featureData.height}};width:{{featureData.width}}">
190
+ <div class="box-border"></div>
191
+ <div class="content-box">{{content}}</div>
219
192
  </div>
220
193
  </div>
221
194
  </div>
222
195
  </div>
223
196
  </div>
224
- {%- endif -%} {%- endif -%} {%- if page.layout == "batch" -%}
225
- <div
226
- class="w-100 line"
227
- style="border-top: 1px solid rgb(224, 224, 224)"
228
- ></div>
229
- {%- endif -%}
230
- <div class="container mt-4 mb-5">
231
- <div class="row px-0">
232
- {%- if site.monumetricId and page.url != '/' and page.lang == 'en' -%}
197
+ </div>
198
+ {%- endif -%} {%- endif -%} {%- if page.layout == "batch" -%}
199
+ <div class="w-100 line" style="border-top: 1px solid rgb(224, 224, 224)"></div>
200
+ {%- endif -%}
201
+ <div class="container mt-4 mb-5">
202
+ <div class="row px-0">
203
+ {%- if site.monumetricId and page.url != '/' and page.lang == 'en' -%}
233
204
 
234
- <div class="col-md-9 mx-auto">
235
- <div class="row">
236
- {%- endif -%} {% for data in featureData.TEXTUAL_CONTENT %}
237
- <div
238
- class="{%- if site.monumetricId and page.url != '/' and page.lang == 'en' -%} col-md-6 my-4 {%- else -%} col-md-4 my-4 {%- endif -%}"
239
- >
240
- <div>
241
- <img
242
- class="feature-card-img"
243
- src="{{data.logoUrl}}"
244
- loading="lazy"
245
- height="48px"
246
- width="48px"
247
- alt="{{data.header}}"
248
- {%-
249
- if
250
- site.crossorigin
251
- -%}
252
- crossorigin
253
- {%-
254
- endif
255
- -%}
256
- />
257
- <div class="feature-card-title">
258
- {{data.header | replace: "$variable", page.value}}
259
- </div>
260
- <div class="feature-card-desc">
261
- {{data.content | replace: "$variable", page.value}}
262
- </div>
205
+ <div class="col-md-9 mx-auto">
206
+ <div class="row">
207
+ {%- endif -%}
208
+ {% assign totalHeaderCount = 0 %}
209
+ {% for data in featureData.TEXTUAL_CONTENT %}
210
+ {% assign words = data.header | split: " " %}
211
+ {% assign word_count = words | size %}
212
+ {% assign totalHeaderCount = totalHeaderCount | plus: word_count %}
213
+ {% endfor %}
214
+
215
+
216
+ {% for data in featureData.TEXTUAL_CONTENT %}
217
+ <div
218
+ class="{%- if site.monumetricId and page.url != '/' and page.lang == 'en' -%} col-md-6 my-4 {%- else -%} col-md-4 my-4 {%- endif -%}">
219
+ <div>
220
+ <img class="feature-card-img" src="{{data.logoUrl}}" loading="lazy" height="48px" width="48px"
221
+ alt="{{data.header}}" {%- if site.crossorigin -%} crossorigin {%- endif -%} />
222
+ <div class="feature-card-title">
223
+ {%- if totalHeaderCount > site.count_of_words_in_headings -%}
224
+ {%- for word in featureh2 -%} {%- if forloop.first == true -%} {{word
225
+ | capitalize }} {%- else -%} {{word}} {%- endif -%} {%- endfor -%}
226
+ {%- else -%}
227
+ {{data.header | replace: "$variable", page.value}}
228
+ {%- endif -%}
229
+ </div>
230
+ <div class="feature-card-desc">
231
+ {{data.content | replace: "$variable", page.value}}
263
232
  </div>
264
233
  </div>
265
- {% endfor %} {%- if site.monumetricId and page.url != '/' and
266
- page.lang == 'en' -%}
267
234
  </div>
235
+ {% endfor %}
236
+
237
+
238
+
239
+
240
+
241
+
242
+
243
+
244
+ {%- if site.monumetricId and page.url != '/' and
245
+ page.lang == 'en' -%}
268
246
  </div>
269
- {%- endif -%}
270
247
  </div>
248
+ {%- endif -%}
271
249
  </div>
272
- <section class="how-to-section">
273
- <div class="container">
274
- <div class="row">
275
- {%- if site.monumetricId and page.url != '/' and page.lang == 'en' -%}
250
+ </div>
251
+ <section class="how-to-section">
252
+ <div class="container">
253
+ <div class="row">
254
+ {%- if site.monumetricId and page.url != '/' and page.lang == 'en' -%}
276
255
 
277
- <div class="col-md-9 mx-auto">
278
- <div class="row">
279
- {%- endif -%}
280
- <div class="col-md-6 order-0">
281
- {%- if featureData.HOW_TO_CONTENT.logoImageUrl -%}
282
- <div class="how-to-img-wrapper">
283
- <img
284
- class="how-to-leftimg"
285
- height="180px"
286
- width="300px"
287
- src="{{featureData.HOW_TO_CONTENT.logoImageUrl}}"
288
- loading="lazy"
289
- alt="{{featureData.HOW_TO_CONTENT.logoImageAlt | default: 'how to image' }}"
290
- {%-
291
- if
292
- site.crossorigin
293
- -%}
294
- crossorigin
295
- {%-
296
- endif
297
- -%}
298
- />
299
- </div>
300
- {%- endif -%}
256
+ <div class="col-md-9 mx-auto">
257
+ <div class="row">
258
+ {%- endif -%}
259
+ <div class="col-md-6 order-0">
260
+ {%- if featureData.HOW_TO_CONTENT.YoutubeVideoUrl -%}
261
+ <div class="how-to-video-wrapper">
262
+ <iframe width="500" height="315" src="https://www.youtube.com/embed/{{featureData.HOW_TO_CONTENT.YoutubeVideoUrl}}?autoplay=1&mute=1">
263
+ </iframe>
264
+ </div>
265
+ {%- else -%}
266
+ <div class="how-to-img-wrapper">
267
+ <img class="how-to-leftimg" height="180px" width="300px"
268
+ src="{{featureData.HOW_TO_CONTENT.logoImageUrl}}" loading="lazy"
269
+ alt="{{featureData.HOW_TO_CONTENT.logoImageAlt | default: 'how to image' }}" {%- if site.crossorigin
270
+ -%} crossorigin {%- endif -%} />
301
271
  </div>
302
- <div class="col-md-6 order-1">
303
- <div class="how-to-right">
304
- <h3 class="how-to-title text-left">
305
- {{featureData.HOW_TO_CONTENT.heading | replace: "$variable",
306
- page.value}}
307
- </h3>
308
- <ol class="how-to-list">
309
- {% for data in featureData.HOW_TO_CONTENT.steps %}
272
+ {%- endif -%}
310
273
 
311
- <li id="step{{forloop.index}}" class="how-to-list-item">
312
- <span>{{forloop.index}}.</span>{{data | replace:
313
- "$variable", page.value}}
314
- </li>
315
- {% endfor %}
316
- </ol>
317
- </div>
274
+ </div>
275
+ <div class="col-md-6 order-1">
276
+ <div class="how-to-right">
277
+ <h3 class="how-to-title text-left">
278
+ {{featureData.HOW_TO_CONTENT.heading | replace: "$variable",
279
+ page.value}}
280
+ </h3>
281
+ <ol class="how-to-list">
282
+ {% for data in featureData.HOW_TO_CONTENT.steps %}
283
+
284
+ <li id="step{{forloop.index}}" class="how-to-list-item">
285
+ <span>{{forloop.index}}.</span>{{data | replace:
286
+ "$variable", page.value}}
287
+ </li>
288
+ {% endfor %}
289
+ </ol>
318
290
  </div>
319
- {%- if site.monumetricId and page.url != '/' and page.lang == 'en'
320
- -%}
321
291
  </div>
292
+ {%- if site.monumetricId and page.url != '/' and page.lang == 'en'
293
+ -%}
322
294
  </div>
323
- {%- endif -%}
324
295
  </div>
296
+ {%- endif -%}
325
297
  </div>
326
- </section>
327
- {%- if page.layout == "feature" -%} {%- include bookmark.html -%} {%- endif
328
- -%} {%- assign showFaqs= true -%} {%- for item in site.noFaqsList -%} {%- if
329
- item == page.lang -%} {%- assign showFaqs = false -%} {%- break -%} {%- else
330
- -%} {%- assign showFaqs = true -%} {%- endif -%} {%- endfor -%} {%- if
331
- showFaqs == true -%} {%- if featureData.FAQ.size>0 -%}
332
- <section class="faq-section">
333
- <div class="container">
334
- <div class="row">
335
- <div class="col-md-8 mx-auto">
336
- <div class="faq">
337
- <h3 class="feature-h1 text-center mb-4">
338
- {{featureData.faqheading | default: 'Frequently Asked
339
- Questions'}}
340
- </h3>
341
- <ul class="list-unstyled">
342
- {% for data in featureData.FAQ %}
343
- <li>
344
- <h3 class="faq-question" itemprop="name">
345
- {{data.question | replace: "$variable", page.value}}<em
346
- style="transform: rotate(-135deg)"
347
- >
348
- <i></i
349
- ></em>
350
- </h3>
351
- <div style="display: block">
352
- <p class="faq-answer" itemprop="text">
353
- {{data.answer | replace: "$variable", page.value}}
354
- </p>
355
- </div>
356
- </li>
357
- {% endfor %}
358
- </ul>
359
- </div>
298
+ </div>
299
+ </section>
300
+ {%- if page.layout == "feature" -%} {%- include bookmark.html -%} {%- endif
301
+ -%} {%- assign showFaqs= true -%} {%- for item in site.noFaqsList -%} {%- if
302
+ item == page.lang -%} {%- assign showFaqs = false -%} {%- break -%} {%- else
303
+ -%} {%- assign showFaqs = true -%} {%- endif -%} {%- endfor -%} {%- if
304
+ showFaqs == true -%} {%- if featureData.FAQ.size>0 -%}
305
+ <section class="faq-section">
306
+ <div class="container">
307
+ <div class="row">
308
+ <div class="col-md-8 mx-auto">
309
+ <div class="faq">
310
+ <h3 class="feature-h1 text-center mb-4">
311
+ {{featureData.faqheading | default: 'Frequently Asked
312
+ Questions'}}
313
+ </h3>
314
+ <ul class="list-unstyled">
315
+ {% for data in featureData.FAQ %}
316
+ <li>
317
+ <h3 class="faq-question" itemprop="name">
318
+ {{data.question | replace: "$variable", page.value}}<em style="transform: rotate(-135deg)">
319
+ <i></i></em>
320
+ </h3>
321
+ <div style="display: block">
322
+ <p class="faq-answer" itemprop="text">
323
+ {{data.answer | replace: "$variable", page.value}}
324
+ </p>
325
+ </div>
326
+ </li>
327
+ {% endfor %}
328
+ </ul>
360
329
  </div>
361
330
  </div>
362
331
  </div>
363
- </section>
364
- {%- endif -%} {%- endif -%} {%- include share/socialshare.html -%} {%-
365
- include Rating/rating.html -%} {%- include /Usp/usp.html -%} {%- if
366
- featureData.display_formats -%}
367
- <div class="container compare-table">
368
- {%- include fileformat/fileformatdetail.html -%}
369
- </div>
370
- {%- endif -%} {%- if featureData.compare_formats -%}
371
- <div class="container file-detail-table">
372
- {%- include fileformat/comparisonfiles.html -%}
373
332
  </div>
374
- {%- endif -%} {%- assign langen = "en" -%} {%- if
375
- site.data[folder][langen][file].categories -%} {% assign categories=
376
- site.data[folder][langen][file].categories %} {%- else -%} {% assign
377
- categories= page.categories %} {%- endif -%} {%- if
378
- site.data[folder][langen][file].tags -%} {% assign tags=
379
- site.data[folder][langen][file].tags %} {%- else -%} {% assign tags=
380
- page.tags %} {%- endif -%} {%- if categories.size> 0 or tags.size>0-%} {%-
381
- include section/related_categories_post.html -%} {%- else -%} {%- include
382
- section/recent_posts.html -%} {% endif %} {%- if site.customblogdata -%} {%-
383
- if categories.size> 0 or tags.size>0-%} {%- include
384
- customblog/relatedposts.html -%} {%- else -%} {%- include
385
- customblog/recentposts.html -%} {% endif %} {%- endif -%} {% include
386
- footer/index.html %} {% include script.html %}
387
- </body>
388
- </html>
333
+ </section>
334
+ {%- endif -%} {%- endif -%} {%- include share/socialshare.html -%} {%-
335
+ include Rating/rating.html -%} {%- include /Usp/usp.html -%} {%- if
336
+ featureData.display_formats -%}
337
+ <div class="container compare-table">
338
+ {%- include fileformat/fileformatdetail.html -%}
339
+ </div>
340
+ {%- endif -%} {%- if featureData.compare_formats -%}
341
+ <div class="container file-detail-table">
342
+ {%- include fileformat/comparisonfiles.html -%}
343
+ </div>
344
+
345
+
346
+ {%- endif -%}
347
+ {%- assign langen = "en" -%}
348
+ {%- if site.data[folder][langen][file].categories -%}
349
+ {% assign categories= site.data[folder][langen][file].categories %}
350
+ {%- else -%}
351
+ {% assign categories= page.categories %}
352
+ {%- endif -%}
353
+ {%- if site.data[folder][langen][file].tags -%}
354
+ {% assign tags= site.data[folder][langen][file].tags %}
355
+ {%- else -%}
356
+ {% assign tags= page.tags %}
357
+ {%- endif -%}
358
+ {%- if categories.size> 0 or tags.size>0-%}
359
+ {%- include section/related_categories_post.html -%}
360
+ {%- else -%}
361
+ {%- include section/recent_posts.html -%}
362
+ {% endif %}
363
+ {%- if site.customblogdata -%}
364
+ {%- if categories.size> 0 or tags.size>0-%}
365
+ {%- include customblog/relatedposts.html -%}
366
+ {%- else -%}
367
+ {%- include customblog/recentposts.html -%}
368
+ {% endif %}
369
+ {%- endif -%}
370
+
371
+
372
+ {%- if featureData.author.size > 0 -%}
373
+ {% include featurePageAuthors/featurePageAuthors.html %}
374
+ {%- endif -%}
375
+ {% include footer/index.html %} {% include script.html %}
376
+
377
+ </body>
378
+
379
+ </html>