appscms-tools-theme 3.3.5 → 3.3.7

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.
@@ -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>