@paroicms/playground_demo2 0.59.4 → 0.60.0

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.
@@ -1,14 +1,12 @@
1
-
2
-
3
- > @paroicms/playground_demo2@0.59.4 build
4
- > npm run scss
5
-
6
- 
7
- > @paroicms/playground_demo2@0.59.4 scss
8
- > npm run _scss -- --no-source-map --style=compressed
9
-
10
- 
11
- > @paroicms/playground_demo2@0.59.4 _scss
12
- > sass theme/assets/scss/index.scss theme/assets/css/index.css --no-source-map --style=compressed
13
-
14
- ⠙⠙⠙
1
+
2
+ > @paroicms/playground_demo2@0.60.0 build
3
+ > npm run scss
4
+
5
+
6
+ > @paroicms/playground_demo2@0.60.0 scss
7
+ > npm run _scss -- --no-source-map --style=compressed
8
+
9
+
10
+ > @paroicms/playground_demo2@0.60.0 _scss
11
+ > sass theme/assets/scss/index.scss theme/assets/css/index.css --no-source-map --style=compressed
12
+
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @paroicms/playground_seoul
2
2
 
3
+ ## 0.60.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 30caace: Improve media handling: performance, image format, store any files, useImage tag, zoomable, pixel ratio, caption
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies [30caace]
12
+ - @paroicms/content-loading-plugin@0.18.0
13
+ - @paroicms/contact-form-plugin@0.24.0
14
+ - @paroicms/quill-editor-plugin@1.33.0
15
+ - @paroicms/public-menu-plugin@0.12.0
16
+
3
17
  ## 0.59.4
4
18
 
5
19
  ### Patch Changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@paroicms/playground_demo2",
3
- "version": "0.59.4",
3
+ "version": "0.60.0",
4
4
  "description": "Demonstration website for ParoiCMS",
5
5
  "author": "Paroi Team",
6
6
  "license": "MIT",
@@ -23,13 +23,13 @@
23
23
  "_pino-pretty": "pino-pretty -U false -x 'stats:25' -X 'stats:grey' -t 'yyyy-mm-dd HH:MM:ss.l' -i 'hostname,pid,fqdn'"
24
24
  },
25
25
  "dependencies": {
26
- "@paroicms/contact-form-plugin": "0.23.1",
27
- "@paroicms/content-loading-plugin": "0.17.0",
28
- "@paroicms/public-menu-plugin": "0.11.1",
29
- "@paroicms/quill-editor-plugin": "1.32.2",
30
- "@paroicms/video-plugin": "0.29.1",
26
+ "@paroicms/contact-form-plugin": "0.24.0",
27
+ "@paroicms/content-loading-plugin": "0.18.0",
28
+ "@paroicms/internal-link-plugin": "0.14.0",
31
29
  "@paroicms/list-field-plugin": "0.18.1",
32
- "@paroicms/internal-link-plugin": "0.14.0"
30
+ "@paroicms/public-menu-plugin": "0.12.0",
31
+ "@paroicms/quill-editor-plugin": "1.33.0",
32
+ "@paroicms/video-plugin": "0.29.1"
33
33
  },
