appscms-tools-theme 4.2.0 → 4.2.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/_data/home/en/en.json +429 -1
- data/_includes/appscms/customblog/contenttool-recent-posts.html +93 -0
- data/_includes/appscms/customblog/pageRelatedPosts.html +6 -3
- data/_includes/appscms/customblog/recentposts.html +2 -2
- data/_includes/appscms/customblog/relatedBlogs.html +1 -1
- data/_includes/appscms/customblog/relatedposts.html +2 -2
- data/_includes/appscms/extras/ratings.html +10 -12
- data/_includes/appscms/featurePageAuthors/featurePageAuthors.html +0 -1
- data/_includes/appscms/head/head.html +54 -153
- data/_includes/appscms/headings/contenttool-headings.html +33 -0
- data/_includes/appscms/home/contenttool-feature-boxes.html +20 -0
- data/_includes/appscms/howto/howto.html +35 -45
- data/_includes/appscms/recent-posts/recent_posts.html +1 -1
- data/_includes/authors/authors.html +1 -4
- data/_includes/script.html +87 -150
- data/_layouts/appscms-blog.html +1 -1
- data/_layouts/contenttool-feature.html +46 -0
- data/_layouts/contenttool-home.html +54 -0
- data/_layouts/feature.html +299 -387
- data/_layouts/home.html +248 -266
- data/assets/css/appscms-contenttool.css +1381 -0
- data/assets/css/appscms-theme.css +34 -24
- data/assets/css/appscms-variables.css +1 -1
- data/assets/css/tools.css +21 -0
- data/assets/images/contenttool-main.svg +66 -0
- metadata +10 -3
@@ -1,33 +1,31 @@
|
|
1
1
|
{%- if page.tool -%}
|
2
2
|
{%- assign tool = page.tool -%}
|
3
3
|
{%- assign data = site.data.rating.rating.tools -%}
|
4
|
-
<div class="
|
5
|
-
<div class="
|
6
|
-
<div class="
|
7
|
-
<div class="
|
4
|
+
<div class="container">
|
5
|
+
<div class="row justify-content-center">
|
6
|
+
<div class="col-md-10 pt-5 text-center">
|
7
|
+
<div class="rating-tool">
|
8
8
|
<img id="rating-img" loading='lazy' src="/assets/images/rating.png" alt="rating-img">
|
9
9
|
<div class="rating-text">Rate this tool</div>
|
10
10
|
<div class="rating-stars">
|
11
|
-
|
12
|
-
|
13
|
-
<svg class="rating-star" width="56" height="53" viewBox="0 0 56 53" fill="gray"
|
11
|
+
<svg class="rating-star" width="26" height="26" viewBox="0 0 56 53" fill="gray"
|
14
12
|
xmlns="http://www.w3.org/2000/svg">
|
15
13
|
<path
|
16
14
|
d="M30.8532 3.54509C29.9551 0.781158 26.0449 0.781146 25.1468 3.54508L20.538 17.7295C20.4042 18.1415 20.0202 18.4205 19.587 18.4205H4.67262C1.76645 18.4205 0.558112 22.1393 2.90926 23.8475L14.9752 32.614C15.3257 32.8686 15.4724 33.32 15.3385 33.732L10.7297 47.9164C9.83166 50.6803 12.9951 52.9787 15.3462 51.2705L27.4122 42.5041C27.7627 42.2494 28.2373 42.2494 28.5878 42.5041L40.6538 51.2705C43.0049 52.9787 46.1683 50.6803 45.2703 47.9164L40.6615 33.732C40.5276 33.32 40.6743 32.8686 41.0248 32.614L53.0907 23.8475C55.4419 22.1393 54.2336 18.4205 51.3274 18.4205H36.413C35.9798 18.4205 35.5958 18.1415 35.462 17.7295L30.8532 3.54509Z" />
|
17
15
|
</svg>
|
18
|
-
<svg class="rating-star" width="
|
16
|
+
<svg class="rating-star" width="26" height="26" viewBox="0 0 56 53" fill="gray"
|
19
17
|
xmlns="http://www.w3.org/2000/svg">
|
20
18
|
<path
|
21
19
|
d="M30.8532 3.54509C29.9551 0.781158 26.0449 0.781146 25.1468 3.54508L20.538 17.7295C20.4042 18.1415 20.0202 18.4205 19.587 18.4205H4.67262C1.76645 18.4205 0.558112 22.1393 2.90926 23.8475L14.9752 32.614C15.3257 32.8686 15.4724 33.32 15.3385 33.732L10.7297 47.9164C9.83166 50.6803 12.9951 52.9787 15.3462 51.2705L27.4122 42.5041C27.7627 42.2494 28.2373 42.2494 28.5878 42.5041L40.6538 51.2705C43.0049 52.9787 46.1683 50.6803 45.2703 47.9164L40.6615 33.732C40.5276 33.32 40.6743 32.8686 41.0248 32.614L53.0907 23.8475C55.4419 22.1393 54.2336 18.4205 51.3274 18.4205H36.413C35.9798 18.4205 35.5958 18.1415 35.462 17.7295L30.8532 3.54509Z" />
|
22
|
-
</svg> <svg class="rating-star" width="
|
20
|
+
</svg> <svg class="rating-star" width="26" height="26" viewBox="0 0 56 53" fill="gray"
|
23
21
|
xmlns="http://www.w3.org/2000/svg">
|
24
22
|
<path
|
25
23
|
d="M30.8532 3.54509C29.9551 0.781158 26.0449 0.781146 25.1468 3.54508L20.538 17.7295C20.4042 18.1415 20.0202 18.4205 19.587 18.4205H4.67262C1.76645 18.4205 0.558112 22.1393 2.90926 23.8475L14.9752 32.614C15.3257 32.8686 15.4724 33.32 15.3385 33.732L10.7297 47.9164C9.83166 50.6803 12.9951 52.9787 15.3462 51.2705L27.4122 42.5041C27.7627 42.2494 28.2373 42.2494 28.5878 42.5041L40.6538 51.2705C43.0049 52.9787 46.1683 50.6803 45.2703 47.9164L40.6615 33.732C40.5276 33.32 40.6743 32.8686 41.0248 32.614L53.0907 23.8475C55.4419 22.1393 54.2336 18.4205 51.3274 18.4205H36.413C35.9798 18.4205 35.5958 18.1415 35.462 17.7295L30.8532 3.54509Z" />
|
26
|
-
</svg> <svg class="rating-star" width="
|
24
|
+
</svg> <svg class="rating-star" width="26" height="26" viewBox="0 0 56 53" fill="gray"
|
27
25
|
xmlns="http://www.w3.org/2000/svg">
|
28
26
|
<path
|
29
27
|
d="M30.8532 3.54509C29.9551 0.781158 26.0449 0.781146 25.1468 3.54508L20.538 17.7295C20.4042 18.1415 20.0202 18.4205 19.587 18.4205H4.67262C1.76645 18.4205 0.558112 22.1393 2.90926 23.8475L14.9752 32.614C15.3257 32.8686 15.4724 33.32 15.3385 33.732L10.7297 47.9164C9.83166 50.6803 12.9951 52.9787 15.3462 51.2705L27.4122 42.5041C27.7627 42.2494 28.2373 42.2494 28.5878 42.5041L40.6538 51.2705C43.0049 52.9787 46.1683 50.6803 45.2703 47.9164L40.6615 33.732C40.5276 33.32 40.6743 32.8686 41.0248 32.614L53.0907 23.8475C55.4419 22.1393 54.2336 18.4205 51.3274 18.4205H36.413C35.9798 18.4205 35.5958 18.1415 35.462 17.7295L30.8532 3.54509Z" />
|
30
|
-
</svg> <svg class="rating-star" width="
|
28
|
+
</svg> <svg class="rating-star" width="26" height="26" viewBox="0 0 56 53" fill="gray"
|
31
29
|
xmlns="http://www.w3.org/2000/svg">
|
32
30
|
<path
|
33
31
|
d="M30.8532 3.54509C29.9551 0.781158 26.0449 0.781146 25.1468 3.54508L20.538 17.7295C20.4042 18.1415 20.0202 18.4205 19.587 18.4205H4.67262C1.76645 18.4205 0.558112 22.1393 2.90926 23.8475L14.9752 32.614C15.3257 32.8686 15.4724 33.32 15.3385 33.732L10.7297 47.9164C9.83166 50.6803 12.9951 52.9787 15.3462 51.2705L27.4122 42.5041C27.7627 42.2494 28.2373 42.2494 28.5878 42.5041L40.6538 51.2705C43.0049 52.9787 46.1683 50.6803 45.2703 47.9164L40.6615 33.732C40.5276 33.32 40.6743 32.8686 41.0248 32.614L53.0907 23.8475C55.4419 22.1393 54.2336 18.4205 51.3274 18.4205H36.413C35.9798 18.4205 35.5958 18.1415 35.462 17.7295L30.8532 3.54509Z" />
|
@@ -39,7 +37,7 @@
|
|
39
37
|
<i class="bi bi-star-fill rating-star"></i> -->
|
40
38
|
|
41
39
|
</div>
|
42
|
-
<div class="rating-value
|
40
|
+
<div class="rating-value ml-2">
|
43
41
|
{%- for item in data -%}
|
44
42
|
{%- if item.name ==tool -%}
|
45
43
|
{%- assign rating = item.rating -%}
|
@@ -49,30 +49,15 @@
|
|
49
49
|
|
50
50
|
{%- endif -%} {%- if page.layout == "aboutUs" -%}
|
51
51
|
|
52
|
-
<meta
|
53
|
-
name="description"
|
54
|
-
content="{{site.name}} - About us | {{description}}"
|
55
|
-
/>
|
52
|
+
<meta name="description" content="{{site.name}} - About us | {{description}}" />
|
56
53
|
{% elsif page.layout == "termAndCondition" %}
|
57
|
-
<meta
|
58
|
-
name="description"
|
59
|
-
content="{{site.name}} - Terms and conditions | {{description}}"
|
60
|
-
/>
|
54
|
+
<meta name="description" content="{{site.name}} - Terms and conditions | {{description}}" />
|
61
55
|
{% elsif page.layout == "disclaimer" %}
|
62
|
-
<meta
|
63
|
-
name="description"
|
64
|
-
content="{{site.name}} - Disclaimer | {{description}}"
|
65
|
-
/>
|
56
|
+
<meta name="description" content="{{site.name}} - Disclaimer | {{description}}" />
|
66
57
|
{% elsif page.layout == "privacyPolicy" %}
|
67
|
-
<meta
|
68
|
-
name="description"
|
69
|
-
content="{{site.name}} - Privacy policy | {{description}}"
|
70
|
-
/>
|
58
|
+
<meta name="description" content="{{site.name}} - Privacy policy | {{description}}" />
|
71
59
|
{% elsif page.layout == "contactUs" %}
|
72
|
-
<meta
|
73
|
-
name="description"
|
74
|
-
content="{{site.name}} - Contact | {{description}}"
|
75
|
-
/>
|
60
|
+
<meta name="description" content="{{site.name}} - Contact | {{description}}" />
|
76
61
|
{%- else -%}
|
77
62
|
<meta name="description" content="{{description}}" />
|
78
63
|
|
@@ -80,135 +65,71 @@
|
|
80
65
|
|
81
66
|
<link rel="canonical" href="{{site.url | append: page.url}}" />
|
82
67
|
|
83
|
-
<link
|
84
|
-
|
85
|
-
href="/assets/css/bootstrap.min.css"
|
86
|
-
{%-
|
87
|
-
if
|
88
|
-
site.crossorigin
|
89
|
-
-%}
|
90
|
-
{{
|
91
|
-
}}
|
92
|
-
crossorigin="anonymous"
|
93
|
-
{%-
|
94
|
-
endif
|
95
|
-
-%}
|
96
|
-
/>
|
68
|
+
<link rel="stylesheet" href="/assets/css/bootstrap.min.css" {%- if site.crossorigin -%} {{ }} crossorigin="anonymous"
|
69
|
+
{%- endif -%} />
|
97
70
|
|
98
71
|
{%- if dataToShow.css -%}
|
99
72
|
|
100
|
-
<link
|
101
|
-
|
102
|
-
href="{{dataToShow.css}}"
|
103
|
-
{%-
|
104
|
-
if
|
105
|
-
site.crossorigin
|
106
|
-
-%}
|
107
|
-
{{
|
108
|
-
}}
|
109
|
-
crossorigin="anonymous"
|
110
|
-
{%-
|
111
|
-
endif
|
112
|
-
-%}
|
113
|
-
/>
|
73
|
+
<link rel="stylesheet" href="{{dataToShow.css}}" {%- if site.crossorigin -%} {{ }} crossorigin="anonymous" {%- endif
|
74
|
+
-%} />
|
114
75
|
{%- else -%}
|
115
|
-
|
76
|
+
|
116
77
|
|
117
78
|
{%- endif -%} {%- if site.monumetricId -%}
|
118
79
|
|
119
|
-
<link
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
endif
|
131
|
-
-%}
|
132
|
-
/>
|
133
|
-
|
134
|
-
{%- endif -%} {%- if page.layout == "calculator" -%}
|
135
|
-
|
136
|
-
<link
|
137
|
-
rel="stylesheet"
|
138
|
-
href="/assets/css/calculators.css"
|
139
|
-
{%-
|
140
|
-
if
|
141
|
-
site.crossorigin
|
142
|
-
-%}
|
143
|
-
{{
|
144
|
-
}}
|
145
|
-
crossorigin="anonymous"
|
146
|
-
{%-
|
147
|
-
endif
|
148
|
-
-%}
|
149
|
-
/>
|
80
|
+
<link rel="stylesheet" href="/assets/css/responsive.css" {%- if site.crossorigin -%} {{ }} crossorigin="anonymous" {%-
|
81
|
+
endif -%} />
|
82
|
+
|
83
|
+
{%- endif -%}
|
84
|
+
|
85
|
+
|
86
|
+
|
87
|
+
|
88
|
+
{%- if page.layout == "calculator" -%}
|
89
|
+
|
90
|
+
<link rel="stylesheet" href="/assets/css/calculators.css" {%- if site.crossorigin -%} {{ }} crossorigin="anonymous"
|
91
|
+
{%- endif -%} />
|
150
92
|
|
151
93
|
{%- endif -%} {%- if page.layout == "home-1" -%}
|
152
94
|
|
153
|
-
<link
|
154
|
-
|
155
|
-
href="/assets/css/home-1.css"
|
156
|
-
{%-
|
157
|
-
if
|
158
|
-
site.crossorigin
|
159
|
-
-%}
|
160
|
-
{{
|
161
|
-
}}
|
162
|
-
crossorigin="anonymous"
|
163
|
-
{%-
|
164
|
-
endif
|
165
|
-
-%}
|
166
|
-
/>
|
95
|
+
<link rel="stylesheet" href="/assets/css/home-1.css" {%- if site.crossorigin -%} {{ }} crossorigin="anonymous" {%-
|
96
|
+
endif -%} />
|
167
97
|
|
168
98
|
{%- endif -%} {%- if page.layout == "feature-1" or page.newBox or page.layout
|
169
99
|
== "feature-download" -%}
|
170
100
|
|
171
|
-
<link
|
172
|
-
|
173
|
-
href="/assets/css/feature-1.css"
|
174
|
-
{%-
|
175
|
-
if
|
176
|
-
site.crossorigin
|
177
|
-
-%}
|
178
|
-
{{
|
179
|
-
}}
|
180
|
-
crossorigin="anonymous"
|
181
|
-
{%-
|
182
|
-
endif
|
183
|
-
-%}
|
184
|
-
/>
|
101
|
+
<link rel="stylesheet" href="/assets/css/feature-1.css" {%- if site.crossorigin -%} {{ }} crossorigin="anonymous" {%-
|
102
|
+
endif -%} />
|
185
103
|
|
186
104
|
{%- endif -%} {%- if page.layout == 'home-1' or page.layout == "feature-1" -%}
|
187
105
|
|
188
|
-
<link
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
-%}
|
195
|
-
{{
|
196
|
-
}}
|
197
|
-
crossorigin="anonymous"
|
198
|
-
{%-
|
199
|
-
endif
|
200
|
-
-%}
|
201
|
-
/>
|
106
|
+
<link rel="stylesheet" href="/assets/css/common.css" {%- if site.crossorigin -%} {{ }} crossorigin="anonymous" {%-
|
107
|
+
endif -%} />
|
108
|
+
|
109
|
+
{%- endif -%}
|
110
|
+
|
111
|
+
|
202
112
|
|
113
|
+
{%- if page.layout == "contenttool-home" -%}
|
114
|
+
<link rel="stylesheet" href="/assets/css/appscms-contenttool.css" {%- if site.crossorigin -%} {{ }}
|
115
|
+
crossorigin="anonymous" {%- endif -%} />
|
203
116
|
{%- endif -%}
|
117
|
+
|
118
|
+
|
119
|
+
|
204
120
|
<link rel="stylesheet" href="/assets/css/appscms-variables.css" />
|
121
|
+
|
122
|
+
{%- if page.layout != 'contenttool-home' -%}
|
205
123
|
<link rel="stylesheet" href="/assets/css/appscms-theme.css" />
|
124
|
+
{%- endif -%}
|
125
|
+
|
126
|
+
|
206
127
|
{%- if page.layout == "appscms-calculator" -%}
|
207
128
|
<link rel="stylesheet" href="/assets/css/appscms-feature.css" />
|
208
129
|
<link rel="stylesheet" href="/assets/css/appscms-calculator.css" />
|
209
130
|
{%- endif -%} {%- if page.layout == "appscms-home" -%}
|
210
131
|
<link rel="stylesheet" href="/assets/css/appscms-home.css" />
|
211
|
-
{%- endif -%} {%- if page.layout == "appscms-feature" -%}
|
132
|
+
{%- endif -%} {%- if page.layout == "appscms-feature" or page.layout == "contenttool-feature" -%}
|
212
133
|
<link rel="stylesheet" href="/assets/css/appscms-feature.css" />
|
213
134
|
{%- endif -%} {%- if page.layout == "appscms-video" -%}
|
214
135
|
<link rel="stylesheet" href="/assets/css/appscms-feature.css" />
|
@@ -216,45 +137,21 @@
|
|
216
137
|
<link rel="stylesheet" href="/assets/css/appscms-feature.css" />
|
217
138
|
{%- endif -%} {%- if page.layout == 'appscms-imagekit' -%}
|
218
139
|
<link rel="stylesheet" href="/assets/css/appscms-feature.css" />
|
219
|
-
<link
|
220
|
-
|
221
|
-
href="/assets/css/appscms-imagekit.css"
|
222
|
-
{%-
|
223
|
-
if
|
224
|
-
site.crossorigin
|
225
|
-
-%}
|
226
|
-
{{
|
227
|
-
}}
|
228
|
-
crossorigin="anonymous"
|
229
|
-
{%-
|
230
|
-
endif
|
231
|
-
-%}
|
232
|
-
/>
|
140
|
+
<link rel="stylesheet" href="/assets/css/appscms-imagekit.css" {%- if site.crossorigin -%} {{ }}
|
141
|
+
crossorigin="anonymous" {%- endif -%} />
|
233
142
|
|
234
143
|
{%- endif -%}
|
235
144
|
<meta data-rh="true" property="og:image" content="{{site.url}}{{favicon}}" />
|
236
145
|
<meta property="og:title" content="{{title}}" />
|
237
146
|
<meta property="og:description" content="{{description}}" />
|
238
147
|
<meta property="og:type" content="website" />
|
239
|
-
<meta
|
240
|
-
data-rh="true"
|
241
|
-
property="og:url"
|
242
|
-
content="{{site.url | append: page.url}}"
|
243
|
-
/>
|
148
|
+
<meta data-rh="true" property="og:url" content="{{site.url | append: page.url}}" />
|
244
149
|
<meta data-rh="true" property="og:site_name" content="{{site.name}}" />
|
245
150
|
<meta data-rh="true" property="twitter:domain" content="{{site.url}}" />
|
246
|
-
<meta
|
247
|
-
data-rh="true"
|
248
|
-
property="twitter:url"
|
249
|
-
content="{{site.url | append: page.url}}"
|
250
|
-
/>
|
151
|
+
<meta data-rh="true" property="twitter:url" content="{{site.url | append: page.url}}" />
|
251
152
|
<meta data-rh="true" name="twitter:title" content="{{title}}" />
|
252
153
|
<meta data-rh="true" name="twitter:description" content="{{description}}" />
|
253
|
-
<meta
|
254
|
-
data-rh="true"
|
255
|
-
name="twitter:image:src"
|
256
|
-
content="{{site.url}}{{favicon}}"
|
257
|
-
/>
|
154
|
+
<meta data-rh="true" name="twitter:image:src" content="{{site.url}}{{favicon}}" />
|
258
155
|
{% include adsense/adsense.html %} {%- if page.noindex -%}
|
259
156
|
<meta name="robots" content="noindex" />
|
260
157
|
|
@@ -443,4 +340,8 @@
|
|
443
340
|
monumetric/monumetric.html -%} {%- endif -%} {%- include monumetric/ads.html
|
444
341
|
-%} {%- if page.layout == "feature" or page.layout == "home" -%} {%- include
|
445
342
|
monumetric/profitablecpmgate.html -%} {%- endif -%}
|
446
|
-
|
343
|
+
|
344
|
+
|
345
|
+
|
346
|
+
|
347
|
+
</head>
|
@@ -0,0 +1,33 @@
|
|
1
|
+
{%- if page.layout == "appscms-audio" or page.layout == "appscms-video" -%} {%-
|
2
|
+
else -%}
|
3
|
+
<div class="container heading">
|
4
|
+
<div class="contenttool-bg-lite"></div>
|
5
|
+
<div class="row">
|
6
|
+
<div
|
7
|
+
class="container mt-3 grid-contentttool-h1" style="display: flex;"
|
8
|
+
>
|
9
|
+
{%- if pageData.H1 -%} {%- assign h1 = pageData.H1 -%} {%- elsif
|
10
|
+
pageData.h1 -%} {%- assign h1 = pageData.h1 -%} {%- endif -%} {%- if
|
11
|
+
pageData.H2 -%} {%- assign h2 = pageData.H2 -%} {%- elsif pageData.h2 -%}
|
12
|
+
{%- assign h2 = pageData.h2 -%} {%- endif -%}
|
13
|
+
<div class="heading-landing-text">
|
14
|
+
<h1 class="text-left appscms-h1 contenttool-landing-h1">
|
15
|
+
{%- for word in h1 -%} {%- if forloop.first == true -%} {{word |
|
16
|
+
capitalize }} {%- else -%} {{word}} {%- endif -%} {%- endfor -%}
|
17
|
+
</h1>
|
18
|
+
<h2 class="text-left appscms-h2 contenttool-landing-h2">
|
19
|
+
{%- for word in h2 -%} {%- if forloop.first == true -%} {{word |
|
20
|
+
capitalize }} {%- else -%} {{word}} {%- endif -%} {%- endfor -%}
|
21
|
+
</h2>
|
22
|
+
</div>
|
23
|
+
<img id="landing-main-svg" src="/assets/images/contenttool-main.svg" alt="manvector">
|
24
|
+
</div>
|
25
|
+
<svg id="contenttool-line-top" width="242" height="321" viewBox="0 0 242 321" fill="none" xmlns="http://www.w3.org/2000/svg">
|
26
|
+
<path d="M1 1C6.15486 44.3372 60.1151 138.089 235.818 138.089C487.727 138.089 618.363 226.161 679 320" stroke="#0066FF" stroke-width="2" stroke-dasharray="5 8"/>
|
27
|
+
</svg>
|
28
|
+
<svg id="contenttool-line-left-bottom" width="173" height="855" viewBox="0 0 173 855" fill="none" xmlns="http://www.w3.org/2000/svg">
|
29
|
+
<path d="M-48.9434 1.14502C-15.7718 92.377 114.216 198.249 161.568 276.272C208.919 354.296 81.401 346.5 37.2577 552.416C1.94297 717.148 -4.2862 822.14 -2.98644 854.044" stroke="#0066FF" stroke-width="2" stroke-dasharray="5 8"/>
|
30
|
+
</svg>
|
31
|
+
</div>
|
32
|
+
</div>
|
33
|
+
{%- endif -%}
|
@@ -0,0 +1,20 @@
|
|
1
|
+
<div class="container" id="appscms-tools-section">
|
2
|
+
<div class="appscms-contenttool-container">
|
3
|
+
{% for item in pageData.features %}
|
4
|
+
<a href="{{item.url}}">
|
5
|
+
<div class="appscms-contenttool-tool">
|
6
|
+
<div class="contentool-tool-image-background" style="background: {{item.color}};">
|
7
|
+
<img id="contenttool-icon-img" crossorigin="anonymous" src="{{item.icon}}" alt="img" />
|
8
|
+
</div>
|
9
|
+
<div class="contenttool-card-info">
|
10
|
+
<p class="contenttool-tool-heading">{{item.name}}</p>
|
11
|
+
<p class="contenttool-tool-text">{{item.description}}</p>
|
12
|
+
</div>
|
13
|
+
</div>
|
14
|
+
</a>
|
15
|
+
{% endfor %}
|
16
|
+
</div>
|
17
|
+
</div>
|
18
|
+
</div>
|
19
|
+
</div>
|
20
|
+
|
@@ -8,43 +8,32 @@
|
|
8
8
|
{%- if pageData.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
|
9
9
|
<div class="how-to-video-wrapper">
|
10
10
|
{% assign video_url = pageData.HOW_TO_CONTENT.YoutubeVideoUrl %}
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
11
|
+
{% assign video_id = "" %}
|
12
|
+
{% if video_url contains "youtu.be/" %}
|
13
|
+
{% assign parts = video_url | split: "/" %}
|
14
|
+
{% assign video_id = parts[3] %}
|
15
|
+
{% elsif video_url contains "youtube.com/watch" %}
|
16
|
+
{% assign params = video_url | split: "?" | last | split: "&" %}
|
17
|
+
{% for param in params %}
|
18
|
+
{% if param contains "v=" %}
|
19
|
+
{% assign video_id = param | split: "=" | last %}
|
20
|
+
{% endif %}
|
21
|
+
{% endfor %}
|
22
|
+
{% endif %}
|
23
|
+
|
24
|
+
<div class="how-to-video h-100 w-100" data-videoid="{{video_id}}">
|
25
|
+
<img class="youtubeVideoPlayer" width="100%" height="100%" id="thumbnail-img" alt="thumbnail-img" />
|
26
|
+
<div class="youtube-play-btn-wrapper">
|
27
|
+
<button class="play-btn btn btn-primary" onClick="loadVideo()">►</button>
|
28
|
+
</div>
|
29
|
+
</div>
|
30
30
|
</div>
|
31
31
|
{%- else -%}
|
32
32
|
<div class="how-to-img-wrapper">
|
33
|
-
<img
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
{%-
|
38
|
-
if
|
39
|
-
site.crossorigin
|
40
|
-
-%}
|
41
|
-
crossorigin
|
42
|
-
{%-
|
43
|
-
endif
|
44
|
-
-%}class="img-fluid align-self-end"
|
45
|
-
alt="Your Image"
|
46
|
-
style="width: 100%; height: 100%"
|
47
|
-
/>
|
33
|
+
<img src="{{pageData.HOW_TO_CONTENT.logoImageUrl}}" loading="lazy"
|
34
|
+
alt="{{pageData.HOW_TO_CONTENT.logoImageAlt | default: 'how to image' }}" {%- if site.crossorigin -%}
|
35
|
+
crossorigin {%- endif -%}class="img-fluid align-self-end" alt="Your Image"
|
36
|
+
style="width: 100%; height: 100%" />
|
48
37
|
</div>
|
49
38
|
{%- endif -%}
|
50
39
|
</div>
|
@@ -67,28 +56,29 @@
|
|
67
56
|
{%- endif -%}
|
68
57
|
</div>
|
69
58
|
</div>
|
59
|
+
|
70
60
|
{%- if pageData.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
|
71
61
|
<script>
|
72
62
|
let videoContainer = document.querySelector('.how-to-video');
|
73
63
|
let thumbnail = document.getElementById('thumbnail-img');
|
74
|
-
let videoId =videoContainer.getAttribute("data-videoid")
|
64
|
+
let videoId = videoContainer.getAttribute("data-videoid")
|
75
65
|
let thumbnailUrl = 'https://img.youtube.com/vi/' + videoId + '/maxresdefault.jpg';
|
76
66
|
console.log(videoId)
|
77
67
|
|
78
68
|
// Function to load video
|
79
69
|
function loadVideo() {
|
80
|
-
|
70
|
+
videoContainer.innerHTML = '<iframe loading="lazy" class="youtubeVideoPlayer" width="100%" height="100%" src="https://www.youtube.com/embed/' + videoId + '?autoplay=1&mute=1" allowfullscreen></iframe>';
|
81
71
|
}
|
82
72
|
// Function to handle lazy loading of the thumbnail
|
83
73
|
function lazyLoadThumbnail(entries, observer) {
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
74
|
+
entries.forEach(entry => {
|
75
|
+
if (entry.isIntersecting) {
|
76
|
+
// Load thumbnail when it becomes visible
|
77
|
+
thumbnail.src = thumbnailUrl;
|
78
|
+
// Stop observing once loaded
|
79
|
+
observer.unobserve(entry.target);
|
80
|
+
}
|
81
|
+
});
|
92
82
|
}
|
93
83
|
// Set up the Intersection Observer
|
94
84
|
var observer = new IntersectionObserver(lazyLoadThumbnail, { threshold: 0.1 });
|
@@ -96,4 +86,4 @@
|
|
96
86
|
// Optionally, you can add an event listener to trigger video loading on click or other interactions
|
97
87
|
thumbnail.addEventListener('click', loadVideo);
|
98
88
|
</script>
|
99
|
-
{%- endif -%}
|
89
|
+
{%- endif -%}
|
@@ -12,10 +12,7 @@
|
|
12
12
|
{% assign balark = "Balark Singhal&&/assets/images/balark.webp&&I am a poet and a writer, a few of them also got published in some anthologies like Brave Heart of the motherland, and Scarlet Wings.I love to write Shayari and poetries and also in my free time I like to do skating, swimming and read books.&&N/A" | split: '&&' %}
|
13
13
|
{% assign udit = "Udit Agarwal&&/assets/images/udit.webp&&Udit Agarwal is a Digital Marketer and a Content Marketing Specialist, He enjoys technical as well as non-technical writing. His passion and urge for gaining new insights has led him here. He quenches his thirst for technology through his action oriented writing skills and a profound ability to stay up to date with latest industry trends.&&N/A" | split: '&&' %}
|
14
14
|
{% assign pallavi = "Pallavi Thakur&&/assets/images/pallavi.webp&&My name is Pallavi Thakur and I am an engineer and now pursuing my master's. I am very passionate about writing because it shapes my personality and connects me with world.&&N/A" | split: '&&' %}
|
15
|
-
{% assign
|
16
|
-
{% assign karuna = "Karuna Shree&&/assets/images/karuna.webp&&RK Shree - A science enthusiast with a poetic flair, and possesses an insatiable desire to explore diverse fields seeking new knowledge and experiences. My work ethic is highly disciplined and dedicated. I take pleasure in pursuing creative endeavors that captivate me. &&https://twitter.com/rkshree2118?t=wuhNmjgq18UleNBfLyumag&s=09" | split: '&&' %}
|
17
|
-
{% assign rk = "Karuna Shree&&/assets/images/karuna.webp&&RK Shree - A science enthusiast with a poetic flair, and possesses an insatiable desire to explore diverse fields seeking new knowledge and experiences. My work ethic is highly disciplined and dedicated. I take pleasure in pursuing creative endeavors that captivate me. &&https://twitter.com/rkshree2118?t=wuhNmjgq18UleNBfLyumag&s=09" | split: '&&' %}
|
18
|
-
{% assign karuna = "Karuna Shree&&/assets/images/karuna.webp&&RK Shree - A science enthusiast with a poetic flair, and possesses an insatiable desire to explore diverse fields seeking new knowledge and experiences. My work ethic is highly disciplined and dedicated. I take pleasure in pursuing creative endeavors that captivate me. &&https://twitter.com/rkshree2118?t=wuhNmjgq18UleNBfLyumag&s=09" | split: '&&' %}
|
15
|
+
{% assign rk = "Rk Shree&&/assets/images/karuna.webp&&RK Shree - A science enthusiast with a poetic flair, and possesses an insatiable desire to explore diverse fields seeking new knowledge and experiences. My work ethic is highly disciplined and dedicated. I take pleasure in pursuing creative endeavors that captivate me. &&https://twitter.com/rkshree2118?t=wuhNmjgq18UleNBfLyumag&s=09" | split: '&&' %}
|
19
16
|
{% assign debosmita = "Debosmita Bedajna&&/assets/images/debosmita.webp&&I'm Debosmita Bedajna. I have a keen interest in the arts. Dancing, painting, and playing string instruments are just a few of the ways I enjoy expressing myself creatively. I believe that engaging in art is an essential part of personal growth and development. &&N/A" | split: '&&' %}
|
20
17
|
{% assign suchita = "Suchita Kasab&&/assets/images/suchita.webp&&Hi, I'm Suchita Kasab. Along with writing, I also enjoy painting. I think I can express myself better through these art forms. &&N/A" | split: '&&' %}
|
21
18
|
{% assign aditya = "Aditya Thakur&&/assets/images/avatar.webp&&Hey there! I'm Aditya Thakur, a dedicated technology enthusiast with a strong passion for music and anime. I tackle challenges head-on and consistently strive for excellence. In my past time, you can find me indulging in my favorite tunes or exploring captivating anime worlds. &&N/A" | split: '&&' %}
|