34
34
  "devDependencies": {
35
35
  "concurrently": "~9.1.2",
@@ -1 +1 @@
1
- html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,button{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}:root{--paInteractiveColor: #99f}.Container{margin-left:auto;margin-right:auto;max-width:1200px}.Container.text{max-width:700px}@media not all and (min-width: 640px){.Container{width:90%}}@media(min-width: 640px){.Container.pad{max-width:1240px;padding-left:20px;padding-right:20px}.Container.pad.text{max-width:740px}}@media(min-width: 640px){.Grid6,.Grid9,.Grid12{column-gap:25px;display:grid;row-gap:25px}.Grid6{grid-template-columns:repeat(6, 1fr)}.Grid9{grid-template-columns:repeat(9, 1fr)}.Grid12{grid-template-columns:repeat(12, 1fr)}.Span2{grid-column-end:span 2}.Span3{grid-column-end:span 3}.Span4{grid-column-end:span 4}.Span6{grid-column-end:span 6}.Span12{grid-column-end:span 12}.Column3{grid-column-start:3}.Column7{grid-column-start:7}@media not all and (min-width: 992px){.Span4Tablet{grid-column-end:span 4}}}.Text{hyphens:auto;overflow-wrap:break-word}@media not all and (min-width: 640px){.Text{hyphens:auto}}.Text.justified p,.Text.justified li{text-align:justify}.Text.selfContained::after{clear:both;content:"";display:block}.Text a{text-decoration:underline}.Text a:hover{text-decoration:none}.Text h1,.Text h2{clear:both;font-size:1.75rem;font-weight:bold;margin:2rem 0}.Text h3{font-size:1.125rem;font-weight:bold;margin:1.5rem 0}.Text h4,.Text h5{font-size:1rem;font-weight:bold}.Text blockquote,.Text h4,.Text h5,.Text ol,.Text p,.Text table,.Text ul{margin-bottom:10px}.Text blockquote{margin-left:50px;margin-right:20px}.Text ul,.Text ol{margin-left:20px}.Text li{margin-bottom:5px}.Text ul{list-style:disc}.Text ol{list-style:decimal}.Text ul ul,.Text ol ul{list-style:circle}.Text ul ol,.Text ol ol{list-style:lower-alpha}.Text img,.Text svg{height:auto;max-width:100%}.Text .Img.left{float:left;margin:5px 20px 10px 0}.Text .Img.right{float:right;margin:5px 0 10px 20px}.Text .Img.center{display:block;margin:20px auto}.Text .ql-align-center{text-align:center !important}.Text .ql-align-right{text-align:right !important}.Text .ql-size-small{font-size:.5625rem}.Text .ql-size-large{font-size:1.125rem}.Text .ql-size-huge{font-size:2rem}.Text .hljs{background-color:#f5f5f5;border-left:15px solid #ddd;font-family:monospace;font-size:.875rem;line-height:1.35;margin:20px 10px;overflow-x:auto;padding:10px 20px 10px 15px}.Text code{background-color:#f5f5f5;border:1px dotted #ccc;color:#785454;font-family:sans-serif;font-size:.9375rem;padding:1px 3px}.Breadcrumb{align-items:center;display:flex;margin-bottom:20px}.Breadcrumb-imgIcon{height:24px;width:24px}.Breadcrumb-span{display:inline-block;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Breadcrumb-a{color:#6c98e2 !important}.HeaderBar{align-items:center;display:flex;justify-content:space-between;margin-bottom:30px}.HeaderBar-logoTitle{align-items:center;display:flex}.HeaderBar-siteLogo{margin-right:10px}.HeaderBar-siteTitle{font-size:18px;font-weight:bold}.HeaderBar nav ul{display:flex}.HeaderBar nav li{list-style:none;padding:5px 10px}.HeaderBar nav li>a{text-decoration:none}@media not all and (min-width: 992px){.HeaderBar nav li{list-style:none;margin-bottom:10px}.HeaderBar nav li a{align-items:center;display:flex;height:50px;text-decoration:none}}.HeaderBar>div:nth-last-child(1){align-items:center;display:flex}.HeaderBar-searchBtn{margin-right:10px}.HeaderBar .SearchOpenerBtn{padding:8px 10px}.Tile{background-color:#f0f0f0}.Tile-img{display:block;height:auto;object-fit:cover;width:100%}@media not all and (min-width: 640px){.Tile{margin-bottom:20px}.Tile-text{padding:10px}}.Tile2{background-color:#f0f0f0}.Tile2-img{display:block;height:auto;width:100%}.Tile2-text{padding:10px}@media not all and (min-width: 640px){.Tile2{margin-bottom:20px}}.Tile-tags{display:flex;flex-wrap:wrap}.Tile-tags>span{border:1px solid #000;border-radius:15px;margin-bottom:10px;margin-right:5px;padding:5px 10px}.HeroBanner-img{height:545px;object-fit:cover;width:100%}@media not all and (min-width: 992px){.HeroBanner-img{height:300px}}@media not all and (min-width: 640px){.HeroBanner-img{height:200px}}.SiteFooter{background-color:#fafafa;margin-top:10px;padding:15px 0;text-align:center}.SiteFooter>span:nth-child(1){font-weight:bold;margin-right:15px}.ResultItem{margin-bottom:20px}.Paginate-left{text-align:left}.Paginate-next{text-align:right}.Gallery{display:flex;flex-wrap:wrap}.Gallery-item{height:150px;margin:10px;object-fit:cover;width:280px}.PaButton{background-color:#8bdda0;border:2px solid #8bdda0;border-radius:5px;color:#674002;cursor:pointer;display:inline-block;font-size:16px;font-weight:bold;padding:10px 20px;text-align:center;text-decoration:none;transition:background-color .3s,color .3s}.PaButton:focus,.PaButton:hover{background-color:#b77306;color:#fff}.PaButton:disabled{background-color:#ccc;border-color:#aaa;color:#777;cursor:not-allowed}.List{display:flex;flex-direction:column;margin-top:20px}.PartItem{margin:0 auto}.PartItem img{margin-bottom:10px}.PartItem.partner{margin-bottom:20px;max-width:300px}.PartItem.partner p{margin-top:10px}.PartItem.sideImage{display:flex;width:100%}.PartItem.sideImage p{margin-left:10px}
1
+ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,button{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}:root{--paInteractiveColor: #99f}.Container{margin-left:auto;margin-right:auto;max-width:1200px}.Container.text{max-width:700px}@media not all and (min-width: 640px){.Container{width:90%}}@media(min-width: 640px){.Container.pad{max-width:1240px;padding-left:20px;padding-right:20px}.Container.pad.text{max-width:740px}}@media(min-width: 640px){.Grid6,.Grid9,.Grid12{column-gap:25px;display:grid;row-gap:25px}.Grid6{grid-template-columns:repeat(6, 1fr)}.Grid9{grid-template-columns:repeat(9, 1fr)}.Grid12{grid-template-columns:repeat(12, 1fr)}.Span2{grid-column-end:span 2}.Span3{grid-column-end:span 3}.Span4{grid-column-end:span 4}.Span6{grid-column-end:span 6}.Span12{grid-column-end:span 12}.Column3{grid-column-start:3}.Column7{grid-column-start:7}@media not all and (min-width: 992px){.Span4Tablet{grid-column-end:span 4}}}.Text{hyphens:auto;overflow-wrap:break-word}@media not all and (min-width: 640px){.Text{hyphens:auto}}.Text.justified p,.Text.justified li{text-align:justify}.Text.selfContained::after{clear:both;content:"";display:block}.Text a{text-decoration:underline}.Text a:hover{text-decoration:none}.Text h1,.Text h2{clear:both;font-size:1.75rem;font-weight:bold;margin:2rem 0}.Text h3{font-size:1.125rem;font-weight:bold;margin:1.5rem 0}.Text h4,.Text h5{font-size:1rem;font-weight:bold}.Text blockquote,.Text h4,.Text h5,.Text ol,.Text p,.Text table,.Text ul{margin-bottom:10px}.Text blockquote{margin-left:50px;margin-right:20px}.Text ul,.Text ol{margin-left:20px}.Text li{margin-bottom:5px}.Text ul{list-style:disc}.Text ol{list-style:decimal}.Text ul ul,.Text ol ul{list-style:circle}.Text ul ol,.Text ol ol{list-style:lower-alpha}.Text img,.Text svg{height:auto;max-width:100%}.Text .Fig{display:table;margin:0}.Text .Fig.left{float:left;margin:5px 20px 10px 0}.Text .Fig.right{float:right;margin:5px 0 10px 20px}.Text .Fig.center{clear:both;margin:20px auto}.Text .Fig-media{display:block;height:auto;max-width:100%}.Text .Fig-caption{caption-side:bottom;display:table-caption;font-size:.875em;margin-top:8px;opacity:.6;text-align:center}.Text .ql-align-center{text-align:center !important}.Text .ql-align-right{text-align:right !important}.Text .ql-size-small{font-size:.5625rem}.Text .ql-size-large{font-size:1.125rem}.Text .ql-size-huge{font-size:2rem}.Text .hljs{background-color:#f5f5f5;border-left:15px solid #ddd;font-family:monospace;font-size:.875rem;line-height:1.35;margin:20px 10px;overflow-x:auto;padding:10px 20px 10px 15px}.Text code{background-color:#f5f5f5;border:1px dotted #ccc;color:#785454;font-family:sans-serif;font-size:.9375rem;padding:1px 3px}.Breadcrumb{align-items:center;display:flex;margin-bottom:20px}.Breadcrumb-imgIcon{height:24px;width:24px}.Breadcrumb-span{display:inline-block;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Breadcrumb-a{color:#6c98e2 !important}.HeaderBar{align-items:center;display:flex;justify-content:space-between;margin-bottom:30px}.HeaderBar-logoTitle{align-items:center;display:flex}.HeaderBar-siteLogo{margin-right:10px}.HeaderBar-siteTitle{font-size:18px;font-weight:bold}.HeaderBar nav ul{display:flex}.HeaderBar nav li{list-style:none;padding:5px 10px}.HeaderBar nav li>a{text-decoration:none}@media not all and (min-width: 992px){.HeaderBar nav li{list-style:none;margin-bottom:10px}.HeaderBar nav li a{align-items:center;display:flex;height:50px;text-decoration:none}}.HeaderBar>div:nth-last-child(1){align-items:center;display:flex}.HeaderBar-searchBtn{margin-right:10px}.HeaderBar .SearchOpenerBtn{padding:8px 10px}.Tile{background-color:#f0f0f0}.Tile-img{display:block;height:auto;object-fit:cover;width:100%}@media not all and (min-width: 640px){.Tile{margin-bottom:20px}.Tile-text{padding:10px}}.Tile2{background-color:#f0f0f0}.Tile2-img{display:block;height:auto;width:100%}.Tile2-text{padding:10px}@media not all and (min-width: 640px){.Tile2{margin-bottom:20px}}.Tile-tags{display:flex;flex-wrap:wrap}.Tile-tags>span{border:1px solid #000;border-radius:15px;margin-bottom:10px;margin-right:5px;padding:5px 10px}.HeroBanner-img{height:545px;object-fit:cover;width:100%}@media not all and (min-width: 992px){.HeroBanner-img{height:300px}}@media not all and (min-width: 640px){.HeroBanner-img{height:200px}}.SiteFooter{background-color:#fafafa;margin-top:10px;padding:15px 0;text-align:center}.SiteFooter>span:nth-child(1){font-weight:bold;margin-right:15px}.ResultItem{margin-bottom:20px}.Paginate-left{text-align:left}.Paginate-next{text-align:right}.Gallery{display:flex;flex-wrap:wrap}.Gallery-item{height:150px;margin:10px;object-fit:cover;width:280px}.PaButton{background-color:#8bdda0;border:2px solid #8bdda0;border-radius:5px;color:#674002;cursor:pointer;display:inline-block;font-size:16px;font-weight:bold;padding:10px 20px;text-align:center;text-decoration:none;transition:background-color .3s,color .3s}.PaButton:focus,.PaButton:hover{background-color:#b77306;color:#fff}.PaButton:disabled{background-color:#ccc;border-color:#aaa;color:#777;cursor:not-allowed}.List{display:flex;flex-direction:column;margin-top:20px}.PartItem{margin:0 auto}.PartItem img{margin-bottom:10px}.PartItem.partner{margin-bottom:20px;max-width:300px}.PartItem.partner p{margin-top:10px}.PartItem.sideImage{display:flex;width:100%}.PartItem.sideImage p{margin-left:10px}
@@ -98,7 +98,10 @@
98
98
  max-width: 100%;
99
99
  }
100
100
 
101
- .Img {
101
+ .Fig {
102
+ display: table;
103
+ margin: 0;
104
+
102
105
  &.left {
103
106
  float: left;
104
107
  margin: 5px 20px 10px 0;
@@ -110,9 +113,24 @@
110
113
  }
111
114
 
112
115
  &.center {
113
- display: block;
116
+ clear: both;
114
117
  margin: 20px auto;
115
118
  }
119
+
120
+ &-media {
121
+ display: block;
122
+ height: auto;
123
+ max-width: 100%;
124
+ }
125
+
126
+ &-caption {
127
+ caption-side: bottom;
128
+ display: table-caption;
129
+ font-size: 0.875em;
130
+ margin-top: 8px;
131
+ opacity: .6;
132
+ text-align: center;
133
+ }
116
134
  }
117
135
 
118
136
  .ql-align-center {
@@ -4,9 +4,9 @@
4
4
  {% render 'partials/breadcrumb', doc: doc, site: site %}
5
5
  {% if doc.featuredImage %}
6
6
  <div class="HeroBanner">
7
- {% useImage smallImg, uid: doc.featuredImage.uid size: "324x200" %}
8
- {% useImage mediumImg, uid: doc.featuredImage.uid size: "1024x545" %}
9
- {% useImage largeImg, uid: doc.featuredImage.uid size: "1200x545" %}
7
+ {% useImage smallImg, image: doc.featuredImage resize: "324x200" %}
8
+ {% useImage mediumImg, image: doc.featuredImage resize: "1024x545" %}
9
+ {% useImage largeImg, image: doc.featuredImage resize: "1200x545" %}
10
10
 
11
11
  <picture>
12
12
  <source
@@ -3,19 +3,16 @@
3
3
  <main>
4
4
  {% if doc.featuredImage %}
5
5
  {%
6
- useImage smallImg
7
- , uid: doc.featuredImage.uid
8
- , size: "360x100"
6
+ useImage smallImg image: doc.featuredImage
7
+ , resize: "360x100"
9
8
  %}
10
9
  {%
11
- useImage mediumImg
12
- , uid: doc.featuredImage.uid
13
- , size: "820x150"
10
+ useImage mediumImg image: doc.featuredImage
11
+ , resize: "820x150"
14
12
  %}
15
13
  {%
16
- useImage largeImg
17
- , uid: doc.featuredImage.uid
18
- , size: "1920x275"
14
+ useImage largeImg image: doc.featuredImage
15
+ , resize: "1920x275"
19
16
  %}
20
17
 
21
18
  <picture class="HeroBanner">
@@ -77,9 +74,8 @@
77
74
  <article class="Tile2 Span4">
78
75
  {% if gPage.defaultImage %}
79
76
  {%
80
- useImage image
81
- , uid: gPage.defaultImage.uid
82
- , size: "200x200"
77
+ useImage image image: gPage.defaultImage
78
+ , resize: "200x200"
83
79
  %}
84
80
  <img
85
81
  class="Tile2-img"
@@ -110,9 +106,8 @@
110
106
  <div class="PartItem partner">
111
107
  {% if item.defaultImage %}
112
108
  {%
113
- useImage image
114
- , uid: item.defaultImage.uid
115
- , size: "200x200"
109
+ useImage image image: item.defaultImage
110
+ , resize: "200x200"
116
111
  %}
117
112
 
118
113
  <img
@@ -141,9 +136,8 @@
141
136
  <div class="PartItem sideImage">
142
137
  {% if item.defaultImage %}
143
138
  {%
144
- useImage image
145
- , uid: item.defaultImage.uid
146
- , size: "200x200"
139
+ useImage image image: item.defaultImage
140
+ , resize: "200x200"
147
141
  %}
148
142
 
149
143
  <img
@@ -174,9 +168,8 @@
174
168
  <div class="PartItem partner">
175
169
  {% if item.defaultImage %}
176
170
  {%
177
- useImage image
178
- , uid: item.defaultImage.uid
179
- , size: "200x200"
171
+ useImage image image: item.defaultImage
172
+ , resize: "200x200"
180
173
  %}
181
174
 
182
175
  <img
@@ -205,9 +198,8 @@
205
198
  <div class="PartItem sideImage">
206
199
  {% if item.defaultImage %}
207
200
  {%
208
- useImage image
209
- , uid: item.defaultImage.uid
210
- , size: "200x200"
201
+ useImage image image: item.defaultImage
202
+ , resize: "200x200"
211
203
  %}
212
204
 
213
205
  <img
@@ -4,9 +4,9 @@
4
4
  {% render 'partials/breadcrumb', doc: doc, site: site %}
5
5
  {% if doc.featuredImage %}
6
6
  <div class="HeroBanner">
7
- {% useImage smallImg, uid: doc.featuredImage.uid, size: "324x200" %}
8
- {% useImage mediumImg, uid: doc.featuredImage.uid, size: "1024x545" %}
9
- {% useImage largeImg, uid: doc.featuredImage.uid, size: "1200x545" %}
7
+ {% useImage smallImg, image: doc.featuredImage, resize: "324x200" %}
8
+ {% useImage mediumImg, image: doc.featuredImage, resize: "1024x545" %}
9
+ {% useImage largeImg, image: doc.featuredImage, resize: "1200x545" %}
10
10
 
11
11
  <picture>
12
12
  <source
@@ -45,9 +45,9 @@
45
45
  {% if doc.field.gallery %}
46
46
  <div class="Gallery ">
47
47
  {% for media in doc.field.gallery %}
48
- {% useImage smallImg, uid: media.uid, size: "324x200" %}
49
- {% useImage mediumImg, uid: media.uid, size: "1024x545" %}
50
- {% useImage largeImg, uid: media.uid, size: "1200x545" %}
48
+ {% useImage smallImg, image: media, resize: "324x200" %}
49
+ {% useImage mediumImg, image: media, resize: "1024x545" %}
50
+ {% useImage largeImg, image: media, resize: "1200x545" %}
51
51
 
52
52
  <picture>
53
53
  <source
@@ -13,9 +13,8 @@
13
13
  >
14
14
  {% if site.field.logo %}
15
15
  {%
16
- useImage logo
17
- , uid: site.field.logo.uid
18
- , size: "x50"
16
+ useImage logo image: site.field.logo
17
+ , resize: "x50"
19
18
  %}
20
19
  <img
21
20
  src="{{ logo.url }}"
@@ -1,19 +1,18 @@
1
1
  <article class="Tile Span6 Grid6">
2
2
  {% if doc.defaultImage %}
3
3
  {%
4
- useImage image
5
- , uid: doc.defaultImage.uid
6
- , size: "345x295"
4
+ useImage image image: doc.defaultImage
5
+ , resize: "345x295"
7
6
  %}
8
7
  <div class="Span3">
9
8
  <img
10
9
  class="Tile-img"
11
- data-zoom-src="{{ doc.defaultImage.uid | imageZoomUrl }}"
12
10
  src="{{ image.url }}"
13
11
  width="{{ image.width }}"
14
12
  height="{{ image.height }}"
15
13
  loading="lazy"
16
14
  alt=""
15
+ {{ doc.defaultImage | zoomable }}
17
16
  >
18
17
  </div>
19
18
  {% endif %}
@@ -1,9 +1,8 @@
1
1
  <article class="ResultItem Tile Grid12">
2
2
  {% if doc.defaultImage %}
3
3
  {%
4
- useImage image
5
- , uid: doc.defaultImage.uid
6
- , size: "345x295"
4
+ useImage image image: doc.defaultImage
5
+ , resize: "345x295"
7
6
  %}
8
7
  <div class="Span3">
9
8
  <img
@@ -20,18 +20,9 @@
20
20
 
21
21
  {% if doc.featuredImage %}
22
22
  <div class="HeroBanner">
23
- {%
24
- useImage smallImg
25
- , uid: doc.featuredImage.uid size: "324x200"
26
- %}
27
- {%
28
- useImage mediumImg
29
- , uid: doc.featuredImage.uid size: "1024x545"
30
- %}
31
- {%
32
- useImage largeImg
33
- , uid: doc.featuredImage.uid size: "1200x545"
34
- %}
23
+ {% useImage smallImg image: doc.featuredImage resize: "324x200" %}
24
+ {% useImage mediumImg image: doc.featuredImage resize: "1024x545" %}
25
+ {% useImage largeImg image: doc.featuredImage resize: "1200x545" %}
35
26
 
36
27
  <picture>
37
28
  <source
@@ -46,12 +37,6 @@
46
37
  srcset="{{ mediumImg.url }}"
47
38
  media="(max-width: 1024px)"
48
39
  >
49
- <source
50
- width="{{ largeImg.width }}"
51
- height="{{ largeImg.height }}"
52
- srcset="{{ largeImg.url }}"
53
- media="(min-width: 1920px)"
54
- >
55
40
 
56
41
  <img
57
42
  class="HeroBanner-img"
@@ -5,9 +5,9 @@
5
5
  {% if doc.featuredImage %}
6
6
  <div class="HeroBanner">
7
7
  <picture>
8
- {% useImage smallImg, uid: doc.featuredImage.uid size: "324x200" %}
9
- {% useImage mediumImg, uid: doc.featuredImage.uid size: "1024x545" %}
10
- {% useImage largeImg, uid: doc.featuredImage.uid size: "1200x545" %}
8
+ {% useImage smallImg, image: doc.featuredImage resize: "324x200" %}
9
+ {% useImage mediumImg, image: doc.featuredImage resize: "1024x545" %}
10
+ {% useImage largeImg, image: doc.featuredImage resize: "1200x545" %}
11
11
 
12
12
  <source
13
13
  width="{{ smallImg.width }}"
@@ -4,18 +4,9 @@
4
4
  {% render 'partials/breadcrumb', doc: doc, site: site %}
5
5
  {% if doc.featuredImage %}
6
6
  <div class="HeroBanner">
7
- {%
8
- useImage smallImg
9
- , uid: doc.featuredImage.uid size: "324x200"
10
- %}
11
- {%
12
- useImage mediumImg
13
- , uid: doc.featuredImage.uid size: "1024x545"
14
- %}
15
- {%
16
- useImage largeImg
17
- , uid: doc.featuredImage.uid size: "1200x545"
18
- %}
7
+ {% useImage smallImg image: doc.featuredImage resize: "324x200" %}
8
+ {% useImage mediumImg image: doc.featuredImage resize: "1024x545" %}
9
+ {% useImage largeImg image: doc.featuredImage resize: "1200x545" %}
19
10
 
20
11
  <picture>
21
12
  <source